/* ======================= THEME PARAMETERS ======================= Ameek: this is YOUR file. Edit a value, save — the preview reloads by itself (npm start must be running). Every face of the site (live, résumé, exploratory) reads from here; nothing below is structural code, only knobs. Keep units on every number ("0px", not "0"). Sections: 1 LAYOUT 2 COLOURS 3 TEXTURE 4 TYPE 5 MARGIN CARDS ================================================================ */ :root { /* ===================== 1. LAYOUT ========================== */ /* Three bands: left ribbon | main panel | right rail. As the window narrows: the ribbon gives way first (down to --ribbon-min), then the panel (down to --panel-min), then margin cards open below their link and the rail yields; phones show the panel alone. */ --panel-width: 52rem; /* the main panel, rule to rule, on wide windows. Text measure = this minus --column-inset minus the 2.5rem rail gap. */ --panel-min: 40rem; /* how narrow the panel may get before the rail starts giving way instead */ --leftbar-width: 12rem; /* the left ribbon on wide windows; also the panel's fixed left offset */ --ribbon-min: 2rem; /* the ribbon's floor (the résumé face raises it to hold its sidebar card) */ --column-inset: 2.75rem; /* space between the panel's left rule and the text/photo (phones: 1.25rem) */ --portrait-width: 11rem; /* the photo beside the name — fixed at every window size; height follows */ --top-rule: 0px; /* ink rule across the top of the window: 0px = none; 4px = the field-notes look */ --page-min: 40rem; /* on a DESKTOP browser the page never gets narrower than this: squeeze the window further and the layout freezes here and a horizontal scrollbar appears. Phones and tablets ignore it and stay fluid. (The scrollbar rule is an @media line in exploratory.css — search "40rem".) */ --card-margin: 1.5rem; /* the least space a margin card keeps from the top and bottom of the page; a card that would overshoot is shifted up/down */ --ribbon-height: 6rem; /* the scroll ribbon (live face): its full height, rule to rule; photo and name sit centred in it */ --ribbon-photo: 3.2rem; /* the tiny photo's height in the ribbon */ /* The SWITCH POINTS (cards open below their link; the résumé sidebar appears; the desktop sideways scroll) are computed from these knobs at every build — nothing to keep in sync. Keep --page-min at least --ribbon-min + --panel-min, or the frozen page is a little wider than the floor. */ /* ===================== 2. COLOURS ========================= */ /* The standard (16 Jul 2026, "ink structure, green links"): three chromatic jobs only — the link green, the neon marker, the paper and rail tints. Everything else is ink and grey. Text colours are solid 6-digit hex (an 8th-digit pair is transparency) and keep ≥ 4.5:1 contrast on --bg (webaim.org/resources/contrastchecker). */ --bg: #f0f0f0; /* the paper */ --ink: #111111; /* body text */ --muted: #6b6b66; /* secondary text: dates, coauthors, meta */ --hairline: #b4b4b4; /* thin rules, borders, boxes (set it equal to --bg to make rules invisible) */ --accent: #111111; /* structure is ink: headings, the top rule when on, blockquote bars */ --site-name: #111111; /* the "AMEEK SINGH" wordmark */ --link: #bceb04; /* the link UNDERLINE (words stay ink), also under "abstract ›" and "PDF" */ --link-hover: #14602f; /* the underline on hover */ --highlight: #d9fb4a; /* the neon marker: selection, , nav and chip hover, an open "abstract ›" — BACKGROUNDS ONLY, never text */ /* ===================== 3. TEXTURE ========================= */ /* The left ribbon and right rail: a tint with an optional pattern. */ --rail-bg: #e3e3e3; /* the tint */ --rail-dot: #e3e3e3; /* the pattern's ink (equal to the tint = no visible pattern; the old green dots were #6fff6da6) */ --rail-dot-size: 1.3px; /* dot radius (dots preset only) */ --rail-spacing: 15px 15px; /* pattern repeat distance */ /* --rail-pattern: the recipe. Presets to paste in: dots: radial-gradient(var(--rail-dot) var(--rail-dot-size), transparent calc(var(--rail-dot-size) + 0.2px)) graph grid: linear-gradient(var(--rail-dot) 1px, transparent 1px), linear-gradient(90deg, var(--rail-dot) 1px, transparent 1px) (with --rail-spacing: 18px 18px) diagonal hatch: repeating-linear-gradient(45deg, var(--rail-dot) 0 1px, transparent 1px 10px) (with --rail-spacing: auto) plain tint: none */ --rail-pattern: radial-gradient(var(--rail-dot) var(--rail-dot-size), transparent calc(var(--rail-dot-size) + 0.2px)); /* ===================== 4. TYPE ============================ */ /* Body prose. The first name installed wins; the rest are fallbacks. "Newsreader" is self-hosted with the site. */ --font-body: Cambria, "Newsreader", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; /* The "ledger voice": dates, coauthors, stages, nav, "abstract ›". Sizes are fixed in the stylesheets (0.8rem meta, 0.7rem micro). */ --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ===================== 5. MARGIN CARDS ==================== */ /* The click-to-open cards in the right rail (abstracts, notes). */ --marginbox-width: 20rem; /* MAXIMUM card width (cards grow with the window from 11rem up to this); also sets the rail room reserved for them */ --marginbox-gap: 0.9rem; /* distance from the panel's rule to the card's left edge */ --marginbox-radius: 7px; /* corner softness (0px = sharp) */ --marginbox-font: var(--font-mono); /* small-card text; try var(--font-body) */ --marginbox-size: 0.8rem; /* small-card text size */ }