@odla-ai/blog 0.0.2 → 0.0.4

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,728 +0,0 @@
1
- /* ══════════════════════════════════════════════════════════════
2
- SALT — warm editorial elegance
3
- Cormorant Garamond display · Satoshi body · cream / moss / rust
4
- Light: cream paper, moss ink, rust + teal accents.
5
- Dark: deep moss, warm cream ink, embered rust.
6
- ══════════════════════════════════════════════════════════════ */
7
- @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap");
8
- @import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");
9
-
10
- /* Digits 0-9 always render in Cormorant Infant, never Garamond:
11
- Garamond's "1" is an unflagged stem that misreads as I or l.
12
- These re-source the Garamond family name for the digit range only. */
13
- @font-face {
14
- font-family: "Cormorant Garamond";
15
- font-style: normal;
16
- font-weight: 300;
17
- font-display: swap;
18
- src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
19
- unicode-range: U+0030-0039;
20
- }
21
- @font-face {
22
- font-family: "Cormorant Garamond";
23
- font-style: normal;
24
- font-weight: 400;
25
- font-display: swap;
26
- src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
27
- unicode-range: U+0030-0039;
28
- }
29
- @font-face {
30
- font-family: "Cormorant Garamond";
31
- font-style: normal;
32
- font-weight: 600;
33
- font-display: swap;
34
- src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
35
- unicode-range: U+0030-0039;
36
- }
37
- @font-face {
38
- font-family: "Cormorant Garamond";
39
- font-style: normal;
40
- font-weight: 700;
41
- font-display: swap;
42
- src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format("woff2");
43
- unicode-range: U+0030-0039;
44
- }
45
- @font-face {
46
- font-family: "Cormorant Garamond";
47
- font-style: italic;
48
- font-weight: 400;
49
- font-display: swap;
50
- src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyJU44g9vKiM1sORYSiWeAsLN997_Il2xMEbK0UPg.woff2) format("woff2");
51
- unicode-range: U+0030-0039;
52
- }
53
-
54
- /* ─── Tokens ─── */
55
- :root {
56
- --bg: #FBF8F2;
57
- --surface: #F4EFE6;
58
- --text: #2F3E34;
59
- --text-body: #4A5E50;
60
- --text-secondary: #7E8E84;
61
- --accent: #D16B4F;
62
- --accent-hover: #E07A5E;
63
- --accent-2: #1A8F7D;
64
- --warm: #C4A47E;
65
- --border: rgba(47, 62, 52, 0.12);
66
-
67
- --code-bg: #F4EFE6;
68
- --code-text: #3A4A40;
69
- --hl-keyword: #C15A40;
70
- --hl-string: #177E6E;
71
- --hl-comment: #8A9A8F;
72
- --hl-number: #C87F5A;
73
- --hl-title: #2F3E34;
74
- --hl-attr: #3D5A99;
75
- --hl-type: #14675B;
76
- --hl-meta: #A08050;
77
- --hl-addition: #5F7D52;
78
- --hl-deletion: #B0492F;
79
-
80
- --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
81
- --font-serif: "Cormorant Garamond", Garamond, Georgia, serif;
82
- --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
83
-
84
- --tracking-widest: 0.14em;
85
- --max-width: 44rem;
86
- --header-width: var(--max-width);
87
- }
88
-
89
- [data-theme="dark"] {
90
- --bg: #1F2823;
91
- --surface: #2A362F;
92
- --text: #F0EDE7;
93
- --text-body: #B8C4BB;
94
- --text-secondary: #8A9E90;
95
- --accent: #E07A5E;
96
- --accent-hover: #EE8D72;
97
- --accent-2: #2FAE99;
98
- --warm: #C4A47E;
99
- --border: rgba(240, 237, 231, 0.12);
100
-
101
- --code-bg: #26312B;
102
- --code-text: #D8DFD8;
103
- --hl-keyword: #E07A5E;
104
- --hl-string: #4FC3AE;
105
- --hl-comment: #7E8E84;
106
- --hl-number: #D9A87E;
107
- --hl-title: #F0EDE7;
108
- --hl-attr: #9FB4E0;
109
- --hl-type: #7CCFC0;
110
- --hl-meta: #C4A47E;
111
- --hl-addition: #8FB07F;
112
- --hl-deletion: #E8907B;
113
- }
114
-
115
- @media (prefers-color-scheme: dark) {
116
- :root:not([data-theme="light"]) {
117
- --bg: #1F2823;
118
- --surface: #2A362F;
119
- --text: #F0EDE7;
120
- --text-body: #B8C4BB;
121
- --text-secondary: #8A9E90;
122
- --accent: #E07A5E;
123
- --accent-hover: #EE8D72;
124
- --accent-2: #2FAE99;
125
- --warm: #C4A47E;
126
- --border: rgba(240, 237, 231, 0.12);
127
-
128
- --code-bg: #26312B;
129
- --code-text: #D8DFD8;
130
- --hl-keyword: #E07A5E;
131
- --hl-string: #4FC3AE;
132
- --hl-comment: #7E8E84;
133
- --hl-number: #D9A87E;
134
- --hl-title: #F0EDE7;
135
- --hl-attr: #9FB4E0;
136
- --hl-type: #7CCFC0;
137
- --hl-meta: #C4A47E;
138
- --hl-addition: #8FB07F;
139
- --hl-deletion: #E8907B;
140
- }
141
- }
142
-
143
- /* ─── Base ─── */
144
- * {
145
- box-sizing: border-box;
146
- }
147
-
148
- html {
149
- font-family: var(--font-sans);
150
- font-size: 17px;
151
- line-height: 1.55;
152
- color: var(--text-body);
153
- background-color: var(--bg);
154
- transition: color 0.2s ease, background-color 0.2s ease;
155
- }
156
-
157
- body {
158
- margin: 0;
159
- min-height: 100vh;
160
- display: flex;
161
- flex-direction: column;
162
- }
163
-
164
- main {
165
- width: 100%;
166
- max-width: var(--max-width);
167
- margin: 0 auto;
168
- padding: 3rem 1.5rem 5rem;
169
- flex: 1;
170
- }
171
-
172
- /* ─── Header ─── */
173
- .site-header {
174
- position: sticky;
175
- top: 0;
176
- z-index: 100;
177
- background: var(--bg);
178
- border-bottom: 1px solid var(--border);
179
- padding: 1rem calc(max(0px, (100% - var(--header-width)) / 2) + 1.5rem);
180
- display: flex;
181
- align-items: center;
182
- justify-content: space-between;
183
- gap: 1rem;
184
- flex-wrap: wrap;
185
- }
186
-
187
- .site-title {
188
- font-family: var(--font-serif);
189
- font-size: 1.9rem;
190
- font-weight: 600;
191
- letter-spacing: -0.01em;
192
- color: var(--text);
193
- text-decoration: none;
194
- }
195
-
196
- .site-title:hover {
197
- color: var(--accent);
198
- }
199
-
200
- .site-nav {
201
- display: flex;
202
- align-items: baseline;
203
- gap: 1.25rem;
204
- }
205
-
206
- .site-nav a {
207
- font-size: 0.7rem;
208
- font-weight: 500;
209
- text-transform: uppercase;
210
- letter-spacing: var(--tracking-widest);
211
- color: var(--text-secondary);
212
- text-decoration: none;
213
- transition: color 0.2s;
214
- }
215
-
216
- .site-nav a:hover {
217
- color: var(--accent);
218
- }
219
-
220
- .theme-toggle {
221
- border: none;
222
- background: none;
223
- cursor: pointer;
224
- padding: 0;
225
- font-size: 1rem;
226
- color: var(--text-secondary);
227
- line-height: 1;
228
- }
229
-
230
- .theme-toggle:hover {
231
- color: var(--accent);
232
- }
233
-
234
- .theme-toggle-icon::before {
235
- content: "☾";
236
- }
237
-
238
- [data-theme="dark"] .theme-toggle-icon::before {
239
- content: "☀";
240
- }
241
-
242
- @media (prefers-color-scheme: dark) {
243
- :root:not([data-theme="light"]) .theme-toggle-icon::before {
244
- content: "☀";
245
- }
246
- }
247
-
248
- /* ─── Footer ─── */
249
- .site-footer {
250
- width: 100%;
251
- max-width: var(--max-width);
252
- margin: 0 auto;
253
- padding: 1.5rem;
254
- border-top: 1px solid var(--border);
255
- font-size: 0.7rem;
256
- text-transform: uppercase;
257
- letter-spacing: 0.06em;
258
- color: var(--text-secondary);
259
- }
260
-
261
- .site-footer p {
262
- margin: 0;
263
- }
264
-
265
- /* ─── Post list (home) ─── */
266
- .post-list {
267
- display: flex;
268
- flex-direction: column;
269
- gap: 3rem;
270
- }
271
-
272
- .post-item {
273
- padding-bottom: 3rem;
274
- border-bottom: 1px solid var(--border);
275
- }
276
-
277
- .post-item:last-child {
278
- border-bottom: none;
279
- }
280
-
281
- a.post-title {
282
- font-family: var(--font-serif);
283
- font-size: clamp(1.7rem, 4vw, 2.2rem);
284
- font-weight: 600;
285
- letter-spacing: -0.02em;
286
- line-height: 1.1;
287
- color: var(--text);
288
- text-decoration: none;
289
- transition: color 0.2s;
290
- }
291
-
292
- a.post-title:hover {
293
- color: var(--accent);
294
- }
295
-
296
- .post-meta {
297
- display: flex;
298
- align-items: baseline;
299
- flex-wrap: wrap;
300
- gap: 1.25rem;
301
- margin-top: 0.9rem;
302
- font-size: 0.66rem;
303
- font-weight: 500;
304
- text-transform: uppercase;
305
- letter-spacing: var(--tracking-widest);
306
- color: var(--text-secondary);
307
- }
308
-
309
- .post-tags {
310
- display: inline;
311
- }
312
-
313
- .post-tag {
314
- color: var(--accent-2);
315
- text-decoration: none;
316
- transition: color 0.2s;
317
- }
318
-
319
- .post-tag:hover {
320
- color: var(--accent);
321
- }
322
-
323
- .post-description {
324
- margin: 1rem 0 0;
325
- font-size: 0.95rem;
326
- line-height: 1.7;
327
- color: var(--text-body);
328
- }
329
-
330
- /* ─── Single post / page ─── */
331
- h1.post-title,
332
- .page-title {
333
- font-family: var(--font-serif);
334
- font-size: clamp(2.1rem, 5.5vw, 3rem);
335
- font-weight: 600;
336
- letter-spacing: -0.02em;
337
- line-height: 1.05;
338
- color: var(--text);
339
- margin: 0 0 0.75rem;
340
- }
341
-
342
- .post > .post-header {
343
- margin-bottom: 2.5rem;
344
- padding-bottom: 1.5rem;
345
- border-bottom: 1px solid var(--border);
346
- }
347
-
348
- /* ─── Prose ─── */
349
- .prose {
350
- font-size: 1rem;
351
- line-height: 1.7;
352
- color: var(--text-body);
353
- overflow-wrap: break-word;
354
- }
355
-
356
- .prose h1,
357
- .prose h2,
358
- .prose h3,
359
- .prose h4,
360
- .prose h5,
361
- .prose h6 {
362
- font-family: var(--font-serif);
363
- font-weight: 600;
364
- letter-spacing: -0.01em;
365
- line-height: 1.15;
366
- color: var(--text);
367
- margin: 2.25rem 0 0.75rem;
368
- }
369
-
370
- .prose h1 { font-size: 1.9rem; }
371
- .prose h2 { font-size: 1.6rem; }
372
- .prose h3 { font-size: 1.35rem; }
373
- .prose h4 { font-size: 1.15rem; }
374
-
375
- .prose p {
376
- margin: 0 0 1.5rem;
377
- }
378
-
379
- .prose a {
380
- color: var(--accent);
381
- text-decoration: underline;
382
- text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
383
- text-decoration-thickness: 1px;
384
- text-underline-offset: 0.2em;
385
- transition: color 0.2s;
386
- }
387
-
388
- .prose a:hover {
389
- color: var(--accent-hover);
390
- text-decoration-color: var(--accent-hover);
391
- }
392
-
393
- .prose ul,
394
- .prose ol {
395
- margin: 0 0 1.5rem;
396
- padding-left: 1.5rem;
397
- }
398
-
399
- .prose li {
400
- margin-bottom: 0.4rem;
401
- }
402
-
403
- .prose blockquote {
404
- margin: 2.25rem 0;
405
- padding: 0 0 0 1.5rem;
406
- border-left: 2px solid var(--warm);
407
- font-family: var(--font-serif);
408
- font-size: 1.25rem;
409
- font-style: italic;
410
- line-height: 1.5;
411
- color: var(--text);
412
- }
413
-
414
- .prose img {
415
- max-width: 100%;
416
- height: auto;
417
- border-radius: 8px;
418
- }
419
-
420
- .prose hr {
421
- border: none;
422
- text-align: center;
423
- margin: 3rem 0;
424
- }
425
-
426
- .prose hr::after {
427
- content: "· · ·";
428
- display: block;
429
- color: var(--text-secondary);
430
- letter-spacing: 0.5em;
431
- }
432
-
433
- .prose table {
434
- width: 100%;
435
- border-collapse: collapse;
436
- margin: 1.75rem 0;
437
- font-size: 0.85rem;
438
- font-variant-numeric: tabular-nums;
439
- }
440
-
441
- .prose th,
442
- .prose td {
443
- text-align: left;
444
- padding: 0.6rem 0.5rem;
445
- border-bottom: 1px solid var(--border);
446
- }
447
-
448
- .prose th {
449
- font-size: 0.66rem;
450
- font-weight: 700;
451
- text-transform: uppercase;
452
- letter-spacing: 0.09em;
453
- color: var(--text-secondary);
454
- }
455
-
456
- /* ─── Code ─── */
457
- code {
458
- font-family: var(--font-mono);
459
- font-size: 0.85em;
460
- background-color: var(--code-bg);
461
- color: var(--code-text);
462
- padding: 0.125em 0.3em;
463
- border-radius: 4px;
464
- }
465
-
466
- pre {
467
- font-family: var(--font-mono);
468
- font-size: 0.78rem;
469
- line-height: 1.6;
470
- background-color: var(--code-bg);
471
- border: 1px solid var(--border);
472
- padding: 1.25rem;
473
- border-radius: 8px;
474
- overflow-x: auto;
475
- margin: 0 0 1.5rem;
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(--font-serif);
501
- font-size: 2rem;
502
- font-weight: 600;
503
- color: var(--text);
504
- margin: 3rem 0 1.25rem;
505
- padding-bottom: 0.5rem;
506
- border-bottom: 1px 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.75rem;
516
- }
517
-
518
- .archive-item {
519
- display: flex;
520
- align-items: baseline;
521
- gap: 1.25rem;
522
- }
523
-
524
- .archive-item time {
525
- flex: none;
526
- min-width: 8.5rem;
527
- font-size: 0.66rem;
528
- font-weight: 500;
529
- text-transform: uppercase;
530
- letter-spacing: 0.09em;
531
- color: var(--text-secondary);
532
- }
533
-
534
- .archive-item a {
535
- font-family: var(--font-serif);
536
- font-size: 1.15rem;
537
- font-weight: 500;
538
- color: var(--text);
539
- text-decoration: none;
540
- }
541
-
542
- .archive-item a:hover {
543
- color: var(--accent);
544
- }
545
-
546
- .tag-cloud {
547
- list-style: none;
548
- margin: 0;
549
- padding: 0;
550
- display: flex;
551
- flex-wrap: wrap;
552
- gap: 0.75rem;
553
- }
554
-
555
- .tag-cloud li {
556
- background: var(--surface);
557
- border: 1px solid var(--border);
558
- border-radius: 100px;
559
- padding: 0.35rem 0.9rem;
560
- }
561
-
562
- .tag-cloud .post-tag {
563
- font-size: 0.7rem;
564
- font-weight: 500;
565
- text-transform: uppercase;
566
- letter-spacing: 0.09em;
567
- }
568
-
569
- .tag-count {
570
- font-size: 0.66rem;
571
- color: var(--text-secondary);
572
- }
573
-
574
- /* ─── Responsive ─── */
575
- @media (max-width: 640px) {
576
- html {
577
- font-size: 16px;
578
- }
579
-
580
- .archive-item {
581
- flex-direction: column;
582
- gap: 0.15rem;
583
- }
584
- }
585
-
586
- /* ─── Footnotes & excerpts ─── */
587
- .footnotes {
588
- margin-top: 3rem;
589
- padding-top: 1rem;
590
- border-top: 1px solid var(--border);
591
- font-size: 0.85em;
592
- }
593
-
594
- .footnote-ref a {
595
- text-decoration: none;
596
- }
597
-
598
- .footnote-backref {
599
- text-decoration: none;
600
- }
601
-
602
- .post-excerpt {
603
- margin-top: 1rem;
604
- }
605
-
606
- .read-more a {
607
- font-size: 0.85em;
608
- }
609
-
610
- .site-footer a {
611
- color: inherit;
612
- text-decoration: underline;
613
- text-decoration-thickness: 1px;
614
- text-underline-offset: 0.2em;
615
- }
616
-
617
- .site-footer a:hover {
618
- color: var(--accent);
619
- }
620
-
621
- .site-footer .copyright a {
622
- text-decoration: none;
623
- }
624
-
625
- /* ─── Scroll position indicator (nav bar) ─── */
626
- .scroll-indicator {
627
- position: absolute;
628
- bottom: -1px;
629
- left: 0;
630
- right: 0;
631
- height: 1px;
632
- pointer-events: none;
633
- }
634
-
635
- .scroll-line {
636
- position: absolute;
637
- bottom: 0;
638
- left: 0;
639
- width: 0;
640
- height: 1px;
641
- background: var(--accent);
642
- }
643
-
644
- .scroll-dot {
645
- position: absolute;
646
- left: 0;
647
- bottom: -2px;
648
- width: 5px;
649
- height: 5px;
650
- border-radius: 50%;
651
- background: var(--accent);
652
- transform: translateX(-50%);
653
- }
654
-
655
- [id] {
656
- scroll-margin-top: 5rem;
657
- }
658
-
659
- /* ─── Recent-posts sidebar (config.sidebarRecentPosts) ─── */
660
- .content-wrapper {
661
- display: flex;
662
- justify-content: center;
663
- gap: 2.5rem;
664
- flex: 1;
665
- }
666
-
667
- .content-wrapper main {
668
- margin: 0;
669
- }
670
-
671
- .recent-posts-sidebar {
672
- width: 280px;
673
- flex-shrink: 0;
674
- display: none;
675
- margin-top: 2.5rem;
676
- padding-right: 1.25rem;
677
- }
678
-
679
- @media (min-width: 1200px) {
680
- .recent-posts-sidebar {
681
- display: block;
682
- }
683
- }
684
-
685
- .recent-posts-sidebar .section-title {
686
- font-size: 0.7rem;
687
- text-transform: uppercase;
688
- letter-spacing: 0.1em;
689
- color: var(--text-secondary);
690
- margin: 0 0 0.5rem;
691
- }
692
-
693
- .recent-posts {
694
- display: flex;
695
- flex-direction: column;
696
- gap: 0.5rem;
697
- }
698
-
699
- .recent-posts .post-link {
700
- display: flex;
701
- flex-direction: column;
702
- gap: 0.125rem;
703
- padding: 0.375rem 0;
704
- color: var(--text);
705
- text-decoration: none;
706
- }
707
-
708
- .recent-posts .post-title {
709
- font-size: 0.72rem;
710
- line-height: 1.3;
711
- }
712
-
713
- .recent-posts .post-link:hover .post-title {
714
- color: var(--accent);
715
- }
716
-
717
- .recent-posts .post-date {
718
- font-size: 0.62rem;
719
- color: var(--text-secondary);
720
- }
721
-
722
- /* Header aligns with the content column; when the sidebar is on (wide
723
- viewports) the centered column is wider by sidebar + gap. */
724
- @media (min-width: 1200px) {
725
- body.has-sidebar .site-header {
726
- --header-width: calc(var(--max-width) + 280px + 2.5rem);
727
- }
728
- }
@@ -1,6 +0,0 @@
1
- {
2
- "name": "salt",
3
- "label": "Salt",
4
- "description": "Warm editorial elegance. Cream paper, moss greens, rust and teal accents, Cormorant Garamond display headings (digits render in Cormorant Infant). Deep-moss dark mode. Drawn from Silver & Salt Capital.",
5
- "fonts": "Cormorant Garamond + Cormorant Infant digits (Google Fonts); Satoshi (Fontshare) with system fallback"
6
- }