Index: src/views/partials/shared-styles.ejs =================================================================== --- src/views/partials/shared-styles.ejs (revision 2165b6d3d57ceaa8b5d1f70491868482149470cf) +++ src/views/partials/shared-styles.ejs (revision 7bc636b391c66ac399c33e54f7173a022c6a3cbd) @@ -6,15 +6,12 @@ border-bottom: 1px solid var(--rule); background: var(--paper); - /* No extra margin-top: this centres the pill between the profile-header - rule (above) and the own border (below). Equal space above/below the - pill comes from the symmetric container padding below. The margin-bottom - (1.5rem in style.css) keeps breathing room toward the feed. */ - margin-top: 0; + /* Breathing room: profile-header has padding-bottom 1.5rem already, so a + small additional margin-top gives the switcher its own visual layer. */ + margin-top: 0.5rem; } .view-switcher-wrap .container { display: flex; align-items: center; justify-content: center; gap: 0.75rem; - /* Symmetric padding → equal space above and below the pill (≈8px), - centred between the two dividing lines. */ - padding: 0.5rem 1rem; + /* Slimmer bar: was 0.4rem (≈12px total chrome above pill); now 0.25rem. */ + padding: 0.25rem 1rem; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; @@ -36,36 +33,5 @@ } .view-switch-btn:hover { color: var(--ink); } -/* Active = white (light background, dark text). Via aria-selected (element - attribute, set by syncAria + on htmx:afterSettle) → htmx-robust. On non- - feed pages syncAria sets aria-selected=false → both grey. */ -.view-switch-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } -/* Lezen in de cirkel: zichtbaar maar dood. Niet weggelaten, want dan springt de - pil van breedte tussen Solo en Cirkel, en juist DAT verbergt dat er een - tweede weergave bestaat. Grijs + not-allowed zegt "bestaat, kan hier niet". */ -.view-switch-btn[disabled] { opacity: .38; cursor: not-allowed; } -.view-switch-btn[disabled]:hover { color: var(--ink-muted, var(--ink-soft)); background: transparent; } - -/* Agenda = its OWN pill (separate from Timeline/Grid, so the feed-toggle is never - disturbed). Same look as the view-switcher pill. Visible in all modes. */ -.agenda-pill { display: inline-flex; align-items: center; } /* no box — standalone icon+text link */ -.vs-agenda { - display: inline-flex; align-items: center; gap: 0.4rem; - padding: 0.35rem 0.5rem; - color: var(--ink-muted, var(--ink-soft)); - text-decoration: none; - font-size: 0.9rem; font-family: inherit; - transition: color 120ms; -} -.vs-agenda:hover { color: var(--ink); } -/* Active (on the agenda page) = bright/white. Element-class (in the OOB-rendered - chrome) rather than body-class CSS → stays reliable after htmx navigation. */ -.vs-agenda.is-active { color: var(--ink); font-weight: 600; } - -/* Mobile: Agenda on its own row at the top, Solo/Circle + Timeline/Grid together - on the row below (together ~330px → fits within a phone, instead of the old - unbalanced split Agenda+Solo / Timeline). */ -@media (max-width: 520px) { - .view-switcher-wrap .agenda-pill { flex: 0 0 100%; justify-content: center; } -} +.view-switch-btn[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .grid-cols-picker { @@ -96,21 +62,4 @@ visible so the user keeps a consistent return-to-feed control. */ .on-admin .view-switcher-wrap { display: none; } - -/* On a standalone post there is no feed to switch, so no button should look "active" - (coloured). The active state lives in style.css on body[data-feed-view] - / body[data-grid-cols] (background:var(--ink)); we override that MORE SPECIFICALLY - via body.on-post so the buttons become neutral/grey — but remain clickable - (the click-handler then navigates to the feed in that view). The - body-class switches client-side on HTMX-nav, so this works without a reload too. */ -body.on-post[data-feed-view="reader"] .view-switch-btn[data-view="reader"], -body.on-post[data-feed-view="grid"] .view-switch-btn[data-view="grid"], -body.on-post[data-grid-cols="2"] .grid-cols-btn[data-cols="2"], -body.on-post[data-grid-cols="3"] .grid-cols-btn[data-cols="3"], -body.on-post[data-grid-cols="4"] .grid-cols-btn[data-cols="4"] { - background: transparent; - color: var(--ink-muted, var(--ink-soft)); - border-color: var(--rule); -} - /* Spacing between switcher-bar and the page content below. @@ -168,7 +117,4 @@ .auth-link { text-align: center; color: var(--ink-muted); font-size: 0.9rem; margin: 1rem 0 0; } .auth-link a { color: var(--accent); } -.auth-intro { text-align: center; color: var(--ink-muted); font-size: 0.95rem; margin: 0 0 1rem; } -.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--ink-muted); font-size: 0.85rem; } -.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); } /* HTMX loading indicator */ @@ -188,69 +134,3 @@ .htmx-request .pcms-loading { display: block; } @keyframes spin { to { transform: rotate(360deg); } } - -/* Load more (Solo, Cirkel, News, Messages) — page size 72, htmx append. */ -.load-more-wrap { display: flex; justify-content: center; margin: 1.5rem 0 .5rem; } -.load-more-wrap:empty { margin: 0; } -.load-more-btn { padding: .6rem 1.4rem; border-radius: 999px; cursor: pointer; - font: inherit; font-weight: 600; color: var(--ink, inherit); - background: color-mix(in srgb, var(--ink, #000) 5%, transparent); - border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); } -.load-more-btn:hover { background: color-mix(in srgb, var(--ink, #000) 9%, transparent); } -.load-more-btn.htmx-request { opacity: .6; pointer-events: none; } - -/* FEP-9098 custom emojis: small inline images (Shaer parity), rendered in note - content and display names across the timeline, messages and threads. Never - styled as media (no rounding/background), and never blown up to media width. */ -img.emoji { height: 1.3em; width: auto; margin: 0 .05em; vertical-align: -0.2em; - display: inline-block; border-radius: 0; background: none; box-shadow: none; } -.tl-content img.emoji, .tl-quote-body img.emoji, .msg-content img.emoji, .comment-content img.emoji, -.tl-author img.emoji, .tl-boost-by img.emoji, .tl-quote-name img.emoji, .msg-who img.emoji, .comment-author img.emoji { - max-width: none; height: 1.3em; border-radius: 0; background: none; box-shadow: none; vertical-align: -0.2em; } - -/* ── The body of a post ──────────────────────────────────────────────────── - Shared with partials/note-body.ejs, so a post looks the same in de Krant, in - Berichten and in the Guardian PWA. These used to live in the Krant's own -