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