/* Screenshots embedded via the publish pipeline: shown as a centered thumbnail by default, sized down more or less depending on how big the original screenshot already was - see publish_inbox.py for the width check that picks which class gets applied. The lightbox click-to-expand (Featherlight, wired up via the ?lightbox= query param) works the same either way; this only affects the inline display size. */ .thumb-half { display: block; width: 50%; margin: 1.5em auto; cursor: zoom-in; } .thumb-large { display: block; width: 75%; margin: 1.5em auto; cursor: zoom-in; } /* Featherlight (the lightbox library) ships with a thick 25px white padding/background around the enlarged image by default. custom.css loads *before* featherlight.min.css in base.html.twig, so an override here needs the extra "body" ancestor purely to win on specificity, not because the selector is semantically about . */ body .featherlight .featherlight-content { padding: 6px 6px 0; border-bottom: 6px solid transparent; } @media only screen and (max-width: 1024px) { body .featherlight .featherlight-content { padding: 4px 4px 0; border-bottom: 4px solid transparent; } } /* h1 defaults to 3.25rem (nucleus.css) with no responsive downscaling at all, so a long article title overflows and wraps awkwardly on a phone screen. custom.css loads after nucleus.css/theme.css in base.html.twig, so a plain override here already wins the cascade, no extra specificity needed. */ @media only screen and (max-width: 768px) { /* h2/h3 default to 2.55rem/2.15rem (nucleus.css), both larger than the h1 override above - keeping the same relative scale as the desktop sizes (h2 ~78% of h1, h3 ~66%) rather than arbitrary numbers, so the heading hierarchy stays correct. */ h1 { font-size: 2.1rem; } h2 { font-size: 1.7rem; } h3 { font-size: 1.4rem; } } /* Text wordmark replacing the default Grav SVG logo in the sidebar header (partials/logo.html.twig). #header already sets a fixed height/centered layout expecting the old #logo-svg (8rem x 2rem), so this is sized/spaced to sit comfortably in that same header block rather than relying on the old SVG-specific CSS. */ #site-logo { display: inline-block; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; line-height: 2rem; } /* #header centers its children as plain inline content (vendor CSS, theme.css), so #logo and #theme-toggle next to it align on their default text baseline rather than visually centering with each other. vertical-align: middle here (matched on #theme-toggle below) lines the button up with the middle of the wordmark's own line-height instead. */ #logo { vertical-align: middle; } #site-logo-suffix { font-weight: 400; opacity: 0.85; } /* Profile photo on the About Jan homepage: floats right so it sits alongside the intro paragraphs instead of pushing all the text below it. Drops to a centered block above the text on narrow screens, where there's no width left for a float to make sense next to prose. */ .profile-photo { float: right; width: 150px; max-width: 40%; margin: 0 0 1.5em 2em; border-radius: 6px; } @media only screen and (max-width: 600px) { .profile-photo { float: none; display: block; width: 130px; max-width: 45%; margin: 0 auto 1.5em; } } /* Stat counter row (About Jan homepage): four numbers in a row on desktop, wrapping to two-per-row on narrow screens rather than stacking to one column, since a single big number + label is short enough that a 2x2 grid still reads fine on a phone. */ .stat-row { display: flex; flex-wrap: wrap; gap: 1.5em; margin: 2em 0; padding: 1.5em 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; clear: both; } .stat-box { flex: 1 1 120px; min-width: 120px; text-align: center; } .stat-number { font-size: 2.4rem; font-weight: 700; line-height: 1; } .stat-number::after { content: '+'; } .stat-label { display: block; margin-top: 0.4em; font-size: 0.85rem; color: #666; } /* "How I Work" step carousel: only the active step is shown, switched via the dots or prev/next buttons (see custom.js). All steps are present in the DOM from the start (not injected by JS), so the content is still there - and still searchable/readable - even if JS fails to load. */ .step-carousel { margin: 1.5em 0; clear: both; } .step-panels { position: relative; min-height: 8em; } .step-panel { display: none; padding: 0.5em 0; } .step-panel.is-active { display: block; } .step-panel h3 { margin-top: 0; } .step-nav { display: flex; align-items: center; justify-content: center; gap: 1em; margin-top: 1em; } .step-dots { display: flex; gap: 0.5em; } .step-dot { width: 0.7em; height: 0.7em; border-radius: 50%; border: 1px solid #999; background: transparent; padding: 0; cursor: pointer; } .step-dot.is-active { background: #333; border-color: #333; } .step-prev, .step-next { background: none; border: 1px solid #999; border-radius: 4px; padding: 0.2em 0.7em; cursor: pointer; font-size: 1rem; } .step-prev:hover, .step-next:hover, .step-dot:hover { border-color: #333; } /* Previous-projects accordion: plain native

, no JS needed at all. Styled to look like a real accordion (custom marker, border between entries) rather than the browser's default triangle and bare-bones look. */ .project-accordion { margin: 1.5em 0; clear: both; } .project-accordion details { border-bottom: 1px solid #e0e0e0; padding: 0.8em 0; } .project-accordion summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-left: 1.3em; } .project-accordion summary::-webkit-details-marker { display: none; } .project-accordion summary::before { content: '+'; position: absolute; left: 0; font-weight: 700; } .project-accordion details[open] summary::before { content: '\2212'; } .project-accordion .project-body { padding: 0.8em 0 0.2em 1.3em; } .project-accordion .project-body p { margin: 0 0 0.8em; } /* Learn2's built-in sidebar search only searches within the current page/session rather than the whole site, not useful in practice. Hidden rather than removed from the template, so it is easy to bring back later if a real site-wide search ever gets wired up instead. */ .searchbox { display: none; } /* theme.css's generic `code` rule sets padding: .2rem .4rem, meant for short inline spans in prose (like `git clone`). pre code (which overrides color/background/font-size there) never resets padding back to 0, so it leaks through onto every fenced code block. Because


   stays display:inline and contains real newlines (inherits white-space:
   pre from its  ancestor), CSS only ever applies an inline box's
   left/right padding at the very start/end of its first/last line, never
   at an internal line break - so only the block's first line visibly
   shifts right, indistinguishable at a glance from a stray leading
   space, confirmed directly by measuring per-character positions across
   both lines (uniform 7.5px advance within each line, a flat 6.4px - the
   exact .4rem value - offset between line 1's start and every other
   line's). */
pre code {
    padding: 0;
}

/* Print / "Save as PDF" (triggered by the button in partials/page.html.twig):
   strip everything that only makes sense on-screen (sidebar nav, header,
   footer, breadcrumbs, search, the copy-to-clipboard buttons, the download
   buttons themselves) and let the article content use the full page width,
   since #body normally reserves 300px on the left for the fixed sidebar. */
@media print {
    #sidebar,
    #header-wrapper,
    #top-bar,
    #navigation,
    #body .nav,
    .copy-to-clipboard,
    .page-downloads,
    #footer,
    .searchbox,
    #overlay {
        display: none !important;
    }
    #body {
        margin-left: 0 !important;
    }
    #body .padding {
        padding: 0 !important;
    }
    /* Browsers print the target URL after every link by default, which
       gets noisy fast on a page as link-heavy as a tutorial article. */
    a[href]:after {
        content: "" !important;
    }
}

/* The "Download Markdown" link and "Save as PDF" button (partials/page.html.
   twig) look mismatched by 1-2px vertically even though both use the same
   .button-secondary class and render at the exact same height - confirmed
   directly, both boxes measure 42.5px tall. The actual cause:  defaults
   to vertical-align: baseline,