diff options
Diffstat (limited to 'doc/docs/.vitepress/theme/custom.css')
| -rw-r--r-- | doc/docs/.vitepress/theme/custom.css | 61 |
1 files changed, 33 insertions, 28 deletions
diff --git a/doc/docs/.vitepress/theme/custom.css b/doc/docs/.vitepress/theme/custom.css index 3cf51d7..4050784 100644 --- a/doc/docs/.vitepress/theme/custom.css +++ b/doc/docs/.vitepress/theme/custom.css | |||
| @@ -1,19 +1,21 @@ | |||
| 1 | @import '@fontsource/merriweather/400.css'; | 1 | @import "@fontsource/merriweather/400.css"; |
| 2 | @import '@fontsource/merriweather/700.css'; | 2 | @import "@fontsource/merriweather/700.css"; |
| 3 | @import '@fontsource/merriweather/900.css'; | 3 | @import "@fontsource/merriweather/900.css"; |
| 4 | @import '@fontsource/merriweather/400-italic.css'; | 4 | @import "@fontsource/merriweather/400-italic.css"; |
| 5 | @import '@fontsource/merriweather/700-italic.css'; | 5 | @import "@fontsource/merriweather/700-italic.css"; |
| 6 | @import '@fontsource/merriweather/900-italic.css'; | 6 | @import "@fontsource/merriweather/900-italic.css"; |
| 7 | 7 | ||
| 8 | @import '@fontsource/noto-serif-sc/400.css'; | 8 | @import "@fontsource/noto-serif-sc/400.css"; |
| 9 | @import '@fontsource/noto-serif-sc/700.css'; | 9 | @import "@fontsource/noto-serif-sc/700.css"; |
| 10 | @import '@fontsource/noto-serif-sc/900.css'; | 10 | @import "@fontsource/noto-serif-sc/900.css"; |
| 11 | 11 | ||
| 12 | :root { | 12 | :root { |
| 13 | /* --- TYPOGRAPHY --- */ | 13 | /* --- TYPOGRAPHY --- */ |
| 14 | /* Keep standard sans-serif for body text for readability */ | 14 | /* Keep standard sans-serif for body text for readability */ |
| 15 | --vp-font-family-base: system-ui, sans-serif; | 15 | --vp-font-family-base: system-ui, sans-serif; |
| 16 | --vp-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | 16 | --vp-font-family-mono: |
| 17 | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", | ||
| 18 | "Courier New", monospace; | ||
| 17 | 19 | ||
| 18 | /* --- BRAND COLORS (Original Moon Gold) --- */ | 20 | /* --- BRAND COLORS (Original Moon Gold) --- */ |
| 19 | --vp-c-brand-1: #b4ac8f; | 21 | --vp-c-brand-1: #b4ac8f; |
| @@ -27,11 +29,11 @@ | |||
| 27 | 29 | ||
| 28 | /* --- LIGHT MODE THEME --- */ | 30 | /* --- LIGHT MODE THEME --- */ |
| 29 | /* A warmer, "creamy" paper feel instead of harsh white */ | 31 | /* A warmer, "creamy" paper feel instead of harsh white */ |
| 30 | --vp-c-bg: #FDFBF7; | 32 | --vp-c-bg: #fdfbf7; |
| 31 | --vp-c-bg-soft: #F7F5F0; | 33 | --vp-c-bg-soft: #f7f5f0; |
| 34 | |||
| 32 | /* Slightly darker for sidebars */ | 35 | /* Slightly darker for sidebars */ |
| 33 | --vp-c-bg-alt: #F0EDE5; | 36 | --vp-c-bg-alt: #f0ede5; |
| 34 | /* For code blocks/inputs */ | ||
| 35 | 37 | ||
| 36 | /* Text Colors: Deep Navy instead of pure black for softer contrast */ | 38 | /* Text Colors: Deep Navy instead of pure black for softer contrast */ |
| 37 | --vp-c-text-1: #1a202c; | 39 | --vp-c-text-1: #1a202c; |
| @@ -44,6 +46,7 @@ | |||
| 44 | width: 450px !important; | 46 | width: 450px !important; |
| 45 | } | 47 | } |
| 46 | } | 48 | } |
| 49 | |||
| 47 | .VPHero :deep(.image-src) { | 50 | .VPHero :deep(.image-src) { |
| 48 | max-width: 450px; | 51 | max-width: 450px; |
| 49 | max-height: 450px; | 52 | max-height: 450px; |
| @@ -52,20 +55,20 @@ | |||
| 52 | /* --- DARK MODE THEME (Midnight Blue) --- */ | 55 | /* --- DARK MODE THEME (Midnight Blue) --- */ |
| 53 | .dark { | 56 | .dark { |
| 54 | /* Deep Midnight Blue background (replaces standard grey) */ | 57 | /* Deep Midnight Blue background (replaces standard grey) */ |
| 55 | --vp-c-bg: #0B0E14; | 58 | --vp-c-bg: #0b0e14; |
| 56 | --vp-c-bg-soft: #131722; | 59 | --vp-c-bg-soft: #131722; |
| 60 | |||
| 57 | /* Sidebar/Nav */ | 61 | /* Sidebar/Nav */ |
| 58 | --vp-c-bg-alt: #1A1F2E; | 62 | --vp-c-bg-alt: #1a1f2e; |
| 59 | /* Code blocks/inputs */ | ||
| 60 | 63 | ||
| 61 | /* Text Colors: Moonlight Silver */ | 64 | /* Text Colors: Moonlight Silver */ |
| 62 | --vp-c-text-1: #E2E8F0; | 65 | --vp-c-text-1: #e2e8f0; |
| 63 | --vp-c-text-2: #94A3B8; | 66 | --vp-c-text-2: #94a3b8; |
| 64 | 67 | ||
| 65 | /* Adjust border colors to blend with blue, not grey */ | 68 | /* Adjust border colors to blend with blue, not grey */ |
| 66 | --vp-c-border: #1E293B; | 69 | --vp-c-border: #1e293b; |
| 67 | --vp-c-divider: #1E293B; | 70 | --vp-c-divider: #1e293b; |
| 68 | --vp-c-gutter: #1E293B; | 71 | --vp-c-gutter: #1e293b; |
| 69 | } | 72 | } |
| 70 | 73 | ||
| 71 | /* --- HEADINGS: Apply the Serif Font --- */ | 74 | /* --- HEADINGS: Apply the Serif Font --- */ |
| @@ -78,16 +81,19 @@ h6, | |||
| 78 | .VPFeature .title, | 81 | .VPFeature .title, |
| 79 | .VPHero .name, | 82 | .VPHero .name, |
| 80 | .VPNavBarTitle .title { | 83 | .VPNavBarTitle .title { |
| 81 | font-family: 'Merriweather', 'Noto Serif SC', serif !important; | 84 | font-family: "Merriweather", "Noto Serif SC", serif !important; |
| 82 | letter-spacing: -0.02em; | 85 | letter-spacing: -0.02em; |
| 83 | /* Tighter tracking looks more professional on serifs */ | 86 | /* Tighter tracking looks more professional on serifs */ |
| 84 | } | 87 | } |
| 85 | 88 | ||
| 89 | .VPNavBarTitle .title { | ||
| 90 | font-size: 1.1rem; | ||
| 91 | } | ||
| 92 | |||
| 86 | /* Make the Hero Title (YueScript) feel more "Editorial" */ | 93 | /* Make the Hero Title (YueScript) feel more "Editorial" */ |
| 87 | .VPHero .name { | 94 | .VPHero .name { |
| 88 | font-weight: 900 !important; | 95 | font-weight: 900 !important; |
| 89 | color: var(--vp-c-brand-1); | 96 | color: var(--vp-c-brand-1); |
| 90 | /* Optional: Adds a subtle glow in dark mode */ | ||
| 91 | text-shadow: 0 0 20px rgba(180, 172, 143, 0.2); | 97 | text-shadow: 0 0 20px rgba(180, 172, 143, 0.2); |
| 92 | } | 98 | } |
| 93 | 99 | ||
| @@ -103,7 +109,6 @@ h6, | |||
| 103 | background-color: var(--vp-c-brand-1) !important; | 109 | background-color: var(--vp-c-brand-1) !important; |
| 104 | } | 110 | } |
| 105 | 111 | ||
| 106 | |||
| 107 | /* Prism theme for YueCompiler output (shikijs/themes light-plus & dark-plus) */ | 112 | /* Prism theme for YueCompiler output (shikijs/themes light-plus & dark-plus) */ |
| 108 | .code-output, | 113 | .code-output, |
| 109 | .code-output code { | 114 | .code-output code { |
| @@ -124,7 +129,7 @@ h6, | |||
| 124 | } | 129 | } |
| 125 | 130 | ||
| 126 | .code-output .token.keyword { | 131 | .code-output .token.keyword { |
| 127 | color: #AF00DB; | 132 | color: #af00db; |
| 128 | } | 133 | } |
| 129 | 134 | ||
| 130 | .code-output .token.operator, | 135 | .code-output .token.operator, |
| @@ -171,7 +176,7 @@ h6, | |||
| 171 | } | 176 | } |
| 172 | 177 | ||
| 173 | .dark .code-output .token.keyword { | 178 | .dark .code-output .token.keyword { |
| 174 | color: #C586C0; | 179 | color: #c586c0; |
| 175 | } | 180 | } |
| 176 | 181 | ||
| 177 | .dark .code-output .token.operator, | 182 | .dark .code-output .token.operator, |
| @@ -215,5 +220,5 @@ h6, | |||
| 215 | /* --- CODE BLOCKS --- */ | 220 | /* --- CODE BLOCKS --- */ |
| 216 | /* Slight adjustment to code block background to fit the midnight theme */ | 221 | /* Slight adjustment to code block background to fit the midnight theme */ |
| 217 | .dark .vp-code-group .tabs label { | 222 | .dark .vp-code-group .tabs label { |
| 218 | background-color: #1A1F2E; | 223 | background-color: #1a1f2e; |
| 219 | } \ No newline at end of file | 224 | } \ No newline at end of file |
