trezy.codes
forked from
slices.network/quickslice
Auto-indexing service and GraphQL API for AT Protocol Records
chadtmiller.com
1@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;500;600&display=swap');
2
3:root {
4 /* Colors */
5 --bg-base: oklab(0.15 0 0);
6 --bg-elevated: oklab(0.22 0 0);
7 --bg-subtle: oklab(0.25 0 0);
8 --border: oklab(0.30 0 0);
9 --text-primary: oklab(0.98 0 0);
10 --text-secondary: oklab(0.87 0 0);
11 --text-muted: oklab(0.72 0 0);
12 --text-dim: oklab(0.55 0 0);
13 --text-hover: oklab(0.92 0 0);
14 --text-comment: oklab(0.45 0 0);
15
16 /* Accent colors (matched to logo) */
17 /* Logo top: #FF6347 → #FF4500 (red-orange) */
18 --accent-red: oklab(0.70 0.16 0.13);
19 --accent-orange: oklab(0.68 0.18 0.15);
20 /* Logo middle: #00CED1 → #4682B4 (cyan-blue) */
21 --accent-cyan: oklab(0.78 -0.10 -0.06);
22 --accent-cyan-hover: oklab(0.84 -0.08 -0.04);
23 --accent-blue: oklab(0.60 -0.04 -0.12);
24 /* Logo bottom: #32CD32 (lime green) */
25 --accent-green: oklab(0.73 -0.19 0.14);
26
27 /* Overlay */
28 --overlay: oklab(0 0 0 / 0.6);
29
30 /* Font weights */
31 --font-light: 300;
32 --font-normal: 400;
33 --font-medium: 500;
34 --font-semibold: 600;
35
36 /* Fonts */
37 --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
38 --font-display: 'Bebas Neue', Impact, sans-serif;
39
40 /* Font sizes */
41 --text-xs: 0.8125rem;
42 --text-sm: 0.9375rem;
43 --text-base: 1rem;
44 --text-lg: 1.125rem;
45 --text-xl: 1.375rem;
46 --text-2xl: 1.75rem;
47 --text-3xl: 2rem;
48 --text-4xl: 3.5rem;
49
50 /* Radii */
51 --radius-sm: 4px;
52 --radius-md: 8px;
53 --radius-lg: 12px;
54 --radius-xl: 16px;
55
56 /* Spacing */
57 --space-1: 0.25rem;
58 --space-2: 0.5rem;
59 --space-3: 0.75rem;
60 --space-4: 1rem;
61 --space-5: 1.25rem;
62 --space-6: 1.5rem;
63 --space-8: 2rem;
64 --space-10: 2.5rem;
65 --space-12: 3rem;
66 --space-16: 4rem;
67
68 /* Sidebar */
69 --sidebar-width: 260px;
70 --sidebar-width-mobile: 280px;
71}
72
73* { box-sizing: border-box; margin: 0; padding: 0; }
74
75html, body {
76 height: 100%;
77 overflow: hidden;
78}
79
80body {
81 font-family: var(--font-body);
82 font-size: var(--text-base);
83 font-weight: var(--font-normal);
84 line-height: 1.7;
85 color: var(--text-secondary);
86 background: var(--bg-base);
87}
88
89.container {
90 display: flex;
91 height: 100vh;
92 overflow: hidden;
93}
94
95.sidebar {
96 width: var(--sidebar-width);
97 padding: var(--space-5) var(--space-3) 30vh;
98 background: var(--bg-base);
99 overflow-y: auto;
100 flex-shrink: 0;
101}
102
103.sidebar-brand {
104 display: flex;
105 align-items: center;
106 gap: var(--space-3);
107 padding: var(--space-1) var(--space-3);
108 margin-bottom: var(--space-5);
109}
110
111.sidebar-logo {
112 width: 32px;
113 height: 32px;
114 flex-shrink: 0;
115}
116
117.sidebar-title {
118 font-family: var(--font-display);
119 font-size: var(--text-xl);
120 font-weight: var(--font-normal);
121 letter-spacing: 0.04em;
122 text-transform: uppercase;
123 color: var(--text-primary);
124}
125
126.sidebar-version {
127 font-size: var(--text-xs);
128 color: var(--text-muted);
129 margin-left: var(--space-2);
130}
131
132qs-tangled-stars {
133 margin: var(--space-1) var(--space-3);
134 margin-bottom: var(--space-3);
135}
136
137.sidebar ul { list-style: none; }
138
139.sidebar li { margin: 0; }
140
141.sidebar-group {
142 margin-bottom: var(--space-4);
143}
144
145.sidebar-group-label {
146 font-size: var(--text-xs);
147 font-weight: var(--font-semibold);
148 color: var(--text-muted);
149 text-transform: uppercase;
150 letter-spacing: 0.05em;
151 padding: var(--space-2) var(--space-3);
152 margin-bottom: var(--space-1);
153}
154
155.sidebar a {
156 display: block;
157 padding: var(--space-1) var(--space-3);
158 color: var(--text-dim);
159 text-decoration: none;
160 border-radius: var(--radius-md);
161 font-size: var(--text-sm);
162 font-weight: var(--font-medium);
163 transition: color 0.15s ease;
164 outline: none;
165}
166
167.sidebar a:hover,
168.sidebar a:focus-visible {
169 color: var(--text-hover);
170}
171
172.sidebar a.active {
173 color: var(--text-primary);
174 text-decoration: underline;
175 text-decoration-color: var(--accent-cyan);
176 text-decoration-thickness: 3px;
177 text-underline-offset: 4px;
178}
179
180.sidebar-standalone {
181 margin-bottom: var(--space-4);
182 padding-bottom: var(--space-4);
183 border-bottom: 1px solid var(--border);
184}
185
186.content {
187 flex: 1;
188 margin: var(--space-3);
189 margin-left: 0;
190 padding: var(--space-10) var(--space-12);
191 background: var(--bg-elevated);
192 border: 1px solid var(--border);
193 border-radius: var(--radius-xl);
194 overflow-y: auto;
195 display: flex;
196 justify-content: center;
197 gap: var(--space-8);
198}
199
200.content > div {
201 max-width: 720px;
202 width: 100%;
203}
204
205.content > div::after {
206 content: '';
207 display: block;
208 height: 30vh;
209}
210
211.content h1 {
212 font-family: var(--font-display);
213 font-size: var(--text-4xl);
214 font-weight: var(--font-normal);
215 letter-spacing: 0.05em;
216 line-height: 1;
217 color: var(--text-primary);
218 text-transform: uppercase;
219 margin-bottom: var(--space-3);
220}
221
222.content > div > p:first-of-type {
223 font-size: var(--text-lg);
224 color: var(--text-muted);
225 margin-bottom: var(--space-8);
226}
227
228.content h2,
229.content h3 {
230 position: relative;
231}
232
233.content h2 {
234 font-family: var(--font-display);
235 font-size: var(--text-2xl);
236 font-weight: var(--font-normal);
237 letter-spacing: 0.04em;
238 line-height: 1.1;
239 color: var(--text-primary);
240 text-transform: uppercase;
241 margin: var(--space-10) 0 var(--space-4);
242}
243
244.content h3 {
245 font-family: var(--font-body);
246 font-size: var(--text-lg);
247 font-weight: var(--font-semibold);
248 color: var(--text-primary);
249 margin: var(--space-8) 0 var(--space-3);
250}
251
252.content h2 .header-anchor,
253.content h3 .header-anchor {
254 position: absolute;
255 left: -1em;
256 padding-right: 1em;
257 opacity: 0;
258 color: var(--text-muted);
259 text-decoration: none;
260 transition: opacity 0.15s ease;
261}
262
263.content h2:hover .header-anchor,
264.content h3:hover .header-anchor {
265 opacity: 1;
266}
267
268.header-anchor:hover {
269 color: var(--accent-cyan);
270}
271
272.content p { margin: var(--space-4) 0; }
273
274.content pre {
275 background: var(--bg-base) !important;
276 padding: var(--space-4) var(--space-5);
277 overflow-x: auto;
278 border-radius: var(--radius-md);
279 margin: var(--space-5) 0;
280 border: 1px solid var(--border);
281 font-size: var(--text-sm);
282}
283
284/* Shiki generates pre.shiki */
285.content pre.shiki code {
286 background: none;
287 padding: 0;
288}
289
290.content code {
291 background: var(--border);
292 padding: 0.15em 0.4em;
293 border-radius: var(--radius-sm);
294 font-size: var(--text-sm);
295 color: var(--accent-cyan);
296}
297
298.content pre code {
299 background: none;
300 padding: 0;
301 color: inherit;
302}
303
304.content ul, .content ol {
305 margin: var(--space-4) 0;
306 padding-left: var(--space-6);
307}
308
309.content li { margin: var(--space-2) 0; }
310
311.content blockquote {
312 margin: var(--space-6) 0;
313 padding: var(--space-4) var(--space-5);
314 background: var(--bg-subtle);
315 border: 1px solid var(--border);
316 border-left: 3px solid var(--accent-cyan);
317 border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
318}
319
320.content blockquote p { margin: 0; }
321
322.content > div a {
323 color: var(--accent-cyan);
324 text-decoration: underline;
325 text-underline-offset: 2px;
326 transition: color 0.15s ease;
327}
328
329.content > div a:hover {
330 color: var(--accent-cyan-hover);
331}
332
333.content strong {
334 color: var(--text-primary);
335 font-weight: var(--font-semibold);
336}
337
338.content table {
339 border-collapse: collapse;
340 margin: var(--space-6) 0;
341 width: 100%;
342 max-width: 100%;
343 font-size: var(--text-xs);
344}
345
346.content th, .content td {
347 border: 1px solid var(--border);
348 padding: var(--space-2) var(--space-3);
349 text-align: left;
350 white-space: nowrap;
351}
352
353.content td:last-child {
354 white-space: normal;
355}
356
357.content th {
358 background: var(--bg-subtle);
359 font-weight: var(--font-semibold);
360 color: var(--text-primary);
361}
362
363/* Mobile menu button */
364.menu-toggle {
365 display: none;
366 position: fixed;
367 top: var(--space-4);
368 right: var(--space-4);
369 z-index: 1000;
370 background: var(--bg-elevated);
371 border: 1px solid var(--border);
372 border-radius: var(--radius-md);
373 padding: var(--space-2);
374 cursor: pointer;
375 color: var(--text-primary);
376}
377
378.menu-toggle svg {
379 width: 24px;
380 height: 24px;
381 display: block;
382}
383
384/* Mobile backdrop */
385.sidebar-backdrop {
386 display: none;
387 position: fixed;
388 inset: 0;
389 background: var(--overlay);
390 z-index: 99;
391}
392
393/* Mobile header - sticky brand bar */
394.mobile-header {
395 display: none;
396}
397
398/* Mobile styles */
399@media (max-width: 767px) {
400 html, body {
401 overflow: auto;
402 }
403
404 .mobile-header {
405 display: flex;
406 align-items: center;
407 justify-content: space-between;
408 position: sticky;
409 top: 0;
410 z-index: 50;
411 padding: var(--space-3) var(--space-4);
412 background: var(--bg-base);
413 border-bottom: 1px solid var(--border);
414 }
415
416 .mobile-header-brand {
417 display: flex;
418 align-items: center;
419 gap: var(--space-3);
420 }
421
422 .mobile-header .sidebar-logo {
423 width: 28px;
424 height: 28px;
425 }
426
427 .mobile-header .sidebar-title {
428 font-size: var(--text-lg);
429 }
430
431 .mobile-header .sidebar-version {
432 margin-left: var(--space-1);
433 }
434
435 .mobile-header .menu-toggle {
436 display: block;
437 position: static;
438 background: transparent;
439 border: none;
440 padding: var(--space-2);
441 }
442
443 .container {
444 flex-direction: column;
445 height: auto;
446 min-height: 100vh;
447 overflow: visible;
448 }
449
450 .sidebar {
451 position: fixed;
452 top: 0;
453 left: 0;
454 height: 100vh;
455 width: var(--sidebar-width-mobile);
456 z-index: 100;
457 transform: translateX(-100%);
458 transition: transform 0.3s ease;
459 border-right: 1px solid var(--border);
460 }
461
462 .sidebar.open {
463 transform: translateX(0);
464 }
465
466 .sidebar-backdrop.open {
467 display: block;
468 }
469
470 .content {
471 margin: 0;
472 border-radius: 0;
473 border: none;
474 padding: var(--space-6) var(--space-5) var(--space-8);
475 min-height: 100vh;
476 }
477
478 .content > div {
479 max-width: 100%;
480 }
481
482 .content h1 {
483 font-size: var(--text-3xl);
484 }
485
486 .content h2 {
487 font-size: var(--text-xl);
488 }
489
490 .content pre {
491 padding: var(--space-3) var(--space-4);
492 font-size: var(--text-xs);
493 }
494
495 .content table {
496 display: block;
497 overflow-x: auto;
498 -webkit-overflow-scrolling: touch;
499 }
500}
501
502/* Syntax highlighting - logo colors */
503.hl-keyword { color: var(--accent-red); font-weight: var(--font-medium); }
504.hl-type { color: var(--accent-cyan); }
505.hl-property { color: var(--accent-blue); }
506.hl-string { color: var(--accent-green); }
507.hl-number { color: var(--accent-cyan); }
508.hl-variable { color: var(--accent-orange); }
509.hl-function { color: var(--accent-cyan); }
510.hl-directive { color: var(--accent-blue); font-style: italic; }
511.hl-comment { color: var(--text-comment); font-style: italic; }
512.hl-punctuation { color: var(--text-dim); }
513
514/* Minimap - right side navigation inside content */
515.minimap {
516 width: 180px;
517 flex-shrink: 0;
518 display: flex;
519 flex-direction: column;
520 gap: var(--space-1);
521 position: sticky;
522 top: var(--space-10);
523 align-self: flex-start;
524 max-height: calc(100vh - var(--space-16));
525 overflow-y: auto;
526 padding-bottom: 30vh;
527}
528
529.minimap-header {
530 font-size: var(--text-sm);
531 font-weight: var(--font-semibold);
532 color: var(--text-muted);
533 padding: var(--space-1) var(--space-2);
534 margin-bottom: var(--space-2);
535}
536
537.minimap-item {
538 display: block;
539 padding: var(--space-1) var(--space-3);
540 color: var(--text-dim);
541 text-decoration: none;
542 border-radius: var(--radius-md);
543 font-size: var(--text-sm);
544 font-weight: var(--font-medium);
545 transition: color 0.15s ease;
546 outline: none;
547}
548
549.minimap-item:hover,
550.minimap-item:focus-visible {
551 color: var(--text-hover);
552}
553
554.minimap-item-sub {
555 padding-left: var(--space-5);
556 font-size: var(--text-xs);
557}
558
559.minimap-item-active {
560 color: var(--text-primary);
561 text-decoration: underline;
562 text-decoration-color: var(--accent-cyan);
563 text-decoration-thickness: 3px;
564 text-underline-offset: 4px;
565}
566
567/* Hide minimap on tablet and mobile */
568@media (max-width: 1024px) {
569 .minimap {
570 display: none;
571 }
572}
573
574/* Page navigation (prev/next) */
575.page-nav {
576 display: flex;
577 gap: var(--space-4);
578 margin-top: var(--space-12);
579 padding-top: var(--space-8);
580 border-top: 1px solid var(--border);
581}
582
583.page-nav-link {
584 flex: 1;
585 display: flex;
586 flex-direction: column;
587 gap: var(--space-1);
588 padding: var(--space-4) var(--space-5);
589 background: var(--bg-subtle);
590 border: 1px solid var(--border);
591 border-radius: var(--radius-lg);
592 text-decoration: none;
593 transition: border-color 0.15s ease, background 0.15s ease;
594}
595
596.content > div .page-nav-link,
597.content > div .page-nav-link:hover {
598 text-decoration: none;
599}
600
601.page-nav-link:hover {
602 border-color: var(--text-dim);
603 background: oklab(0.30 0 0);
604}
605
606.page-nav-next {
607 text-align: right;
608}
609
610.page-nav-empty {
611 visibility: hidden;
612}
613
614.page-nav-label {
615 font-size: var(--text-xs);
616 font-weight: var(--font-semibold);
617 color: var(--text-muted);
618 text-transform: uppercase;
619 letter-spacing: 0.05em;
620}
621
622.page-nav-title {
623 font-size: var(--text-base);
624 font-weight: var(--font-medium);
625 color: var(--text-primary);
626}
627
628@media (max-width: 480px) {
629 .page-nav {
630 flex-direction: column;
631 }
632
633 .page-nav-next {
634 text-align: left;
635 }
636
637 .page-nav-empty {
638 display: none;
639 }
640}
641
642/* Search */
643.search-container {
644 position: relative;
645 padding: 0 var(--space-3);
646 margin-bottom: var(--space-4);
647}
648
649.search-input {
650 width: 100%;
651 padding: var(--space-2) var(--space-3);
652 background: var(--bg-elevated);
653 border: 1px solid var(--border);
654 border-radius: var(--radius-md);
655 color: var(--text-primary);
656 font-family: var(--font-body);
657 font-size: var(--text-sm);
658 outline: none;
659 transition: border-color 0.15s ease;
660}
661
662.search-input::placeholder {
663 color: var(--text-dim);
664}
665
666.search-input:focus {
667 border-color: var(--text-muted);
668}
669
670.search-results {
671 position: absolute;
672 top: 100%;
673 left: var(--space-3);
674 right: var(--space-3);
675 margin-top: var(--space-1);
676 background: var(--bg-elevated);
677 border: 1px solid var(--border);
678 border-radius: var(--radius-md);
679 max-height: 300px;
680 overflow-y: auto;
681 z-index: 50;
682 display: none;
683}
684
685.search-results.open {
686 display: block;
687}
688
689.search-result {
690 display: block;
691 padding: var(--space-2) var(--space-3);
692 text-decoration: none;
693 border-bottom: 1px solid var(--border);
694 transition: background 0.15s ease;
695}
696
697.search-result:last-child {
698 border-bottom: none;
699}
700
701.search-result:hover,
702.search-result.active {
703 background: oklab(0.30 0 0);
704}
705
706.search-result-title {
707 color: var(--text-primary);
708 font-weight: var(--font-medium);
709 font-size: var(--text-sm);
710}
711
712.search-result-group {
713 color: var(--text-dim);
714 font-size: var(--text-xs);
715}
716
717.search-result-snippet {
718 color: var(--text-muted);
719 font-size: var(--text-xs);
720 margin-top: var(--space-1);
721 overflow: hidden;
722 text-overflow: ellipsis;
723 white-space: nowrap;
724}
725
726.search-result-snippet mark {
727 background: var(--accent-cyan);
728 color: var(--bg-base);
729 padding: 0 2px;
730 border-radius: 2px;
731}
732
733.search-no-results {
734 padding: var(--space-3);
735 color: var(--text-muted);
736 font-size: var(--text-sm);
737 text-align: center;
738}