Global Styles

1/**
2 * <GlobalStyles /> — drop-in typography reset for raw HTML blog content.
3 *
4 * Use this component once at the root of a reading-oriented page (or anywhere
5 * that bare HTML is rendered — for example, `dangerouslySetInnerHTML` for a
6 * Markdown-rendered post). It injects a `<style>` element that styles bare
7 * h1-h6, p, ul/ol, blockquote, table, code/pre, figure, hr, fieldset, etc. so
8 * the page maintains gymnopédies' dark / serif / glow aesthetic without
9 * needing every element to be a React component.
10 *
11 * The rules reference the same CSS variables (--background, --foreground,
12 * --primary, --card, --muted-foreground, --font-serif, --font-mono, --border)
13 * defined in `src/styles/globals.css`, so they adapt to the active theme.
14 */
15 
16const GLOBAL_CSS = /* css */ `
17  *,
18  *::before,
19  *::after {
20    box-sizing: border-box;
21  }
22 
23  html,
24  body {
25    background-color: var(--background);
26    font-family: var(--font-serif);
27    font-size: 1rem;
28    line-height: 1.3;
29    color: var(--foreground);
30    text-shadow: 0 0 2px var(--muted-foreground);
31    scrollbar-width: thin;
32    scrollbar-color: var(--muted-foreground) var(--card);
33  }
34 
35  ::selection {
36    background-color: rgba(0, 248, 248, 0.3);
37    color: inherit;
38  }
39 
40  h1,
41  h2,
42  h3,
43  h4,
44  h5,
45  h6 {
46    margin: 0 0 2rem;
47    font-weight: 700;
48    color: var(--foreground);
49    letter-spacing: 0.5px;
50    text-shadow: 0 0 4px var(--foreground);
51  }
52  h1 a,
53  h2 a,
54  h3 a,
55  h4 a,
56  h5 a,
57  h6 a {
58    text-shadow: 0 0 4px var(--foreground);
59  }
60  h1 { font-size: 1.75rem; }
61  h2 { font-size: 1.625rem; }
62  h3 { font-size: 1.5rem; }
63  h4 { font-size: 1.375rem; }
64  h5 { font-size: 1.25rem; }
65  h6 { font-size: 1.125rem; }
66 
67  p {
68    margin: 0 0 2rem;
69    font-size: 1rem;
70  }
71 
72  b,
73  strong {
74    font-weight: bolder;
75  }
76 
77  small {
78    font-size: 80%;
79  }
80 
81  a {
82    color: var(--primary);
83    outline: none;
84    text-decoration: none;
85  }
86  a:hover,
87  a:focus {
88    color: var(--primary);
89    text-shadow: 0 0 4px var(--primary);
90  }
91  a h1,
92  a h2,
93  a h3,
94  a h4,
95  a h5,
96  a h6 {
97    text-shadow: 0 0 2px var(--foreground);
98  }
99 
100  ul,
101  ol {
102    margin: 0 0 2rem;
103    padding-left: 3rem;
104  }
105  ul {
106    list-style: disc;
107  }
108  ol {
109    list-style: decimal;
110  }
111  ul ul,
112  ol ul {
113    list-style: circle;
114  }
115  ul ul ul,
116  ol ol ol {
117    list-style: square;
118  }
119  ul ol,
120  ol ol {
121    list-style: decimal;
122  }
123  ul ul,
124  ol ul,
125  ul ol,
126  ol ol {
127    margin-bottom: 0;
128  }
129  li {
130    margin-top: 0.4rem;
131  }
132// … truncated