CSS: style, layout, theming

CSS is a rule engine: each rule is a selector (which elements) plus declarations (which properties get which values). The engine applies every matching rule to every element and resolves conflicts by specificity and order — "the cascade". All of Ndiro's CSS lives in two places: the shared skin in base.html's <style>, and per-page rules each template adds via a block.

Selectors you'll actually meet here

.card            { … }   /* any element with class="card"            */
.btn.primary     { … }   /* both classes on the same element         */
.menu-panel a    { … }   /* any <a> anywhere inside .menu-panel      */
.btn:hover       { … }   /* while the pointer is over it             */
.btn:disabled    { … }   /* state-based                              */
:root[data-theme="light"] { … }   /* attribute match — the theme switch */

When two rules set the same property on the same element, the more specific selector wins (id beats class beats element), and among equals, the later one in the file. You can see the whole resolution in devtools: the Styles pane lists every matching rule with the losers struck through — it's the query plan explainer for CSS.

The box model and the layout primitives

Every element is a rectangle: content, wrapped in padding, wrapped in border, wrapped in margin. Ndiro opts the whole page into the sane sizing mode where width means the visible box, border and padding included:

templates/base.html ↗

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

For arranging boxes, this site needs only two tools:

• Normal flow — blocks stack vertically. The page is a centered column: .container { max-width: 640px; margin: 0 auto; } (auto side margins = centering).
• Flexbox — one-dimensional rows/columns with alignment and distribution. The form's date/time row, the meal cards, the corner controls are all display: flex.

templates/log.html ↗

.form-row {
    display: flex;      /* children become flex items in a row  */
    gap: 10px;          /* space between them                   */
    flex-wrap: wrap;    /* overflow wraps instead of squishing  */
}
.form-row > div {
    flex: 1;            /* share leftover width equally         */
    min-width: 130px;   /* below this, wrap to the next line    */
}

Those five lines are also the entire "responsive design" of the form: on a phone the three fields wrap into a column, on a laptop they sit in a row, with no phone-specific code. Add the viewport meta from the HTML chapter and a fluid max-width container, and small screens mostly take care of themselves.

The third tool, positioning, is used sparingly: position: fixed pins the menu hamburger to the viewport (.corner-controls) and stretches the photo lightbox over everything (inset: 0 plus a z-index to win the stacking order).

Design tokens: custom properties

The gem of this stylesheet. CSS variables ("custom properties") are defined once on the root element and referenced everywhere:

templates/base.html ↗

:root {                        /* dark theme — the default */
    --bg-0: #282828;  --card: #3c3836;  --border: #504945;
    --muted: #a89984; --text: #ebdbb2;  --gold: #fabd2f;
    --green: #b8bb26; --red: #fb4934;   /* …14 tokens total */
}
:root[data-theme="light"] {    /* same 14 names, light values */
    --bg-0: #fbf1c7;  --text: #3c3836;  --gold: #b57614;  …
}
.card {
    background: var(--card);
    border: 1px solid var(--border);
}

Because colors in the app are spelled var(--token), the entire theme switch is one attribute flip on <html>: set data-theme="light" and the second :root block wins, every var() re-resolves, and the whole page restyles. No CSS is swapped, no classes are toggled per element. (There is one deliberate exception that proves the rule: .btn.primary hard-codes its dark text color, because dark-on-gold is the right contrast in both themes — a color that shouldn't follow the theme is written literally, so the token system stays honest.)

One wrinkle worth knowing by name: FOUC (flash of unstyled/wrong content). The theme choice lives in localStorage, which only JavaScript can read — so a tiny script runs in <head>, before the first paint, to set the attribute. Do it at the bottom of the page instead and dark-theme users see a cream flash on every load. The try/catch handles private browsing, where localStorage may throw.

Motion

Two kinds, both present in miniature. Transitions animate a property change: .brand { transition: border-color .2s, transform .2s } makes the hover lift smooth. Keyframe animations run on their own — the loading indicator is a broccoli spinning forever:

templates/base.html ↗

.spin { display: inline-block; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }