aboutsummaryrefslogtreecommitdiff
path: root/174bg/handbook-vitepress/.vitepress/theme/style.css
diff options
context:
space:
mode:
authorAlex Pooley (@zuedev) <zuedev@gmail.com>2026-07-16 16:48:48 +0100
committerAlex Pooley (@zuedev) <zuedev@gmail.com>2026-07-16 16:48:48 +0100
commit1768191b23e2ab224cb584f3301da66db75acdc9 (patch)
tree4a072e14e0301a5eaae878b5ab5980d3e442eebe /174bg/handbook-vitepress/.vitepress/theme/style.css
parentd723827b91cbe59a7ccbb12942172ed00cc2006e (diff)
downloadunnamed-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.css284
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);
-}