/* Base stylesheet — theme-agnostic. Colors come from CSS variables defined below. The active palette is selected by the `data-theme` attribute on , which `gister deploy` bakes in from the profile's `theme` field. Add a new theme by adding another `html[data-theme="..."]` block. */ :root { --bg: #fafafa; --text: #1a1a2e; --heading: #16213e; --accent: #0f3460; --accent-hover: #e94560; --accent-fg: #fff; --topbar-bg: #0f3460; --topbar-text: #fff; --topbar-text-hover: #e0e0f0; --code-bg: #e8e8ee; --pre-bg: #1a1a2e; --pre-text: #e0e0e0; --surface: #f0f0f5; --surface-alt: #e8e8ee; --surface-hover: #d0d0dd; --input-bg: #fff; --border: #ddd; --border-soft: #e0e0e0; --muted: #555; --muted-soft: #888; --text-soft: #333; --placeholder: #aaa; --chip-text: #bbb; } html[data-theme="dark"] { --bg: #1a1a2e; --text: #c8c8dc; --heading: #e6e6f5; --accent: #6fa8dc; --accent-hover: #e94560; --accent-fg: #fff; --topbar-bg: #0f1b3d; --topbar-text: #ffffff; --topbar-text-hover: #c9d4ef; --code-bg: #26263f; --pre-bg: #11111f; --pre-text: #e0e0ec; --surface: #242440; --surface-alt: #26263f; --surface-hover: #2f2f52; --input-bg: #242440; --border: #34344f; --border-soft: #2a2a44; --muted: #9a9ab5; --muted-soft: #7a7a98; --text-soft: #c8c8dc; --placeholder: #6c6c8a; --chip-text: #7a7a98; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; line-height: 1.7; color: var(--text); background: var(--bg); } /* Top bar */ .topbar { background: var(--topbar-bg); padding: 0 1.5rem; height: 2.8rem; display: flex; align-items: center; gap: 0.5rem; position: sticky; top: 0; z-index: 100; } .topbar-brand { color: var(--topbar-text); text-decoration: none; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; } .topbar-brand:hover { color: var(--topbar-text-hover); } .theme-toggle { background: rgba(255, 255, 255, 0.12); border: none; border-radius: 6px; width: 2rem; height: 2rem; font-size: 0.95rem; line-height: 1; cursor: pointer; color: var(--topbar-text); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.2); } /* In light mode show 🌙 (switch to dark); in dark mode show ☀️ (switch to light) */ .theme-toggle .to-light { display: none; } html[data-theme="dark"] .theme-toggle .to-dark { display: none; } html[data-theme="dark"] .theme-toggle .to-light { display: inline; } .present-toggle { height: 2rem; background: rgba(255, 255, 255, 0.12); border: none; border-radius: 6px; padding: 0 0.75em; font-size: 0.95rem; font-weight: 500; line-height: 1; cursor: pointer; color: var(--topbar-text); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; } .present-toggle:hover { background: rgba(255, 255, 255, 0.2); } /* .theme-toggle carries margin-left:auto to push the right-aligned button group (theme + present) to the right edge of the topbar. */ main { max-width: 48rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; } /* Typography */ h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.3; color: var(--heading); position: relative; /* Leave room for the sticky topbar when jumping to a #anchor. */ scroll-margin-top: 3.4rem; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } /* Shareable heading anchors (#slug). Revealed on hover, out of the text flow. */ .heading-anchor { position: absolute; left: -1.1em; top: 0; color: var(--muted-soft); text-decoration: none; opacity: 0; transition: opacity .12s ease; } h1:hover > .heading-anchor, h2:hover > .heading-anchor, h3:hover > .heading-anchor, h4:hover > .heading-anchor, h5:hover > .heading-anchor, h6:hover > .heading-anchor { opacity: 1; } .heading-anchor:hover { color: var(--accent); } p { margin-bottom: 1em; } a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } /* Code */ code { font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace; font-size: 0.9em; background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 3px; } pre { background: var(--pre-bg); color: var(--pre-text); padding: 1.25em; border-radius: 6px; overflow-x: auto; margin-bottom: 1em; line-height: 1.5; } pre code { background: none; padding: 0; font-size: 0.875em; color: inherit; } /* Lists */ ul, ol { margin-bottom: 1em; padding-left: 1.5em; } li { margin-bottom: 0.3em; } /* Blockquotes */ blockquote { border-left: 4px solid var(--accent); padding: 0.5em 1em; margin-bottom: 1em; color: var(--muted); background: var(--surface); border-radius: 0 4px 4px 0; } /* Tables */ table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } th, td { border: 1px solid var(--border); padding: 0.6em 0.8em; text-align: left; } th { background: var(--surface); font-weight: 600; } /* Horizontal rule */ hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; } /* Images */ img { max-width: 100%; height: auto; border-radius: 4px; } /* Index page */ /* Right-aligned cluster of top-bar buttons (theme, present). Carries margin-left:auto so the cluster always sits at the right edge, whether or not the home-page search box is present. */ .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } /* Home-page search box — lives in the (always dark) top bar, so it uses translucent white over the topbar color rather than the page theme. */ .nav-search { flex: 1 1 12rem; max-width: 28rem; min-width: 8rem; height: 2rem; padding: 0 0.75em; font-size: 0.95rem; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; outline: none; background: rgba(255, 255, 255, 0.12); color: var(--topbar-text); } .nav-search:focus { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.18); } .nav-search::placeholder { color: rgba(255, 255, 255, 0.6); } .group-section { margin-top: 0.5em; } .group-heading { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-soft); border-bottom: 1px solid var(--border-soft); padding-bottom: 0.3em; margin-top: 1.8em; margin-bottom: 0.5em; } .group-heading:first-of-type { margin-top: 0.5em; } .entry-list { list-style: none; padding-left: 0; } .entry-list li { margin-bottom: 0.5em; font-size: 1.05em; display: flex; align-items: baseline; gap: 0.2em; flex-wrap: wrap; } .entry-list li a { text-decoration: none; font-weight: 500; } .entry-list li a:hover { text-decoration: underline; } .entry-date { font-size: 0.75em; color: var(--muted-soft); font-family: 'SF Mono', 'Fira Code', Menlo, monospace; } /* Presentation mode */ .deck-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; } .deck-overlay[hidden] { display: none; } /* Fit/actual indicator badge (top-right). Click or press F to toggle. */ .deck-fit-indicator { position: absolute; top: 0.6rem; right: 0.8rem; z-index: 1001; background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border-soft); border-radius: 6px; padding: 0.2em 0.6em; font-size: 0.8rem; font-family: 'SF Mono', 'Fira Code', Menlo, monospace; cursor: pointer; user-select: none; } /* Stage = the fixed viewport box. It only ever scrolls/clips; it is NEVER scaled itself. Previously the stage was both the clip box (overflow:hidden) AND the transform target (scale), and CSS clips painted content to the element's box BEFORE applying the transform — so only the top portion of a dense slide was ever scaled. Scaling a separate .deck-slide child fixes that. Full width (no 52rem cap) so wide tables are not cut in 1:1 mode. */ .deck-stage { flex: 1; min-height: 0; /* flex child: shrink instead of growing to content */ width: 100%; overflow: auto; /* 1:1: scroll (vert + horiz) when content overflows */ display: flex; /* center the slide horizontally */ justify-content: center; align-items: flex-start; position: relative; cursor: pointer; } /* Fit mode: stop scrolling — the .deck-slide inside is scaled to fit. */ .deck-stage.is-fit { overflow: hidden; } /* Slide = the actual content wrapper. This is the element we scale, so the transform never fights the stage's overflow clipping. Full available width keeps wide tables from being cut; prose is capped to a readable measure. */ .deck-slide { width: 100%; max-width: 90%; /* 90% of stage width, centered */ margin: 0 auto; padding: 4vh 2rem 4vh; font-size: 1.6rem; line-height: 1.5; color: var(--text); transform-origin: top center; /* shrink grows downward from top center */ } /* Full available width for everything (tables + prose). */ .deck-slide table { width: 100%; } /* Dim + busy cursor while fetching the next deck page */ .deck-stage.is-loading { opacity: 0.45; cursor: wait; pointer-events: none; transition: opacity 0.15s; } /* First slide (often a title) gets extra breathing room and larger type. Center it vertically inside the stage (title slides are short, so the flexbox top-clip edge case does not apply). */ .deck-stage.is-first { align-items: center; } .deck-stage.is-first .deck-slide { text-align: center; } .deck-stage.is-first h1 { font-size: 3rem; margin-top: 0; } /* Scale down subsequent headings a touch for slide context */ .deck-stage h1 { font-size: 2.4rem; } .deck-stage h2 { font-size: 2rem; } .deck-stage h3 { font-size: 1.7rem; } .deck-stage pre { font-size: 1rem; } .deck-stage code { font-size: 0.9em; } .deck-controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1vh 1rem; background: var(--surface); border-top: 1px solid var(--border-soft); } .deck-nav, .deck-exit { background: var(--surface-alt); border: none; border-radius: 6px; padding: 0.3em 0.8em; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--text); transition: background 0.15s; } .deck-nav:hover, .deck-exit:hover { background: var(--surface-hover); } .deck-count { font-size: 0.9rem; color: var(--muted); font-family: 'SF Mono', 'Fira Code', Menlo, monospace; min-width: 4em; text-align: center; } /* Dim controls when the stage is the first/last slide */ .deck-stage.is-first ~ .deck-controls #deck-prev, .deck-stage.is-last ~ .deck-controls #deck-next { opacity: 0.4; cursor: default; } @media print { .deck-overlay { position: static; } .deck-controls { display: none; } } /* === Gallery homepage === Pinterest-style masonry (CSS columns) that preserves each photo's real orientation. Scoped under .gallery-page so doc-site styling is untouched. A gallery theme (gallery-wall / editorial / film) sets a group of CSS variables for palette, typography, spacing and photo treatment; each exists in light and dark (driven by html[data-theme]). */ /* A gallery wants more horizontal room than a doc page. Widen
only when it hosts a gallery. (:has is widely supported in 2026; where it isn't, the grid simply renders within the default 48rem — still fine.) */ main:has(.gallery-page) { max-width: 90rem; padding: 1rem 1rem 3rem; } .gallery-page { background: var(--gallery-bg); } /* Masonry via CSS multi-column. Items flow top-to-bottom within each column (standard Pinterest behaviour). Mobile-first: 2 columns, scaling up. */ .gallery-grid { column-count: 2; column-gap: var(--gallery-gap); } @media (min-width: 600px) { .gallery-grid { column-count: 3; } } @media (min-width: 1000px) { .gallery-grid { column-count: 4; } } @media (min-width: 1500px) { .gallery-grid { column-count: 5; } } .gallery-item { margin: 0 0 var(--gallery-gap); break-inside: avoid; /* don't split a tile across columns */ position: relative; cursor: pointer; } /* width:100% + intrinsic ratio (from width/height attrs) reserves the box before the image loads -> no layout shift as tiles stream in. */ .gallery-item img { display: block; width: 100%; height: auto; border-radius: var(--gallery-radius); box-shadow: var(--gallery-shadow); background: var(--gallery-tile-bg); transition: transform 0.25s ease, filter 0.25s ease; } .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.02); filter: var(--gallery-hover-filter); } .gallery-item figcaption { margin: 0.4rem 0.35rem 0; font: var(--gallery-caption-font); color: var(--gallery-caption-color); letter-spacing: var(--gallery-caption-tracking); text-transform: var(--gallery-caption-transform); } .gallery-empty { padding: 5rem 1rem; text-align: center; color: var(--muted); font-size: 1.05rem; } @media (prefers-reduced-motion: reduce) { .gallery-item img { transition: none; } } /* --- Theme: gallery-wall (museum) ----------------------------- Generous whitespace, serif captions, photos that lift off the wall with a soft shadow. Warm white walls by day, near-black by night. */ .gallery-page.gallery-theme-gallery-wall { --gallery-gap: 2rem; } html[data-theme="light"] .gallery-theme-gallery-wall { --gallery-bg: #faf9f6; --gallery-tile-bg: #efeeea; --gallery-radius: 4px; --gallery-shadow: 0 10px 30px -12px rgba(20, 18, 14, 0.35); --gallery-hover-filter: brightness(1.03); --gallery-caption-font: italic 0.95rem/1.4 Georgia, 'Times New Roman', serif; --gallery-caption-color: #6b6557; --gallery-caption-tracking: normal; --gallery-caption-transform: none; } html[data-theme="dark"] .gallery-theme-gallery-wall { --gallery-bg: #0b0b0d; --gallery-tile-bg: #1a1a1e; --gallery-radius: 4px; --gallery-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.8); --gallery-hover-filter: brightness(1.06); --gallery-caption-font: italic 0.95rem/1.4 Georgia, 'Times New Roman', serif; --gallery-caption-color: #9a958a; --gallery-caption-tracking: normal; --gallery-caption-transform: none; } /* --- Theme: editorial (magazine) ------------------------------ Tight grid, minimal radius, bold sans captions in tight uppercase tracking. Warm paper / charcoal ink. */ .gallery-page.gallery-theme-editorial { --gallery-gap: 0.5rem; } html[data-theme="light"] .gallery-theme-editorial { --gallery-bg: #f4f1ec; --gallery-tile-bg: #e7e3db; --gallery-radius: 2px; --gallery-shadow: none; --gallery-hover-filter: brightness(1.02); --gallery-caption-font: 600 0.7rem/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; --gallery-caption-color: #555049; --gallery-caption-tracking: 0.12em; --gallery-caption-transform: uppercase; } html[data-theme="dark"] .gallery-theme-editorial { --gallery-bg: #141414; --gallery-tile-bg: #1f1f1f; --gallery-radius: 2px; --gallery-shadow: none; --gallery-hover-filter: brightness(1.05); --gallery-caption-font: 600 0.7rem/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; --gallery-caption-color: #9d978d; --gallery-caption-tracking: 0.12em; --gallery-caption-transform: uppercase; } /* --- Theme: film (warm analog) -------------------------------- Sepia-tinted walls, a faint film-grain overlay, muted mono captions and a gentle warm filter on the photos themselves. */ .gallery-page.gallery-theme-film { --gallery-gap: 1.25rem; } html[data-theme="light"] .gallery-theme-film { --gallery-bg: #efe7d8; --gallery-tile-bg: #e2d8c6; --gallery-radius: 3px; --gallery-shadow: 0 8px 22px -12px rgba(92, 70, 40, 0.4); --gallery-hover-filter: sepia(0.15) contrast(0.97); --gallery-caption-font: 0.8rem/1.4 'Courier New', ui-monospace, monospace; --gallery-caption-color: #7a6a4f; --gallery-caption-tracking: 0.02em; --gallery-caption-transform: none; } html[data-theme="dark"] .gallery-theme-film { --gallery-bg: #1a1410; --gallery-tile-bg: #241c15; --gallery-radius: 3px; --gallery-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.75); --gallery-hover-filter: sepia(0.15) contrast(0.97); --gallery-caption-font: 0.8rem/1.4 'Courier New', ui-monospace, monospace; --gallery-caption-color: #9a8a6e; --gallery-caption-tracking: 0.02em; --gallery-caption-transform: none; } /* A subtle film-grain veil over the whole page (cheap SVG noise data URI). */ .gallery-theme-film::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Keep photos above the grain veil. */ .gallery-theme-film .gallery-item { position: relative; z-index: 2; } /* === Fullscreen lightbox === Overlays the full photo with prev/next nav, caption, and a loading state. Theme-aware via CSS variables. Reused on gallery pages only. */ .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; /* Click the backdrop to close (buttons stop propagation). */ } .lightbox[hidden] { display: none; } .lightbox-stage { position: relative; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .lightbox-stage img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); } .lightbox-caption { color: #f0f0f5; font-size: 0.95rem; text-align: center; max-width: 80vw; margin: 0; } .lightbox-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: lb-spin 0.8s linear infinite; } @keyframes lb-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .lightbox-close, .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); color: #fff; border: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2001; transition: background 0.15s ease; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); } .lightbox-prev { left: max(1rem, calc(50% - 47vw)); } .lightbox-next { right: max(1rem, calc(50% - 47vw)); } .lightbox-close { top: 1rem; right: 1rem; transform: none; width: 2.4rem; height: 2.4rem; font-size: 1.4rem; } /* Keep nav buttons reachable but not covering the image on phones. */ @media (max-width: 600px) { .lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; } .lightbox-prev { left: 0.5rem; } .lightbox-next { right: 0.5rem; } } @media (prefers-reduced-motion: reduce) { .lightbox-loader { animation-duration: 1.6s; } } /* === Gallery infinite scroll === .gallery-lazy items are visible by default (JS-off safe). They are hidden only once the inline script opts in by adding .gallery-js to , then revealed progressively by the IntersectionObserver. */ html.gallery-js .gallery-lazy { display: none; } .gallery-sentinel { width: 0; height: 0; }