@karaoke-cms/theme-default 0.9.2 → 0.9.5
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.
- package/README.md +56 -36
- package/package.json +6 -6
- package/src/components/AudienceGrid.astro +143 -0
- package/src/components/CtaSection.astro +91 -0
- package/src/components/FeatureGrid.astro +138 -0
- package/src/components/Hero.astro +141 -0
- package/src/components/HowItWorks.astro +117 -0
- package/src/components/InstallBox.astro +71 -0
- package/src/components/MetaphorSection.astro +69 -0
- package/src/components/ScaleSection.astro +146 -0
- package/src/index.ts +31 -21
- package/src/pages/404.astro +3 -3
- package/src/pages/docs/[slug].astro +3 -3
- package/src/pages/docs/index.astro +3 -3
- package/src/pages/index.astro +18 -60
- package/src/pages/tags/[tag].astro +3 -3
- package/src/pages/tags/index.astro +3 -3
- package/src/styles.css +124 -18
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
import { getCollection } from 'astro:content';
|
|
3
|
-
import
|
|
3
|
+
import DefaultPage from '@karaoke-cms/astro/layouts/DefaultPage.astro';
|
|
4
4
|
import { siteTitle } from 'virtual:karaoke-cms/config';
|
|
5
5
|
|
|
6
6
|
const [blog, docs] = await Promise.all([
|
|
@@ -19,7 +19,7 @@ for (const entry of [...blog, ...docs]) {
|
|
|
19
19
|
const tags = [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
|
|
20
20
|
---
|
|
21
21
|
|
|
22
|
-
<
|
|
22
|
+
<DefaultPage title={`Tags — ${siteTitle}`}>
|
|
23
23
|
<div class="listing-header">
|
|
24
24
|
<h1>Tags</h1>
|
|
25
25
|
</div>
|
|
@@ -38,4 +38,4 @@ const tags = [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
|
|
|
38
38
|
<p>Tags are added to posts via the <code>tags</code> frontmatter field or by AI enrichment.</p>
|
|
39
39
|
</div>
|
|
40
40
|
)}
|
|
41
|
-
</
|
|
41
|
+
</DefaultPage>
|
package/src/styles.css
CHANGED
|
@@ -30,6 +30,20 @@
|
|
|
30
30
|
--spacing-xl: 4rem;
|
|
31
31
|
|
|
32
32
|
--radius-sm: 4px;
|
|
33
|
+
--radius-lg: 12px;
|
|
34
|
+
|
|
35
|
+
/* Landing / marketing palette */
|
|
36
|
+
--color-accent: #6366f1;
|
|
37
|
+
--color-accent-2: #8b5cf6;
|
|
38
|
+
--color-bg-alt: #f8fafc;
|
|
39
|
+
|
|
40
|
+
/* Dark-section backgrounds — intentionally always dark */
|
|
41
|
+
--color-section-dark: #0f172a;
|
|
42
|
+
--color-section-dark-2: #1e293b;
|
|
43
|
+
--color-on-dark: #e2e8f0;
|
|
44
|
+
--color-on-dark-2: #d0dae6;
|
|
45
|
+
|
|
46
|
+
--width-landing: 1100px;
|
|
33
47
|
}
|
|
34
48
|
|
|
35
49
|
@media (prefers-color-scheme: dark) {
|
|
@@ -41,6 +55,7 @@
|
|
|
41
55
|
--color-link: #60a5fa;
|
|
42
56
|
--color-link-hover: #93c5fd;
|
|
43
57
|
--color-link-visited: #a78bfa;
|
|
58
|
+
--color-bg-alt: #1a1a1a;
|
|
44
59
|
}
|
|
45
60
|
}
|
|
46
61
|
|
|
@@ -63,17 +78,27 @@ body {
|
|
|
63
78
|
/* --- Header --- */
|
|
64
79
|
|
|
65
80
|
header {
|
|
66
|
-
|
|
81
|
+
position: sticky;
|
|
82
|
+
top: 0;
|
|
83
|
+
z-index: 100;
|
|
84
|
+
background: rgba(15, 23, 42, 0.92);
|
|
85
|
+
backdrop-filter: blur(12px);
|
|
86
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
67
87
|
margin-bottom: var(--spacing-xl);
|
|
68
88
|
}
|
|
69
89
|
|
|
90
|
+
header.landing-header {
|
|
91
|
+
margin-bottom: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
70
94
|
.header-inner {
|
|
71
|
-
max-width: var(--width-
|
|
95
|
+
max-width: var(--width-landing);
|
|
72
96
|
margin: 0 auto;
|
|
73
97
|
padding: 0 var(--spacing-md);
|
|
74
98
|
display: flex;
|
|
75
99
|
align-items: center;
|
|
76
|
-
|
|
100
|
+
justify-content: space-between;
|
|
101
|
+
height: 3.5rem;
|
|
77
102
|
gap: var(--spacing-md);
|
|
78
103
|
}
|
|
79
104
|
|
|
@@ -81,13 +106,17 @@ header {
|
|
|
81
106
|
font-weight: 700;
|
|
82
107
|
font-size: 1rem;
|
|
83
108
|
text-decoration: none;
|
|
84
|
-
color: var(--color-
|
|
109
|
+
color: var(--color-on-dark);
|
|
85
110
|
flex-shrink: 0;
|
|
86
111
|
letter-spacing: -0.01em;
|
|
87
112
|
}
|
|
88
113
|
|
|
114
|
+
.site-name:visited {
|
|
115
|
+
color: var(--color-on-dark);
|
|
116
|
+
}
|
|
117
|
+
|
|
89
118
|
.site-name:hover {
|
|
90
|
-
color:
|
|
119
|
+
color: #fff;
|
|
91
120
|
}
|
|
92
121
|
|
|
93
122
|
header nav {
|
|
@@ -104,18 +133,22 @@ header nav ul {
|
|
|
104
133
|
|
|
105
134
|
header nav ul a {
|
|
106
135
|
text-decoration: none;
|
|
107
|
-
color:
|
|
136
|
+
color: #94a3b8;
|
|
108
137
|
font-size: var(--font-size-sm);
|
|
109
138
|
padding: var(--spacing-xs) 0;
|
|
110
139
|
min-height: 44px;
|
|
111
140
|
display: flex;
|
|
112
141
|
align-items: center;
|
|
113
|
-
transition: color 0.
|
|
142
|
+
transition: color 0.15s;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
header nav ul a:visited {
|
|
146
|
+
color: #94a3b8;
|
|
114
147
|
}
|
|
115
148
|
|
|
116
149
|
header nav ul a:hover,
|
|
117
150
|
header nav ul a[aria-current="page"] {
|
|
118
|
-
color: var(--color-
|
|
151
|
+
color: var(--color-on-dark);
|
|
119
152
|
}
|
|
120
153
|
|
|
121
154
|
/* --- Page body (left + main + right regions) --- */
|
|
@@ -194,7 +227,8 @@ main {
|
|
|
194
227
|
/* --- Footer --- */
|
|
195
228
|
|
|
196
229
|
footer {
|
|
197
|
-
|
|
230
|
+
background: var(--color-section-dark);
|
|
231
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
198
232
|
margin-top: var(--spacing-xl);
|
|
199
233
|
}
|
|
200
234
|
|
|
@@ -218,26 +252,26 @@ footer {
|
|
|
218
252
|
.footer-brand {
|
|
219
253
|
font-weight: 700;
|
|
220
254
|
font-size: var(--font-size-sm);
|
|
221
|
-
color: var(--color-
|
|
255
|
+
color: var(--color-on-dark);
|
|
222
256
|
margin: 0 0 var(--spacing-sm);
|
|
223
257
|
}
|
|
224
258
|
|
|
225
259
|
.footer-tagline {
|
|
226
260
|
font-size: var(--font-size-sm);
|
|
227
|
-
color: var(--color-
|
|
261
|
+
color: var(--color-on-dark-2);
|
|
228
262
|
margin: 0;
|
|
229
263
|
line-height: var(--line-height-body);
|
|
230
264
|
}
|
|
231
265
|
|
|
232
266
|
.footer-below {
|
|
233
|
-
border-top: 1px solid
|
|
267
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
234
268
|
padding: var(--spacing-md) 0;
|
|
235
269
|
display: flex;
|
|
236
270
|
align-items: center;
|
|
237
271
|
justify-content: space-between;
|
|
238
272
|
gap: var(--spacing-md);
|
|
239
273
|
font-size: var(--font-size-sm);
|
|
240
|
-
color: var(--color-
|
|
274
|
+
color: var(--color-on-dark-2);
|
|
241
275
|
}
|
|
242
276
|
|
|
243
277
|
.footer-attr {
|
|
@@ -245,32 +279,44 @@ footer {
|
|
|
245
279
|
}
|
|
246
280
|
|
|
247
281
|
footer a {
|
|
248
|
-
color: var(--color-
|
|
282
|
+
color: var(--color-on-dark-2);
|
|
249
283
|
text-decoration: none;
|
|
250
284
|
}
|
|
251
285
|
|
|
286
|
+
footer a:visited {
|
|
287
|
+
color: var(--color-on-dark-2);
|
|
288
|
+
}
|
|
289
|
+
|
|
252
290
|
footer a:hover {
|
|
253
|
-
color: var(--color-
|
|
291
|
+
color: var(--color-on-dark);
|
|
254
292
|
}
|
|
255
293
|
|
|
256
294
|
/* Footer vertical menu — top-level entry as column heading */
|
|
257
295
|
.footer-col nav.karaoke-menu > ul > li > a {
|
|
258
296
|
font-size: var(--font-size-sm);
|
|
259
297
|
font-weight: 600;
|
|
260
|
-
color: var(--color-
|
|
298
|
+
color: var(--color-on-dark);
|
|
261
299
|
display: block;
|
|
262
300
|
padding-bottom: var(--spacing-xs);
|
|
263
301
|
}
|
|
264
302
|
|
|
303
|
+
.footer-col nav.karaoke-menu > ul > li > a:visited {
|
|
304
|
+
color: var(--color-on-dark);
|
|
305
|
+
}
|
|
306
|
+
|
|
265
307
|
.footer-col nav.karaoke-menu > ul > li > ul a {
|
|
266
308
|
font-size: var(--font-size-sm);
|
|
267
|
-
color:
|
|
309
|
+
color: #94a3b8;
|
|
268
310
|
display: block;
|
|
269
311
|
padding: 2px 0;
|
|
270
312
|
}
|
|
271
313
|
|
|
314
|
+
.footer-col nav.karaoke-menu > ul > li > ul a:visited {
|
|
315
|
+
color: #94a3b8;
|
|
316
|
+
}
|
|
317
|
+
|
|
272
318
|
.footer-col nav.karaoke-menu > ul > li > ul a:hover {
|
|
273
|
-
color: var(--color-
|
|
319
|
+
color: var(--color-on-dark);
|
|
274
320
|
}
|
|
275
321
|
|
|
276
322
|
/* --- Typography --- */
|
|
@@ -583,3 +629,63 @@ nav.karaoke-menu[data-orientation="vertical"] > ul {
|
|
|
583
629
|
nav.karaoke-menu[data-orientation="vertical"] li ul {
|
|
584
630
|
padding-left: var(--spacing-md, 1rem);
|
|
585
631
|
}
|
|
632
|
+
|
|
633
|
+
/* ── Site icon ───────────────────────────────────────────────────────── */
|
|
634
|
+
|
|
635
|
+
.site-icon {
|
|
636
|
+
font-size: 1.1em;
|
|
637
|
+
margin-right: 0.3em;
|
|
638
|
+
vertical-align: -0.05em;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
/* ── Header CTA button ──────────────────────────────────────────────── */
|
|
642
|
+
|
|
643
|
+
a.btn-cta {
|
|
644
|
+
font-size: var(--font-size-sm);
|
|
645
|
+
font-weight: 600;
|
|
646
|
+
color: #fff;
|
|
647
|
+
background: var(--color-accent);
|
|
648
|
+
padding: 6px 20px;
|
|
649
|
+
border-radius: 999px;
|
|
650
|
+
text-decoration: none;
|
|
651
|
+
transition: opacity 0.15s;
|
|
652
|
+
flex-shrink: 0;
|
|
653
|
+
white-space: nowrap;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
a.btn-cta:link,
|
|
657
|
+
a.btn-cta:visited,
|
|
658
|
+
a.btn-cta:hover {
|
|
659
|
+
opacity: 0.85;
|
|
660
|
+
color: #fff;
|
|
661
|
+
text-decoration: none;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
/* ── Landing layout ─────────────────────────────────────────────────── */
|
|
665
|
+
|
|
666
|
+
main.landing-main {
|
|
667
|
+
width: 100%;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
|
|
671
|
+
.landing-container {
|
|
672
|
+
max-width: var(--width-landing);
|
|
673
|
+
margin: 0 auto;
|
|
674
|
+
padding: 0 24px;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
/* ── Section label (uppercase eyebrow) ──────────────────────────────── */
|
|
678
|
+
|
|
679
|
+
.section-label {
|
|
680
|
+
display: inline-block;
|
|
681
|
+
font-size: 0.75rem;
|
|
682
|
+
font-weight: 700;
|
|
683
|
+
letter-spacing: 0.1em;
|
|
684
|
+
text-transform: uppercase;
|
|
685
|
+
color: var(--color-accent);
|
|
686
|
+
margin-bottom: 12px;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
.section-label.on-dark {
|
|
690
|
+
color: #818cf8;
|
|
691
|
+
}
|