/* Small overrides on top of Bootstrap. Keep this file short — if something can be done with a Bootstrap utility class in the template, do it there instead. This site is dark only. `data-bs-theme="dark"` is hardcoded on in base.njk, there is no light palette, and there is no theme toggle — so everything below can assume a dark ground and needs no media queries or [data-bs-theme] guards. Use Bootstrap's theme variables (--bs-border-color, --bs-tertiary-bg, --bs-secondary-color, …) rather than literal colors and this stays true even if the palette is retuned later. Two things do NOT auto-adapt and must be handled by hand: - `text-bg-light`, `bg-white`, `text-dark` and friends. Don't use them. - Images and SVGs with baked-in light backgrounds; see the note under "Markdown images" below. */ /* Page background. A fixed, decorative scene behind everything, held to a very narrow luminance band around --bs-body-bg so it never eats into text contrast. Drawn as a pseudo-element rather than `background-attachment: fixed`, which is unreliable on mobile Safari. z-index -1 puts it above body's own background but below all in-flow content; the nav and footer carry `bg-body-tertiary` and stay opaque over it. */ /* `isolation` makes body a stacking context. Without it the ::before below, being negatively stacked, paints beneath body's own opaque background-color and never shows at all. */ body { isolation: isolate; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("/static/img/background.svg") center bottom / cover no-repeat; } /* Landing-page hero. Opt in per page with `hero: true` in front matter; the markup lives in base.njk, outside
so it can run full-bleed. The banner art already carries the callsign and tagline, so nothing is overlaid on it: it's shown whole at its own aspect ratio rather than cropped, and the heading it duplicates is `visually-hidden` in the markup. */ .hero { border-bottom: 1px solid var(--bs-border-color); } .hero__img { display: block; width: 100%; height: auto; } /* Comfortable reading measure for body copy. */ .prose { max-width: 44rem; } .prose-wide { max-width: 60rem; } /* Markdown images and figures. A photo is fine on a dark page. A screenshot, schematic, or chart with a white background will glare — either export it with a dark or transparent background, or add `class="p-2 bg-body-secondary rounded"` to sit it on a panel rather than letting it burn a white rectangle into the page. */ .prose img { max-width: 100%; height: auto; border-radius: 0.375rem; } .prose figure { margin-block: 1.75rem; } .prose figcaption { font-size: 0.875rem; } /* Markdown tables come out as bare , so give them Bootstrap-ish styling without needing a class on every one. */ .prose table { width: 100%; margin-block: 1.5rem; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; } .prose th, .prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--bs-border-color); text-align: left; vertical-align: top; } .prose thead th { border-bottom-width: 2px; white-space: nowrap; } /* Headings written in Markdown, which come through unclassed. The `:not([class])` guard is what keeps these rules off the `h2.h5` / `h2.card-title.h5` headings the index templates use inside .prose — a bare `.prose h2` would outrank those class selectors and resize the listings. Bootstrap's default h2 is 2rem, the same size the post layout gives the page title (`h1.h2`), so without this a section heading reads as loud as the title. */ .prose h2:not([class]) { margin-top: 2.25rem; font-size: 1.45rem; } .prose h3:not([class]) { margin-top: 1.75rem; font-size: 1.2rem; } .prose blockquote { padding-left: 1rem; border-left: 3px solid var(--bs-border-color); color: var(--bs-secondary-color); } .prose :not(pre) > code { padding: 0.15em 0.35em; background: var(--bs-tertiary-bg); border-radius: 0.25rem; font-size: 0.875em; } .prose pre { padding: 1rem; background: var(--bs-tertiary-bg); border-radius: 0.375rem; overflow-x: auto; }