atproto blogging
nonbinary.computer
1/* CSS Reset */
2*,
3*::before,
4*::after {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10/* Base Styles */
11html {
12 font-size: var(--spacing-base);
13 line-height: var(--spacing-line-height);
14}
15
16/* Scoped to notebook-content container */
17.notebook-content {
18 font-family: var(--font-body);
19 color: var(--color-text);
20 background-color: var(--color-base);
21 margin: 0 auto;
22 padding: 1rem 0rem;
23 word-wrap: break-word;
24 overflow-wrap: break-word;
25 counter-reset: sidenote-counter;
26 max-width: 95ch;
27}
28
29/* When sidenotes exist, body padding creates the gutter */
30/* Left padding shrinks first as viewport narrows, right stays for sidenotes */
31body:has(.sidenote) {
32 padding-inline-start: clamp(1rem, calc((100vw - 95ch - 15.5rem - 2rem) / 2), 15.5rem);
33 padding-inline-end: 15.5rem;
34}
35
36/* Typography */
37h1,
38h2,
39h3,
40h4,
41h5,
42h6 {
43 font-family: var(--font-heading);
44 margin-top: calc(1rem * var(--spacing-scale));
45 margin-bottom: 0.5rem;
46 line-height: 1.2;
47}
48
49h1 {
50 font-size: 2rem;
51 color: var(--color-secondary);
52}
53h2 {
54 font-size: 1.5rem;
55 color: var(--color-primary);
56}
57h3 {
58 font-size: 1.25rem;
59 color: var(--color-secondary);
60}
61h4 {
62 font-size: 1.2rem;
63 color: var(--color-tertiary);
64}
65h5 {
66 font-size: 1.125rem;
67 color: var(--color-secondary);
68}
69h6 {
70 font-size: 1rem;
71}
72
73p {
74 margin-bottom: 1rem;
75 word-wrap: break-word;
76 overflow-wrap: break-word;
77}
78
79a {
80 color: var(--color-link);
81 text-decoration: none;
82}
83
84.notebook-content a:hover {
85 color: var(--color-emphasis);
86 text-decoration: underline;
87}
88
89/* Wikilink validation (editor) */
90.link-valid {
91 color: var(--color-link);
92}
93
94.link-broken {
95 color: var(--color-error);
96 text-decoration: underline wavy;
97 text-decoration-color: var(--color-error);
98 opacity: 0.8;
99}
100
101/* Selection */
102::selection {
103 background: var(--color-highlight);
104 color: var(--color-text);
105}
106
107/* Lists */
108ul,
109ol {
110 margin-inline-start: 1rem;
111 margin-bottom: 1rem;
112}
113
114li {
115 margin-bottom: 0.25rem;
116}
117
118/* Code */
119code {
120 font-family: var(--font-mono);
121 background: var(--color-surface);
122 padding: 0.125rem 0.25rem;
123 border-radius: 4px;
124 font-size: 0.9em;
125}
126
127pre {
128 overflow-x: auto;
129 margin-bottom: 1rem;
130 border-radius: 5px;
131 border: 1px solid var(--color-border);
132 box-sizing: border-box;
133}
134
135/* Code blocks inside pre are handled by syntax theme */
136pre code {
137 display: block;
138 width: fit-content;
139 min-width: 100%;
140 padding: 1rem;
141 background: var(--color-surface);
142}
143
144/* Math */
145.math {
146 font-family: var(--font-mono);
147}
148
149.math-display {
150 display: block;
151 margin: 1rem 0;
152 text-align: center;
153}
154
155/* Blockquotes */
156blockquote {
157 border-inline-start: 2px solid var(--color-secondary);
158 background: var(--color-surface);
159 padding-inline-start: 1rem;
160 padding-inline-end: 1rem;
161 padding-top: 0.5rem;
162 padding-bottom: 0.04rem;
163 margin: 1rem 0;
164 font-size: 0.95em;
165 border-bottom-right-radius: 5px;
166 border-top-right-radius: 5px;
167}
168
169/* Tables */
170table {
171 border-collapse: collapse;
172 width: 100%;
173 margin-bottom: 1rem;
174 display: block;
175 overflow-x: auto;
176 max-width: 100%;
177}
178
179th,
180td {
181 border: 1px solid var(--color-border);
182 padding: 0.5rem;
183 text-align: start;
184}
185
186th {
187 background: var(--color-surface);
188 font-weight: 600;
189}
190
191tr:hover {
192 background: var(--color-surface);
193}
194
195/* Footnotes */
196.footnote-reference {
197 font-size: 0.8em;
198 color: var(--color-subtle);
199}
200
201.footnote-definition {
202 order: 9999;
203 margin: 0;
204 padding: 0.5rem 0;
205 font-size: 0.9em;
206}
207
208.footnote-definition:first-of-type {
209 margin-top: 2rem;
210 padding-top: 1rem;
211 border-top: 2px solid var(--color-border);
212}
213
214.footnote-definition:first-of-type::before {
215 content: "Footnotes";
216 display: block;
217 font-weight: 600;
218 font-size: 1.1em;
219 color: var(--color-subtle);
220 margin-bottom: 0.75rem;
221}
222
223.footnote-definition-label {
224 font-weight: 600;
225 margin-inline-end: 0.5rem;
226 color: var(--color-primary);
227}
228
229/* Aside blocks (via WeaverBlock prefix) - scoped to notebook content */
230.notebook-content aside,
231.notebook-content .aside {
232 float: inline-start;
233 width: 40%;
234 margin: 0 1.5rem 1rem 0;
235 padding: 1rem;
236 background: var(--color-surface);
237 border-inline-end: 3px solid var(--color-primary);
238 font-size: 0.9em;
239 clear: inline-start;
240}
241
242.notebook-content aside > *:first-child,
243.notebook-content .aside > *:first-child {
244 margin-top: 0;
245}
246
247.notebook-content aside > *:last-child,
248.notebook-content .aside > *:last-child {
249 margin-bottom: 0;
250}
251
252/* Reset blockquote styling inside asides */
253.notebook-content aside > blockquote,
254.notebook-content .aside > blockquote {
255 border-inline-start: none;
256 background: transparent;
257 padding: 0;
258 margin: 0;
259 font-size: inherit;
260}
261
262/* Indent utilities */
263.indent-1 {
264 margin-inline-start: 1em;
265}
266.indent-2 {
267 margin-inline-start: 2em;
268}
269.indent-3 {
270 margin-inline-start: 3em;
271}
272
273/* Tufte-style Sidenotes */
274/* Hide checkbox for sidenote toggle */
275.margin-toggle {
276 display: none;
277}
278
279/* Sidenote number marker (inline superscript) */
280.sidenote-number {
281 counter-increment: sidenote-counter;
282}
283
284.sidenote-number::after {
285 content: counter(sidenote-counter);
286 font-size: 0.7em;
287 position: relative;
288 top: -0.5em;
289 color: var(--color-primary);
290 padding-inline-start: 0.1em;
291}
292
293/* Sidenote content (margin notes on wide screens) */
294.sidenote {
295 float: inline-end;
296 clear: inline-end;
297 margin-inline-end: -15.5rem;
298 width: 14rem;
299 margin-top: 0.3rem;
300 margin-bottom: 1rem;
301 font-size: 0.85em;
302 line-height: 1.4;
303 color: var(--color-subtle);
304}
305
306.sidenote::before {
307 content: counter(sidenote-counter) ". ";
308 color: var(--color-primary);
309}
310
311/* Mobile sidenotes: toggle behavior */
312@media (max-width: 900px) {
313 /* Reset sidenote gutter on mobile */
314 body:has(.sidenote) {
315 padding-inline-end: 0;
316 }
317
318 aside,
319 .aside {
320 float: none;
321 width: 100%;
322 margin: 1rem 0;
323 }
324
325 .sidenote {
326 display: none;
327 }
328
329 .margin-toggle:checked + .sidenote {
330 display: block;
331 float: none;
332 width: 95%;
333 margin: 0.5rem 2.5%;
334 padding: 0.5rem;
335 background: var(--color-surface);
336 border-inline-start: 2px solid var(--color-primary);
337 }
338
339 label.sidenote-number {
340 cursor: pointer;
341 }
342
343 label.sidenote-number::after {
344 text-decoration: underline;
345 }
346}
347
348/* Images */
349img {
350 max-width: 100%;
351 height: auto;
352 display: block;
353 margin: 1rem 0;
354 border-radius: 4px;
355}
356
357/* Hygiene for iframes */
358.html-embed-block {
359 max-width: 100%;
360 height: auto;
361 display: block;
362 margin: 1rem 0;
363}
364
365/* AT Protocol Embeds - Container */
366/* Light mode: paper with shadow, dark mode: blueprint with borders */
367.atproto-embed {
368 display: block;
369 position: relative;
370 max-width: 550px;
371 margin: 1rem 0;
372 padding: 1rem;
373 background: var(--color-surface);
374 border-inline-start: 2px solid var(--color-secondary);
375 box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent);
376}
377
378.atproto-embed:hover {
379 border-inline-start-color: var(--color-primary);
380}
381
382@media (prefers-color-scheme: dark) {
383 .atproto-embed {
384 box-shadow: none;
385 border: 1px solid var(--color-border);
386 border-inline-start: 2px solid var(--color-secondary);
387 }
388}
389
390.atproto-embed-placeholder {
391 color: var(--color-muted);
392 font-style: italic;
393}
394
395.embed-loading {
396 display: block;
397 padding: 0.5rem 0;
398 color: var(--color-subtle);
399 font-family: var(--font-mono);
400 font-size: 0.85rem;
401}
402
403/* Embed Author Block */
404.embed-author {
405 display: flex;
406 align-items: center;
407 gap: 0.75rem;
408 padding-bottom: 0.5rem;
409}
410
411.embed-avatar {
412 width: 36px;
413 height: 36px;
414 max-width: 36px;
415 max-height: 36px;
416 aspect-ratio: 1;
417 margin: 0;
418 object-fit: cover;
419}
420
421.embed-author-info {
422 display: flex;
423 flex-direction: column;
424 gap: 0;
425 min-width: 0;
426}
427
428.embed-avatar-link {
429 display: block;
430 flex-shrink: 0;
431}
432
433.embed-author-name {
434 font-weight: 600;
435 color: var(--color-text);
436 overflow: hidden;
437 text-overflow: ellipsis;
438 white-space: nowrap;
439 text-decoration: none;
440 line-height: 1.2;
441}
442
443a.embed-author-name:hover {
444 color: var(--color-link);
445}
446
447.embed-author-handle {
448 font-size: 0.85em;
449 font-family: var(--font-mono);
450 color: var(--color-subtle);
451 text-decoration: none;
452 overflow: hidden;
453 text-overflow: ellipsis;
454 white-space: nowrap;
455 line-height: 1.2;
456}
457
458.embed-author-handle:hover {
459 color: var(--color-link);
460}
461
462/* Card-wide clickable link (sits behind content) */
463.embed-card-link {
464 position: absolute;
465 inset: 0;
466 z-index: 0;
467}
468
469.embed-card-link:focus {
470 outline: 2px solid var(--color-primary);
471 outline-offset: 2px;
472}
473
474/* Interactive elements sit above the card link */
475.embed-author,
476.embed-external,
477.embed-quote,
478.embed-images,
479.embed-meta {
480 position: relative;
481 z-index: 1;
482}
483
484/* Embed Content Block */
485.embed-content {
486 display: block;
487 color: var(--color-text);
488 line-height: 1.5;
489 margin-bottom: 0.75rem;
490 white-space: pre-wrap;
491}
492
493.embed-description {
494 display: block;
495 color: var(--color-text);
496 font-size: 0.95em;
497 line-height: 1.4;
498}
499
500/* Embed Metadata Block */
501.embed-meta {
502 display: flex;
503 justify-content: space-between;
504 align-items: center;
505 font-size: 0.85em;
506 color: var(--color-muted);
507 margin-top: 0.75rem;
508}
509
510.embed-stats {
511 display: flex;
512 gap: 1rem;
513 font-family: var(--font-mono);
514}
515
516.embed-stat {
517 color: var(--color-subtle);
518 font-size: 0.9em;
519}
520
521.embed-time {
522 color: var(--color-subtle);
523 text-decoration: none;
524 font-family: var(--font-mono);
525 font-size: 0.9em;
526}
527
528.embed-time:hover {
529 color: var(--color-link);
530}
531
532.embed-type {
533 font-size: 0.8em;
534 color: var(--color-subtle);
535 font-family: var(--font-mono);
536 text-transform: uppercase;
537 letter-spacing: 0.05em;
538}
539
540/* Embed URL link (shown with syntax in editor) */
541.embed-url {
542 color: var(--color-link);
543 font-family: var(--font-mono);
544 font-size: 0.9em;
545 word-break: break-all;
546}
547
548/* External link cards */
549.embed-external {
550 display: flex;
551 gap: 0.75rem;
552 padding: 0.75rem;
553 background: var(--color-surface);
554 border: 1px dashed var(--color-border);
555 text-decoration: none;
556 color: inherit;
557 margin-top: 0.5rem;
558}
559
560.embed-external:hover {
561 border-inline-start: 2px solid var(--color-primary);
562 margin-inline-start: -1px;
563}
564
565@media (prefers-color-scheme: dark) {
566 .embed-external {
567 border: 1px solid var(--color-border);
568 }
569
570 .embed-external:hover {
571 border-inline-start: 2px solid var(--color-primary);
572 margin-inline-start: -1px;
573 }
574}
575
576.embed-external-thumb {
577 width: 120px;
578 height: 80px;
579 object-fit: cover;
580 flex-shrink: 0;
581}
582
583.embed-external-info {
584 display: flex;
585 flex-direction: column;
586 gap: 0.25rem;
587 min-width: 0;
588}
589
590.embed-external-title {
591 font-weight: 600;
592 color: var(--color-text);
593 overflow: hidden;
594 text-overflow: ellipsis;
595 white-space: nowrap;
596}
597
598.embed-external-description {
599 font-size: 0.9em;
600 color: var(--color-muted);
601 overflow: hidden;
602 text-overflow: ellipsis;
603 display: -webkit-box;
604 -webkit-line-clamp: 2;
605 -webkit-box-orient: vertical;
606}
607
608.embed-external-url {
609 font-size: 0.8em;
610 font-family: var(--font-mono);
611 color: var(--color-subtle);
612}
613
614/* Image embeds */
615.embed-images {
616 display: grid;
617 gap: 4px;
618 margin-top: 0.5rem;
619 overflow: hidden;
620}
621
622.embed-images-1 {
623 grid-template-columns: 1fr;
624}
625
626.embed-images-2 {
627 grid-template-columns: 1fr 1fr;
628}
629
630.embed-images-3 {
631 grid-template-columns: 1fr 1fr;
632}
633
634.embed-images-4 {
635 grid-template-columns: 1fr 1fr;
636}
637
638.embed-image-link {
639 display: block;
640 line-height: 0;
641}
642
643.embed-image {
644 width: 100%;
645 height: auto;
646 max-height: 500px;
647 object-fit: cover;
648 object-position: center;
649 margin: 0;
650}
651
652/* Quoted records */
653.embed-quote {
654 display: block;
655 margin-top: 0.5rem;
656 padding: 0.75rem;
657 background: var(--color-overlay);
658 border-inline-start: 2px solid var(--color-tertiary);
659}
660
661@media (prefers-color-scheme: dark) {
662 .embed-quote {
663 border: 1px solid var(--color-border);
664 border-inline-start: 2px solid var(--color-tertiary);
665 }
666}
667
668.embed-quote .embed-author {
669 margin-bottom: 0.5rem;
670}
671
672.embed-quote .embed-avatar {
673 width: 24px;
674 height: 24px;
675 min-width: 24px;
676 min-height: 24px;
677 max-width: 24px;
678 max-height: 24px;
679}
680
681.embed-quote .embed-content {
682 font-size: 0.95em;
683 margin-bottom: 0;
684}
685
686/* Placeholder states */
687.embed-video-placeholder,
688.embed-not-found,
689.embed-blocked,
690.embed-detached,
691.embed-unknown {
692 display: block;
693 padding: 1rem;
694 background: var(--color-overlay);
695 border-inline-start: 2px solid var(--color-border);
696 color: var(--color-muted);
697 font-style: italic;
698 margin-top: 0.5rem;
699 font-family: var(--font-mono);
700 font-size: 0.9em;
701}
702
703@media (prefers-color-scheme: dark) {
704 .embed-video-placeholder,
705 .embed-not-found,
706 .embed-blocked,
707 .embed-detached,
708 .embed-unknown {
709 border: 1px dashed var(--color-border);
710 }
711}
712
713/* Record card embeds (feeds, lists, labelers, starter packs) */
714.embed-record-card {
715 display: block;
716 margin-top: 0.5rem;
717 padding: 0.75rem;
718 background: var(--color-overlay);
719 border-inline-start: 2px solid var(--color-tertiary);
720}
721
722.embed-record-card > .embed-author-name {
723 display: block;
724 font-size: 1.1em;
725}
726
727.embed-subtitle {
728 display: block;
729 font-size: 0.85em;
730 color: var(--color-muted);
731 margin-bottom: 0.5rem;
732}
733
734.embed-record-card .embed-description {
735 display: block;
736 margin: 0.5rem 0;
737}
738
739.embed-record-card .embed-stats {
740 display: block;
741 margin-top: 0.25rem;
742}
743
744/* Generic record fields */
745.embed-fields {
746 display: block;
747 margin-top: 0.5rem;
748 font-family: var(--font-ui);
749 font-size: 0.85rem;
750 color: var(--color-muted);
751}
752
753.embed-field {
754 display: block;
755 margin-top: 0.25rem;
756}
757
758/* Nested fields get indentation */
759.embed-fields .embed-fields {
760 display: block;
761 margin-top: 0.5rem;
762 margin-inline-start: 1rem;
763 padding-inline-start: 0.5rem;
764 border-inline-start: 1px solid var(--color-border);
765}
766
767/* Type label inside fields should be block with spacing */
768.embed-fields > .embed-author-handle {
769 display: block;
770 margin-bottom: 0.25rem;
771}
772
773.embed-field-name {
774 color: var(--color-subtle);
775}
776
777.embed-field-number {
778 color: var(--color-tertiary);
779}
780
781.embed-field-date {
782 color: var(--color-muted);
783}
784
785.embed-field-count {
786 color: var(--color-muted);
787 font-style: italic;
788}
789
790.embed-field-bool-true {
791 color: var(--color-success);
792}
793
794.embed-field-bool-false {
795 color: var(--color-muted);
796}
797
798.embed-field-link,
799.embed-field-aturi {
800 color: var(--color-link);
801 text-decoration: none;
802}
803
804.embed-field-link:hover,
805.embed-field-aturi:hover {
806 text-decoration: underline;
807}
808
809.embed-field-did {
810 font-family: var(--font-mono);
811 font-size: 0.9em;
812}
813
814.embed-field-did .did-scheme,
815.embed-field-did .did-separator {
816 color: var(--color-muted);
817}
818
819.embed-field-did .did-method {
820 color: var(--color-tertiary);
821}
822
823.embed-field-did .did-identifier {
824 color: var(--color-text);
825}
826
827.embed-field-nsid {
828 color: var(--color-secondary);
829}
830
831.embed-field-handle {
832 color: var(--color-link);
833}
834
835/* AT URI highlighting */
836.aturi-scheme {
837 color: var(--color-muted);
838}
839
840.aturi-slash {
841 color: var(--color-muted);
842}
843
844.aturi-authority {
845 color: var(--color-link);
846}
847
848.aturi-collection {
849 color: var(--color-secondary);
850}
851
852.aturi-rkey {
853 color: var(--color-tertiary);
854}
855
856/* Generic AT Protocol record embed */
857.atproto-record > .embed-author-handle {
858 display: block;
859 margin-bottom: 0.25rem;
860}
861
862.atproto-record > .embed-author-name {
863 display: block;
864 margin-bottom: 0.5rem;
865}
866
867.atproto-record > .embed-content {
868 margin-bottom: 0.5rem;
869}
870
871/* Notebook entry embed - full width, expandable */
872.atproto-entry {
873 max-width: none;
874 width: 100%;
875 margin: 1.5rem 0;
876 padding: 0;
877 background: var(--color-surface);
878 border: 1px solid var(--color-border);
879 border-inline-start: 1px solid var(--color-border);
880 box-shadow: none;
881 overflow: hidden;
882}
883
884.atproto-entry:hover {
885 border-inline-start-color: var(--color-border);
886}
887
888@media (prefers-color-scheme: dark) {
889 .atproto-entry {
890 border: 1px solid var(--color-border);
891 border-inline-start: 1px solid var(--color-border);
892 }
893}
894
895.embed-entry-header {
896 display: flex;
897 flex-wrap: wrap;
898 align-items: baseline;
899 gap: 0.5rem 1rem;
900 padding: 0.75rem 1rem;
901 background: var(--color-overlay);
902 border-bottom: 1px solid var(--color-border);
903}
904
905.embed-entry-title {
906 font-size: 1.1em;
907 font-weight: 600;
908 color: var(--color-text);
909}
910
911.embed-entry-author {
912 font-size: 0.85em;
913 color: var(--color-muted);
914}
915
916/* Hidden checkbox for expand/collapse */
917.embed-entry-toggle {
918 display: none;
919}
920
921/* Content wrapper - scrollable when collapsed */
922.embed-entry-content {
923 max-height: 30rem;
924 overflow-y: auto;
925 padding: 1rem;
926 transition: max-height 0.3s ease;
927}
928
929/* When checkbox is checked, expand fully */
930.embed-entry-toggle:checked ~ .embed-entry-content {
931 max-height: none;
932}
933
934/* Expand/collapse button */
935.embed-entry-expand {
936 display: block;
937 width: 100%;
938 padding: 0.5rem;
939 text-align: center;
940 font-size: 0.85em;
941 font-family: var(--font-ui);
942 color: var(--color-muted);
943 background: var(--color-overlay);
944 border-top: 1px solid var(--color-border);
945 cursor: pointer;
946 user-select: none;
947}
948
949.embed-entry-expand:hover {
950 color: var(--color-text);
951 background: var(--color-surface);
952}
953
954/* Toggle button text */
955.embed-entry-expand::before {
956 content: "Expand ↓";
957}
958
959.embed-entry-toggle:checked ~ .embed-entry-expand::before {
960 content: "Collapse ↑";
961}
962
963/* Hide expand button if content doesn't overflow (via JS class) */
964.atproto-entry.no-overflow .embed-entry-expand {
965 display: none;
966}
967
968/* Horizontal Rule */
969hr {
970 border: none;
971 border-top: 2px solid var(--color-border);
972 margin: 2rem 0;
973}
974
975/* Tablet and mobile responsiveness */
976@media (max-width: 900px) {
977 .notebook-content {
978 padding: 1.5rem 1rem;
979 max-width: 100%;
980 }
981
982 h1 {
983 font-size: 1.85rem;
984 }
985 h2 {
986 font-size: 1.4rem;
987 }
988 h3 {
989 font-size: 1.2rem;
990 }
991
992 blockquote {
993 margin-inline-start: 0;
994 margin-inline-end: 0;
995 }
996}
997
998/* Small mobile phones */
999@media (max-width: 480px) {
1000 .notebook-content {
1001 padding: 1rem 0.75rem;
1002 }
1003
1004 h1 {
1005 font-size: 1.65rem;
1006 }
1007 h2 {
1008 font-size: 1.3rem;
1009 }
1010 h3 {
1011 font-size: 1.1rem;
1012 }
1013
1014 blockquote {
1015 padding-inline-start: 0.75rem;
1016 padding-inline-end: 0.75rem;
1017 }
1018}
1019
1020/* Leaflet document embeds */
1021.atproto-leaflet {
1022 max-width: none;
1023 width: 100%;
1024 margin: 1rem 0;
1025}
1026
1027.leaflet-document {
1028 display: block;
1029}
1030
1031.leaflet-text {
1032 margin: 0.5rem 0;
1033}
1034
1035.leaflet-button {
1036 display: inline-block;
1037 padding: 0.5rem 1rem;
1038 background: var(--color-primary);
1039 color: var(--color-base);
1040 text-decoration: none;
1041 border-radius: 4px;
1042 margin: 0.5rem 0;
1043}
1044
1045.leaflet-button:hover {
1046 opacity: 0.9;
1047}
1048
1049/* Alignment utilities */
1050.align-center {
1051 text-align: center;
1052}
1053.align-right {
1054 text-align: right;
1055}
1056.align-justify {
1057 text-align: justify;
1058}
1059
1060/* ==========================================================================
1061 SYNTAX HIGHLIGHTING
1062 ========================================================================== */
1063
1064/* Syntax highlighting - Light Mode (default) */
1065/*
1066 * theme "Rosé Pine Dawn" generated by syntect
1067 */
1068
1069.wvc-code {
1070 color: #575279;
1071 background-color: #faf4ed;
1072}
1073
1074.wvc-comment {
1075 color: #797593;
1076 font-style: italic;
1077}
1078.wvc-string,
1079.wvc-punctuation.wvc-definition.wvc-string {
1080 color: #ea9d34;
1081}
1082.wvc-constant.wvc-numeric {
1083 color: #ea9d34;
1084}
1085.wvc-constant.wvc-language {
1086 color: #ea9d34;
1087 font-weight: bold;
1088}
1089.wvc-constant.wvc-character,
1090.wvc-constant.wvc-other {
1091 color: #ea9d34;
1092}
1093.wvc-variable {
1094 color: #575279;
1095 font-style: italic;
1096}
1097.wvc-keyword {
1098 color: #286983;
1099}
1100.wvc-storage {
1101 color: #56949f;
1102}
1103.wvc-storage.wvc-type {
1104 color: #56949f;
1105}
1106.wvc-entity.wvc-name.wvc-class {
1107 color: #286983;
1108 font-weight: bold;
1109}
1110.wvc-entity.wvc-other.wvc-inherited-class {
1111 color: #286983;
1112 font-style: italic;
1113}
1114.wvc-entity.wvc-name.wvc-function {
1115 color: #d7827e;
1116 font-style: italic;
1117}
1118.wvc-variable.wvc-parameter {
1119 color: #907aa9;
1120}
1121.wvc-entity.wvc-name.wvc-tag {
1122 color: #286983;
1123 font-weight: bold;
1124}
1125.wvc-entity.wvc-other.wvc-attribute-name {
1126 color: #907aa9;
1127}
1128.wvc-support.wvc-function {
1129 color: #d7827e;
1130 font-weight: bold;
1131}
1132.wvc-support.wvc-constant {
1133 color: #ea9d34;
1134 font-weight: bold;
1135}
1136.wvc-support.wvc-type,
1137.wvc-support.wvc-class {
1138 color: #56949f;
1139 font-weight: bold;
1140}
1141.wvc-support.wvc-other.wvc-variable {
1142 color: #b4637a;
1143 font-weight: bold;
1144}
1145.wvc-invalid {
1146 color: #575279;
1147 background-color: #b4637a;
1148}
1149.wvc-invalid.wvc-deprecated {
1150 color: #575279;
1151 background-color: #907aa9;
1152}
1153.wvc-punctuation,
1154.wvc-keyword.wvc-operator {
1155 color: #797593;
1156}
1157
1158/* Syntax highlighting - Dark Mode */
1159@media (prefers-color-scheme: dark) {
1160 /*
1161 * theme "Rosé Pine" generated by syntect
1162 */
1163
1164 .wvc-code {
1165 color: #e0def4;
1166 background-color: #191724;
1167 }
1168
1169 .wvc-comment {
1170 color: #908caa;
1171 font-style: italic;
1172 }
1173 .wvc-string,
1174 .wvc-punctuation.wvc-definition.wvc-string {
1175 color: #f6c177;
1176 }
1177 .wvc-constant.wvc-numeric {
1178 color: #f6c177;
1179 }
1180 .wvc-constant.wvc-language {
1181 color: #f6c177;
1182 font-weight: bold;
1183 }
1184 .wvc-constant.wvc-character,
1185 .wvc-constant.wvc-other {
1186 color: #f6c177;
1187 }
1188 .wvc-variable {
1189 color: #e0def4;
1190 font-style: italic;
1191 }
1192 .wvc-keyword {
1193 color: #31748f;
1194 }
1195 .wvc-storage {
1196 color: #9ccfd8;
1197 }
1198 .wvc-storage.wvc-type {
1199 color: #9ccfd8;
1200 }
1201 .wvc-entity.wvc-name.wvc-class {
1202 color: #31748f;
1203 font-weight: bold;
1204 }
1205 .wvc-entity.wvc-other.wvc-inherited-class {
1206 color: #31748f;
1207 font-style: italic;
1208 }
1209 .wvc-entity.wvc-name.wvc-function {
1210 color: #ebbcba;
1211 font-style: italic;
1212 }
1213 .wvc-variable.wvc-parameter {
1214 color: #c4a7e7;
1215 }
1216 .wvc-entity.wvc-name.wvc-tag {
1217 color: #31748f;
1218 font-weight: bold;
1219 }
1220 .wvc-entity.wvc-other.wvc-attribute-name {
1221 color: #c4a7e7;
1222 }
1223 .wvc-support.wvc-function {
1224 color: #ebbcba;
1225 font-weight: bold;
1226 }
1227 .wvc-support.wvc-constant {
1228 color: #f6c177;
1229 font-weight: bold;
1230 }
1231 .wvc-support.wvc-type,
1232 .wvc-support.wvc-class {
1233 color: #9ccfd8;
1234 font-weight: bold;
1235 }
1236 .wvc-support.wvc-other.wvc-variable {
1237 color: #eb6f92;
1238 font-weight: bold;
1239 }
1240 .wvc-invalid {
1241 color: #e0def4;
1242 background-color: #eb6f92;
1243 }
1244 .wvc-invalid.wvc-deprecated {
1245 color: #e0def4;
1246 background-color: #c4a7e7;
1247 }
1248 .wvc-punctuation,
1249 .wvc-keyword.wvc-operator {
1250 color: #908caa;
1251 }
1252}