source: Klonkt/src/themes/sidebar/layout.css@ 495b019

/*
 * Lay-out "zijbalk" -- het eerste ingebouwde thema (experimental/theme, op weg
 * naar 2.0). Een thema is een pakket: theme.json ernaast, dit bestand erin.
 *
 * DEZELFDE MARKUP, EEN ANDER STELSEL. Dit thema verandert geen template; het
 * ordent wat er al staat. Dat is het contract (`"contract": 1` in theme.json):
 * de ids en klassen waar de JS en de custom_css van beheerders op leunen,
 * blijven waar ze zijn, en een thema mag alleen daarop bouwen.
 *
 * ELKE REGEL ONDER html[data-layout="sidebar"]. De shell zet dat attribuut
 * alleen als dit het gekozen thema is, dus zolang hij niet gekozen is raakt
 * dit bestand niets. Voor ingebouwde thema's staat die afbakening er met de
 * hand; een thema van buiten krijgt hem straks bij installatie opgelegd.
 *
 * WIE KIEST: de beheerder van de site, in het beheer. Een bezoeker niet.
 *
 * ALLEEN OP EEN BREED SCHERM. Onder de 1024px blijft alles zoals het was: daar
 * is de onderste tabbalk de navigatie, en een zijbalk zou de inhoud opeten.
 */
