j0.lol
1/* vietnamese */
2@font-face {
3 font-family: "Hepta Slab";
4 font-style: normal;
5 font-weight: 1 900;
6 src: url("/static/fonts/HeptaSlab-VariableFont_wght.ttf") format("truetype");
7 unicode-range:
8 U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
9 U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
10 U+1EA0-1EF9, U+20AB;
11}
12/* latin-ext */
13@font-face {
14 font-family: "Hepta Slab";
15 font-style: normal;
16 font-weight: 1 900;
17 src: url("/static/fonts/HeptaSlab-VariableFont_wght.ttf") format("truetype");
18}
19/* latin */
20@font-face {
21 font-family: "Hepta Slab";
22 font-style: normal;
23 font-weight: 1 900;
24 src: url("/static/fonts/HeptaSlab-VariableFont_wght.ttf") format("truetype");
25}
26@font-face {
27 font-family: "DM Sans";
28 src:
29 local("DM Sans"),
30 url("/static/fonts/DMSans-VariableFont_opsz,wght.ttf")
31 format("truetype");
32}
33
34@font-face {
35 font-family: "DM Sans Italic";
36 src:
37 local("DM Sans Italic"),
38 url("/static/fonts/DMSans-Italic-VariableFont_opsz,wght.ttf")
39 format("truetype");
40}
41
42@font-face {
43 font-family: "Maple Mono";
44 src:
45 local("Maple Mono Italic"),
46 url("/static/fonts/MapleMono-Italic.ttf") format("truetype");
47 font-style: italic;
48}
49
50@font-face {
51 font-family: "Maple Mono";
52 src:
53 local("Maple Mono"),
54 url("/static/fonts/MapleMono.ttf") format("truetype");
55 font-style: normal;
56}
57
58@font-face {
59 font-family: "Nishiki teki";
60 src:
61 local("Nishiki-teki"),
62 url("/static/fonts/NishikiTeki.ttf") format("truetype");
63}
64
65:root {
66 /* Color palette */
67 --primary-50: 247 244 254;
68 --primary-100: 239 235 252;
69 --primary-200: 227 218 250;
70 --primary-300: 206 189 245;
71 --primary-400: 180 151 238;
72 --primary-500: 155 109 229;
73 --primary-600: 140 77 218;
74 --primary-700: 124 59 198;
75 --primary-800: 104 49 166;
76 --primary-900: 87 42 136;
77 --primary-950: 54 25 92;
78 --secondary-50: 243 243 250;
79 --secondary-100: 233 234 246;
80 --secondary-200: 214 214 239;
81 --secondary-300: 189 189 228;
82 --secondary-400: 167 162 215;
83 --secondary-500: 148 138 202;
84 --secondary-600: 131 114 185;
85 --secondary-700: 113 96 162;
86 --secondary-800: 93 80 131;
87 --secondary-900: 77 69 106;
88 --secondary-925: 55 49 76;
89 --secondary-950: 34 30 46;
90 --secondary-975: 17 15 23;
91 --accent: rgb(var(--primary-400));
92
93 color-scheme: light dark;
94
95 --max-width: 48rem;
96 --bg-header: var(--accent);
97 --fg-header: rgb(var(--secondary-950));
98 --border-header: rgb(var(--secondary-700));
99 --plain-bg: light-dark(rgb(var(--primary-50)), rgb(var(--secondary-975)));
100 --bg: light-dark(rgb(var(--primary-200)), rgb(var(--secondary-950)));
101 --bg-depth: light-dark(var(--bg), rgb(var(--secondary-925)));
102 --bg-surface0: light-dark(
103 rgb(var(--primary-100)),
104 rgb(var(--secondary-900))
105 );
106 --bg-surface1: light-dark(
107 rgb(var(--primary-50)),
108 rgb(var(--secondary-975))
109 );
110 --text-hard: light-dark(rgb(var(--secondary-900)), rgb(var(--primary-100)));
111 --text: light-dark(rgb(var(--secondary-900)), rgb(var(--primary-200)));
112 --subtext: light-dark(rgb(var(--secondary-700)), rgb(var(--primary-300)));
113 --anchor: light-dark(
114 hsl(from rgb(var(--secondary-700)) calc(h - 10) calc(s + 10) l),
115 hsl(from rgb(var(--secondary-400)) calc(h - 10) calc(s + 10) l)
116 );
117 --anchor-visited: light-dark(
118 hsl(from rgb(var(--primary-700)) calc(h + 10) s l),
119 hsl(from rgb(var(--primary-400)) calc(h + 10) s l)
120 );
121 --anchor-active: light-dark(
122 rgb(var(--primary-950)),
123 rgb(var(--primary-100))
124 );
125 --border: light-dark(rgb(var(--primary-800)), rgb(var(--secondary-600)));
126 --border-surface0: light-dark(
127 rgb(var(--primary-800)),
128 rgb(var(--secondary-600))
129 );
130 --preview: light-dark(rgb(var(--secondary-200)), rgb(var(--secondary-950)));
131 --font-mono: "Maple Mono", monospace;
132 --font-body: "DM Sans", sans-serif;
133 --font-serif: "Hepta Slab", serif;
134}
135
136/* https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#the_alternative_css_box_model */
137html {
138 box-sizing: border-box;
139 scroll-padding-top: 4em;
140}
141
142:target {
143 background-color: rgba(from var(--accent) r g b / 0.2);
144 border: 1px solid rgba(from var(--accent) r g b / 0.5);
145 padding: 0.1em;
146}
147
148body {
149 font-family: var(--font-body);
150 background-color: var(--bg);
151 color: var(--text);
152}
153
154p,
155blockquote,
156h1,
157h2,
158h3 {
159 text-wrap: pretty;
160}
161.wrapper {
162 min-height: 100vh;
163 display: grid;
164 grid-template-rows: auto 1fr auto;
165}
166
167main > :first-child,
168article > :first-child {
169 margin-top: 0;
170 margin-block-start: 0;
171}
172
173main > :last-child,
174article > :last-child {
175 margin-bottom: 0;
176 margin-block-end: 0;
177}
178
179main,
180article {
181 padding-top: 0.33rem;
182 padding-bottom: 0.33rem;
183}
184
185main,
186.page,
187article {
188 flex-grow: 1;
189 font-family: var(--font-body);
190 margin: 1rem auto;
191 background: var(--plain-bg);
192 border: 1px solid light-dark(var(--subtext), var(--bg-surface0));
193 box-shadow: 0.3rem 0.5rem
194 light-dark(
195 hsl(
196 from rgb(var(--secondary-900)) calc(h - 10) calc(s + 10)
197 calc(l + 10)
198 ),
199 hsl(
200 from rgb(var(--secondary-950)) calc(h + 40) calc(s + 80)
201 calc(l - 10)
202 )
203 );
204 width: var(--max-width);
205 padding: 1.5rem 1rem;
206
207 /*
208 Needed, otherwise .wrapper grid will use `min-width: min-content`.
209 Problematic if an element expands past 100vw,
210 where it will cause main to grow massively.
211
212 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#values
213 */
214 min-width: 0;
215
216 @media (width <= 48rem) {
217 & {
218 width: 100%;
219 margin: 0 auto;
220 border: none;
221 box-shadow: none;
222 }
223 }
224
225 & > * {
226 max-width: min(var(--max-width), 100%);
227 margin-left: auto;
228 margin-right: auto;
229 }
230}
231
232a {
233 color: var(--anchor);
234
235 &:visited {
236 color: var(--anchor-visited);
237 }
238
239 &:hover,
240 &:focus {
241 text-decoration: none;
242 }
243
244 &:active {
245 color: var(--anchor-active);
246 }
247}
248
249h1,
250h2,
251h3,
252h4,
253h5,
254h6 {
255 font-family: var(--font-serif);
256 /* font-optical-sizing: auto; */
257 font-style: normal;
258 font-weight: 450;
259 margin-block-start: 1.5rem;
260 margin-block-end: 0.5rem;
261}
262
263/* h1.blog-head,
264h1.page-head {
265 margin-block-start: 0.33rem;
266} */
267
268span.blog-subhead {
269 font-family: var(--font-body);
270}
271
272p.blog-publish {
273 font-family: var(--font-body);
274 font-style: italic;
275}
276
277p,
278ul,
279ol {
280 margin-block-start: 0.5rem;
281 margin-block-end: 1rem;
282}
283p code {
284 font-family: var(--font-mono);
285 font-weight: 400;
286 font-size: 10pt;
287}
288
289samp {
290 font-family: var(--font-mono);
291 font-weight: 400;
292}
293
294body {
295 counter-reset: figure 0;
296}
297
298figure {
299 display: flex;
300 flex-direction: column;
301
302 figcaption {
303 &::before {
304 counter-increment: figure;
305 content: "Figure " counter(figure) ": ";
306 }
307 }
308}
309
310figure:has(img) {
311 box-shadow: 1px 2px var(--bg-depth);
312 background-color: #000;
313 border: 1px solid rgb(53 50 68);
314 justify-content: flex-end;
315
316 img {
317 padding: 0.2rem;
318 }
319 figcaption {
320 padding: 0.2rem 0;
321 border-top: 1px solid rgb(53 50 68);
322 background: var(--bg);
323 }
324}
325
326img:not(.raw) {
327 max-height: 24rem;
328 max-width: 100%;
329 height: auto;
330 object-fit: contain;
331
332 margin: 0 auto;
333 display: block;
334}
335
336img:not(.raw).applerounded {
337 border-radius: 1.5rem;
338}
339
340img:not(.raw).superrounded {
341 border-radius: 3rem;
342}
343
344img:not(.raw).blackbg {
345 background-color: #000000;
346}
347
348abbr {
349 text-decoration-style: dotted;
350 cursor: help;
351}
352
353hr {
354 width: 100%;
355}
356hr.frontmatter {
357 border: none;
358 border-top: 3px double var(--text);
359 color: var(--text);
360 overflow: visible;
361 text-align: center;
362 height: 5px;
363}
364
365hr.frontmatter::after {
366 background: var(--bg-surface1);
367 content: "0";
368 font-family: var(--font-mono);
369 padding: 0 2px;
370 position: relative;
371 top: -10px;
372}
373
374hr.frontmatter.pilcrow::after {
375 content: "¶";
376}
377
378#title {
379 font-size: 2rem;
380 margin-bottom: 0.2rem;
381}
382
383.pona {
384 font-family: "Nishiki teki", "Fairfax HD", sans-serif;
385}
386
387.metadata {
388 /* make italic */
389 font-family: var(--font-mono);
390 color: var(--subtext);
391 margin-bottom: 1rem;
392 display: flex;
393 flex-direction: row;
394 gap: 1rem;
395 font-style: italic;
396}
397
398.table-of-contents {
399 background-color: var(--bg-surface0);
400 list-style: none;
401 padding-inline-start: 0;
402 padding: 1rem;
403
404 & h3 {
405 margin-top: 0;
406 }
407
408 & a {
409 color: var(--text);
410 }
411}
412
413footer#page-footer {
414 padding: 1rem 0;
415 background-color: var(--bg-header);
416 color: var(--fg-header);
417 border-top: 2px solid var(--border-header);
418
419 div.inner {
420 width: min(calc(var(--max-width) - 0.5rem), 100%);
421 padding: 0 1rem;
422 margin-left: auto;
423 margin-right: auto;
424 display: flex;
425 flex-direction: row;
426 align-items: center;
427 justify-content: space-between;
428 }
429
430 div._88x31s {
431 justify-content: end;
432 }
433
434 @media (width <= 48rem) {
435 & {
436 flex-direction: column;
437 }
438 }
439
440 @media (width <= 27rem) {
441 & {
442 padding: 0.5em;
443 }
444 }
445}
446
447div._88x31s {
448 display: flex;
449 flex-flow: row wrap;
450 align-items: center;
451 gap: 1px;
452
453 & > * {
454 width: 88px;
455 height: 31px;
456 display: block;
457 }
458
459 img {
460 image-rendering: pixelated;
461 }
462}
463
464.tablet-show {
465 display: none;
466}
467@media (width <=48rem) {
468 .tablet-show {
469 display: initial;
470 }
471
472 .tablet-hide {
473 display: none;
474 }
475}
476
477.mobile-show {
478 display: initial;
479}
480
481@media (width >=27rem) {
482 .mobile-show {
483 display: none;
484 }
485}
486
487@media (width <=27rem) {
488 .mobile-hide {
489 display: inherit;
490 }
491}
492
493.sr-only {
494 clip: rect(1px, 1px, 1px, 1px);
495 clip-path: inset(50%);
496 height: 1px;
497 width: 1px;
498 margin: -1px;
499 overflow: hidden;
500 padding: 0;
501 position: absolute;
502}
503
504main {
505 container-type: inline-size;
506}
507@container (width < 28.5rem) {
508 /* Specificity hack */
509 /* https://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ */
510 .card-stack.card-stack {
511 grid-template-columns: 1fr;
512 }
513}
514
515.card-stack {
516 display: grid;
517 gap: 0.5em;
518 grid-template-columns: repeat(auto-fill, 14rem);
519 justify-content: center;
520}
521
522.card:hover > .title {
523 color: var(--anchor);
524 text-decoration: underline;
525
526 .year {
527 color: var(--subtext);
528 }
529}
530
531.card-stack > a {
532 display: flex;
533 flex-direction: column;
534}
535
536.card {
537 border-radius: 0.5rem;
538 background-color: var(--bg-surface0);
539 color: var(--text);
540 border: 1px solid var(--border);
541 display: flex;
542 flex-direction: column;
543 height: 100%;
544 overflow: clip;
545
546 .preview {
547 max-width: 100%;
548 aspect-ratio: 16 / 9;
549 background: var(--preview);
550 display: flex;
551 flex-direction: column;
552 border-bottom: 1px solid var(--border);
553 overflow: clip;
554
555 img {
556 margin: auto;
557 max-width: 100%;
558 }
559 }
560
561 .blurb {
562 flex-grow: 1;
563 padding: 0.5em;
564
565 span {
566 display: block;
567
568 &.title {
569 font-size: 1.2rem;
570 }
571
572 &.year {
573 color: var(--anchor);
574 display: inline;
575 font-size: 0.8em;
576 }
577
578 &.description {
579 color: var(--subtext);
580 font-size: 0.8em;
581 }
582 }
583 }
584
585 .links {
586 display: flex;
587 flex-flow: row wrap;
588 gap: 0.2em;
589 justify-content: space-evenly;
590 margin: 0.2em;
591
592 a {
593 color: var(--text);
594 text-decoration: none;
595 display: block;
596 background-color: var(--bg-surface1);
597 flex-grow: 1;
598 border-top: var(--border);
599 border: 1px solid var(--border);
600 padding: 0.5em 0;
601 border-radius: 0.3em;
602 text-align: center;
603 }
604 }
605}
606
607blockquote {
608 color: var(--text-hard);
609 border-radius: 1rem;
610 border-right: 1px solid light-dark(var(--bg), rgb(var(--secondary-925)));
611 border-left: 0.3rem solid var(--border);
612 padding: 0.1rem 0.7rem;
613 background-color: var(--bg-surface0);
614 box-shadow: 0 0.1rem light-dark(var(--bg), rgb(var(--secondary-925)));
615 word-break: break-all;
616}
617
618blockquote.small {
619 border-radius: 0.2rem;
620 margin: 0 0.25em;
621 padding: 0.25em;
622}
623
624bsky-comments {
625 --background-color: var(--bg-surface1);
626 --text-color: var(--text);
627 --link-color: var(--subtext);
628 --link-hover-color: var(--anchor-active);
629 --comment-meta-color: var(--subtext);
630 --reply-border-color: var(--text);
631}
632
633figcaption {
634 text-align: center;
635}
636
637@media (prefers-color-scheme: dark) {
638 .shiki,
639 .shiki span {
640 color: var(--shiki-dark) !important;
641 background-color: var(--shiki-dark-bg) !important;
642 /* Optional, if you also want font styles */
643 font-style: var(--shiki-dark-font-style) !important;
644 font-weight: var(--shiki-dark-font-weight) !important;
645 text-decoration: var(--shiki-dark-text-decoration) !important;
646 }
647}
648
649div.code-block {
650 position: relative;
651 margin: 1em 0px;
652 border: 1px solid var(--border);
653 border-radius: 0.5rem;
654 overflow: hidden;
655
656 div.code-language {
657 background-color: var(--bg);
658 color: var(--text);
659
660 border-bottom-left-radius: 0.5rem;
661 font-family: var(--font-serif);
662 border-left: 1px solid var(--border);
663 border-bottom: 1px solid var(--border);
664
665 text-transform: capitalize;
666
667 padding: 0 0.2rem;
668 position: absolute;
669 right: 0;
670 top: 0;
671 }
672
673 pre {
674 margin: 0;
675 border: 0;
676 border-radius: 0;
677 overflow-x: auto;
678 }
679}
680
681/* this css looks weird? lol? i mean it works. */
682:not(pre) > code {
683 background-color: var(--plain-bg);
684 padding: 0 0.1rem;
685 border: 1px solid var(--bg-surface0);
686 border-radius: 0.3rem;
687 font-family: var(--font-mono);
688 font-size: 10pt;
689}
690pre {
691 background-color: var(--plain-bg);
692 padding: 1rem;
693 border: 1px solid var(--border);
694 border-radius: 0.5rem;
695 font-family: var(--font-mono);
696 font-size: 10pt;
697
698 & b {
699 font-weight: 500;
700 }
701
702 code {
703 word-wrap: normal;
704 white-space: pre;
705 }
706
707 @media (width <= 27rem) {
708 & {
709 font-size: 9pt;
710 }
711 }
712}
713
714pre[lang="ansi"] {
715 --red: rgb(243 139 168);
716 --green: rgb(166 227 161);
717 --yellow: rgb(249 226 175);
718 --blue: rgb(137 180 250);
719 --pink: rgb(245 194 231);
720 --teal: rgb(148 226 213);
721 --black: #6c7086;
722}
723
724span.emoji-icon {
725 padding-right: 0.2em;
726 padding-left: 0.2rem;
727 font-style: normal;
728}
729
730.subtle {
731 background: none;
732 border: none;
733 font-size: 0.8em;
734 padding: 0;
735 color: rgba(34, 30, 46, 0.3) !important;
736}
737.subtle.clickme {
738 text-decoration: underline;
739 cursor: pointer;
740
741 &:hover {
742 text-decoration: none;
743 }
744}
745
746#editorWrapper {
747 display: grid;
748 grid-template-columns: 1fr 1fr;
749 gap: 0.5rem;
750 padding: 0.2rem;
751 width: 100vw;
752 height: 100vh;
753
754 /* flip when breakpoint phone */
755 @media (width <= 768px) {
756 grid-template-columns: 1fr;
757 grid-auto-rows: minmax(40vh, auto);
758 }
759}
760
761#editorPreview {
762 overflow: scroll;
763 padding: 0 0.5rem;
764 background-color: var(--bg-surface1);
765}
766
767#editor,
768#editorPreview {
769 border: 1px solid rebeccapurple;
770 border-radius: 0.3rem;
771}
772#editorPreview.error {
773 border: 1px solid red;
774 border-radius: 0;
775}
776
777.editorInnerWrapper {
778 display: flex;
779 flex-flow: column nowrap;
780 gap: 0.25rem;
781}
782
783#editor {
784 flex: 1;
785 font-size: medium;
786}
787
788.editorInputs {
789 flex: 0;
790
791 .contents {
792 display: flex;
793 flex-flow: row wrap;
794 justify-content: space-around;
795
796 label {
797 display: flex;
798 flex-flow: column nowrap;
799 align-items: center;
800 justify-content: center;
801 }
802 }
803}