fuzzyworld

fuzzyworld-tools / files / server / site / main.css

main.css

6.5 KB · history · blame

1/* =============================================================================
2 FuzzyWorld Main Site Styles
3
4 This file contains styles for fuzzyworld.net (the main site).
5 It builds upon the shared design system in _shared.css.
6
7 Import order:
8 1. _shared.css (design tokens and base styles)
9 2. _icons.css (icon system)
10 3. main.css (this file - main site specific styles)
11 ============================================================================= */
12
13/* Import shared design system */
14@import url("_shared.css");
15@import url("_icons.css");
16
17/* =============================================================================
18 Site Configuration
19 ============================================================================= */
20
21:root {
22 --site-bg: var(--color-bg-primary);
23 --site-fg: var(--color-fg-primary);
24 --site-muted: var(--color-fg-muted);
25 --site-line: var(--color-border-primary);
26 --site-soft: var(--color-bg-secondary);
27 --site-card: var(--color-bg-tertiary);
28 --site-accent-soft: var(--color-accent-soft);
29
30 --site-link: var(--color-accent);
31}
32
33@media (prefers-color-scheme: dark) {
34 :root {
35 --site-bg: var(--color-bg-primary);
36 --site-fg: var(--color-fg-primary);
37 --site-muted: var(--color-fg-muted);
38 --site-line: var(--color-border-primary);
39 --site-soft: var(--color-bg-secondary);
40 --site-accent-soft: var(--color-accent-soft);
41 }
42}
43
44body {
45 margin: 0;
46 background: var(--site-bg);
47 color: var(--site-fg);
48 font: 16px/var(--line-height-relaxed) var(--font-family-sans);
49}
50
51/* =============================================================================
52 Site Header & Footer
53 ============================================================================= */
54
55header.site {
56 background: var(--site-soft);
57 border-bottom: 1px solid var(--site-line);
58}
59
60header.site .bar,
61footer.site .cols {
62 max-width: 72rem;
63 margin: 0 auto;
64 padding: 0 var(--spacing-md);
65}
66
67header.site .bar {
68 display: flex;
69 flex-wrap: wrap;
70 align-items: center;
71 gap: 0 var(--spacing-lg);
72}
73
74header.site .brand {
75 font-weight: var(--font-weight-bold);
76 font-size: var(--font-size-lg);
77 color: var(--site-fg);
78 padding: var(--spacing-sm) 0;
79 letter-spacing: -0.01em;
80}
81
82header.site .brand:hover {
83 text-decoration: none;
84 color: var(--site-link);
85}
86
87header.site .brand::before {
88 content: "";
89 display: inline-block;
90 width: 1.1em;
91 height: 1.1em;
92 margin-right: 0.3em;
93 vertical-align: -0.1em;
94 background-image: url("/favicon.ico");
95 background-size: contain;
96 background-repeat: no-repeat;
97 background-position: center;
98}
99
100footer.site {
101 margin-top: var(--spacing-xl);
102 border-top: 1px solid var(--site-line);
103 background: var(--site-soft);
104 color: var(--site-muted);
105 font-size: var(--font-size-sm);
106}
107
108footer.site .cols {
109 display: grid;
110 grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
111 gap: var(--spacing-lg);
112 padding-top: var(--spacing-lg);
113 padding-bottom: var(--spacing-xl);
114}
115
116footer.site h2 {
117 font-size: var(--font-size-xs);
118 text-transform: uppercase;
119 letter-spacing: 0.06em;
120 color: var(--site-muted);
121 margin: 0 0 var(--spacing-xs);
122}
123
124footer.site a,
125footer.site span {
126 display: block;
127 padding: var(--spacing-xs) 0;
128}
129
130/* =============================================================================
131 Site Navigation
132 ============================================================================= */
133
134.site-nav {
135 display: flex;
136 flex-wrap: wrap;
137 gap: 0 var(--spacing-md);
138}
139
140.site-nav a {
141 color: var(--site-muted);
142 padding: var(--spacing-sm) 0;
143}
144
145.site-nav a:hover {
146 color: var(--site-fg);
147 text-decoration: none;
148}
149
150.site-nav a[aria-current] {
151 color: var(--site-fg);
152 font-weight: var(--font-weight-semibold);
153}
154
155/* =============================================================================
156 Main Content Layout
157 ============================================================================= */
158
159main {
160 max-width: 72rem;
161 margin: 0 auto;
162 padding: 0 var(--spacing-md) var(--spacing-xl);
163}
164
165/* =============================================================================
166 Main Content
167 ============================================================================= */
168
169> div {
170 padding: var(--spacing-sm) 0;
171}
172
173> div > div {
174 padding: var(--spacing-md) 0;
175}
176
177h1 {
178 display: flex;
179 align-items: center;
180 gap: var(--spacing-sm);
181 font-size: var(--font-size-2xl);
182 font-weight: var(--font-weight-bold);
183 margin: var(--spacing-lg) 0 var(--spacing-sm);
184 padding: 0;
185}
186
187#logo {
188 width: 3rem;
189 height: 3rem;
190 border-radius: var(--border-radius-md);
191}
192
193h2 {
194 font-size: var(--font-size-xl);
195 font-weight: var(--font-weight-semibold);
196 margin: var(--spacing-md) 0 var(--spacing-sm);
197}
198
199h3 {
200 font-size: var(--font-size-lg);
201 font-weight: var(--font-weight-semibold);
202 margin: var(--spacing-md) 0 var(--spacing-sm);
203}
204
205p {
206 line-height: var(--line-height-relaxed);
207 max-width: 46rem;
208}
209
210/* =============================================================================
211 Lists
212 ============================================================================= */
213
214.list-horizontal {
215 list-style: none;
216 display: flex;
217 flex-direction: row;
218 flex-wrap: wrap;
219 align-items: start;
220 justify-content: center;
221 margin: var(--spacing-md) 0;
222 padding: var(--spacing-md) 0;
223 white-space: nowrap;
224}
225
226.list-horizontal li:not(:last-child)::after {
227 content: "|";
228 margin: 0 var(--spacing-xs);
229 color: var(--site-muted);
230}
231
232/* _shared.css resets list padding to 0, which leaves bullets and numbers outside the content box. */
233main ul,
234main ol {
235 padding-left: 1.5em;
236 margin: var(--spacing-sm) 0;
237}
238
239/* =============================================================================
240 Images & Logos
241 ============================================================================= */
242
243img {
244 max-width: 100%;
245 height: auto;
246}
247
248/* =============================================================================
249 Responsive Adjustments
250 ============================================================================= */
251
252@media (max-width: 64rem) {
253 h1 {
254 font-size: var(--font-size-xl);
255 }
256
257 h2 {
258 font-size: var(--font-size-lg);
259 }
260}
261
262@media (max-width: 40rem) {
263 body {
264 padding: 0 var(--spacing-sm);
265 }
266
267 h1 {
268 flex-direction: column;
269 align-items: flex-start;
270 gap: var(--spacing-xs);
271 }
272
273 main {
274 padding: 0 var(--spacing-sm) var(--spacing-xl);
275 }
276
277 header.site .bar {
278 padding: 0 var(--spacing-sm);
279 }
280
281 footer.site .cols {
282 padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-xl);
283 }
284}