@odla-ai/blog 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,726 +0,0 @@
1
- /* ══════════════════════════════════════════════════════════════
2
- CLAY — warm, light editorial shell
3
- Iowan Old Style serif titles · system sans body · terracotta
4
- Light: sand paper, white panels, clay accent, warm hairlines.
5
- Dark: warm charcoal, embered terracotta — never pure black.
6
- Zero external font requests: system stacks only.
7
- ══════════════════════════════════════════════════════════════ */
8
-
9
- /* ─── Tokens ─── */
10
- :root {
11
- --bg: #f6f1e9;
12
- --panel: #ffffff;
13
- --panel-raised: #f1ebe0;
14
- --border: #e4dac9;
15
- --text: #2c2722;
16
- --muted: #6f655a;
17
- --faint: #a99d8c;
18
- --accent: #a8572e;
19
- --accent-deep: #8c4623;
20
- --accent-dim: rgba(168, 87, 46, 0.1);
21
- --good: #5f7d52;
22
- --warn: #b08433;
23
- --shadow: 0 1px 2px rgba(44, 39, 34, 0.03);
24
-
25
- --code-bg: #f1ebe0;
26
- --code-text: #3a332b;
27
- --hl-keyword: #a8572e;
28
- --hl-string: #5f7d52;
29
- --hl-comment: #a99d8c;
30
- --hl-number: #b08433;
31
- --hl-title: #2c2722;
32
- --hl-attr: #5f7da8;
33
- --hl-type: #7d5fa8;
34
- --hl-meta: #8a6d9e;
35
- --hl-addition: #5f7d52;
36
- --hl-deletion: #a8402e;
37
-
38
- --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
39
- --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
40
- --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
41
-
42
- --max-width: 44rem;
43
- }
44
-
45
- [data-theme="dark"] {
46
- --bg: #211d19;
47
- --panel: #2a251f;
48
- --panel-raised: #332d26;
49
- --border: #3e362c;
50
- --text: #ece5da;
51
- --muted: #b3a794;
52
- --faint: #857a6a;
53
- --accent: #d07a4d;
54
- --accent-deep: #de8f66;
55
- --accent-dim: rgba(208, 122, 77, 0.14);
56
- --good: #8aa87c;
57
- --warn: #c9a25a;
58
- --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
59
-
60
- --code-bg: #2a251f;
61
- --code-text: #ddd5c8;
62
- --hl-keyword: #d07a4d;
63
- --hl-string: #8aa87c;
64
- --hl-comment: #857a6a;
65
- --hl-number: #c9a25a;
66
- --hl-title: #ece5da;
67
- --hl-attr: #8ba3c7;
68
- --hl-type: #a78bc9;
69
- --hl-meta: #ab8fbd;
70
- --hl-addition: #8aa87c;
71
- --hl-deletion: #d0684d;
72
- }
73
-
74
- @media (prefers-color-scheme: dark) {
75
- :root:not([data-theme="light"]) {
76
- --bg: #211d19;
77
- --panel: #2a251f;
78
- --panel-raised: #332d26;
79
- --border: #3e362c;
80
- --text: #ece5da;
81
- --muted: #b3a794;
82
- --faint: #857a6a;
83
- --accent: #d07a4d;
84
- --accent-deep: #de8f66;
85
- --accent-dim: rgba(208, 122, 77, 0.14);
86
- --good: #8aa87c;
87
- --warn: #c9a25a;
88
- --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
89
-
90
- --code-bg: #2a251f;
91
- --code-text: #ddd5c8;
92
- --hl-keyword: #d07a4d;
93
- --hl-string: #8aa87c;
94
- --hl-comment: #857a6a;
95
- --hl-number: #c9a25a;
96
- --hl-title: #ece5da;
97
- --hl-attr: #8ba3c7;
98
- --hl-type: #a78bc9;
99
- --hl-meta: #ab8fbd;
100
- --hl-addition: #8aa87c;
101
- --hl-deletion: #d0684d;
102
- }
103
- }
104
-
105
- /* ─── Base ─── */
106
- * {
107
- box-sizing: border-box;
108
- }
109
-
110
- html {
111
- font-family: var(--sans);
112
- font-size: 15.5px;
113
- line-height: 1.62;
114
- color: var(--text);
115
- background-color: var(--bg);
116
- -webkit-font-smoothing: antialiased;
117
- transition: color 0.2s ease, background-color 0.2s ease;
118
- }
119
-
120
- body {
121
- margin: 0;
122
- min-height: 100vh;
123
- display: flex;
124
- flex-direction: column;
125
- }
126
-
127
- main {
128
- width: 100%;
129
- max-width: var(--max-width);
130
- margin: 0 auto;
131
- padding: 2.25rem 2rem 3rem;
132
- flex: 1;
133
- }
134
-
135
- /* ─── Header ─── */
136
- .site-header {
137
- position: sticky;
138
- top: 0;
139
- z-index: 100;
140
- background: var(--panel);
141
- border-bottom: 1px solid var(--border);
142
- padding: 1.1rem 2rem;
143
- display: flex;
144
- align-items: center;
145
- justify-content: space-between;
146
- gap: 1.5rem;
147
- flex-wrap: wrap;
148
- }
149
-
150
- .site-title {
151
- font-family: var(--serif);
152
- font-size: 1.5rem;
153
- font-weight: 600;
154
- letter-spacing: -0.01em;
155
- color: var(--text);
156
- text-decoration: none;
157
- }
158
-
159
- .site-title:hover {
160
- color: var(--accent);
161
- }
162
-
163
- .site-nav {
164
- display: flex;
165
- align-items: baseline;
166
- gap: 1.25rem;
167
- }
168
-
169
- .site-nav a {
170
- font-size: 0.74rem;
171
- font-weight: 600;
172
- text-transform: uppercase;
173
- letter-spacing: 0.1em;
174
- color: var(--muted);
175
- text-decoration: none;
176
- border-bottom: 2px solid transparent;
177
- padding-bottom: 2px;
178
- transition: color 0.15s, border-color 0.15s;
179
- }
180
-
181
- .site-nav a:hover {
182
- color: var(--accent);
183
- }
184
-
185
- .theme-toggle {
186
- border: 1px solid var(--border);
187
- border-radius: 6px;
188
- background: none;
189
- cursor: pointer;
190
- padding: 0.2rem 0.55rem;
191
- font-size: 0.85rem;
192
- color: var(--muted);
193
- line-height: 1.4;
194
- transition: color 0.15s, border-color 0.15s;
195
- }
196
-
197
- .theme-toggle:hover {
198
- color: var(--accent);
199
- border-color: var(--accent);
200
- }
201
-
202
- .theme-toggle-icon::before {
203
- content: "☾";
204
- }
205
-
206
- [data-theme="dark"] .theme-toggle-icon::before {
207
- content: "☀";
208
- }
209
-
210
- @media (prefers-color-scheme: dark) {
211
- :root:not([data-theme="light"]) .theme-toggle-icon::before {
212
- content: "☀";
213
- }
214
- }
215
-
216
- /* ─── Footer ─── */
217
- .site-footer {
218
- border-top: 1px solid var(--border);
219
- padding: 1rem 2rem;
220
- font-size: 0.74rem;
221
- letter-spacing: 0.04em;
222
- color: var(--faint);
223
- }
224
-
225
- .site-footer p {
226
- margin: 0;
227
- }
228
-
229
- /* ─── Post list (home) ─── */
230
- .post-list {
231
- display: flex;
232
- flex-direction: column;
233
- gap: 1.1rem;
234
- }
235
-
236
- .post-item {
237
- background: var(--panel);
238
- border: 1px solid var(--border);
239
- border-radius: 10px;
240
- padding: 1.35rem 1.5rem;
241
- box-shadow: var(--shadow);
242
- transition: border-color 0.15s;
243
- }
244
-
245
- .post-item:hover {
246
- border-color: var(--accent);
247
- }
248
-
249
- a.post-title {
250
- font-family: var(--serif);
251
- font-size: 1.35rem;
252
- font-weight: 600;
253
- letter-spacing: -0.01em;
254
- line-height: 1.2;
255
- color: var(--text);
256
- text-decoration: none;
257
- transition: color 0.15s;
258
- }
259
-
260
- a.post-title:hover {
261
- color: var(--accent);
262
- }
263
-
264
- .post-meta {
265
- display: flex;
266
- align-items: baseline;
267
- flex-wrap: wrap;
268
- gap: 1rem;
269
- margin-top: 0.45rem;
270
- }
271
-
272
- .post-date {
273
- font-family: var(--mono);
274
- font-size: 0.72rem;
275
- color: var(--faint);
276
- }
277
-
278
- .post-tags {
279
- display: inline;
280
- }
281
-
282
- .post-tag {
283
- font-size: 0.66rem;
284
- font-weight: 600;
285
- text-transform: uppercase;
286
- letter-spacing: 0.07em;
287
- color: var(--accent);
288
- background: var(--accent-dim);
289
- border-radius: 999px;
290
- padding: 0.1rem 0.6rem;
291
- text-decoration: none;
292
- transition: color 0.15s;
293
- }
294
-
295
- .post-tag:hover {
296
- color: var(--accent-deep);
297
- }
298
-
299
- .post-description {
300
- margin: 0.6rem 0 0;
301
- font-size: 0.92rem;
302
- color: var(--muted);
303
- }
304
-
305
- /* ─── Single post / page ─── */
306
- h1.post-title,
307
- .page-title {
308
- font-family: var(--serif);
309
- font-size: 2rem;
310
- font-weight: 600;
311
- letter-spacing: -0.01em;
312
- line-height: 1.15;
313
- color: var(--text);
314
- margin: 0 0 0.6rem;
315
- }
316
-
317
- .post > .post-header {
318
- margin-bottom: 1.85rem;
319
- padding-bottom: 1.1rem;
320
- border-bottom: 1px solid var(--border);
321
- }
322
-
323
- /* ─── Prose ─── */
324
- .prose {
325
- font-size: 1rem;
326
- line-height: 1.7;
327
- overflow-wrap: break-word;
328
- }
329
-
330
- .prose h1,
331
- .prose h2,
332
- .prose h3,
333
- .prose h4,
334
- .prose h5,
335
- .prose h6 {
336
- margin: 1.85rem 0 0.7rem;
337
- }
338
-
339
- .prose h1 {
340
- font-family: var(--serif);
341
- font-size: 1.6rem;
342
- font-weight: 600;
343
- letter-spacing: -0.01em;
344
- color: var(--text);
345
- }
346
-
347
- .prose h2 {
348
- font-size: 0.82rem;
349
- font-weight: 700;
350
- text-transform: uppercase;
351
- letter-spacing: 0.11em;
352
- color: var(--accent);
353
- }
354
-
355
- .prose h3 {
356
- font-size: 0.72rem;
357
- font-weight: 700;
358
- text-transform: uppercase;
359
- letter-spacing: 0.09em;
360
- color: var(--muted);
361
- }
362
-
363
- .prose h4,
364
- .prose h5,
365
- .prose h6 {
366
- font-size: 0.72rem;
367
- font-weight: 700;
368
- text-transform: uppercase;
369
- letter-spacing: 0.09em;
370
- color: var(--faint);
371
- }
372
-
373
- .prose p {
374
- margin: 0 0 1.1rem;
375
- }
376
-
377
- .prose a {
378
- color: var(--accent);
379
- text-decoration: none;
380
- }
381
-
382
- .prose a:hover {
383
- color: var(--accent-deep);
384
- text-decoration: underline;
385
- text-underline-offset: 2px;
386
- }
387
-
388
- .prose ul,
389
- .prose ol {
390
- margin: 0 0 1.1rem;
391
- padding-left: 1.4rem;
392
- }
393
-
394
- .prose li {
395
- margin-bottom: 0.3rem;
396
- }
397
-
398
- .prose blockquote {
399
- margin: 1.5rem 0;
400
- padding: 0.85rem 1.25rem;
401
- background: var(--panel-raised);
402
- border-left: 3px solid var(--accent);
403
- border-radius: 0 8px 8px 0;
404
- color: var(--muted);
405
- }
406
-
407
- .prose blockquote p:last-child {
408
- margin-bottom: 0;
409
- }
410
-
411
- .prose img {
412
- max-width: 100%;
413
- height: auto;
414
- border-radius: 8px;
415
- border: 1px solid var(--border);
416
- }
417
-
418
- .prose hr {
419
- border: none;
420
- border-top: 1px solid var(--border);
421
- margin: 2rem 0;
422
- }
423
-
424
- .prose table {
425
- width: 100%;
426
- border-collapse: collapse;
427
- margin: 1.5rem 0;
428
- font-size: 0.88rem;
429
- font-variant-numeric: tabular-nums;
430
- }
431
-
432
- .prose th,
433
- .prose td {
434
- text-align: left;
435
- padding: 0.5rem 0.6rem;
436
- }
437
-
438
- .prose th {
439
- font-size: 0.66rem;
440
- font-weight: 700;
441
- text-transform: uppercase;
442
- letter-spacing: 0.07em;
443
- color: var(--faint);
444
- border-bottom: 1.5px solid var(--border);
445
- }
446
-
447
- .prose td {
448
- border-bottom: 1px solid var(--border);
449
- }
450
-
451
- .prose tr:hover td {
452
- background: var(--panel-raised);
453
- }
454
-
455
- /* ─── Code ─── */
456
- code {
457
- font-family: var(--mono);
458
- font-size: 0.88em;
459
- background: var(--code-bg);
460
- color: var(--code-text);
461
- padding: 0.1em 0.35em;
462
- border-radius: 6px;
463
- }
464
-
465
- pre {
466
- font-family: var(--mono);
467
- font-size: 0.8rem;
468
- line-height: 1.6;
469
- background: var(--code-bg);
470
- border: 1px solid var(--border);
471
- border-radius: 8px;
472
- padding: 1.1rem 1.25rem;
473
- overflow-x: auto;
474
- margin: 0 0 1.1rem;
475
- box-shadow: var(--shadow);
476
- }
477
-
478
- pre code {
479
- background: none;
480
- padding: 0;
481
- font-size: 1em;
482
- }
483
-
484
- .hljs { color: var(--code-text); }
485
- .hljs-keyword, .hljs-selector-tag, .hljs-tag { color: var(--hl-keyword); }
486
- .hljs-string, .hljs-regexp { color: var(--hl-string); }
487
- .hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
488
- .hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--hl-number); }
489
- .hljs-title, .hljs-section, .hljs-name { color: var(--hl-title); font-weight: 600; }
490
- .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-property { color: var(--hl-attr); }
491
- .hljs-type, .hljs-built_in, .hljs-selector-class, .hljs-selector-id { color: var(--hl-type); }
492
- .hljs-meta, .hljs-doctag { color: var(--hl-meta); }
493
- .hljs-addition { color: var(--hl-addition); }
494
- .hljs-deletion { color: var(--hl-deletion); }
495
- .hljs-emphasis { font-style: italic; }
496
- .hljs-strong { font-weight: 700; }
497
-
498
- /* ─── Archive & tags ─── */
499
- .archive-year {
500
- font-family: var(--serif);
501
- font-size: 1.6rem;
502
- font-weight: 600;
503
- color: var(--text);
504
- margin: 2.25rem 0 0.9rem;
505
- padding-bottom: 0.4rem;
506
- border-bottom: 1.5px solid var(--border);
507
- }
508
-
509
- .archive-list {
510
- list-style: none;
511
- margin: 0;
512
- padding: 0;
513
- display: flex;
514
- flex-direction: column;
515
- gap: 0.55rem;
516
- }
517
-
518
- .archive-item {
519
- display: flex;
520
- align-items: baseline;
521
- gap: 1rem;
522
- padding: 0.35rem 0.5rem;
523
- border-radius: 6px;
524
- }
525
-
526
- .archive-item:hover {
527
- background: var(--panel-raised);
528
- }
529
-
530
- .archive-item time {
531
- flex: none;
532
- min-width: 8rem;
533
- font-family: var(--mono);
534
- font-size: 0.72rem;
535
- color: var(--faint);
536
- }
537
-
538
- .archive-item a {
539
- font-family: var(--serif);
540
- font-size: 1.05rem;
541
- font-weight: 600;
542
- color: var(--text);
543
- text-decoration: none;
544
- }
545
-
546
- .archive-item a:hover {
547
- color: var(--accent);
548
- }
549
-
550
- .tag-cloud {
551
- list-style: none;
552
- margin: 0;
553
- padding: 0;
554
- display: flex;
555
- flex-wrap: wrap;
556
- gap: 0.6rem;
557
- }
558
-
559
- .tag-cloud li {
560
- display: flex;
561
- align-items: baseline;
562
- gap: 0.4rem;
563
- }
564
-
565
- .tag-count {
566
- font-family: var(--mono);
567
- font-size: 0.72rem;
568
- color: var(--faint);
569
- }
570
-
571
- /* ─── Responsive ─── */
572
- @media (max-width: 720px) {
573
- .site-header {
574
- padding: 0.9rem 1.25rem;
575
- }
576
-
577
- main {
578
- padding: 1.5rem 1.25rem 2.5rem;
579
- }
580
-
581
- h1.post-title,
582
- .page-title {
583
- font-size: 1.6rem;
584
- }
585
-
586
- .archive-item {
587
- flex-direction: column;
588
- gap: 0.1rem;
589
- }
590
- }
591
-
592
- /* ─── Footnotes & excerpts ─── */
593
- .footnotes {
594
- margin-top: 3rem;
595
- padding-top: 1rem;
596
- border-top: 1px solid var(--border);
597
- font-size: 0.85em;
598
- }
599
-
600
- .footnote-ref a {
601
- text-decoration: none;
602
- }
603
-
604
- .footnote-backref {
605
- text-decoration: none;
606
- }
607
-
608
- .post-excerpt {
609
- margin-top: 1rem;
610
- }
611
-
612
- .read-more a {
613
- font-size: 0.85em;
614
- }
615
-
616
- .site-footer a {
617
- color: inherit;
618
- text-decoration: underline;
619
- text-decoration-thickness: 1px;
620
- text-underline-offset: 0.2em;
621
- }
622
-
623
- .site-footer a:hover {
624
- color: var(--accent);
625
- }
626
-
627
- .site-footer .copyright a {
628
- text-decoration: none;
629
- }
630
-
631
- /* ─── Scroll position indicator (nav bar) ─── */
632
- .scroll-indicator {
633
- position: absolute;
634
- bottom: -1px;
635
- left: 0;
636
- right: 0;
637
- height: 1px;
638
- pointer-events: none;
639
- }
640
-
641
- .scroll-line {
642
- position: absolute;
643
- bottom: 0;
644
- left: 0;
645
- width: 0;
646
- height: 1px;
647
- background: var(--accent);
648
- }
649
-
650
- .scroll-dot {
651
- position: absolute;
652
- left: 0;
653
- bottom: -2px;
654
- width: 5px;
655
- height: 5px;
656
- border-radius: 50%;
657
- background: var(--accent);
658
- transform: translateX(-50%);
659
- }
660
-
661
- [id] {
662
- scroll-margin-top: 5rem;
663
- }
664
-
665
- /* ─── Recent-posts sidebar (config.sidebarRecentPosts) ─── */
666
- .content-wrapper {
667
- display: flex;
668
- justify-content: center;
669
- gap: 2.5rem;
670
- flex: 1;
671
- }
672
-
673
- .content-wrapper main {
674
- margin: 0;
675
- }
676
-
677
- .recent-posts-sidebar {
678
- width: 280px;
679
- flex-shrink: 0;
680
- display: none;
681
- margin-top: 2.5rem;
682
- padding-right: 1.25rem;
683
- }
684
-
685
- @media (min-width: 1200px) {
686
- .recent-posts-sidebar {
687
- display: block;
688
- }
689
- }
690
-
691
- .recent-posts-sidebar .section-title {
692
- font-size: 0.7rem;
693
- text-transform: uppercase;
694
- letter-spacing: 0.1em;
695
- color: var(--muted);
696
- margin: 0 0 0.5rem;
697
- }
698
-
699
- .recent-posts {
700
- display: flex;
701
- flex-direction: column;
702
- gap: 0.5rem;
703
- }
704
-
705
- .recent-posts .post-link {
706
- display: flex;
707
- flex-direction: column;
708
- gap: 0.125rem;
709
- padding: 0.375rem 0;
710
- color: var(--text);
711
- text-decoration: none;
712
- }
713
-
714
- .recent-posts .post-title {
715
- font-size: 0.72rem;
716
- line-height: 1.3;
717
- }
718
-
719
- .recent-posts .post-link:hover .post-title {
720
- color: var(--accent);
721
- }
722
-
723
- .recent-posts .post-date {
724
- font-size: 0.62rem;
725
- color: var(--muted);
726
- }
@@ -1,6 +0,0 @@
1
- {
2
- "name": "clay",
3
- "label": "Clay",
4
- "description": "Warm, light editorial shell. Sand paper background, terracotta accent, Iowan Old Style serif titles over a system sans body, hairline borders, soft warm shadows. Zero external font requests. Warm-charcoal dark mode. Drawn from agnacl.",
5
- "fonts": "System stacks only (Iowan Old Style / Palatino serif, system sans, system mono)"
6
- }