karitham.dev website! atproto & fancy ssg + csr & blog articles
karitham.dev
atproto
gleam
blog
nix
blog: priv the llms post for now
+106
-32
+1
-1
priv/posts/i-like-llms/index.md
+1
-1
priv/posts/i-like-llms/index.md
+103
-31
priv/static/style.css
+103
-31
priv/static/style.css
···
70
70
text-wrap: balance;
71
71
}
72
72
73
-
h1 { font-size: 1.5rem; }
73
+
h1 {
74
+
font-size: 1.5rem;
75
+
}
74
76
75
-
h2 { font-size: 1.2rem; }
77
+
h2 {
78
+
font-size: 1.2rem;
79
+
}
76
80
77
-
h3 { font-size: 1.05rem; }
81
+
h3 {
82
+
font-size: 1.05rem;
83
+
}
78
84
79
85
/* Links — terminal-style invert on hover */
80
86
a {
81
87
color: var(--accent);
82
88
text-decoration: none;
83
-
transition: color 120ms ease-out, background 120ms ease-out;
89
+
transition:
90
+
color 120ms ease-out,
91
+
background 120ms ease-out;
84
92
85
93
&:hover {
86
94
color: var(--bg);
···
163
171
display: block;
164
172
}
165
173
166
-
figure { margin: 0; }
174
+
figure {
175
+
margin: 0;
176
+
}
167
177
168
178
figcaption {
169
179
font-size: 0.8rem;
···
175
185
Utility classes
176
186
============================================================ */
177
187
178
-
.dim { color: var(--text-dim); }
188
+
.dim {
189
+
color: var(--text-dim);
190
+
}
179
191
180
-
.dimmer { color: var(--text-dimmer); }
192
+
.dimmer {
193
+
color: var(--text-dimmer);
194
+
}
181
195
182
196
.emph {
183
197
color: var(--blue);
···
282
296
Profile
283
297
============================================================ */
284
298
285
-
#profile { padding: 0; }
299
+
#profile {
300
+
padding: 0;
301
+
}
286
302
287
303
/* Avatar + text row */
288
304
.profile-header {
···
292
308
padding: 0.5rem 0 0 1.5rem;
293
309
}
294
310
295
-
.profile-info { padding-bottom: 2px; }
311
+
.profile-info {
312
+
padding-bottom: 2px;
313
+
}
296
314
297
315
#profile .avatar {
298
316
width: 64px;
···
309
327
margin: 0;
310
328
}
311
329
312
-
.handle { margin: 0.15rem 0 0; }
330
+
.handle {
331
+
margin: 0.15rem 0 0;
332
+
}
313
333
314
334
.handle a {
315
335
font-size: 0.85rem;
···
355
375
Sections
356
376
============================================================ */
357
377
358
-
.section { margin: 2.5rem 0; }
378
+
.section {
379
+
margin: 2.5rem 0;
380
+
}
359
381
360
382
:is(#plays, #repos, .section-header) h2::before {
361
383
content: "$ ";
···
374
396
}
375
397
376
398
@keyframes stale-pulse {
377
-
0%, 100% { opacity: 0.25; }
378
-
50% { opacity: 1; }
399
+
0%,
400
+
100% {
401
+
opacity: 0.25;
402
+
}
403
+
50% {
404
+
opacity: 1;
405
+
}
379
406
}
380
407
381
408
/* No border-bottom — the rows below carry their own dividers. */
···
400
427
border-bottom: 1px solid var(--border);
401
428
transition: background 120ms ease-out;
402
429
403
-
&:last-child { border-bottom: none; }
404
-
&:hover { background: var(--bg-alt); }
430
+
&:last-child {
431
+
border-bottom: none;
432
+
}
433
+
&:hover {
434
+
background: var(--bg-alt);
435
+
}
405
436
}
406
437
407
438
.card {
···
449
480
font-size: 0.78rem;
450
481
}
451
482
452
-
.card-tag { color: var(--blue); }
483
+
.card-tag {
484
+
color: var(--blue);
485
+
}
453
486
454
487
.card-tag::before {
455
488
content: "#";
···
586
619
text-underline-offset: 4px;
587
620
}
588
621
589
-
& pre { margin: 1.25rem 0; }
590
-
& p { margin: 1rem 0; }
591
-
& img { margin: 1rem 0; }
592
-
& :is(ul, ol) { padding-left: 1.5rem; }
622
+
& pre {
623
+
margin: 1.25rem 0;
624
+
}
625
+
& p {
626
+
margin: 1rem 0;
627
+
}
628
+
& img {
629
+
margin: 1rem 0;
630
+
}
631
+
& :is(ul, ol) {
632
+
padding-left: 1.5rem;
633
+
}
593
634
}
594
635
595
636
/* ============================================================
···
610
651
color: var(--text-dimmer);
611
652
border: 1px solid var(--border);
612
653
margin-left: -1px;
613
-
transition: color 120ms ease-out, border-color 120ms ease-out,
654
+
transition:
655
+
color 120ms ease-out,
656
+
border-color 120ms ease-out,
614
657
background 120ms ease-out;
615
658
616
-
&:first-child { margin-left: 0; }
659
+
&:first-child {
660
+
margin-left: 0;
661
+
}
617
662
618
663
&:hover {
619
664
color: var(--accent);
···
635
680
Syntax tokens (highlight.js, Catppuccin Macchiato)
636
681
============================================================ */
637
682
638
-
.hljs { color: var(--text); background: transparent; }
683
+
.hljs {
684
+
color: var(--text);
685
+
background: transparent;
686
+
}
639
687
640
688
:is(.hljs-comment, .hljs-quote) {
641
689
color: var(--text-dimmer);
642
690
font-style: italic;
643
691
}
644
692
645
-
:is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-link) {
693
+
:is(
694
+
.hljs-keyword,
695
+
.hljs-selector-tag,
696
+
.hljs-literal,
697
+
.hljs-section,
698
+
.hljs-link
699
+
) {
646
700
color: var(--accent);
647
701
}
648
702
649
-
:is(.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-template-variable, .hljs-addition) {
703
+
:is(
704
+
.hljs-string,
705
+
.hljs-attr,
706
+
.hljs-template-tag,
707
+
.hljs-template-variable,
708
+
.hljs-addition
709
+
) {
650
710
color: var(--green);
651
711
}
652
712
···
666
726
color: var(--blue);
667
727
}
668
728
669
-
:is(.hljs-variable, .hljs-name) { color: var(--red); }
729
+
:is(.hljs-variable, .hljs-name) {
730
+
color: var(--red);
731
+
}
670
732
671
-
:is(.hljs-property, .hljs-attribute) { color: var(--blue); }
733
+
:is(.hljs-property, .hljs-attribute) {
734
+
color: var(--blue);
735
+
}
672
736
673
-
:is(.hljs-regexp, .hljs-deletion) { color: var(--pink); }
737
+
:is(.hljs-regexp, .hljs-deletion) {
738
+
color: var(--pink);
739
+
}
674
740
675
-
:is(.hljs-meta, .hljs-meta-string) { color: var(--lavender); }
741
+
:is(.hljs-meta, .hljs-meta-string) {
742
+
color: var(--lavender);
743
+
}
676
744
677
745
:is(.hljs-params, .hljs-punctuation, .hljs-operator) {
678
746
color: var(--text-dim);
679
747
}
680
748
681
-
:is(.hljs-doctag, .hljs-strong) { font-weight: 700; }
749
+
:is(.hljs-doctag, .hljs-strong) {
750
+
font-weight: 700;
751
+
}
682
752
683
-
.hljs-emphasis { font-style: italic; }
753
+
.hljs-emphasis {
754
+
font-style: italic;
755
+
}
684
756
685
757
/* ============================================================
686
758
Reduced motion
+2
src/build.gleam
+2
src/build.gleam
···
43
43
44
44
write_index(published_data)
45
45
write_posts(published, published_data.profile)
46
+
write_posts(drafts, published_data.profile)
46
47
write_style()
47
48
write_highlight()
48
49
write_rss(published)
49
50
copy_post_assets(published)
51
+
copy_post_assets(drafts)
50
52
copy_favicons()
51
53
copy_client_js()
52
54