aboutsummaryrefslogtreecommitdiff
path: root/doc/docs/.vitepress/theme/custom.css
diff options
context:
space:
mode:
Diffstat (limited to 'doc/docs/.vitepress/theme/custom.css')
-rw-r--r--doc/docs/.vitepress/theme/custom.css61
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