/* * Brandligo blog — the components the directory does not have. * * WHAT IS DELIBERATELY NOT IN THIS FILE: colours, spacing values, radii, shadows, type scale, and * every rule for the header, the footer, cards, buttons, the drawer and the palette. All of that * comes from /css/brandligo.css, which this blog links rather than copies — one source of truth, so * a token changed on the directory changes the blog on the next request instead of on the next time * somebody remembers. * * Everything below is either an article layout the directory has no equivalent of, or an ad wrapper. * Both are written against the same custom properties. */ /* ── The blog's own sections ─────────────────────────────────────────────────────────────────── */ /* * A second navigation row, under the shared header. * * These links exist only on this half of brandligo.com, which is why they get a row rather than a * place in the bar: the bar is the directory's header reproduced class for class, and it is a * single non-wrapping flex row at a fixed height. Six more items in it overlapped the search button * and the CTA — the row clips rather than wraps, and brandligo.css says so in its own comment. * * Opaque --surface rather than the header's translucent fill: this band is not sticky, so there is * nothing to show through it and no reason to pay for a backdrop filter. */ .bl-subnav { background: var(--surface); border-bottom: 1px solid var(--border); } .bl-subnav__row { display: flex; align-items: center; gap: var(--space-1); padding-block: var(--space-2); /* * THE STRIP SCROLLS; THE PAGE NEVER DOES. .bl-nav__link is white-space: nowrap, so a dozen * sections are wider than a phone — and a row that cannot scroll would either clip the last * items with no way to reach them or widen the document and let the whole page slide sideways. * overflow-x: auto keeps the overflow inside this element, where it belongs. */ overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* * The scrollbar is hidden rather than styled. A horizontal bar under six links looks like a defect * on a desktop that never needs it, and the strip is reachable by touch drag, by trackpad, and by * keyboard through the links themselves — which is what actually matters. Nothing is hidden BEHIND * it: hiding a scrollbar on a container that is the only route to something would be. */ .bl-subnav__row::-webkit-scrollbar { display: none; } /* Flex would otherwise shrink each link toward its content width and stack the labels. */ .bl-subnav__row .bl-nav__link { flex: 0 0 auto; } /* ── The Browse menu's closed state ──────────────────────────────────────────────────────────── */ /* * Bootstrap already says this — `.dropdown-menu { display: none }` — and it is said again here * because on this side it is the ONLY thing keeping the menu shut. * * The directory loads Bootstrap's JavaScript as well as its CSS; this theme deliberately loads * neither the bundle nor a replacement for that one rule, so the whole closed state of the header's * only dropdown rested on a stylesheet fetched from a CDN. When that request fails — an extension, a * corporate proxy, an outage, or a country that blocks the host — the menu renders permanently open, * pushing the logo and the search button off the top of the page. Verified: with the CDN blocked the * header's own toggle sits at y = -165. * * Both halves are written, and the specificity of the pair is the load-bearing part. `.bl-nav__group * .dropdown-menu` is 0-2-0, the same as Bootstrap's own `.dropdown-menu.show`, and this file loads * last — so writing only the first half would win against Bootstrap's open state and the menu would * never open at all. The `.show` rule below is 0-3-0 and settles it in both directions. */ .bl-nav__group .dropdown-menu { display: none; } .bl-nav__group .dropdown-menu.show { display: block; } /* ── The article layout ──────────────────────────────────────────────────────────────────────── */ /* * Article and sidebar. A grid rather than a float or a flex row, so the two columns are declared * once and the single-column case is the absence of the second track rather than a second rule. * * `minmax(0, 1fr)` and not `1fr`: a grid track's default minimum is min-content, so one wide code * block or one unbreakable URL in the article pushes the whole grid wider than its container and * the page scrolls sideways. This is the single commonest way a two-column article template breaks, * and it only shows up on the one post that happens to contain the offending element. */ .bl-article-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; } @media (min-width: 992px) { .bl-article-shell:has(.bl-article-aside) { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-10); } } /* * `:has()` above is the load-bearing part and is why sidebar.php returns early on an empty sidebar * rather than rendering an empty