@media (min-width: 1024px) {

  html[data-layout="sidebar"] { --sidebar-w: 15rem; }

  /* Alleen ruimte maken als er ook een zijbalk IS. De hub-landing en de
     in- en uitlogschermen hebben geen kop; die houden de volle breedte. */
  html[data-layout="sidebar"] body:has(#pcms-chrome .masthead) {
    padding-left: var(--sidebar-w);
  }

  /* ── De chrome wordt de zijbalk ─────────────────────────────── */
  /* Niet de masthead maar het hele #pcms-chrome-slot: daar zitten de
     masthead, de identiteit van de site (profile-header) en de Lezen/Grid-
     wissel al samen in, en het slot wordt bij elke htmx-navigatie als
     geheel ververst. Zo blijft alles bij elkaar dat bij de site hoort, en
     bepaalt `order` de volgorde -- zonder dat er een regel markup verschuift. */
  html[data-layout="sidebar"] #pcms-chrome:has(.masthead) {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    padding-top: var(--ios-safe-top, 0px);
    border-right: 1px solid var(--rule);
    background: var(--paper);
    z-index: 30;
    /* GEEN overflow hier: de taal- en gebruikersmenu's klappen naar rechts
       uit de balk, en een scrollende balk zou ze afknippen. */
  }

  /* ── 1. Bovenaan: wie dit is ─────────────────────────────────── */
  /* De specificiteit is opzet: de compacte stand op post-, zoek- en
     archiefpagina's (foto 40px, geen bio) bestaat om ruimte boven de inhoud
     te sparen. In een kolom is die ruimte er wel, en een identiteit die per
     pagina van maat verspringt leest als een andere site. */
  html[data-layout="sidebar"] #pcms-chrome .profile-header {
    order: -2;
    padding: 1.75rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
    background: transparent;
  }
  html[data-layout="sidebar"] #pcms-chrome .profile-header-inner {
    max-width: none;
    margin: 0;
    padding: 0 1.6rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
  }
  html[data-layout="sidebar"] #pcms-chrome .profile-photo {
    width: 72px;
    height: 72px;
    border-width: 2px;
  }
  html[data-layout="sidebar"] #pcms-chrome .profile-photo-fallback { font-size: 1.75rem; }
  html[data-layout="sidebar"] #pcms-chrome .profile-name {
    font-size: 1.4rem;
    margin: 0 0 .3rem;
    overflow-wrap: anywhere;
  }
  html[data-layout="sidebar"] #pcms-chrome .profile-bio {
    display: block;
    font-size: .85rem;
  }
  html[data-layout="sidebar"] #pcms-chrome .profile-links { flex-wrap: wrap; }

  /* ── 2. Hoe je de site leest ─────────────────────────────────── */
  /* De Lezen/Grid-wissel zit in hetzelfde slot, dus hij komt mee: onder de
     identiteit, als keuze die bij de site hoort in plaats van boven de stroom. */
  html[data-layout="sidebar"] #pcms-chrome .view-switcher-wrap {
    order: -1;
    margin: 0;
    padding: .9rem 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
  }
  html[data-layout="sidebar"] #pcms-chrome .view-switcher-wrap .container {
    max-width: none;
    padding-inline: 1.6rem;
    justify-content: flex-start;
  }

  /* ── 3. De navigatie vult de rest ────────────────────────────── */
  html[data-layout="sidebar"] #pcms-chrome .masthead {
    position: static;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem 0 1.25rem;
    border: 0;
    background: transparent;
  }

  html[data-layout="sidebar"] .masthead-inner {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    padding-inline: .75rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
  }

  /* Het merk is overal verborgen (de profielkop draagt het), en dan is het
     een leeg vak met een gat eronder. Behalve op beheerpagina's: daar staat
     "terug naar de site", en dat is daar de enige weg terug. */
  html[data-layout="sidebar"] .masthead-brand:not(:has(.nav-link-admin)) {
    display: none;
  }
  html[data-layout="sidebar"] .masthead-brand {
    flex: 0 0 auto;
    overflow: visible;
  }
  html[data-layout="sidebar"] .masthead-brand .nav-link-admin {
    width: 100%;
  }

  /* ── De navigatie staat onder elkaar ──────────────────────────── */
  html[data-layout="sidebar"] .top-nav-desktop {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
  }

  html[data-layout="sidebar"] .top-nav-desktop > .nav-link,
  html[data-layout="sidebar"] .top-nav-desktop > .nav-btn,
  html[data-layout="sidebar"] .top-nav-desktop > details > summary {
    width: 100%;
    justify-content: flex-start;
    padding: .55rem .85rem;
  }
  html[data-layout="sidebar"] .top-nav-desktop .nav-label { display: inline; }

  /* Knoppen die in de kop alleen een pictogram zijn, krijgen hier hun naam.
     De naam stond al in de markup, als title of aria-label; er is niets bij
     gekomen. In een kolom onder elkaar leest een rij losse pictogrammen als
     een raadsel. */
  html[data-layout="sidebar"] .top-nav-desktop > .nav-btn[title]::after,
  html[data-layout="sidebar"] .top-nav-desktop .lang-toggle[title]::after {
    content: attr(title);
  }
  html[data-layout="sidebar"] .top-nav-desktop .user-toggle[aria-label]::after {
    content: attr(aria-label);
  }
  /* Het pijltje hoort bij een menu dat naar beneden valt; hier klapt hij
     opzij, en tussen de taalcode en de naam las het als "EN ⌄ Language". */
  html[data-layout="sidebar"] .top-nav-desktop .lang-caret { display: none; }

  /* Bovenin wat je zoekt (archief, zoeken); onderin wat bij JOU hoort
     (thema, taal, meldingen, je account). Het thema is de eerste van dat
     tweede rijtje, dus die duwt de rest naar beneden. */
  html[data-layout="sidebar"] .top-nav-desktop > #theme-toggle {
    margin-top: auto;
  }

  /* ── De uitklapmenu's klappen naar rechts open ───────────────── */
  /* In de kop vielen ze naar beneden, rechts uitgelijnd. Onderin een smalle
     balk zou dat buiten beeld vallen, dus: naast de knop, naar boven toe. */
  html[data-layout="sidebar"] .user-dropdown,
  html[data-layout="sidebar"] .lang-dropdown {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(100% + .6rem);
    transform-origin: bottom left;
  }
  html[data-layout="sidebar"] .user-menu,
  html[data-layout="sidebar"] .lang-menu {
    position: relative;
  }

  /* ── Wat over de volle breedte vastzat, begint nu na de balk ──── */
  html[data-layout="sidebar"] body:has(#pcms-chrome .masthead) .audio-player,
  html[data-layout="sidebar"] body:has(#pcms-chrome .masthead) .audio-sheet {
    left: var(--sidebar-w);
  }
}