From 238d68d063f8c0d728085bfdaba1031d9b60f7cb Mon Sep 17 00:00:00 2001 From: Jennie Robinson Faber Date: Thu, 2 Apr 2026 21:04:25 +0100 Subject: [PATCH] feat: replace design system tokens with zine direction palette and typography --- app/app.config.ts | 10 +- app/assets/css/fonts.css | 47 +-- app/assets/css/main.css | 729 ++++++++------------------------------- nuxt.config.ts | 16 + 4 files changed, 173 insertions(+), 629 deletions(-) diff --git a/app/app.config.ts b/app/app.config.ts index 60b0d47..33f8b68 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -4,15 +4,9 @@ export default defineAppConfig({ primary: "amber", neutral: "stone", }, - formField: { - slots: { - label: "block font-medium text-[--ui-text-dimmed]", - }, - }, }, colorMode: { - preference: "system", // default value of $colorMode.preference - fallback: "dark", // fallback value if not system preference found - classSuffix: "", // default is '', set to '-mode' to have 'dark-mode' and 'light-mode' + preference: "light", + fallback: "light", }, }); diff --git a/app/assets/css/fonts.css b/app/assets/css/fonts.css index b999284..9b5bae6 100644 --- a/app/assets/css/fonts.css +++ b/app/assets/css/fonts.css @@ -1,47 +1,8 @@ /* - * Font declarations for Ghost Guild + * Font declarations for Ghost Guild — Zine Direction * - * Quietism: Display/heading font (serif) - * Place woff2 files in public/fonts/ - * Expected files: Quietism-Regular.woff2, Quietism-Medium.woff2, - * Quietism-Bold.woff2, Quietism-Italic.woff2 + * Brygada 1918: Display/heading serif (Google Fonts, variable 400-700, italic) + * Commit Mono: Body/UI monospace (Google Fonts) * - * Inter and Ubuntu Mono are loaded via @nuxt/fonts module. - * See nuxt.config.ts for configuration. + * Loaded via Google Fonts link in nuxt.config.ts head. */ - -/* @font-face declarations commented out until .woff2 files are added to public/fonts/ - Uncomment these when Quietism font files are available: - -@font-face { - font-family: "Quietism"; - src: url("/fonts/Quietism-Regular.woff2") format("woff2"); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "Quietism"; - src: url("/fonts/Quietism-Medium.woff2") format("woff2"); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "Quietism"; - src: url("/fonts/Quietism-Bold.woff2") format("woff2"); - font-weight: 700; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "Quietism"; - src: url("/fonts/Quietism-Italic.woff2") format("woff2"); - font-weight: 400; - font-style: italic; - font-display: swap; -} -*/ diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 9a1f847..c0235f1 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -1,615 +1,188 @@ /* - * Ghost Guild Design System - * ======================== + * Ghost Guild Design System — Zine Direction + * ============================================ * - * Token naming convention: - * --color-{palette}-{shade} Color palettes (50-950 scale) - * --color-circle-{name}-{variant} Circle-specific tokens - * --font-{role} Font family tokens - * --text-{scale} Typographic scale - * --leading-{role} Line heights - * --tracking-{role} Letter spacing - * - * Palettes: - * guild-* Warm neutral ground (dark hall / workshop) - * candlelight-* Primary warm accent (amber/gold/ochre) - * parchment-* Light content surfaces (cream/vellum) - * ember-* Secondary warm accent (deeper amber/rust) - * earth-* Tertiary muted tones (brown/ochre) - * - * Usage guidelines: - * Backgrounds: guild-900/950 (dark), parchment-50/100 (light surfaces) - * Text primary: guild-100 (dark mode), guild-900 (light mode) - * Text secondary: guild-300/400 - * Borders: guild-700 (dark), guild-300 (light) - * Accents: candlelight-* for links, highlights, interactive - * Surfaces: parchment-* for readable content areas - * - * Effect classes: - * .ink-grain Subtle noise overlay (mix-blend-mode: overlay) - * .paper-texture Paper fiber overlay - * .woodcut-border Irregular line border via border-image - * .candlelight-glow Warm box-shadow (replaces .ethereal-glow) - * .warm-text Warm text-shadow (replaces .ethereal-text) - * .guild-stamp Circular decorative double-border frame - * .halftone-texture Dot pattern overlay (updated for warm palette) - * .dithered-bg Cross-hatch dither pattern - * .dithered-warm Amber-tinted dither variant - * .prose-guild Wiki/long-form content styling + * Two fonts: Brygada 1918 (display/serif), Commit Mono (body/mono) + * Dashed borders, cream backgrounds, content-dense zine layout + * Single palette via CSS custom properties, minimal Tailwind @theme mapping */ @import "./fonts.css"; @import "tailwindcss"; @import "@nuxt/ui"; -@plugin "@tailwindcss/typography"; +/* ---- COLOR TOKENS ---- */ -@theme { - /* Font families */ - --font-sans: "Inter", sans-serif; - --font-body: "Inter", sans-serif; - --font-mono: "Ubuntu Mono", monospace; - --font-display: "Georgia", serif; - --font-serif: "Georgia", serif; - - /* Guild - warm neutral ground (light mode: dark values for text on light bg) */ - --color-guild-50: #1a1510; - --color-guild-100: #2a241c; - --color-guild-200: #3a332a; - --color-guild-300: #524939; - --color-guild-400: #6b5f4d; - --color-guild-500: #8a7c68; - --color-guild-600: #a49585; - --color-guild-700: #bfb3a2; - --color-guild-800: #d9d0c3; - --color-guild-900: #f0ebe4; - --color-guild-950: #f8f5f0; - - /* Candlelight - primary warm accent (amber/gold/ochre) */ - --color-candlelight-50: #1f1708; - --color-candlelight-100: #3d2c0f; - --color-candlelight-200: #5c4118; - --color-candlelight-300: #7b5822; - --color-candlelight-400: #9a6f2c; - --color-candlelight-500: #b8873a; - --color-candlelight-600: #d09e4e; - --color-candlelight-700: #e0b86e; - --color-candlelight-800: #ecd09a; - --color-candlelight-900: #f5e6c5; - --color-candlelight-950: #faf2e0; - - /* Parchment - light content surfaces (cream/vellum) */ - --color-parchment-50: #1d1a14; - --color-parchment-100: #332e24; - --color-parchment-200: #4a4234; - --color-parchment-300: #635844; - --color-parchment-400: #7d6e56; - --color-parchment-500: #97866c; - --color-parchment-600: #afa088; - --color-parchment-700: #c8baa5; - --color-parchment-800: #ddd3c3; - --color-parchment-900: #f0ebe0; - --color-parchment-950: #f9f6f0; - - /* Ember - secondary warm accent (deeper amber/rust) */ - --color-ember-50: #1e120b; - --color-ember-100: #3b2215; - --color-ember-200: #58321f; - --color-ember-300: #76432a; - --color-ember-400: #945535; - --color-ember-500: #b26840; - --color-ember-600: #c87e55; - --color-ember-700: #da9a72; - --color-ember-800: #e8b899; - --color-ember-900: #f3d6c0; - --color-ember-950: #f9ebe0; - - /* Earth - tertiary muted tones (brown/ochre) */ - --color-earth-50: #17140e; - --color-earth-100: #2d271c; - --color-earth-200: #433a2a; - --color-earth-300: #5a4d39; - --color-earth-400: #726148; - --color-earth-500: #8a7658; - --color-earth-600: #a08c6d; - --color-earth-700: #b7a487; - --color-earth-800: #cebda4; - --color-earth-900: #e5d7c2; - --color-earth-950: #f2ece1; +:root { + --bg: #f4efe4; + --surface: #e8dfc8; + --surface-hover: #e0d6bc; + --border: #b8a880; + --border-d: #a89470; + --candle: #7a5a10; + --candle-dim: #9a7420; + --candle-faint: #c4a448; + --ember: #8a4420; + --text: #2a2015; + --text-bright: #1a1008; + --text-dim: #5a5040; + --text-faint: #8a7e6a; + --parch: #2a2015; + --parch-text: #ede4d0; + --c-community: #7a4838; + --c-founder: #8a4420; + --c-practitioner: #2a4650; + --green: #4a6a38; + --green-bg: rgba(74, 106, 56, 0.08); } .dark { - /* Guild - warm neutral (dark mode: light values) */ - --color-guild-50: #f0ebe4; - --color-guild-100: #d9d0c3; - --color-guild-200: #bfb3a2; - --color-guild-300: #a49585; - --color-guild-400: #8a7c68; - --color-guild-500: #6b5f4d; - --color-guild-600: #524939; - --color-guild-700: #3a332a; - --color-guild-800: #2a241c; - --color-guild-900: #1a1510; - --color-guild-950: #110e0a; - - /* Candlelight - primary warm accent (dark mode) */ - --color-candlelight-50: #faf2e0; - --color-candlelight-100: #f5e6c5; - --color-candlelight-200: #ecd09a; - --color-candlelight-300: #e0b86e; - --color-candlelight-400: #d09e4e; - --color-candlelight-500: #b8873a; - --color-candlelight-600: #9a6f2c; - --color-candlelight-700: #7b5822; - --color-candlelight-800: #5c4118; - --color-candlelight-900: #3d2c0f; - --color-candlelight-950: #1f1708; - - /* Parchment - light content surfaces (dark mode) */ - --color-parchment-50: #f9f6f0; - --color-parchment-100: #f0ebe0; - --color-parchment-200: #ddd3c3; - --color-parchment-300: #c8baa5; - --color-parchment-400: #afa088; - --color-parchment-500: #97866c; - --color-parchment-600: #7d6e56; - --color-parchment-700: #635844; - --color-parchment-800: #4a4234; - --color-parchment-900: #332e24; - --color-parchment-950: #1d1a14; - - /* Ember - secondary warm accent (dark mode) */ - --color-ember-50: #f9ebe0; - --color-ember-100: #f3d6c0; - --color-ember-200: #e8b899; - --color-ember-300: #da9a72; - --color-ember-400: #c87e55; - --color-ember-500: #b26840; - --color-ember-600: #945535; - --color-ember-700: #76432a; - --color-ember-800: #58321f; - --color-ember-900: #3b2215; - --color-ember-950: #1e120b; - - /* Earth - tertiary muted tones (dark mode) */ - --color-earth-50: #f2ece1; - --color-earth-100: #e5d7c2; - --color-earth-200: #cebda4; - --color-earth-300: #b7a487; - --color-earth-400: #a08c6d; - --color-earth-500: #8a7658; - --color-earth-600: #726148; - --color-earth-700: #5a4d39; - --color-earth-800: #433a2a; - --color-earth-900: #2d271c; - --color-earth-950: #17140e; + --bg: #131210; + --surface: #1a1815; + --surface-hover: #252220; + --border: #2a2520; + --border-d: #3a3530; + --candle: #d4a03a; + --candle-dim: #b8922e; + --candle-faint: #8a7030; + --ember: #c06030; + --text: #a89880; + --text-bright: #d0c8b0; + --text-dim: #8a7e6a; + --text-faint: #5a5040; + --parch: #ede4d0; + --parch-text: #2a2015; + --c-community: #a06850; + --c-founder: #c06030; + --c-practitioner: #4a7080; } -/* Circle-specific tokens */ -:root { - /* Community - warm hearth amber */ - --color-circle-community: #b8873a; - --color-circle-community-light: #e0b86e; - --color-circle-community-dark: #7b5822; - --color-circle-community-bg: rgba(184, 135, 58, 0.1); +/* ---- TAILWIND @THEME MAPPING ---- */ - /* Founder - forge copper/orange */ - --color-circle-founder: #b26840; - --color-circle-founder-light: #da9a72; - --color-circle-founder-dark: #76432a; - --color-circle-founder-bg: rgba(178, 104, 64, 0.1); +@theme { + --font-sans: 'Commit Mono', monospace; + --font-body: 'Commit Mono', monospace; + --font-mono: 'Commit Mono', monospace; + --font-display: 'Brygada 1918', serif; + --font-serif: 'Brygada 1918', serif; - /* Practitioner - sage green (growth, wisdom, mentorship) */ - --color-circle-practitioner: #6b7c58; - --color-circle-practitioner-light: #8fa47a; - --color-circle-practitioner-dark: #4a5a39; - --color-circle-practitioner-bg: rgba(107, 124, 88, 0.1); - - /* Typographic scale */ - --text-display-xl: 3.5rem; - --text-display-lg: 2.5rem; - --text-display: 2rem; - --text-display-sm: 1.5rem; - --text-body-lg: 1.125rem; - --text-body: 1rem; - --text-body-sm: 0.875rem; - --text-caption: 0.75rem; - --text-overline: 0.6875rem; - - /* Line heights */ - --leading-display: 1.15; - --leading-body: 1.65; - - /* Letter spacing */ - --tracking-display: -0.02em; - --tracking-wide: 0.05em; - - /* Ambient background - warm radial gradients */ - --ambient-bg: - radial-gradient( - circle at 20% 80%, - rgba(184, 135, 58, 0.03) 0%, - transparent 50% - ), - radial-gradient( - circle at 80% 20%, - rgba(178, 104, 64, 0.02) 0%, - transparent 50% - ), - radial-gradient( - circle at 40% 40%, - rgba(138, 118, 88, 0.01) 0%, - transparent 50% - ); - - --halftone-pattern: radial-gradient( - circle, - rgba(42, 36, 28, 0.1) 1px, - transparent 1px - ); - --halftone-size: 8px 8px; + /* Map primary to candle for Nuxt UI components */ + --color-primary-500: var(--candle); + --color-primary-600: var(--candle-dim); + --color-primary-400: var(--candle-faint); } -/* Dark mode - doubled opacity for perceptible candlelight warmth */ -.dark:root { - --ambient-bg: - radial-gradient( - circle at 20% 80%, - rgba(224, 184, 110, 0.06) 0%, - transparent 50% - ), - radial-gradient( - circle at 80% 20%, - rgba(218, 154, 114, 0.04) 0%, - transparent 50% - ), - radial-gradient( - circle at 50% 50%, - rgba(183, 164, 135, 0.02) 0%, - transparent 60% - ); - - --halftone-pattern: radial-gradient( - circle, - rgba(240, 235, 228, 0.1) 1px, - transparent 1px - ); -} - -html { - @apply text-[--ui-text]; -} +/* ---- BASE STYLES ---- */ body { - background: var(--ambient-bg), #f0ebe4; - background-attachment: fixed; + background: var(--bg); + color: var(--text); + font-family: 'Commit Mono', monospace; + font-size: 13px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; } -.dark body { - background: var(--ambient-bg), #1a1510; -} +a { color: var(--candle); text-decoration: none; } +a:hover { text-decoration: underline; } -/* Display typography utilities */ -.text-display-xl { - font-family: var(--font-display); - font-size: var(--text-display-xl); - line-height: var(--leading-display); - letter-spacing: var(--tracking-display); -} - -.text-display-lg { - font-family: var(--font-display); - font-size: var(--text-display-lg); - line-height: var(--leading-display); - letter-spacing: var(--tracking-display); -} - -.text-display { - font-family: var(--font-display); - font-size: var(--text-display); - line-height: var(--leading-display); - letter-spacing: var(--tracking-display); -} - -.text-display-sm { - font-family: var(--font-display); - font-size: var(--text-display-sm); - line-height: var(--leading-display); - letter-spacing: var(--tracking-display); -} - -/* Halftone texture overlay */ -.halftone-texture { - position: relative; -} - -.halftone-texture::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--halftone-pattern); - background-size: var(--halftone-size); - opacity: 0.1; - pointer-events: none; -} - -/* Craft/Material Effects */ - -/* Warm box-shadow (replaces .ethereal-glow) */ -.candlelight-glow { - box-shadow: - 0 0 20px rgba(184, 135, 58, 0.12), - 0 0 40px rgba(184, 135, 58, 0.06), - inset 0 1px 0 rgba(240, 235, 228, 0.08); -} - -/* Warm text-shadow (replaces .ethereal-text) */ -.warm-text { - text-shadow: 0 0 10px rgba(224, 184, 110, 0.25); -} - -/* Subtle noise overlay - SVG filter based, no image dependency */ -.ink-grain { - position: relative; -} - -.ink-grain::before { - content: ""; - position: absolute; - inset: 0; - filter: url(#grain-fine); - mix-blend-mode: overlay; - opacity: 0.04; - pointer-events: none; - z-index: 1; -} - -/* Paper fiber overlay - SVG filter based */ -.paper-texture { - position: relative; -} - -.paper-texture::before { - content: ""; - position: absolute; - inset: 0; - filter: url(#grain-paper); - opacity: 0.04; - pointer-events: none; - z-index: 1; -} - -/* Generic grain overlay utility */ -.texture-grain-overlay { - position: relative; -} - -.texture-grain-overlay::after { - content: ""; - position: absolute; - inset: 0; - filter: url(#grain-fine); - opacity: 0.035; - mix-blend-mode: overlay; - pointer-events: none; - z-index: 1; -} - -/* Irregular line border */ -.woodcut-border { - border-image: repeating-linear-gradient( - 90deg, - var(--color-guild-700) 0px, - var(--color-guild-600) 2px, - var(--color-guild-700) 3px, - transparent 3px, - transparent 6px - ) 4; -} - -/* Circular decorative frame */ -.guild-stamp { - border: 2px solid var(--color-candlelight-600); - outline: 2px solid var(--color-candlelight-700); - outline-offset: 3px; - border-radius: 50%; -} - -/* Warm interior feel for content areas - enclosed, lit space */ -.guild-interior { - background: - linear-gradient(180deg, rgba(26, 21, 16, 0.2) 0%, transparent 200px), - var(--ambient-bg); - box-shadow: - inset 0 2px 12px rgba(26, 21, 16, 0.12), - inset 0 0 60px rgba(26, 21, 16, 0.04); -} - -/* Dithered gradients */ -.dithered-bg { - background: - linear-gradient(45deg, var(--color-guild-800) 25%, transparent 25%), - linear-gradient(-45deg, var(--color-guild-800) 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, var(--color-guild-700) 75%), - linear-gradient(-45deg, transparent 75%, var(--color-guild-700) 75%); - background-size: 4px 4px; - background-position: - 0 0, - 0 2px, - 2px -2px, - -2px 0px; -} - -/* Amber-tinted dither variant */ -.dithered-warm { - background: - linear-gradient(45deg, var(--color-candlelight-800) 25%, transparent 25%), - linear-gradient(-45deg, var(--color-candlelight-800) 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, var(--color-candlelight-700) 75%), - linear-gradient(-45deg, transparent 75%, var(--color-candlelight-700) 75%); - background-size: 4px 4px; - background-position: - 0 0, - 0 2px, - 2px -2px, - -2px 0px; -} - -/* Fine dither - 2px, subtle surface texture */ -.dithered-fine { - background-image: - linear-gradient(45deg, var(--color-guild-700) 25%, transparent 25%), - linear-gradient(-45deg, var(--color-guild-700) 25%, transparent 25%); - background-size: 2px 2px; -} - -/* Dither fade - gradient from dithered to solid */ -.dithered-fade-top { - background-image: - repeating-linear-gradient( - 0deg, - var(--color-guild-800) 0px, - var(--color-guild-800) 1px, - transparent 1px, - transparent 3px - ); - mask-image: linear-gradient(to bottom, black, transparent); - -webkit-mask-image: linear-gradient(to bottom, black, transparent); -} - -.dithered-fade-bottom { - background-image: - repeating-linear-gradient( - 0deg, - var(--color-guild-800) 0px, - var(--color-guild-800) 1px, - transparent 1px, - transparent 3px - ); - mask-image: linear-gradient(to top, black, transparent); - -webkit-mask-image: linear-gradient(to top, black, transparent); -} - -/* Circle badge utilities */ -.circle-badge-community { - background-color: var(--color-circle-community-bg); - color: var(--color-circle-community-light); - border: 1px solid color-mix(in srgb, var(--color-circle-community) 40%, transparent); -} - -.circle-badge-founder { - background-color: var(--color-circle-founder-bg); - color: var(--color-circle-founder-light); - border: 1px solid color-mix(in srgb, var(--color-circle-founder) 40%, transparent); -} - -.circle-badge-practitioner { - background-color: var(--color-circle-practitioner-bg); - color: var(--color-circle-practitioner-light); - border: 1px solid color-mix(in srgb, var(--color-circle-practitioner) 40%, transparent); -} - -/* Circle surface treatments - subtle background for circle-specific sections */ -.circle-surface-community { - background-color: var(--color-circle-community-bg); -} - -.circle-surface-founder { - background-color: var(--color-circle-founder-bg); -} - -.circle-surface-practitioner { - background-color: var(--color-circle-practitioner-bg); -} - -/* Parchment surface for elevated content panels */ -.parchment-surface { - background-color: var(--color-parchment-950); - border: 1px solid var(--color-parchment-800); -} - -.dark .parchment-surface { - background-color: var(--color-guild-800); - border-color: var(--color-guild-700); -} - -/* UI typography utilities */ -.text-ui-label { - font-family: var(--font-mono); - font-size: var(--text-overline); - letter-spacing: var(--tracking-wide); +/* ---- SECTION LABELS ---- */ +.section-label { + font-size: 10px; + letter-spacing: 0.1em; text-transform: uppercase; + color: var(--text-faint); + margin-bottom: 10px; } -.text-ui-mono { - font-family: var(--font-mono); - font-size: var(--text-body-sm); +/* ---- CIRCLE BADGES (dashed) ---- */ +.badge { + display: inline-block; + font-size: 10px; + letter-spacing: 0.06em; + text-transform: uppercase; + padding: 2px 8px; + border: 1px dashed; +} +.badge.community { color: var(--c-community); border-color: rgba(122, 72, 56, 0.35); } +.badge.founder { color: var(--c-founder); border-color: rgba(138, 68, 32, 0.35); } +.badge.practitioner { color: var(--c-practitioner); border-color: rgba(42, 70, 80, 0.35); } +.badge.all { color: var(--text-dim); border-color: var(--border); } + +/* ---- BUTTONS ---- */ +.btn { + font-family: 'Commit Mono', monospace; + font-size: 12px; + padding: 7px 18px; + border: 1px dashed var(--border); + background: var(--bg); + color: var(--text); + cursor: pointer; + letter-spacing: 0.04em; + transition: all 0.15s; +} +.btn:hover { background: var(--surface-hover); border-color: var(--border-d); } +.btn-primary { + background: var(--candle); + color: var(--bg); + border-color: var(--candle); + border-style: solid; +} +.btn-primary:hover { background: var(--candle-dim); border-color: var(--candle-dim); } +.btn-danger { + color: var(--ember); + border-color: var(--ember); +} +.btn-danger:hover { + background: var(--ember); + color: var(--bg); + border-style: solid; } -/* Illustration integration utilities */ -.guild-illustration { - max-width: 100%; - height: auto; - filter: drop-shadow(0 0 20px rgba(184, 135, 58, 0.08)); +/* ---- FORM FIELDS ---- */ +.field { margin-bottom: 12px; } +.field label { + font-size: 10px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-faint); + margin-bottom: 3px; + display: block; +} +.field input, .field select, .field textarea { + width: 100%; + padding: 5px 8px; + font-family: 'Commit Mono', monospace; + font-size: 13px; + color: var(--text-bright); + background: var(--bg); + border: 1px dashed var(--border); + outline: none; +} +.field input:focus, .field select:focus, .field textarea:focus { + border-color: var(--candle); + border-style: solid; } -.guild-illustration-adaptive { - color: var(--color-guild-300); +/* ---- DASHED BOX ---- */ +.dashed-box { + border: 1px dashed var(--border); + padding: 20px 24px; + transition: border-color 0.2s; +} +.dashed-box:hover { border-color: var(--candle-faint); } +.dashed-box.no-hover:hover { border-color: var(--border); } + +/* ---- SECTION DIVIDERS ---- */ +.section-divider { + border: none; + border-top: 1px dashed var(--border); + margin: 20px 0 14px; } -.dark .guild-illustration-adaptive { - color: var(--color-guild-600); -} - -/* Prose overrides for guild wiki/long-form content */ -.prose-guild { - max-width: 72ch; -} - -.prose-guild h1, -.prose-guild h2, -.prose-guild h3, -.prose-guild h4 { - font-family: var(--font-display); - letter-spacing: var(--tracking-display); -} - -.prose-guild a { - color: var(--color-candlelight-600); - text-decoration-color: var(--color-candlelight-700); - text-underline-offset: 3px; -} - -.prose-guild a:hover { - color: var(--color-candlelight-500); - text-decoration-color: var(--color-candlelight-500); -} - -.prose-guild blockquote { - background-color: var(--color-parchment-900); - border-left-color: var(--color-candlelight-600); - border-left-width: 3px; - padding: 1rem 1.5rem; - border-radius: 0 0.5rem 0.5rem 0; -} - -.dark .prose-guild blockquote { - background-color: var(--color-parchment-900); - border-left-color: var(--color-candlelight-500); -} - -/* Mobile responsive utilities */ +/* ---- MOBILE ---- */ @media (max-width: 1023px) { - /* Prevent horizontal scroll on mobile */ body { overflow-x: hidden; } - - /* Adjust halftone pattern for mobile */ - .halftone-texture::before { - background-size: 6px 6px; - } } diff --git a/nuxt.config.ts b/nuxt.config.ts index 6d87e6f..041d33d 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -3,6 +3,22 @@ export default defineNuxtConfig({ compatibilityDate: "2025-07-15", devtools: { enabled: process.env.NODE_ENV !== "production" }, modules: ["@nuxt/eslint", "@nuxt/ui", "@nuxtjs/plausible"], + app: { + head: { + link: [ + { rel: "preconnect", href: "https://fonts.googleapis.com" }, + { + rel: "preconnect", + href: "https://fonts.gstatic.com", + crossorigin: "", + }, + { + rel: "stylesheet", + href: "https://fonts.googleapis.com/css2?family=Brygada+1918:ital,wght@0,400..700;1,400..700&family=Commit+Mono&display=swap", + }, + ], + }, + }, build: { transpile: ["vue-cal"], },