seth.computer
this repo has no description
1:root {
2 --bg: #fafafa;
3 --bg-secondary: #f0f0f0;
4 --text: #1a1a1a;
5 --text-muted: #666;
6 --border: #ddd;
7 --primary: #0066cc;
8 --primary-hover: #0052a3;
9 --success: #22c55e;
10 --danger: #ef4444;
11 --draft: #f59e0b;
12}
13
14@media (prefers-color-scheme: dark) {
15 :root {
16 --bg: #1a1a1a;
17 --bg-secondary: #2a2a2a;
18 --text: #f0f0f0;
19 --text-muted: #999;
20 --border: #333;
21 --primary: #3b82f6;
22 --primary-hover: #2563eb;
23 }
24}
25
26* {
27 box-sizing: border-box;
28 margin: 0;
29 padding: 0;
30}
31
32body {
33 font-family:
34 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
35 background: var(--bg);
36 color: var(--text);
37 line-height: 1.6;
38 min-height: 100vh;
39 display: flex;
40 flex-direction: column;
41}
42
43a {
44 color: var(--primary);
45 text-decoration: none;
46}
47
48a:hover {
49 text-decoration: underline;
50}
51
52/* Header */
53.header {
54 background: var(--bg-secondary);
55 border-bottom: 1px solid var(--border);
56 padding: 1rem;
57}
58
59.nav {
60 max-width: 1200px;
61 margin: 0 auto;
62 display: flex;
63 justify-content: space-between;
64 align-items: center;
65}
66
67.logo {
68 font-size: 1.25rem;
69 font-weight: 600;
70 color: var(--text);
71}
72
73.logo:hover {
74 text-decoration: none;
75}
76
77.nav-links {
78 display: flex;
79 gap: 1.5rem;
80 align-items: center;
81}
82
83.nav-links a {
84 color: var(--text-muted);
85}
86
87.nav-links a:hover {
88 color: var(--text);
89}
90
91.handle {
92 color: var(--text-muted);
93 font-size: 0.9rem;
94}
95
96/* Main content */
97.main {
98 flex: 1;
99 max-width: 1200px;
100 margin: 0 auto;
101 padding: 2rem 1rem;
102 width: 100%;
103}
104
105/* Footer */
106.footer {
107 background: var(--bg-secondary);
108 border-top: 1px solid var(--border);
109 padding: 1rem;
110 text-align: center;
111 color: var(--text-muted);
112 font-size: 0.9rem;
113}
114
115/* Buttons */
116.btn {
117 display: inline-block;
118 padding: 0.5rem 1rem;
119 border: none;
120 border-radius: 4px;
121 font-size: 1rem;
122 cursor: pointer;
123 text-decoration: none;
124}
125
126.btn:hover {
127 text-decoration: none;
128}
129
130.btn-primary {
131 background: var(--primary);
132 color: white;
133}
134
135.btn-primary:hover {
136 background: var(--primary-hover);
137}
138
139.btn-secondary {
140 background: var(--bg-secondary);
141 color: var(--text);
142 border: 1px solid var(--border);
143}
144
145.btn-secondary:hover {
146 background: var(--border);
147}
148
149.btn-success {
150 background: var(--success);
151 color: white;
152}
153
154.btn-danger {
155 background: var(--danger);
156 color: white;
157}
158
159.btn-large {
160 padding: 0.75rem 2rem;
161 font-size: 1.125rem;
162}
163
164/* Forms */
165.form-group {
166 margin-bottom: 1.5rem;
167}
168
169.form-group label {
170 display: block;
171 margin-bottom: 0.5rem;
172 font-weight: 500;
173}
174
175.form-group input,
176.form-group textarea {
177 width: 100%;
178 padding: 0.75rem;
179 border: 1px solid var(--border);
180 border-radius: 4px;
181 font-size: 1rem;
182 background: var(--bg);
183 color: var(--text);
184}
185
186.form-group input:focus,
187.form-group textarea:focus {
188 outline: none;
189 border-color: var(--primary);
190}
191
192.form-group small {
193 display: block;
194 margin-top: 0.25rem;
195 color: var(--text-muted);
196 font-size: 0.875rem;
197}
198
199.form-actions {
200 display: flex;
201 gap: 1rem;
202 margin-top: 2rem;
203}
204
205.form-page {
206 max-width: 800px;
207}
208
209.content-editor {
210 font-family:
211 ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, monospace;
212 min-height: 400px;
213 resize: vertical;
214}
215
216/* Auth form */
217.auth-form {
218 max-width: 400px;
219 margin: 2rem auto;
220}
221
222.auth-form h1 {
223 margin-bottom: 1.5rem;
224}
225
226/* Home page */
227.hero {
228 text-align: center;
229 padding: 4rem 1rem;
230}
231
232.hero h1 {
233 font-size: 3rem;
234 margin-bottom: 1rem;
235}
236
237.hero p {
238 font-size: 1.25rem;
239 color: var(--text-muted);
240 max-width: 600px;
241 margin: 0 auto 3rem;
242}
243
244.features {
245 display: grid;
246 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
247 gap: 2rem;
248 margin-bottom: 3rem;
249 text-align: left;
250}
251
252.feature {
253 background: var(--bg-secondary);
254 padding: 1.5rem;
255 border-radius: 8px;
256 border: 1px solid var(--border);
257}
258
259.feature h3 {
260 margin-bottom: 0.5rem;
261}
262
263.feature p {
264 font-size: 1rem;
265 margin: 0;
266}
267
268/* Dashboard */
269.dashboard {
270 max-width: 800px;
271}
272
273.dashboard h1 {
274 margin-bottom: 0.5rem;
275}
276
277.dashboard p {
278 color: var(--text-muted);
279 margin-bottom: 2rem;
280}
281
282.quick-actions {
283 display: flex;
284 gap: 1rem;
285 flex-wrap: wrap;
286}
287
288/* Publication */
289.publication {
290 max-width: 800px;
291}
292
293.pub-details {
294 background: var(--bg-secondary);
295 padding: 1.5rem;
296 border-radius: 8px;
297 margin-bottom: 1.5rem;
298}
299
300.pub-details h2 {
301 margin-bottom: 0.5rem;
302}
303
304.pub-details .url {
305 color: var(--text-muted);
306 margin-bottom: 0.5rem;
307}
308
309.pub-details .description {
310 margin: 0;
311}
312
313/* Documents */
314.documents {
315 max-width: 800px;
316}
317
318.documents-header {
319 display: flex;
320 justify-content: space-between;
321 align-items: center;
322 margin-bottom: 1.5rem;
323}
324
325.filters {
326 display: flex;
327 gap: 1rem;
328 margin-bottom: 1.5rem;
329 border-bottom: 1px solid var(--border);
330 padding-bottom: 1rem;
331}
332
333.filter {
334 color: var(--text-muted);
335 padding: 0.25rem 0;
336}
337
338.filter.active {
339 color: var(--primary);
340 border-bottom: 2px solid var(--primary);
341}
342
343.document-list {
344 list-style: none;
345}
346
347.document-item {
348 border: 1px solid var(--border);
349 border-radius: 4px;
350 margin-bottom: 0.5rem;
351}
352
353.document-item a {
354 display: flex;
355 justify-content: space-between;
356 align-items: center;
357 padding: 1rem;
358 color: var(--text);
359}
360
361.document-item a:hover {
362 background: var(--bg-secondary);
363 text-decoration: none;
364}
365
366.document-item .title {
367 font-weight: 500;
368}
369
370.document-item .meta {
371 display: flex;
372 gap: 1rem;
373 align-items: center;
374}
375
376.document-item .date {
377 color: var(--text-muted);
378 font-size: 0.9rem;
379}
380
381/* Badges */
382.badge {
383 display: inline-block;
384 padding: 0.25rem 0.5rem;
385 border-radius: 4px;
386 font-size: 0.75rem;
387 font-weight: 600;
388 text-transform: uppercase;
389}
390
391.badge-draft {
392 background: var(--draft);
393 color: white;
394}
395
396.badge-published {
397 background: var(--success);
398 color: white;
399}
400
401/* Document view */
402.document-view {
403 max-width: 800px;
404}
405
406.document-header {
407 margin-bottom: 1.5rem;
408}
409
410.document-header h1 {
411 margin-bottom: 0.5rem;
412}
413
414.document-meta {
415 display: flex;
416 gap: 1rem;
417 align-items: center;
418 flex-wrap: wrap;
419 color: var(--text-muted);
420 font-size: 0.9rem;
421}
422
423.document-content {
424 background: var(--bg-secondary);
425 padding: 1.5rem;
426 border-radius: 8px;
427 margin-bottom: 1.5rem;
428}
429
430.document-content pre {
431 white-space: pre-wrap;
432 word-break: break-word;
433 font-family:
434 ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, monospace;
435 font-size: 0.9rem;
436 line-height: 1.7;
437}
438
439.actions {
440 display: flex;
441 gap: 1rem;
442 flex-wrap: wrap;
443}
444
445.empty {
446 color: var(--text-muted);
447 text-align: center;
448 padding: 3rem;
449}
450
451.error {
452 color: var(--danger);
453 text-align: center;
454 padding: 2rem;
455}
456
457.error-message {
458 background: #fef2f2;
459 border: 1px solid #fecaca;
460 color: #dc2626;
461 padding: 1rem;
462 border-radius: 4px;
463 margin-bottom: 1.5rem;
464}
465
466@media (prefers-color-scheme: dark) {
467 .error-message {
468 background: #450a0a;
469 border-color: #7f1d1d;
470 color: #fca5a5;
471 }
472}