diff options
| author | Alex Pooley (@zuedev) <zuedev@gmail.com> | 2026-07-16 16:48:48 +0100 |
|---|---|---|
| committer | Alex Pooley (@zuedev) <zuedev@gmail.com> | 2026-07-16 16:48:48 +0100 |
| commit | 1768191b23e2ab224cb584f3301da66db75acdc9 (patch) | |
| tree | 4a072e14e0301a5eaae878b5ab5980d3e442eebe /174bg/handbook-vitepress/.vitepress/theme/style.css | |
| parent | d723827b91cbe59a7ccbb12942172ed00cc2006e (diff) | |
| download | unnamed-group-1768191b23e2ab224cb584f3301da66db75acdc9.tar unnamed-group-1768191b23e2ab224cb584f3301da66db75acdc9.tar.gz unnamed-group-1768191b23e2ab224cb584f3301da66db75acdc9.tar.bz2 unnamed-group-1768191b23e2ab224cb584f3301da66db75acdc9.tar.xz unnamed-group-1768191b23e2ab224cb584f3301da66db75acdc9.zip | |
replace handbook with vitepress
Diffstat (limited to '174bg/handbook-vitepress/.vitepress/theme/style.css')
| -rw-r--r-- | 174bg/handbook-vitepress/.vitepress/theme/style.css | 284 |
1 files changed, 0 insertions, 284 deletions
diff --git a/174bg/handbook-vitepress/.vitepress/theme/style.css b/174bg/handbook-vitepress/.vitepress/theme/style.css deleted file mode 100644 index 7f01aff..0000000 --- a/174bg/handbook-vitepress/.vitepress/theme/style.css +++ /dev/null @@ -1,284 +0,0 @@ -/* Match the source handbook's justified body text, sized to match - robertsspaceindustries.com's own paragraph tokens (see style-guide JSON - referenced below). RSI's own token says weight 600, but that reads as - uncomfortably heavy/bold across a full page of long-form justified text - (unlike RSI's own short UI copy) - use normal weight instead. */ -.vp-doc p, -.vp-doc li { - text-align: justify; - font-size: 14px; - line-height: 21px; - letter-spacing: 0.14px; - font-weight: 400; -} - -/** - * ============================================================================ - * "HUD" theme - ported from 174bg/manager/public/theme.css so the two - * 174bg sites (manager.174bg.net and handbook.174bg.net) share a look: a - * near-black backdrop with a faint accent grid + radial glow, Sora - * headings/body text, Bai Jamjuree nav/button chrome, and glassy - * accent-bordered panels. Manager has no light mode at all, so this is - * applied unconditionally (see `appearance: "force-dark"` in config.mts) - * rather than scoped to `.dark`. - * - * 2026-07-13: retinted + refonted to align with robertsspaceindustries.com's - * own design tokens (see .gitignored/context.dev/style-guides/ - * robertspaceindustries.com.json, exported from a CSS Stats scan of the live - * site) - a single blue accent (#54adf7) on true black in place of the - * earlier arbitrary navy/cyan pairing, Sora/Bai Jamjuree in place of - * Orbitron/Rajdhani, flat slate-bordered "card" panels in place of - * glass-blur ones, and heading sizes/weights/link treatment matched to - * RSI's own type scale. - * ============================================================================ - */ - -:root { - /* Palette retinted to robertsspaceindustries.com's own design tokens - a - single blue accent on true black instead of the earlier navy/cyan pair. - See .gitignored/context.dev/style-guides/robertspaceindustries.com.json - (exported via a CSS Stats scan of the live site) for the source values: - accent #54adf7, background #000000, text #ffffff, card border #374151. */ - --hud-bg: #000000; - --hud-bg-grid: rgba(84, 173, 247, 0.05); - --hud-panel: rgba(17, 17, 20, 0.75); - --hud-panel-solid: #0a0a0c; - --hud-panel-border: rgba(55, 65, 81, 0.6); - --hud-panel-border-strong: rgba(84, 173, 247, 0.55); - --hud-text: #ffffff; - --hud-text-dim: #9ca3af; - --hud-accent: #54adf7; - --hud-accent-2: color-mix(in srgb, var(--hud-accent) 65%, white); - --hud-row-alt: rgba(84, 173, 247, 0.04); - --hud-shadow-sm: rgba(0, 0, 0, 0.4) 0px 0px 8px 0px; - - /* Map onto VitePress's own theme variables. */ - --vp-font-family-base: "Sora", system-ui, sans-serif; - - --vp-c-bg: var(--hud-bg); - --vp-c-bg-alt: var(--hud-panel-solid); - --vp-c-bg-elv: var(--hud-panel-solid); - --vp-c-bg-soft: var(--hud-panel-solid); - - --vp-c-border: var(--hud-panel-border); - --vp-c-divider: var(--hud-panel-border); - --vp-c-gutter: var(--hud-panel-border); - - --vp-c-text-1: var(--hud-text); - --vp-c-text-2: var(--hud-text-dim); - --vp-c-text-3: var(--hud-text-dim); - - --vp-c-brand-1: var(--hud-accent); - --vp-c-brand-2: var(--hud-accent-2); - --vp-c-brand-3: var(--hud-accent); - --vp-c-brand-soft: rgba(84, 173, 247, 0.16); - - /* VitePress applies these to several nav/sidebar-internal elements (e.g. - `.content-body`, the sidebar curtain) directly, not just the outer - `.VPNavBar`/`.VPSidebar`. Setting them here (rather than force-overriding - just the outer elements with `!important`) keeps every part of the nav - bar - including bits VitePress itself makes transparent around the - title on wide/sidebar layouts - the same glass color instead of a - patchwork of the wrong shade. */ - --vp-nav-bg-color: var(--hud-panel); - --vp-sidebar-bg-color: var(--hud-panel); -} - -/* Faint accent-blue grid + top glow behind the whole site, like the Manager page. */ -html, -body { - background-color: var(--hud-bg); - background-image: - radial-gradient( - ellipse 80% 60% at 50% -10%, - rgba(84, 173, 247, 0.18), - transparent 60% - ), - linear-gradient(var(--hud-bg-grid) 1px, transparent 1px), - linear-gradient(90deg, var(--hud-bg-grid) 1px, transparent 1px); - background-size: - 100% 100%, - 44px 44px, - 44px 44px; - background-attachment: fixed; -} - -/* Nav bar and sidebar become frosted glass panels over that grid. Only blur - on the outer elements - `.content-body` sits *inside* `.VPNavBar`, so - giving it its own `backdrop-filter` too double-blurs the (already blurred) - layer beneath it, which compounds into a flat near-black block instead of - a translucent panel. */ -.VPNavBar, -.VPSidebar { - backdrop-filter: blur(10px); -} - -.VPNavBar { - border-bottom: 1px solid var(--hud-panel-border); - box-shadow: var(--hud-shadow-sm); -} - -.VPSidebar { - border-right: 1px solid var(--hud-panel-border); -} - -/* Bai Jamjuree for nav/sidebar/table chrome, matching the font - robertsspaceindustries.com uses for its own buttons/UI labels. Headings - intentionally do NOT get a separate font here - RSI's style guide uses the - same family for both headings and paragraphs, so they just inherit - --vp-font-family-base (Sora) like the rest of the body copy. */ -.VPNavBarTitle .title, -.VPNavBarMenuLink, -.VPSidebarItem.level-0 > .item .text { - font-family: "Bai Jamjuree", sans-serif; -} - -.VPNavBarTitle .title { - color: var(--hud-accent); - /* Bai Jamjuree (like the Orbitron it replaced) is noticeably wider than - the default font. VitePress gives the title a fixed-width column - matching the sidebar, so shrink the text (and drop the extra - letter-spacing) to fit - otherwise it overflows past its column and - visually overlaps the search box/nav links next to it on wide - (sidebar-visible) layouts. `text-overflow: ellipsis` is a safety net in - case it's ever still too wide (e.g. a longer title in the future). */ - font-size: 0.75rem; - letter-spacing: 0.01em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.VPNavBarMenuLink, -.VPSidebarItem.level-0 > .item .text { - text-transform: uppercase; - letter-spacing: 0.04em; - font-size: 0.8em; -} - -/* Heading sizes/weights matched to robertsspaceindustries.com's own type - scale (h1 64px/72px line-height, h2 24px/29px, h3 20px/24px, h4 18px/22px, - all weight 600 - see the style-guide JSON referenced above). The h1 - gradient-text treatment is kept as a small branding accent (both stops now - share RSI's single accent hue instead of the old unrelated navy/cyan - pairing); the large colored text-shadow glow was dropped since RSI's own - shadow scale has nothing that dramatic - its only real shadow token is a - small, black, 8px-blur one (see --hud-shadow-sm above). h2/h3/h4 also drop - the uppercase-accent-color treatment in favor of RSI's plain white - headings. */ -.vp-doc h1 { - font-weight: 600; - letter-spacing: 0.01em; - line-height: 1.2; - font-size: 2.25rem; - background: linear-gradient(120deg, var(--hud-accent), var(--hud-accent-2)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -@media (min-width: 768px) { - .vp-doc h1 { - font-size: 64px; - line-height: 72px; - } -} - -.vp-doc h2 { - font-size: 24px; - line-height: 29px; - letter-spacing: 0; - font-weight: 600; -} - -.vp-doc h3 { - font-size: 20px; - line-height: 24px; - letter-spacing: 0; - font-weight: 600; -} - -.vp-doc h4 { - font-size: 18px; - line-height: 22px; - letter-spacing: 0; - font-weight: 600; -} - -/* robertsspaceindustries.com's own "link" component is just white text with - a permanent underline (not a distinct accent color) - VitePress's default - theme already gives .vp-doc a a permanent underline, so this only needs to - recolor it (white at rest, accent on hover) rather than reimplementing the - underline-on-hover-only treatment this used to have. */ -.vp-doc a:not(.header-anchor) { - color: var(--hud-text); -} - -.vp-doc a:not(.header-anchor):hover { - color: var(--hud-accent); -} - -/* Ranks table styled like Manager's data tables. */ -.vp-doc table { - border-collapse: collapse; -} - -.vp-doc thead th { - font-family: "Bai Jamjuree", sans-serif; - font-size: 0.68rem; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--hud-accent); - border-bottom: 2px solid var(--hud-panel-border-strong); -} - -.vp-doc tbody tr:nth-child(even) { - background: var(--hud-row-alt); -} - -.vp-doc tbody tr:hover { - background: rgba(84, 173, 247, 0.1); -} - -/** - * Role "Prerequisites" lists use a `::: info` container. robertsspaceindustries.com's - * own "card" component is a flat solid-black panel with a plain slate border - * and no blur/shadow (unlike the glass-panel treatment used elsewhere in - * this theme) - match that here instead of VitePress's default boxed - * callout. VitePress's own `.custom-block` already sets an 8px border-radius, - * which happens to match RSI's card radius exactly, so it's left alone. - */ -.custom-block.info { - background: var(--hud-bg); - border: 1px solid var(--hud-panel-border); - color: var(--hud-text); -} - -.custom-block.info .custom-block-title { - font-family: "Bai Jamjuree", sans-serif; - font-size: 0.75rem; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--hud-accent); -} - -/** - * The local search modal's input row (`.search-bar`) has a border but no - * background of its own by default, so it blends into the modal shell - * behind it and barely reads as a distinct field. Give it its own panel - * shade to match the rest of the HUD chrome. - */ -.VPLocalSearchBox .search-bar { - background-color: var(--hud-panel-solid); -} - -/** - * Same problem for the collapsed search button that sits in the top bar: - * VitePress gives it `background-color: var(--vp-c-bg-alt)` (the same solid - * navy as the button in the modal) but only adds a visible border on hover, - * so at rest it barely stands out against the nav bar's translucent glass - * behind it. Add a persistent border to match the rest of the HUD chrome. - */ -.DocSearch-Button { - border-color: var(--hud-panel-border); -} |
