/* ========================================================================= VOIDs' Blog — theme.css Owner: feat/foundation-theme (RFC 2.3 switchers + 4 implementation) Single source of truth for the colour system: a minimal neutral base plus a neon accent. Everything is driven by CSS custom properties so the three switchers (theme / colour / language) can re-skin the site at runtime with zero layout reflow. Tokens are grouped into three layers: 1. Accent palettes — 4 named palettes, each with a light + dark hue. 2. Light/dark neutrals — surfaces, text, borders for each scheme. 3. Semantic aliases — what the rest of the CSS actually consumes (--accent, --bg, --fg, --border, ...). The [data-theme="dark"] / [data-theme="light"] attribute on is set pre-FOUC by the inline head script (see _includes/head.html). When the user follows the system, no attribute is present and the prefers-color-scheme media query takes over. ========================================================================= */ :root { /* ---- Accent palettes (light hue / dark hue) ------------------------- */ /* Electric cyan — default. systems / engineering, easy on the eyes. */ --accent-cyan-light: #0891b2; --accent-cyan-dark: #22d3ee; /* Electric violet — trance / void. */ --accent-violet-light: #6d4aff; --accent-violet-dark: #a78bfa; /* Magenta — high-key, strong recognition. */ --accent-magenta-light: #c01f6b; --accent-magenta-dark: #ff4d9d; /* Acid green — hacker / terminal / CTF. */ --accent-acid-light: #2f9e2f; --accent-acid-dark: #4ade80; /* Active accent hue for each scheme. The colour switcher overwrites these two via [data-accent] on :root (persisted to localStorage). Default palette = cyan. */ --accent-light: var(--accent-cyan-light); --accent-dark: var(--accent-cyan-dark); /* ---- Light scheme neutrals (default) -------------------------------- */ --bg-light: #ffffff; --surface-light: #f6f7f8; --surface-2-light: #eceef0; --fg-light: #1f2328; --fg-muted-light: #586069; --border-light: #d8dde2; --border-strong-light: #c2c9d0; --code-bg-light: #f3f4f6; /* ---- Dark scheme neutrals ------------------------------------------- */ --bg-dark: #0d1117; --surface-dark: #161b22; --surface-2-dark: #21262d; --fg-dark: #e6edf3; --fg-muted-dark: #9aa5b1; --border-dark: #30363d; --border-strong-dark: #444c56; --code-bg-dark: #1b2129; /* ---- Code tokens (visual-design §3) --------------------------------- */ /* Spec-mandated values: light #f6f8fa / dark #161b22; fg follows --fg so code never goes light-on-light or dark-on-dark when the scheme flips. */ --code-bg-light: #f6f8fa; --code-bg-dark: #161b22; /* ---- Semantic aliases — resolve to the LIGHT scheme by default ------ */ --accent: var(--accent-light); --bg: var(--bg-light); --surface: var(--surface-light); --surface-2: var(--surface-2-light); --fg: var(--fg-light); --fg-muted: var(--fg-muted-light); --border: var(--border-light); --border-strong: var(--border-strong-light); --code-bg: var(--code-bg-light); --code-fg: var(--fg); /* Accent-derived helpers (kept opaque-on-neutral so the theme stays minimal). color-mix is widely supported; degrades to the bare accent. */ --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-line: color-mix(in srgb, var(--accent) 55%, transparent); --accent-tint: color-mix(in srgb, var(--accent) 8%, var(--bg)); --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent); /* ---- Modular type scale (visual-design §1, ratio ~1.25) ------------- */ --fs-sm: 0.9rem; --fs-base: 1.0625rem; /* 17px body */ --fs-lg: 1.25rem; /* h3 */ --fs-xl: 1.6rem; /* h2 / section title */ --fs-2xl: 2rem; /* identity name */ --fs-3xl: clamp(2.1rem, 4vw, 2.9rem); /* post / hero title */ --lh-body: 1.7; --lh-tight: 1.15; --lh-snug: 1.4; /* ---- Layout widths (visual-design §2) ------------------------------- */ --w-prose: 72ch; /* article / about reading column */ --w-wide: min(1180px, 92vw); /* home dashboard full-width region */ /* ---- Vertical rhythm between major blocks --------------------------- */ --space-section: clamp(2.5rem, 6vw, 4.5rem); } /* ---- Dark scheme: explicit opt-in via [data-theme="dark"] -------------- */ :root[data-theme="dark"] { --accent: var(--accent-dark); --bg: var(--bg-dark); --surface: var(--surface-dark); --surface-2: var(--surface-2-dark); --fg: var(--fg-dark); --fg-muted: var(--fg-muted-dark); --border: var(--border-dark); --border-strong: var(--border-strong-dark); --code-bg: var(--code-bg-dark); } /* ---- Follow-system: only when no explicit data-theme is set ----------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --accent: var(--accent-dark); --bg: var(--bg-dark); --surface: var(--surface-dark); --surface-2: var(--surface-2-dark); --fg: var(--fg-dark); --fg-muted: var(--fg-muted-dark); --border: var(--border-dark); --border-strong: var(--border-strong-dark); --code-bg: var(--code-bg-dark); } } /* When the colour switcher selects a non-default palette it sets data-accent on :root; we re-point --accent-light/--accent-dark so the semantic --accent resolves correctly in every scheme. */ :root[data-accent="cyan"] { --accent-light: var(--accent-cyan-light); --accent-dark: var(--accent-cyan-dark); } :root[data-accent="violet"] { --accent-light: var(--accent-violet-light); --accent-dark: var(--accent-violet-dark); } :root[data-accent="magenta"] { --accent-light: var(--accent-magenta-light); --accent-dark: var(--accent-magenta-dark); } :root[data-accent="acid"] { --accent-light: var(--accent-acid-light); --accent-dark: var(--accent-acid-dark); } /* ========================================================================= Two-tier navigation (nav.html) ========================================================================= */ .site-nav { border-bottom: 1px solid var(--border); background-color: var(--bg); } .site-nav__top { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; flex-wrap: wrap; } .site-nav__brand { font-family: var(--header-font); font-weight: 700; font-size: 1.15rem; color: var(--fg); text-decoration: none; white-space: nowrap; } .site-nav__brand:hover, .site-nav__brand:focus { color: var(--accent); text-decoration: none; } .site-nav__primary { display: flex; align-items: center; gap: 1.1rem; list-style: none; margin: 0; padding: 0; } .site-nav__primary a { font-family: var(--header-font); color: var(--fg-muted); text-decoration: none; font-size: 0.95rem; } .site-nav__primary a:hover, .site-nav__primary a:focus, .site-nav__primary a.is-active { color: var(--accent); } /* Right cluster = two groups (social · switchers) split by a 1px divider. visual-design §4: equal icon size (1.05rem) + equal square hit-area (2.1rem), .4rem within a group, 1px divider + .9rem between groups. */ .site-nav__right { display: flex; align-items: center; gap: 0.9rem; /* between-group gap */ margin-left: auto; } .site-nav__right::before { /* hairline divider sitting before the switchers group */ content: none; } /* Every interactive icon in the right cluster shares one square hit-area so the six icons read as an even, tidy row. */ .site-nav__social a, .site-nav__right .switcher__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; font-size: 1.05rem; line-height: 1; } .site-nav__social { display: flex; align-items: center; gap: 0.4rem; /* within-group gap */ list-style: none; margin: 0; padding: 0; } .site-nav__social a { color: var(--fg-muted); border-radius: 0.375rem; text-decoration: none; } .site-nav__social a:hover, .site-nav__social a:focus { color: var(--accent); background: var(--accent-soft); } /* Switchers travel as one group; the divider lives on its leading edge. */ .site-nav__switchers { display: flex; align-items: center; gap: 0.4rem; /* within-group gap */ padding-left: 0.9rem; /* between-group gap (matches ::before) */ position: relative; } .site-nav__switchers::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1.3rem; background: var(--border); } /* Lower tier — content-type tabs (promoted tags + all posts) */ .site-nav__tabs { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0.35rem 0; overflow-x: auto; border-top: 1px solid var(--border); } .site-nav__tabs:empty { display: none; border-top: 0; } .site-nav__tabs a { font-family: var(--header-font); font-size: 0.9rem; color: var(--fg-muted); text-decoration: none; padding-bottom: 0.25rem; border-bottom: 2px solid transparent; white-space: nowrap; } .site-nav__tabs a:hover, .site-nav__tabs a:focus { color: var(--fg); } .site-nav__tabs a.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* ========================================================================= Switchers (theme / colour / language) — rendered in nav top-right ========================================================================= */ .switcher { display: flex; align-items: center; } .switcher__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; color: var(--fg-muted); font-size: 1.05rem; cursor: pointer; line-height: 1; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .switcher__btn:hover, .switcher__btn:focus { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); outline: none; } /* Colour switcher swatch popover */ .switcher--color { position: relative; } .switcher__swatches { position: absolute; top: 110%; right: 0; display: none; gap: 0.4rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; z-index: 1100; } .switcher--color.is-open .switcher__swatches { display: flex; } .switcher__swatch { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .switcher__swatch[data-accent="cyan"] { background: var(--accent-cyan-light); } .switcher__swatch[data-accent="violet"] { background: var(--accent-violet-light); } .switcher__swatch[data-accent="magenta"] { background: var(--accent-magenta-light); } .switcher__swatch[data-accent="acid"] { background: var(--accent-acid-light); } .switcher__swatch.is-active { border-color: var(--fg); } /* Language switcher: a disabled (greyed) entry means no translation yet. */ .switcher__lang.is-missing { opacity: 0.45; cursor: not-allowed; } /* ========================================================================= Footer (footer.html) ========================================================================= */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--fg-muted); padding: 2.5rem 0 1.5rem; margin-top: 3rem; font-family: var(--header-font); font-size: 0.9rem; } .site-footer a { color: var(--fg-muted); text-decoration: none; } .site-footer a:hover, .site-footer a:focus { color: var(--accent); } .site-footer__cols { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; } .site-footer__col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); margin: 0 0 0.75rem; } .site-footer__col ul { list-style: none; margin: 0; padding: 0; } .site-footer__col li { margin-bottom: 0.4rem; } .site-footer__social { display: flex; gap: 0.85rem; font-size: 1.15rem; } .site-footer__bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; } .site-footer__legal { margin: 0; } /* ICP / 公安备案 reserved slot — empty by default, shown only when filled. */ .site-footer__icp:empty { display: none; } .site-footer__top-link { color: var(--fg-muted); } .site-footer__top-link:hover, .site-footer__top-link:focus { color: var(--accent); } @media (max-width: 767px) { .site-footer__cols { flex-direction: column; gap: 1.5rem; } }