Changeset 9f81a09 in Klonkt for src/assets/css/style.css

Timestamp:

06/16/2026 01:56:56 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d2c43f9

Parents:

43dbf9c

Message:

Circles: Solo/Circle scope toggle in the switcher bar (left) + Circle nav link removed

• view-switcher: Solo/Circle segmented toggle on the left (circle mode only), full navigation (body-class/grid-CSS guaranteed correct).
• style.css: feed-scope buttons + on-cirkel added to grid-toggle rules (grid/timeline now also switches on /cirkel).
• topnav + bottom-tab: the standalone Circle nav link removed (replaced by the toggle).

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

File:

• src/assets/css/style.css (modified) (3 diffs)

src/assets/css/style.css

@@ -2075 +2075 @@
 body.on-home[data-feed-view="grid"]    .article-footer,
 body.on-archive[data-feed-view="grid"] .feed-timeline,
-body.on-archive[data-feed-view="grid"] .pagination {
+body.on-archive[data-feed-view="grid"] .pagination,
+body.on-cirkel[data-feed-view="grid"]  .feed-timeline {
     display: none !important;
 }
@@ -2081 +2082 @@
 .feed-grid { display: none; }
 body.on-home[data-feed-view="grid"]    .feed-grid,
-body.on-archive[data-feed-view="grid"] .feed-grid { display: block; }
+body.on-archive[data-feed-view="grid"] .feed-grid,
+body.on-cirkel[data-feed-view="grid"]  .feed-grid { display: block; }
 
 /* -------- GRID VIEW TILES (Instagram-stijl) -------- */
@@ -2363 +2365 @@
     flex-wrap: wrap;
 }
+
+/* Solo / Cirkel scope-toggle (alleen in circle-modus) — links in de bar */
+.feed-scope { display: inline-flex; gap: .35rem; }
+.view-switcher-wrap .feed-scope { margin-right: auto; }
+.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); }
 
 .grid-cols-picker {