@karaoke-cms/theme-default 0.9.2 → 0.9.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.
- package/package.json +5 -5
- 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 +8 -3
- 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 +99 -18
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,23 @@ 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
|
|
|
70
90
|
.header-inner {
|
|
71
|
-
max-width: var(--width-
|
|
91
|
+
max-width: var(--width-landing);
|
|
72
92
|
margin: 0 auto;
|
|
73
93
|
padding: 0 var(--spacing-md);
|
|
74
94
|
display: flex;
|
|
75
95
|
align-items: center;
|
|
76
|
-
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
height: 3.5rem;
|
|
77
98
|
gap: var(--spacing-md);
|
|
78
99
|
}
|
|
79
100
|
|
|
@@ -81,13 +102,13 @@ header {
|
|
|
81
102
|
font-weight: 700;
|
|
82
103
|
font-size: 1rem;
|
|
83
104
|
text-decoration: none;
|
|
84
|
-
color: var(--color-
|
|
105
|
+
color: var(--color-on-dark);
|
|
85
106
|
flex-shrink: 0;
|
|
86
107
|
letter-spacing: -0.01em;
|
|
87
108
|
}
|
|
88
109
|
|
|
89
110
|
.site-name:hover {
|
|
90
|
-
color:
|
|
111
|
+
color: #fff;
|
|
91
112
|
}
|
|
92
113
|
|
|
93
114
|
header nav {
|
|
@@ -104,18 +125,18 @@ header nav ul {
|
|
|
104
125
|
|
|
105
126
|
header nav ul a {
|
|
106
127
|
text-decoration: none;
|
|
107
|
-
color:
|
|
128
|
+
color: #94a3b8;
|
|
108
129
|
font-size: var(--font-size-sm);
|
|
109
130
|
padding: var(--spacing-xs) 0;
|
|
110
131
|
min-height: 44px;
|
|
111
132
|
display: flex;
|
|
112
133
|
align-items: center;
|
|
113
|
-
transition: color 0.
|
|
134
|
+
transition: color 0.15s;
|
|
114
135
|
}
|
|
115
136
|
|
|
116
137
|
header nav ul a:hover,
|
|
117
138
|
header nav ul a[aria-current="page"] {
|
|
118
|
-
color: var(--color-
|
|
139
|
+
color: var(--color-on-dark);
|
|
119
140
|
}
|
|
120
141
|
|
|
121
142
|
/* --- Page body (left + main + right regions) --- */
|
|
@@ -194,7 +215,8 @@ main {
|
|
|
194
215
|
/* --- Footer --- */
|
|
195
216
|
|
|
196
217
|
footer {
|
|
197
|
-
|
|
218
|
+
background: var(--color-section-dark);
|
|
219
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
198
220
|
margin-top: var(--spacing-xl);
|
|
199
221
|
}
|
|
200
222
|
|
|
@@ -218,26 +240,26 @@ footer {
|
|
|
218
240
|
.footer-brand {
|
|
219
241
|
font-weight: 700;
|
|
220
242
|
font-size: var(--font-size-sm);
|
|
221
|
-
color: var(--color-
|
|
243
|
+
color: var(--color-on-dark);
|
|
222
244
|
margin: 0 0 var(--spacing-sm);
|
|
223
245
|
}
|
|
224
246
|
|
|
225
247
|
.footer-tagline {
|
|
226
248
|
font-size: var(--font-size-sm);
|
|
227
|
-
color: var(--color-
|
|
249
|
+
color: var(--color-on-dark-2);
|
|
228
250
|
margin: 0;
|
|
229
251
|
line-height: var(--line-height-body);
|
|
230
252
|
}
|
|
231
253
|
|
|
232
254
|
.footer-below {
|
|
233
|
-
border-top: 1px solid
|
|
255
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
234
256
|
padding: var(--spacing-md) 0;
|
|
235
257
|
display: flex;
|
|
236
258
|
align-items: center;
|
|
237
259
|
justify-content: space-between;
|
|
238
260
|
gap: var(--spacing-md);
|
|
239
261
|
font-size: var(--font-size-sm);
|
|
240
|
-
color: var(--color-
|
|
262
|
+
color: var(--color-on-dark-2);
|
|
241
263
|
}
|
|
242
264
|
|
|
243
265
|
.footer-attr {
|
|
@@ -245,32 +267,32 @@ footer {
|
|
|
245
267
|
}
|
|
246
268
|
|
|
247
269
|
footer a {
|
|
248
|
-
color: var(--color-
|
|
270
|
+
color: var(--color-on-dark-2);
|
|
249
271
|
text-decoration: none;
|
|
250
272
|
}
|
|
251
273
|
|
|
252
274
|
footer a:hover {
|
|
253
|
-
color: var(--color-
|
|
275
|
+
color: var(--color-on-dark);
|
|
254
276
|
}
|
|
255
277
|
|
|
256
278
|
/* Footer vertical menu — top-level entry as column heading */
|
|
257
279
|
.footer-col nav.karaoke-menu > ul > li > a {
|
|
258
280
|
font-size: var(--font-size-sm);
|
|
259
281
|
font-weight: 600;
|
|
260
|
-
color: var(--color-
|
|
282
|
+
color: var(--color-on-dark);
|
|
261
283
|
display: block;
|
|
262
284
|
padding-bottom: var(--spacing-xs);
|
|
263
285
|
}
|
|
264
286
|
|
|
265
287
|
.footer-col nav.karaoke-menu > ul > li > ul a {
|
|
266
288
|
font-size: var(--font-size-sm);
|
|
267
|
-
color:
|
|
289
|
+
color: #94a3b8;
|
|
268
290
|
display: block;
|
|
269
291
|
padding: 2px 0;
|
|
270
292
|
}
|
|
271
293
|
|
|
272
294
|
.footer-col nav.karaoke-menu > ul > li > ul a:hover {
|
|
273
|
-
color: var(--color-
|
|
295
|
+
color: var(--color-on-dark);
|
|
274
296
|
}
|
|
275
297
|
|
|
276
298
|
/* --- Typography --- */
|
|
@@ -583,3 +605,62 @@ nav.karaoke-menu[data-orientation="vertical"] > ul {
|
|
|
583
605
|
nav.karaoke-menu[data-orientation="vertical"] li ul {
|
|
584
606
|
padding-left: var(--spacing-md, 1rem);
|
|
585
607
|
}
|
|
608
|
+
|
|
609
|
+
/* ── Site icon ───────────────────────────────────────────────────────── */
|
|
610
|
+
|
|
611
|
+
.site-icon {
|
|
612
|
+
font-size: 1.1em;
|
|
613
|
+
margin-right: 0.3em;
|
|
614
|
+
vertical-align: -0.05em;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
/* ── Header CTA button ──────────────────────────────────────────────── */
|
|
618
|
+
|
|
619
|
+
.btn-cta {
|
|
620
|
+
font-size: var(--font-size-sm);
|
|
621
|
+
font-weight: 600;
|
|
622
|
+
color: #fff;
|
|
623
|
+
background: var(--color-accent);
|
|
624
|
+
padding: 5px 14px;
|
|
625
|
+
border-radius: 999px;
|
|
626
|
+
text-decoration: none;
|
|
627
|
+
transition: opacity 0.15s;
|
|
628
|
+
flex-shrink: 0;
|
|
629
|
+
white-space: nowrap;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.btn-cta:hover,
|
|
633
|
+
.btn-cta:visited {
|
|
634
|
+
opacity: 0.85;
|
|
635
|
+
color: #fff;
|
|
636
|
+
text-decoration: none;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
/* ── Landing layout ─────────────────────────────────────────────────── */
|
|
640
|
+
|
|
641
|
+
main.landing-main {
|
|
642
|
+
width: 100%;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
|
|
646
|
+
.landing-container {
|
|
647
|
+
max-width: var(--width-landing);
|
|
648
|
+
margin: 0 auto;
|
|
649
|
+
padding: 0 24px;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
/* ── Section label (uppercase eyebrow) ──────────────────────────────── */
|
|
653
|
+
|
|
654
|
+
.section-label {
|
|
655
|
+
display: inline-block;
|
|
656
|
+
font-size: 0.75rem;
|
|
657
|
+
font-weight: 700;
|
|
658
|
+
letter-spacing: 0.1em;
|
|
659
|
+
text-transform: uppercase;
|
|
660
|
+
color: var(--color-accent);
|
|
661
|
+
margin-bottom: 12px;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
.section-label.on-dark {
|
|
665
|
+
color: #818cf8;
|
|
666
|
+
}
|