Changeset 64b90c0 in Klonkt

Timestamp:

06/16/2026 02:16:38 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

b960185

Parents:

d2c43f9

Message:

Circles: Solo/Circle as segmented switcher (specificity fix) + subheading 'my circle'

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/pages/circle-feed.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2366 +2366 @@
 }
 
-/* Solo / Cirkel scope-toggle (alleen in circle-modus) — centraal in de bar */
-.feed-scope { display: inline-flex; gap: .35rem; }
-.feed-scope-btn {
-    display: inline-flex; align-items: center;
-    padding: .35rem .85rem; min-height: 32px;
-    background: transparent; border: 1px solid var(--rule); border-radius: 999px;
-    color: var(--ink-muted); font-family: var(--font-ui); font-size: .82rem;
-    text-decoration: none; cursor: pointer; transition: all .15s;
-}
-.feed-scope-btn:hover { color: var(--ink); border-color: var(--ink-muted); }
-.feed-scope-btn.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+/* Solo / Cirkel scope-switcher (alleen in circle-modus) — segmented toggle, centraal.
+   Hoge specificiteit (+ !important op tekst) zodat 'ie globale link-stijlen wint. */
+.view-switcher-wrap .feed-scope {
+    display: inline-flex;
+    background: var(--paper-2);
+    border: 1px solid var(--rule);
+    border-radius: 999px;
+    padding: 3px;
+}
+.view-switcher-wrap .feed-scope-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: .32rem .95rem;
+    min-height: 30px;
+    border: none !important;
+    border-radius: 999px !important;
+    background: transparent !important;
+    color: var(--ink-muted) !important;
+    font-family: var(--font-ui);
+    font-size: .82rem;
+    font-weight: 500 !important;
+    text-decoration: none !important;
+    cursor: pointer;
+    transition: all .15s;
+}
+.view-switcher-wrap .feed-scope-btn:hover { color: var(--ink) !important; }
+.view-switcher-wrap .feed-scope-btn.is-active {
+    background: var(--ink) !important;
+    color: var(--paper) !important;
+}
 
 .grid-cols-picker {

src/views/pages/circle-feed.ejs

@@ -1 +1 @@
 <div class="container cirkel-head">
   <h1>Cirkel</h1>
-  <p class="cirkel-sub">Wat er speelt bij de andere sites in deze cirkel.</p>
+  <p class="cirkel-sub">Wat er speelt bij de andere sites in mijn cirkel.</p>
 </div>