@leadertechie/personal-site-kit 0.1.0-alpha.25 → 0.1.0-alpha.27
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/dist/chunks/{index-DsRjL9Uy.js → index-oSPOElVQ.js} +581 -288
- package/dist/chunks/{template-B7ea0o8q.js → template-BW1oVN93.js} +10 -9
- package/dist/index.js +2 -2
- package/dist/shared/core/theme-toggle.d.ts.map +1 -1
- package/dist/shared.js +1 -1
- package/dist/styles/markdown.css +254 -128
- package/dist/styles/theme.css +669 -364
- package/dist/ui/about-me/styles.d.ts.map +1 -1
- package/dist/ui/admin/components/AdminSection.d.ts.map +1 -1
- package/dist/ui/admin/components/LoginForm.d.ts.map +1 -1
- package/dist/ui/admin/components/LogoSection.d.ts.map +1 -1
- package/dist/ui/admin/styles.d.ts.map +1 -1
- package/dist/ui/banner/styles.d.ts.map +1 -1
- package/dist/ui/blog-viewer/styles.d.ts.map +1 -1
- package/dist/ui/footer/styles.d.ts.map +1 -1
- package/dist/ui/story-viewer/styles.d.ts.map +1 -1
- package/dist/ui.js +1 -1
- package/package.json +4 -4
|
@@ -8,81 +8,121 @@ const aboutmeStyles = css`
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.aboutme {
|
|
11
|
+
/* Layout */
|
|
11
12
|
display: block;
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
|
|
14
|
+
/* Box */
|
|
15
|
+
padding: var(--space-lg, 2lh);
|
|
16
|
+
max-width: var(--content-medium, 960px);
|
|
14
17
|
margin: 0 auto;
|
|
15
|
-
|
|
18
|
+
|
|
19
|
+
/* Typography */
|
|
20
|
+
line-height: var(--line-height-relaxed, 1.6);
|
|
21
|
+
color: var(--text-primary, #0b1120);
|
|
16
22
|
}
|
|
17
23
|
|
|
18
24
|
.aboutme h2 {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
25
|
+
/* Typography */
|
|
26
|
+
font-size: var(--font-size-h2, clamp(1.35rem, 2.25vw, 1.75rem));
|
|
27
|
+
color: var(--text-primary, #0b1120);
|
|
28
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
29
|
+
|
|
30
|
+
/* Box */
|
|
31
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
22
32
|
}
|
|
23
33
|
|
|
24
34
|
.aboutme h3 {
|
|
25
|
-
|
|
26
|
-
|
|
35
|
+
/* Typography */
|
|
36
|
+
font-size: var(--font-size-h3, clamp(1.15rem, 1.75vw, 1.375rem));
|
|
37
|
+
color: var(--text-primary, #0b1120);
|
|
38
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
39
|
+
|
|
40
|
+
/* Box */
|
|
41
|
+
margin-bottom: var(--space-2xs, 0.25lh);
|
|
27
42
|
}
|
|
28
43
|
|
|
29
44
|
.aboutme p {
|
|
30
|
-
margin-bottom:
|
|
45
|
+
margin-bottom: var(--space-2xs, 0.25lh);
|
|
31
46
|
text-align: left;
|
|
32
47
|
}
|
|
33
48
|
|
|
34
49
|
.aboutme ul {
|
|
35
50
|
list-style-type: disc;
|
|
36
|
-
margin-left:
|
|
51
|
+
margin-left: var(--space-lg, 2lh);
|
|
37
52
|
text-align: left;
|
|
38
53
|
}
|
|
39
54
|
|
|
40
55
|
.aboutme li {
|
|
41
|
-
margin-bottom:
|
|
56
|
+
margin-bottom: var(--space-3xs, 0.125lh);
|
|
42
57
|
}
|
|
43
58
|
|
|
44
59
|
.aboutme .profile-picture {
|
|
60
|
+
/* Box */
|
|
45
61
|
width: 150px;
|
|
46
62
|
height: 150px;
|
|
47
|
-
border-radius:
|
|
63
|
+
border-radius: var(--radius-full, 9999px);
|
|
48
64
|
object-fit: cover;
|
|
49
|
-
margin-bottom:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
0
|
|
65
|
+
margin-bottom: var(--space-md, 1lh);
|
|
66
|
+
|
|
67
|
+
/* Visual */
|
|
68
|
+
border: 3px solid var(--border-accent, #2563eb);
|
|
69
|
+
box-shadow:
|
|
70
|
+
0 0 0 4px color-mix(in srgb, var(--brand-color, #2563eb), transparent 80%),
|
|
71
|
+
var(--shadow-md, 0 4px 6px -2px oklch(0% 0 0 / 0.06)),
|
|
72
|
+
var(--shadow-lg, 0 10px 20px -4px oklch(0% 0 0 / 0.08));
|
|
55
73
|
}
|
|
56
74
|
|
|
57
75
|
.aboutme .profile-section {
|
|
76
|
+
/* Layout */
|
|
58
77
|
text-align: center;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
78
|
+
|
|
79
|
+
/* Box */
|
|
80
|
+
background: var(--bg-primary, #ffffff);
|
|
81
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
82
|
+
border-radius: var(--radius-xl, 1rem);
|
|
83
|
+
padding: var(--space-lg, 2lh);
|
|
84
|
+
box-shadow: var(--shadow-md, 0 4px 6px -2px oklch(0% 0 0 / 0.06));
|
|
85
|
+
|
|
86
|
+
/* Box model */
|
|
87
|
+
margin-bottom: var(--space-lg, 2lh);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.aboutme .profile-section::before {
|
|
91
|
+
content: '';
|
|
92
|
+
display: block;
|
|
93
|
+
width: 3rem;
|
|
94
|
+
height: var(--accent-line-thickness, 3px);
|
|
95
|
+
background: linear-gradient(
|
|
96
|
+
90deg,
|
|
97
|
+
var(--brand-color, #2563eb),
|
|
98
|
+
var(--accent-secondary, #6366f1)
|
|
99
|
+
);
|
|
100
|
+
margin: 0 auto var(--space-md, 1lh) auto;
|
|
101
|
+
border-radius: var(--radius-full, 9999px);
|
|
66
102
|
}
|
|
67
103
|
|
|
68
104
|
.aboutme .profile-title {
|
|
69
|
-
|
|
105
|
+
/* Typography */
|
|
106
|
+
color: var(--text-secondary, #475569);
|
|
107
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
108
|
+
|
|
109
|
+
/* Box */
|
|
70
110
|
margin-bottom: 0;
|
|
71
111
|
text-align: center;
|
|
72
112
|
}
|
|
73
113
|
|
|
74
114
|
.aboutme h1 {
|
|
75
|
-
margin-bottom: 0.
|
|
115
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
76
116
|
}
|
|
77
117
|
|
|
78
118
|
.aboutme .loading {
|
|
79
119
|
text-align: center;
|
|
80
|
-
padding:
|
|
81
|
-
color: var(--text-
|
|
120
|
+
padding: var(--space-lg, 2lh);
|
|
121
|
+
color: var(--text-secondary, #475569);
|
|
82
122
|
}
|
|
83
123
|
|
|
84
124
|
.aboutme .content-section {
|
|
85
|
-
font-family:
|
|
125
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
86
126
|
}
|
|
87
127
|
`;
|
|
88
128
|
async function fetchAboutMe(url) {
|
|
@@ -237,15 +277,20 @@ MyAboutme.styles = aboutmeStyles;
|
|
|
237
277
|
__runInitializers$f(_init$f, 1, MyAboutme);
|
|
238
278
|
const adminStyles = css`
|
|
239
279
|
:host {
|
|
280
|
+
/* Layout */
|
|
240
281
|
display: block;
|
|
282
|
+
|
|
283
|
+
/* Box */
|
|
241
284
|
width: 100%;
|
|
242
285
|
max-width: 100%;
|
|
243
|
-
padding:
|
|
244
|
-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
245
|
-
color: var(--text-color, #213547);
|
|
246
|
-
background-color: var(--background-color, #fff);
|
|
286
|
+
padding: var(--space-lg, 2lh);
|
|
247
287
|
min-height: 100vh;
|
|
248
288
|
box-sizing: border-box;
|
|
289
|
+
|
|
290
|
+
/* Typography */
|
|
291
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
292
|
+
color: var(--text-primary, #0b1120);
|
|
293
|
+
background-color: var(--bg-primary, #ffffff);
|
|
249
294
|
}
|
|
250
295
|
|
|
251
296
|
*, *::before, *::after {
|
|
@@ -253,109 +298,136 @@ const adminStyles = css`
|
|
|
253
298
|
}
|
|
254
299
|
|
|
255
300
|
.container {
|
|
301
|
+
/* Box */
|
|
256
302
|
width: 100%;
|
|
257
|
-
max-width:
|
|
303
|
+
max-width: var(--content-medium, 960px);
|
|
258
304
|
margin: 0 auto;
|
|
259
|
-
padding:
|
|
305
|
+
padding: var(--space-md, 1lh);
|
|
260
306
|
}
|
|
261
307
|
|
|
262
308
|
.login-box {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
309
|
+
/* Layout */
|
|
310
|
+
text-align: center;
|
|
311
|
+
|
|
312
|
+
/* Box */
|
|
313
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
314
|
+
padding: var(--space-xl, 3lh) var(--space-lg, 2lh);
|
|
315
|
+
border-radius: var(--radius-xl, 1rem);
|
|
266
316
|
width: 100%;
|
|
267
317
|
max-width: 420px;
|
|
268
318
|
margin: 80px auto;
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 10px 20px rgba(0,0,0,0.05);
|
|
319
|
+
background: var(--bg-primary, #ffffff);
|
|
320
|
+
box-shadow: var(--shadow-md, 0 4px 6px -2px oklch(0% 0 0 / 0.06));
|
|
272
321
|
}
|
|
273
322
|
|
|
274
323
|
.login-box h2 {
|
|
275
|
-
|
|
276
|
-
font-size: 1.75rem;
|
|
277
|
-
font-weight: 600;
|
|
278
|
-
color: var(--text-
|
|
324
|
+
/* Typography */
|
|
325
|
+
font-size: var(--font-size-h2, clamp(1.35rem, 2.25vw, 1.75rem));
|
|
326
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
327
|
+
color: var(--text-primary, #0b1120);
|
|
328
|
+
|
|
329
|
+
/* Box */
|
|
330
|
+
margin: 0 0 var(--space-sm, 0.5lh) 0;
|
|
279
331
|
}
|
|
280
332
|
|
|
281
333
|
.login-box p {
|
|
282
|
-
color: var(--secondary
|
|
283
|
-
margin-bottom:
|
|
334
|
+
color: var(--text-secondary, #475569);
|
|
335
|
+
margin-bottom: var(--space-md, 1lh);
|
|
284
336
|
}
|
|
285
337
|
|
|
286
338
|
.nav-tabs {
|
|
339
|
+
/* Layout */
|
|
287
340
|
display: flex;
|
|
288
|
-
gap:
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
341
|
+
gap: var(--space-2xs, 0.25lh);
|
|
342
|
+
|
|
343
|
+
/* Box */
|
|
344
|
+
margin-bottom: var(--space-lg, 2lh);
|
|
345
|
+
padding: var(--space-sm, 0.5lh);
|
|
346
|
+
background: var(--bg-primary, #ffffff);
|
|
347
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
348
|
+
border-radius: var(--radius-lg, 0.75rem);
|
|
349
|
+
box-shadow: var(--shadow-sm, 0 1px 2px oklch(0% 0 0 / 0.05));
|
|
295
350
|
width: 100%;
|
|
351
|
+
flex-wrap: wrap;
|
|
296
352
|
}
|
|
297
353
|
|
|
298
354
|
.nav-tab {
|
|
299
|
-
|
|
355
|
+
/* Box */
|
|
356
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
300
357
|
border: none;
|
|
301
|
-
border-radius:
|
|
302
|
-
cursor: pointer;
|
|
358
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
303
359
|
background: transparent;
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
360
|
+
|
|
361
|
+
/* Typography */
|
|
362
|
+
color: var(--text-primary, #0b1120);
|
|
363
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
364
|
+
font-weight: var(--font-weight-medium, 500);
|
|
365
|
+
cursor: pointer;
|
|
366
|
+
|
|
367
|
+
/* Misc */
|
|
368
|
+
transition: all var(--transition-fast, 0.15s ease);
|
|
308
369
|
}
|
|
309
370
|
|
|
310
371
|
.nav-tab:hover {
|
|
311
|
-
background: var(--
|
|
312
|
-
color: var(--link-color, #
|
|
372
|
+
background: var(--bg-secondary, #f8fafc);
|
|
373
|
+
color: var(--link-color, #2563eb);
|
|
313
374
|
}
|
|
314
375
|
|
|
315
376
|
.nav-tab.active {
|
|
316
|
-
background: var(--
|
|
317
|
-
color:
|
|
318
|
-
box-shadow: 0 2px 8px
|
|
377
|
+
background: var(--brand-color, #2563eb);
|
|
378
|
+
color: var(--text-inverse, #ffffff);
|
|
379
|
+
box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-color, #2563eb), transparent 70%);
|
|
319
380
|
}
|
|
320
381
|
|
|
321
382
|
.section {
|
|
383
|
+
/* Box */
|
|
322
384
|
width: 100%;
|
|
323
|
-
border:
|
|
324
|
-
padding:
|
|
325
|
-
border-radius:
|
|
326
|
-
background: var(--
|
|
327
|
-
box-shadow: 0
|
|
328
|
-
margin-bottom:
|
|
385
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
386
|
+
padding: var(--space-lg, 2lh);
|
|
387
|
+
border-radius: var(--radius-lg, 0.75rem);
|
|
388
|
+
background: var(--bg-primary, #ffffff);
|
|
389
|
+
box-shadow: var(--shadow-sm, 0 1px 2px oklch(0% 0 0 / 0.05));
|
|
390
|
+
margin-bottom: var(--space-md, 1lh);
|
|
329
391
|
min-height: 450px;
|
|
330
392
|
box-sizing: border-box;
|
|
331
393
|
}
|
|
332
394
|
|
|
333
395
|
.section h3 {
|
|
334
|
-
|
|
335
|
-
font-size: 1.
|
|
336
|
-
font-weight: 600;
|
|
337
|
-
color: var(--text-
|
|
396
|
+
/* Typography */
|
|
397
|
+
font-size: var(--font-size-h3, clamp(1.15rem, 1.75vw, 1.375rem));
|
|
398
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
399
|
+
color: var(--text-primary, #0b1120);
|
|
400
|
+
|
|
401
|
+
/* Box */
|
|
402
|
+
margin: 0 0 var(--space-sm, 0.5lh) 0;
|
|
403
|
+
|
|
404
|
+
/* Layout */
|
|
338
405
|
display: flex;
|
|
339
406
|
align-items: center;
|
|
340
|
-
gap: 0.
|
|
407
|
+
gap: var(--space-sm, 0.5lh);
|
|
341
408
|
}
|
|
342
409
|
|
|
343
410
|
.file-list {
|
|
344
|
-
margin-top:
|
|
411
|
+
margin-top: var(--space-md, 1lh);
|
|
345
412
|
}
|
|
346
413
|
|
|
347
414
|
.file-item {
|
|
415
|
+
/* Layout */
|
|
348
416
|
display: flex;
|
|
349
417
|
justify-content: space-between;
|
|
350
418
|
align-items: center;
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
419
|
+
|
|
420
|
+
/* Box */
|
|
421
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
422
|
+
border-bottom: 1px solid var(--border-subtle, #e5e7eb);
|
|
423
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
424
|
+
|
|
425
|
+
/* Misc */
|
|
426
|
+
transition: background var(--transition-fast, 0.15s ease);
|
|
355
427
|
}
|
|
356
428
|
|
|
357
429
|
.file-item:hover {
|
|
358
|
-
background: var(--
|
|
430
|
+
background: var(--bg-secondary, #f8fafc);
|
|
359
431
|
}
|
|
360
432
|
|
|
361
433
|
.file-item:last-child {
|
|
@@ -364,142 +436,161 @@ const adminStyles = css`
|
|
|
364
436
|
|
|
365
437
|
button {
|
|
366
438
|
cursor: pointer;
|
|
367
|
-
padding:
|
|
368
|
-
border-radius:
|
|
369
|
-
font-weight: 500;
|
|
370
|
-
font-size: 0.
|
|
371
|
-
transition: all 0.
|
|
439
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
440
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
441
|
+
font-weight: var(--font-weight-medium, 500);
|
|
442
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
443
|
+
transition: all var(--transition-fast, 0.15s ease);
|
|
372
444
|
border: none;
|
|
373
445
|
}
|
|
374
446
|
|
|
375
447
|
.btn-primary {
|
|
376
|
-
background: var(--
|
|
377
|
-
color:
|
|
378
|
-
box-shadow: 0 2px 4px
|
|
448
|
+
background: var(--brand-color, #2563eb);
|
|
449
|
+
color: var(--text-inverse, #ffffff);
|
|
450
|
+
box-shadow: 0 2px 4px color-mix(in srgb, var(--brand-color, #2563eb), transparent 75%);
|
|
379
451
|
}
|
|
380
452
|
|
|
381
453
|
.btn-primary:hover {
|
|
382
|
-
background: var(--
|
|
454
|
+
background: color-mix(in srgb, var(--brand-color, #2563eb), black 15%);
|
|
383
455
|
transform: translateY(-1px);
|
|
384
|
-
box-shadow: 0 4px 8px
|
|
456
|
+
box-shadow: 0 4px 8px color-mix(in srgb, var(--brand-color, #2563eb), transparent 70%);
|
|
385
457
|
}
|
|
386
458
|
|
|
387
459
|
.btn-danger {
|
|
388
|
-
color: #
|
|
460
|
+
color: var(--color-danger, #ef4444);
|
|
389
461
|
background: transparent;
|
|
390
|
-
border: 1px solid #
|
|
391
|
-
padding:
|
|
392
|
-
font-size: 0.
|
|
462
|
+
border: 1px solid var(--color-danger, #ef4444);
|
|
463
|
+
padding: var(--space-2xs, 0.25lh) var(--space-sm, 0.5lh);
|
|
464
|
+
font-size: var(--font-size-tiny, clamp(0.6875rem, 0.85vw, 0.75rem));
|
|
393
465
|
}
|
|
394
466
|
|
|
395
467
|
.btn-danger:hover {
|
|
396
|
-
background: #
|
|
397
|
-
color:
|
|
468
|
+
background: var(--color-danger, #ef4444);
|
|
469
|
+
color: var(--text-inverse, #ffffff);
|
|
398
470
|
}
|
|
399
471
|
|
|
400
472
|
.btn-secondary {
|
|
401
|
-
background: var(--
|
|
402
|
-
color: var(--text-
|
|
403
|
-
border:
|
|
404
|
-
font-size: 0.
|
|
405
|
-
padding:
|
|
473
|
+
background: var(--bg-secondary, #f8fafc);
|
|
474
|
+
color: var(--text-primary, #0b1120);
|
|
475
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
476
|
+
font-size: var(--font-size-tiny, clamp(0.6875rem, 0.85vw, 0.75rem));
|
|
477
|
+
padding: var(--space-2xs, 0.25lh) var(--space-sm, 0.5lh);
|
|
406
478
|
}
|
|
407
479
|
|
|
408
480
|
.btn-secondary:hover {
|
|
409
|
-
background: #
|
|
481
|
+
background: var(--bg-tertiary, #f1f5f9);
|
|
482
|
+
border-color: var(--border-color, #d1d5db);
|
|
410
483
|
}
|
|
411
484
|
|
|
412
485
|
input[type="text"], input[type="password"], input[type="file"] {
|
|
413
|
-
|
|
486
|
+
/* Box */
|
|
487
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
414
488
|
width: 100%;
|
|
489
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
490
|
+
border: 1.5px solid var(--border-subtle, #e5e7eb);
|
|
491
|
+
border-radius: var(--radius-md, 0.5rem);
|
|
492
|
+
background-color: var(--bg-primary, #ffffff);
|
|
493
|
+
|
|
494
|
+
/* Typography */
|
|
495
|
+
color: var(--text-primary, #0b1120);
|
|
496
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
415
497
|
box-sizing: border-box;
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
border-
|
|
419
|
-
|
|
420
|
-
color: var(--text-color, #213547);
|
|
421
|
-
font-size: 0.95rem;
|
|
422
|
-
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
498
|
+
|
|
499
|
+
/* Misc */
|
|
500
|
+
transition: border-color var(--transition-fast, 0.15s ease),
|
|
501
|
+
box-shadow var(--transition-fast, 0.15s ease);
|
|
423
502
|
}
|
|
424
503
|
|
|
425
504
|
input[type="text"]:focus, input[type="password"]:focus {
|
|
426
505
|
outline: none;
|
|
427
|
-
border-color: var(--
|
|
428
|
-
box-shadow: 0 0 0 3px
|
|
506
|
+
border-color: var(--brand-color, #2563eb);
|
|
507
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color, #2563eb), transparent 85%);
|
|
429
508
|
}
|
|
430
509
|
|
|
431
510
|
input[type="file"] {
|
|
432
|
-
padding:
|
|
511
|
+
padding: var(--space-sm, 0.5lh);
|
|
433
512
|
border-style: dashed;
|
|
434
513
|
cursor: pointer;
|
|
435
514
|
}
|
|
436
515
|
|
|
437
516
|
input[type="file"]:hover {
|
|
438
|
-
border-color: var(--
|
|
439
|
-
background:
|
|
517
|
+
border-color: var(--brand-color, #2563eb);
|
|
518
|
+
background: color-mix(in srgb, var(--brand-color, #2563eb), transparent 97%);
|
|
440
519
|
}
|
|
441
520
|
|
|
442
521
|
.help-text {
|
|
443
|
-
color: var(--secondary
|
|
444
|
-
font-size: 0.
|
|
445
|
-
margin-bottom:
|
|
446
|
-
line-height: 1.5;
|
|
522
|
+
color: var(--text-secondary, #475569);
|
|
523
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
524
|
+
margin-bottom: var(--space-md, 1lh);
|
|
525
|
+
line-height: var(--line-height-normal, 1.5);
|
|
447
526
|
}
|
|
448
527
|
|
|
449
528
|
.status-message {
|
|
450
|
-
padding:
|
|
451
|
-
border-radius:
|
|
452
|
-
margin-bottom:
|
|
453
|
-
font-size: 0.
|
|
454
|
-
background: var(--
|
|
455
|
-
color: var(--text-
|
|
529
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
530
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
531
|
+
margin-bottom: var(--space-md, 1lh);
|
|
532
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
533
|
+
background: var(--bg-secondary, #f8fafc);
|
|
534
|
+
color: var(--text-primary, #0b1120);
|
|
535
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
456
536
|
}
|
|
457
537
|
|
|
458
538
|
.status-message.success {
|
|
459
|
-
background:
|
|
460
|
-
color: #
|
|
461
|
-
border: 1px solid #
|
|
539
|
+
background: color-mix(in srgb, var(--color-success, #10b981), transparent 90%);
|
|
540
|
+
color: color-mix(in srgb, var(--color-success, #10b981), black 30%);
|
|
541
|
+
border: 1px solid color-mix(in srgb, var(--color-success, #10b981), transparent 60%);
|
|
462
542
|
}
|
|
463
543
|
|
|
464
544
|
.status-message.error {
|
|
465
|
-
background:
|
|
466
|
-
color: #
|
|
467
|
-
border: 1px solid #
|
|
545
|
+
background: color-mix(in srgb, var(--color-danger, #ef4444), transparent 90%);
|
|
546
|
+
color: color-mix(in srgb, var(--color-danger, #ef4444), black 20%);
|
|
547
|
+
border: 1px solid color-mix(in srgb, var(--color-danger, #ef4444), transparent 60%);
|
|
468
548
|
}
|
|
469
549
|
|
|
470
550
|
.header {
|
|
551
|
+
/* Layout */
|
|
471
552
|
display: flex;
|
|
472
553
|
justify-content: space-between;
|
|
473
554
|
align-items: center;
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
555
|
+
|
|
556
|
+
/* Box */
|
|
557
|
+
margin-bottom: var(--space-lg, 2lh);
|
|
558
|
+
padding-bottom: var(--space-md, 1lh);
|
|
559
|
+
border-bottom: 1px solid var(--border-subtle, #e5e7eb);
|
|
560
|
+
gap: var(--space-sm, 0.5lh);
|
|
561
|
+
flex-wrap: wrap;
|
|
477
562
|
}
|
|
478
563
|
|
|
479
564
|
.header h1 {
|
|
565
|
+
/* Typography */
|
|
566
|
+
font-size: var(--font-size-h2, clamp(1.35rem, 2.25vw, 1.75rem));
|
|
567
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
568
|
+
color: var(--text-primary, #0b1120);
|
|
569
|
+
|
|
570
|
+
/* Box */
|
|
480
571
|
margin: 0;
|
|
481
|
-
font-size: 1.5rem;
|
|
482
|
-
font-weight: 600;
|
|
483
|
-
color: var(--text-color, #213547);
|
|
484
572
|
}
|
|
485
573
|
|
|
486
|
-
.mt-1 { margin-top:
|
|
487
|
-
.mb-1 { margin-bottom:
|
|
574
|
+
.mt-1 { margin-top: var(--space-sm, 0.5lh); }
|
|
575
|
+
.mb-1 { margin-bottom: var(--space-md, 1lh); }
|
|
488
576
|
|
|
489
577
|
@media (max-width: 600px) {
|
|
578
|
+
:host {
|
|
579
|
+
padding: var(--space-sm, 0.5lh);
|
|
580
|
+
}
|
|
490
581
|
.container {
|
|
491
|
-
padding: 0.
|
|
582
|
+
padding: var(--space-2xs, 0.25lh);
|
|
492
583
|
}
|
|
493
584
|
.section {
|
|
494
|
-
padding:
|
|
585
|
+
padding: var(--space-md, 1lh);
|
|
495
586
|
}
|
|
496
587
|
.nav-tabs {
|
|
497
|
-
gap:
|
|
498
|
-
padding:
|
|
588
|
+
gap: var(--space-3xs, 0.125lh);
|
|
589
|
+
padding: var(--space-2xs, 0.25lh);
|
|
499
590
|
}
|
|
500
591
|
.nav-tab {
|
|
501
|
-
padding:
|
|
502
|
-
font-size: 0.
|
|
592
|
+
padding: var(--space-2xs, 0.25lh) var(--space-sm, 0.5lh);
|
|
593
|
+
font-size: var(--font-size-tiny, clamp(0.6875rem, 0.85vw, 0.75rem));
|
|
503
594
|
}
|
|
504
595
|
}
|
|
505
596
|
`;
|
|
@@ -670,101 +761,172 @@ AdminSection.styles = css`
|
|
|
670
761
|
|
|
671
762
|
.section {
|
|
672
763
|
width: 100%;
|
|
673
|
-
border:
|
|
674
|
-
padding:
|
|
675
|
-
border-radius:
|
|
676
|
-
background: var(--
|
|
677
|
-
box-shadow: 0
|
|
678
|
-
margin-bottom:
|
|
764
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
765
|
+
padding: var(--space-lg, 2lh);
|
|
766
|
+
border-radius: var(--radius-lg, 0.75rem);
|
|
767
|
+
background: var(--bg-primary, #ffffff);
|
|
768
|
+
box-shadow: var(--shadow-sm, 0 1px 2px oklch(0% 0 0 / 0.05));
|
|
769
|
+
margin-bottom: var(--space-md, 1lh);
|
|
679
770
|
min-height: 450px;
|
|
680
771
|
box-sizing: border-box;
|
|
681
772
|
}
|
|
682
773
|
|
|
683
774
|
.section h3 {
|
|
684
|
-
margin: 0 0 0.
|
|
685
|
-
font-size: 1.
|
|
775
|
+
margin: 0 0 var(--space-sm, 0.5lh) 0;
|
|
776
|
+
font-size: var(--font-size-h3, clamp(1.15rem, 1.75vw, 1.375rem));
|
|
777
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
778
|
+
color: var(--text-primary, #0b1120);
|
|
686
779
|
}
|
|
687
780
|
|
|
688
781
|
.help-text {
|
|
689
|
-
color: var(--secondary
|
|
690
|
-
|
|
782
|
+
color: var(--text-secondary, #475569);
|
|
783
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
784
|
+
margin-bottom: var(--space-md, 1lh);
|
|
691
785
|
}
|
|
692
786
|
|
|
693
787
|
.current-file {
|
|
694
|
-
margin-bottom:
|
|
695
|
-
padding:
|
|
696
|
-
background: var(--
|
|
697
|
-
border
|
|
788
|
+
margin-bottom: var(--space-md, 1lh);
|
|
789
|
+
padding: var(--space-md, 1lh);
|
|
790
|
+
background: var(--bg-secondary, #f8fafc);
|
|
791
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
792
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
698
793
|
}
|
|
699
794
|
|
|
700
795
|
input[type="text"],
|
|
701
796
|
input[type="file"] {
|
|
702
797
|
width: 100%;
|
|
703
|
-
padding:
|
|
704
|
-
margin-bottom:
|
|
705
|
-
border:
|
|
706
|
-
border-radius:
|
|
707
|
-
background: var(--
|
|
708
|
-
color: var(--text-
|
|
798
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
799
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
800
|
+
border: 1.5px solid var(--border-subtle, #e5e7eb);
|
|
801
|
+
border-radius: var(--radius-md, 0.5rem);
|
|
802
|
+
background: var(--bg-primary, #ffffff);
|
|
803
|
+
color: var(--text-primary, #0b1120);
|
|
804
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
709
805
|
box-sizing: border-box;
|
|
806
|
+
transition: border-color var(--transition-fast, 0.15s ease),
|
|
807
|
+
box-shadow var(--transition-fast, 0.15s ease);
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
input:focus {
|
|
811
|
+
outline: none;
|
|
812
|
+
border-color: var(--brand-color, #2563eb);
|
|
813
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color, #2563eb), transparent 85%);
|
|
710
814
|
}
|
|
711
815
|
|
|
712
816
|
input[type="file"] {
|
|
713
|
-
margin-bottom:
|
|
817
|
+
margin-bottom: var(--space-md, 1lh);
|
|
714
818
|
}
|
|
715
819
|
|
|
716
820
|
button {
|
|
717
|
-
padding:
|
|
821
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
718
822
|
border: none;
|
|
719
|
-
border-radius:
|
|
823
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
720
824
|
cursor: pointer;
|
|
721
|
-
font-size: 1rem;
|
|
722
|
-
|
|
723
|
-
|
|
825
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
826
|
+
font-weight: var(--font-weight-medium, 500);
|
|
827
|
+
transition: background-color var(--transition-base, 0.2s ease);
|
|
724
828
|
}
|
|
725
829
|
|
|
726
830
|
.btn-primary {
|
|
727
|
-
background: var(--
|
|
728
|
-
color:
|
|
831
|
+
background: var(--brand-color, #2563eb);
|
|
832
|
+
color: var(--text-inverse, #ffffff);
|
|
833
|
+
box-shadow: 0 2px 4px color-mix(in srgb, var(--brand-color, #2563eb), transparent 75%);
|
|
729
834
|
}
|
|
730
835
|
|
|
731
836
|
.btn-primary:hover {
|
|
732
|
-
background: var(--
|
|
837
|
+
background: color-mix(in srgb, var(--brand-color, #2563eb), black 15%);
|
|
733
838
|
}
|
|
734
839
|
|
|
735
840
|
.btn-secondary {
|
|
736
|
-
background: var(--
|
|
737
|
-
color: var(--text-
|
|
841
|
+
background: var(--bg-secondary, #f8fafc);
|
|
842
|
+
color: var(--text-primary, #0b1120);
|
|
843
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
844
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
738
845
|
}
|
|
739
846
|
|
|
740
847
|
.btn-secondary:hover {
|
|
741
|
-
background: var(--
|
|
848
|
+
background: var(--bg-tertiary, #f1f5f9);
|
|
849
|
+
border-color: var(--border-color, #d1d5db);
|
|
742
850
|
}
|
|
743
851
|
|
|
744
852
|
.btn-danger {
|
|
745
|
-
background: #
|
|
746
|
-
color:
|
|
853
|
+
background: var(--color-danger, #ef4444);
|
|
854
|
+
color: var(--text-inverse, #ffffff);
|
|
747
855
|
}
|
|
748
856
|
|
|
749
857
|
.btn-danger:hover {
|
|
750
|
-
background: #
|
|
858
|
+
background: var(--color-danger-hover, #dc2626);
|
|
751
859
|
}
|
|
752
860
|
|
|
753
861
|
.file-list {
|
|
754
|
-
margin-top:
|
|
862
|
+
margin-top: var(--space-md, 1lh);
|
|
755
863
|
}
|
|
756
864
|
|
|
757
865
|
.file-item {
|
|
758
866
|
display: flex;
|
|
759
867
|
justify-content: space-between;
|
|
760
868
|
align-items: center;
|
|
761
|
-
padding: 0.
|
|
762
|
-
border-bottom: 1px solid var(--border-
|
|
869
|
+
padding: var(--space-sm, 0.5lh);
|
|
870
|
+
border-bottom: 1px solid var(--border-subtle, #e5e7eb);
|
|
871
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
872
|
+
transition: background var(--transition-fast, 0.15s ease);
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
.file-item:hover {
|
|
876
|
+
background: var(--bg-secondary, #f8fafc);
|
|
763
877
|
}
|
|
764
878
|
|
|
765
879
|
.file-item:last-child {
|
|
766
880
|
border-bottom: none;
|
|
767
881
|
}
|
|
882
|
+
|
|
883
|
+
.logo-preview {
|
|
884
|
+
background: var(--bg-secondary, #f8fafc);
|
|
885
|
+
padding: var(--space-sm, 0.5lh);
|
|
886
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
887
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
888
|
+
display: inline-block;
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
.logo-preview-img {
|
|
892
|
+
max-height: 100px;
|
|
893
|
+
display: block;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.field-label {
|
|
897
|
+
display: block;
|
|
898
|
+
margin-bottom: var(--space-2xs, 0.25lh);
|
|
899
|
+
font-weight: var(--font-weight-medium, 500);
|
|
900
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
901
|
+
color: var(--text-primary, #0b1120);
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
.info-box {
|
|
905
|
+
background: var(--bg-secondary, #f8fafc);
|
|
906
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
907
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
908
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
909
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
910
|
+
color: var(--text-secondary, #475569);
|
|
911
|
+
margin-top: var(--space-sm, 0.5lh);
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
h4 {
|
|
915
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
916
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
917
|
+
color: var(--text-primary, #0b1120);
|
|
918
|
+
margin: 0 0 var(--space-2xs, 0.25lh) 0;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.required-badge {
|
|
922
|
+
font-size: var(--font-size-tiny, clamp(0.6875rem, 0.85vw, 0.75rem));
|
|
923
|
+
font-weight: var(--font-weight-medium, 500);
|
|
924
|
+
color: var(--color-warning, #f59e0b);
|
|
925
|
+
background: color-mix(in srgb, var(--color-warning, #f59e0b), transparent 85%);
|
|
926
|
+
padding: 0 var(--space-2xs, 0.25lh);
|
|
927
|
+
border-radius: var(--radius-sm, 0.25rem);
|
|
928
|
+
vertical-align: middle;
|
|
929
|
+
}
|
|
768
930
|
`;
|
|
769
931
|
var __create$d = Object.create;
|
|
770
932
|
var __defProp$d = Object.defineProperty;
|
|
@@ -866,67 +1028,79 @@ AdminLoginForm.styles = css`
|
|
|
866
1028
|
|
|
867
1029
|
.container {
|
|
868
1030
|
width: 100%;
|
|
869
|
-
max-width:
|
|
1031
|
+
max-width: var(--content-medium, 960px);
|
|
870
1032
|
margin: 0 auto;
|
|
871
|
-
padding:
|
|
1033
|
+
padding: var(--space-md, 1lh);
|
|
872
1034
|
}
|
|
873
1035
|
|
|
874
1036
|
.login-box {
|
|
875
|
-
border: 1px solid var(--border-
|
|
876
|
-
padding:
|
|
877
|
-
border-radius:
|
|
1037
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
1038
|
+
padding: var(--space-xl, 3lh) var(--space-lg, 2lh);
|
|
1039
|
+
border-radius: var(--radius-xl, 1rem);
|
|
878
1040
|
width: 100%;
|
|
879
1041
|
max-width: 420px;
|
|
880
1042
|
margin: 80px auto;
|
|
881
1043
|
text-align: center;
|
|
882
|
-
background: var(--
|
|
883
|
-
box-shadow: 0 4px 6px
|
|
1044
|
+
background: var(--bg-primary, #ffffff);
|
|
1045
|
+
box-shadow: var(--shadow-md, 0 4px 6px -2px oklch(0% 0 0 / 0.06));
|
|
884
1046
|
}
|
|
885
1047
|
|
|
886
1048
|
.login-box h2 {
|
|
887
|
-
margin: 0 0 0.
|
|
888
|
-
font-size: 1.75rem;
|
|
889
|
-
font-weight: 600;
|
|
890
|
-
color: var(--text-
|
|
1049
|
+
margin: 0 0 var(--space-sm, 0.5lh) 0;
|
|
1050
|
+
font-size: var(--font-size-h2, clamp(1.35rem, 2.25vw, 1.75rem));
|
|
1051
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
1052
|
+
color: var(--text-primary, #0b1120);
|
|
891
1053
|
}
|
|
892
1054
|
|
|
893
1055
|
.login-box p {
|
|
894
|
-
color: var(--secondary
|
|
895
|
-
margin-bottom:
|
|
1056
|
+
color: var(--text-secondary, #475569);
|
|
1057
|
+
margin-bottom: var(--space-md, 1lh);
|
|
896
1058
|
}
|
|
897
1059
|
|
|
898
1060
|
input {
|
|
899
1061
|
width: 100%;
|
|
900
|
-
padding:
|
|
901
|
-
margin-bottom:
|
|
902
|
-
border:
|
|
903
|
-
border-radius:
|
|
904
|
-
background: var(--
|
|
905
|
-
color: var(--text-
|
|
1062
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
1063
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
1064
|
+
border: 1.5px solid var(--border-subtle, #e5e7eb);
|
|
1065
|
+
border-radius: var(--radius-md, 0.5rem);
|
|
1066
|
+
background: var(--bg-primary, #ffffff);
|
|
1067
|
+
color: var(--text-primary, #0b1120);
|
|
1068
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
906
1069
|
box-sizing: border-box;
|
|
1070
|
+
transition: border-color var(--transition-fast, 0.15s ease),
|
|
1071
|
+
box-shadow var(--transition-fast, 0.15s ease);
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
input:focus {
|
|
1075
|
+
outline: none;
|
|
1076
|
+
border-color: var(--brand-color, #2563eb);
|
|
1077
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color, #2563eb), transparent 85%);
|
|
907
1078
|
}
|
|
908
1079
|
|
|
909
1080
|
button {
|
|
910
|
-
padding:
|
|
1081
|
+
padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
|
|
911
1082
|
border: none;
|
|
912
|
-
border-radius:
|
|
1083
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
913
1084
|
cursor: pointer;
|
|
914
|
-
font-size: 1rem;
|
|
915
|
-
|
|
1085
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
1086
|
+
font-weight: var(--font-weight-medium, 500);
|
|
1087
|
+
transition: background-color var(--transition-base, 0.2s ease);
|
|
916
1088
|
}
|
|
917
1089
|
|
|
918
1090
|
.btn-primary {
|
|
919
|
-
background: var(--
|
|
920
|
-
color:
|
|
1091
|
+
background: var(--brand-color, #2563eb);
|
|
1092
|
+
color: var(--text-inverse, #ffffff);
|
|
1093
|
+
box-shadow: 0 2px 4px color-mix(in srgb, var(--brand-color, #2563eb), transparent 75%);
|
|
921
1094
|
}
|
|
922
1095
|
|
|
923
1096
|
.btn-primary:hover {
|
|
924
|
-
background: var(--
|
|
1097
|
+
background: color-mix(in srgb, var(--brand-color, #2563eb), black 15%);
|
|
925
1098
|
}
|
|
926
1099
|
|
|
927
1100
|
.error-message {
|
|
928
|
-
color:
|
|
929
|
-
margin-bottom:
|
|
1101
|
+
color: var(--accent-warm, #f59e0b);
|
|
1102
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
1103
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
930
1104
|
}
|
|
931
1105
|
`;
|
|
932
1106
|
__runInitializers$d(_init$d, 1, AdminLoginForm);
|
|
@@ -1225,15 +1399,15 @@ class AdminBlogsSection extends (_a$9 = AdminSection) {
|
|
|
1225
1399
|
|
|
1226
1400
|
<h4>Upload New Blog</h4>
|
|
1227
1401
|
<div class="mb-1">
|
|
1228
|
-
<label
|
|
1402
|
+
<label class="field-label">Metadata (JSON)</label>
|
|
1229
1403
|
<input type="file" id="blogMetaFile" accept=".json" />
|
|
1230
1404
|
</div>
|
|
1231
1405
|
<div class="mb-1">
|
|
1232
|
-
<label
|
|
1406
|
+
<label class="field-label">Content (Markdown)</label>
|
|
1233
1407
|
<input type="file" id="blogContentFile" accept=".md" />
|
|
1234
1408
|
</div>
|
|
1235
1409
|
<div class="mb-1">
|
|
1236
|
-
<label
|
|
1410
|
+
<label class="field-label">URL Slug</label>
|
|
1237
1411
|
<input type="text" id="blogSlug" placeholder="Slug (e.g., my-new-post)" />
|
|
1238
1412
|
</div>
|
|
1239
1413
|
<button class="btn-primary" @click=${this.handleUpload}>Upload Blog (JSON + MD)</button>
|
|
@@ -1325,15 +1499,15 @@ class AdminStoriesSection extends (_a$8 = AdminSection) {
|
|
|
1325
1499
|
|
|
1326
1500
|
<h4>Upload New Story</h4>
|
|
1327
1501
|
<div class="mb-1">
|
|
1328
|
-
<label
|
|
1502
|
+
<label class="field-label">Metadata (JSON)</label>
|
|
1329
1503
|
<input type="file" id="storyMetaFile" accept=".json" />
|
|
1330
1504
|
</div>
|
|
1331
1505
|
<div class="mb-1">
|
|
1332
|
-
<label
|
|
1506
|
+
<label class="field-label">Content (Markdown)</label>
|
|
1333
1507
|
<input type="file" id="storyContentFile" accept=".md" />
|
|
1334
1508
|
</div>
|
|
1335
1509
|
<div class="mb-1">
|
|
1336
|
-
<label
|
|
1510
|
+
<label class="field-label">URL Slug</label>
|
|
1337
1511
|
<input type="text" id="storySlug" placeholder="Slug (e.g., my-story)" />
|
|
1338
1512
|
</div>
|
|
1339
1513
|
<button class="btn-primary" @click=${this.handleUpload}>Upload Story (JSON + MD)</button>
|
|
@@ -1506,10 +1680,9 @@ class AdminLogoSection extends (_a$6 = AdminSection) {
|
|
|
1506
1680
|
<div class="mb-1">
|
|
1507
1681
|
<strong>Current:</strong> logo.svg (${logo.size} bytes)
|
|
1508
1682
|
</div>
|
|
1509
|
-
<div
|
|
1510
|
-
<img src="${logoUrl}" alt="Current Logo"
|
|
1683
|
+
<div class="logo-preview">
|
|
1684
|
+
<img src="${logoUrl}" alt="Current Logo" class="logo-preview-img" />
|
|
1511
1685
|
</div>
|
|
1512
|
-
<br/>
|
|
1513
1686
|
<button class="btn-danger" @click=${this.handleDelete}>Delete</button>
|
|
1514
1687
|
</div>
|
|
1515
1688
|
` : ""}
|
|
@@ -1614,27 +1787,27 @@ class AdminStaticSection extends (_a$5 = AdminSection, _localDetails_dec = [stat
|
|
|
1614
1787
|
<p class="help-text">Manage your site's static details like title, footer links, etc.</p>
|
|
1615
1788
|
|
|
1616
1789
|
<div class="mb-1">
|
|
1617
|
-
<label
|
|
1790
|
+
<label class="field-label">Site Title</label>
|
|
1618
1791
|
<input type="text" id="siteTitle" .value=${this.localDetails?.siteTitle || ""} />
|
|
1619
1792
|
</div>
|
|
1620
1793
|
|
|
1621
1794
|
<div class="mb-1">
|
|
1622
|
-
<label
|
|
1795
|
+
<label class="field-label">Copyright Text</label>
|
|
1623
1796
|
<input type="text" id="copyright" .value=${this.localDetails?.copyright || ""} />
|
|
1624
1797
|
</div>
|
|
1625
1798
|
|
|
1626
1799
|
<div class="mb-1">
|
|
1627
|
-
<label
|
|
1800
|
+
<label class="field-label">LinkedIn URL</label>
|
|
1628
1801
|
<input type="text" id="linkedin" .value=${this.localDetails?.linkedin || ""} />
|
|
1629
1802
|
</div>
|
|
1630
1803
|
|
|
1631
1804
|
<div class="mb-1">
|
|
1632
|
-
<label
|
|
1805
|
+
<label class="field-label">GitHub URL</label>
|
|
1633
1806
|
<input type="text" id="github" .value=${this.localDetails?.github || ""} />
|
|
1634
1807
|
</div>
|
|
1635
1808
|
|
|
1636
1809
|
<div class="mb-1">
|
|
1637
|
-
<label
|
|
1810
|
+
<label class="field-label">Email</label>
|
|
1638
1811
|
<input type="text" id="email" .value=${this.localDetails?.email || ""} />
|
|
1639
1812
|
</div>
|
|
1640
1813
|
|
|
@@ -2021,45 +2194,71 @@ __runInitializers$4(_init$4, 1, AdminPortal);
|
|
|
2021
2194
|
const adminLoaded = true;
|
|
2022
2195
|
const bannerStyles = css`
|
|
2023
2196
|
:host {
|
|
2197
|
+
/* Layout */
|
|
2024
2198
|
display: block;
|
|
2199
|
+
position: relative;
|
|
2200
|
+
|
|
2201
|
+
/* Box */
|
|
2025
2202
|
width: 100%;
|
|
2026
2203
|
box-sizing: border-box;
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2204
|
+
|
|
2205
|
+
/* Typography */
|
|
2206
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
2207
|
+
color: var(--text-primary, #0b1120);
|
|
2208
|
+
background-color: var(--bg-primary, #ffffff);
|
|
2209
|
+
|
|
2210
|
+
/* Misc */
|
|
2211
|
+
border-bottom: 1px solid var(--border-subtle, #e5e7eb);
|
|
2030
2212
|
}
|
|
2031
2213
|
|
|
2032
2214
|
.banner,
|
|
2033
2215
|
.banner-component {
|
|
2216
|
+
/* Layout */
|
|
2034
2217
|
display: flex;
|
|
2035
2218
|
flex-direction: row;
|
|
2036
2219
|
justify-content: space-between;
|
|
2037
2220
|
align-items: center;
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2221
|
+
|
|
2222
|
+
/* Box */
|
|
2223
|
+
padding: var(--space-sm, 0.5lh) var(--space-lg, 2lh);
|
|
2224
|
+
|
|
2225
|
+
/* Visual */
|
|
2226
|
+
background-color: var(--bg-primary, #ffffff);
|
|
2227
|
+
color: var(--text-primary, #0b1120);
|
|
2228
|
+
|
|
2229
|
+
/* Misc */
|
|
2230
|
+
transition: background-color var(--transition-slow, 0.3s ease),
|
|
2231
|
+
color var(--transition-slow, 0.3s ease);
|
|
2043
2232
|
}
|
|
2044
2233
|
|
|
2045
2234
|
.header-content {
|
|
2235
|
+
/* Layout */
|
|
2046
2236
|
display: flex;
|
|
2047
2237
|
align-items: center;
|
|
2238
|
+
|
|
2239
|
+
/* Box */
|
|
2048
2240
|
margin-bottom: 0;
|
|
2049
2241
|
margin-right: auto;
|
|
2242
|
+
gap: var(--space-sm, 0.5lh);
|
|
2050
2243
|
}
|
|
2051
2244
|
|
|
2052
2245
|
.logo-link {
|
|
2246
|
+
/* Layout */
|
|
2053
2247
|
display: inline-flex;
|
|
2054
2248
|
align-items: center;
|
|
2249
|
+
|
|
2250
|
+
/* Misc */
|
|
2055
2251
|
text-decoration: none;
|
|
2056
2252
|
cursor: pointer;
|
|
2057
2253
|
}
|
|
2058
2254
|
|
|
2059
2255
|
.logo {
|
|
2060
|
-
|
|
2061
|
-
|
|
2256
|
+
/* Box */
|
|
2257
|
+
height: 48px;
|
|
2258
|
+
margin-right: var(--space-sm, 0.5lh);
|
|
2062
2259
|
width: auto;
|
|
2260
|
+
|
|
2261
|
+
/* Misc */
|
|
2063
2262
|
cursor: pointer;
|
|
2064
2263
|
}
|
|
2065
2264
|
|
|
@@ -2069,35 +2268,52 @@ const bannerStyles = css`
|
|
|
2069
2268
|
}
|
|
2070
2269
|
|
|
2071
2270
|
h1 {
|
|
2271
|
+
/* Typography */
|
|
2272
|
+
font-size: var(--font-size-h3, clamp(1.15rem, 1.75vw, 1.375rem));
|
|
2273
|
+
font-weight: var(--font-weight-semibold, 600);
|
|
2274
|
+
letter-spacing: -0.02em;
|
|
2275
|
+
color: var(--text-primary, #0b1120);
|
|
2276
|
+
|
|
2277
|
+
/* Box */
|
|
2072
2278
|
margin: 0;
|
|
2073
|
-
font-size: 1.8em;
|
|
2074
|
-
font-weight: 600;
|
|
2075
|
-
color: var(--text-color);
|
|
2076
2279
|
}
|
|
2077
2280
|
|
|
2078
2281
|
.nav-and-theme {
|
|
2282
|
+
/* Layout */
|
|
2079
2283
|
display: flex;
|
|
2080
2284
|
align-items: center;
|
|
2081
|
-
gap:
|
|
2285
|
+
gap: var(--space-md, 1lh);
|
|
2082
2286
|
}
|
|
2083
2287
|
|
|
2084
2288
|
nav {
|
|
2289
|
+
/* Layout */
|
|
2085
2290
|
display: flex;
|
|
2086
2291
|
align-items: center;
|
|
2087
|
-
|
|
2088
|
-
|
|
2292
|
+
|
|
2293
|
+
/* Box */
|
|
2294
|
+
padding: 0 var(--space-md, 1lh);
|
|
2295
|
+
gap: var(--space-2xs, 0.25lh);
|
|
2089
2296
|
}
|
|
2090
2297
|
|
|
2091
2298
|
nav a {
|
|
2299
|
+
/* Typography */
|
|
2092
2300
|
text-decoration: none;
|
|
2093
|
-
color: var(--
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2301
|
+
color: var(--link-color, #2563eb);
|
|
2302
|
+
font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
|
|
2303
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2304
|
+
|
|
2305
|
+
/* Box */
|
|
2306
|
+
padding: var(--space-2xs, 0.25lh) var(--space-sm, 0.5lh);
|
|
2307
|
+
border-radius: var(--radius-sm, 0.375rem);
|
|
2308
|
+
|
|
2309
|
+
/* Misc */
|
|
2310
|
+
transition: background-color var(--transition-base, 0.2s ease),
|
|
2311
|
+
color var(--transition-base, 0.2s ease);
|
|
2097
2312
|
}
|
|
2098
2313
|
|
|
2099
2314
|
nav a:hover {
|
|
2100
|
-
background-color: var(--
|
|
2315
|
+
background-color: var(--bg-accent, #eff6ff);
|
|
2316
|
+
color: var(--link-hover, #1d4ed8);
|
|
2101
2317
|
text-decoration: none;
|
|
2102
2318
|
}
|
|
2103
2319
|
|
|
@@ -2105,8 +2321,8 @@ nav a:hover {
|
|
|
2105
2321
|
.banner,
|
|
2106
2322
|
.banner-component {
|
|
2107
2323
|
flex-direction: column;
|
|
2108
|
-
gap:
|
|
2109
|
-
padding:
|
|
2324
|
+
gap: var(--space-sm, 0.5lh);
|
|
2325
|
+
padding: var(--space-sm, 0.5lh);
|
|
2110
2326
|
}
|
|
2111
2327
|
|
|
2112
2328
|
.header-content {
|
|
@@ -2117,6 +2333,7 @@ nav a:hover {
|
|
|
2117
2333
|
nav {
|
|
2118
2334
|
flex-wrap: wrap;
|
|
2119
2335
|
justify-content: center;
|
|
2336
|
+
gap: var(--space-3xs, 0.125lh);
|
|
2120
2337
|
}
|
|
2121
2338
|
}
|
|
2122
2339
|
`;
|
|
@@ -2189,38 +2406,61 @@ MyBanner = __decorateElement$3(_init$3, 0, "MyBanner", _MyBanner_decorators, MyB
|
|
|
2189
2406
|
__runInitializers$3(_init$3, 1, MyBanner);
|
|
2190
2407
|
const footerStyles = css`
|
|
2191
2408
|
:host {
|
|
2409
|
+
/* Layout */
|
|
2192
2410
|
display: flex;
|
|
2193
2411
|
align-items: center;
|
|
2194
2412
|
justify-content: space-between;
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2413
|
+
|
|
2414
|
+
/* Box */
|
|
2415
|
+
padding: var(--space-md, 1lh) var(--space-lg, 2lh);
|
|
2416
|
+
|
|
2417
|
+
/* Visual */
|
|
2418
|
+
background: var(--bg-primary, #ffffff);
|
|
2419
|
+
color: var(--text-primary, #0b1120);
|
|
2420
|
+
border-top: 1px solid var(--border-subtle, #e5e7eb);
|
|
2421
|
+
|
|
2422
|
+
/* Misc */
|
|
2199
2423
|
flex-wrap: wrap;
|
|
2200
2424
|
}
|
|
2201
2425
|
|
|
2202
2426
|
.footer-content {
|
|
2427
|
+
/* Layout */
|
|
2203
2428
|
display: flex;
|
|
2204
2429
|
flex-direction: column;
|
|
2205
2430
|
align-items: flex-start;
|
|
2431
|
+
|
|
2432
|
+
/* Typography */
|
|
2433
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
2434
|
+
color: var(--text-secondary, #475569);
|
|
2206
2435
|
}
|
|
2207
2436
|
|
|
2208
2437
|
.links {
|
|
2438
|
+
/* Layout */
|
|
2209
2439
|
display: flex;
|
|
2210
|
-
gap:
|
|
2211
|
-
|
|
2440
|
+
gap: var(--space-sm, 0.5lh);
|
|
2441
|
+
|
|
2442
|
+
/* Box */
|
|
2443
|
+
margin-top: var(--space-2xs, 0.25lh);
|
|
2212
2444
|
}
|
|
2213
2445
|
|
|
2214
2446
|
.links a {
|
|
2215
|
-
|
|
2447
|
+
/* Typography */
|
|
2448
|
+
color: var(--link-color, #2563eb);
|
|
2216
2449
|
text-decoration: none;
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2450
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
2451
|
+
|
|
2452
|
+
/* Box */
|
|
2453
|
+
padding: var(--space-3xs, 0.125lh) var(--space-2xs, 0.25lh);
|
|
2454
|
+
border-radius: var(--radius-sm, 0.25rem);
|
|
2455
|
+
|
|
2456
|
+
/* Misc */
|
|
2457
|
+
transition: background-color var(--transition-base, 0.2s ease),
|
|
2458
|
+
color var(--transition-base, 0.2s ease);
|
|
2220
2459
|
}
|
|
2221
2460
|
|
|
2222
2461
|
.links a:hover {
|
|
2223
|
-
background-color:
|
|
2462
|
+
background-color: var(--bg-accent, #eff6ff);
|
|
2463
|
+
color: var(--link-hover, #1d4ed8);
|
|
2224
2464
|
}
|
|
2225
2465
|
|
|
2226
2466
|
@media (min-width: 768px) {
|
|
@@ -2330,19 +2570,38 @@ const blogviewerStyles = css`
|
|
|
2330
2570
|
}
|
|
2331
2571
|
|
|
2332
2572
|
.tags {
|
|
2573
|
+
/* Layout */
|
|
2333
2574
|
display: flex;
|
|
2334
|
-
gap: 0.
|
|
2575
|
+
gap: var(--space-2xs, 0.25lh);
|
|
2335
2576
|
flex-wrap: wrap;
|
|
2336
|
-
|
|
2577
|
+
|
|
2578
|
+
/* Box */
|
|
2579
|
+
margin-top: var(--space-md, 1lh);
|
|
2337
2580
|
}
|
|
2338
2581
|
|
|
2339
2582
|
.tag {
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
border:
|
|
2583
|
+
/* Box */
|
|
2584
|
+
background: var(--bg-secondary, #f8fafc);
|
|
2585
|
+
color: var(--text-secondary, #475569);
|
|
2586
|
+
padding: var(--space-3xs, 0.125lh) var(--space-sm, 0.5lh);
|
|
2587
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
2588
|
+
border-radius: var(--radius-full, 9999px);
|
|
2589
|
+
|
|
2590
|
+
/* Typography */
|
|
2591
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
2592
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2593
|
+
letter-spacing: 0.01em;
|
|
2594
|
+
|
|
2595
|
+
/* Misc */
|
|
2596
|
+
transition: background-color var(--transition-fast, 0.15s ease),
|
|
2597
|
+
border-color var(--transition-fast, 0.15s ease),
|
|
2598
|
+
color var(--transition-fast, 0.15s ease);
|
|
2599
|
+
}
|
|
2600
|
+
|
|
2601
|
+
.tag:hover {
|
|
2602
|
+
background: var(--bg-accent, #eff6ff);
|
|
2603
|
+
border-color: var(--brand-color, #2563eb);
|
|
2604
|
+
color: var(--brand-color, #2563eb);
|
|
2346
2605
|
}
|
|
2347
2606
|
`;
|
|
2348
2607
|
const __vite_import_meta_env__ = {};
|
|
@@ -2505,53 +2764,87 @@ __runInitializers$1(_init$1, 1, BlogViewer);
|
|
|
2505
2764
|
const storyviewerStyles = css`
|
|
2506
2765
|
:host {
|
|
2507
2766
|
display: block;
|
|
2508
|
-
max-width:
|
|
2767
|
+
max-width: var(--content-narrow, 720px);
|
|
2509
2768
|
margin: 0 auto;
|
|
2769
|
+
width: 100%;
|
|
2510
2770
|
}
|
|
2511
2771
|
|
|
2512
2772
|
.loading {
|
|
2513
2773
|
text-align: center;
|
|
2514
|
-
padding:
|
|
2774
|
+
padding: var(--space-xl, 3lh);
|
|
2775
|
+
color: var(--text-secondary, #475569);
|
|
2515
2776
|
}
|
|
2516
2777
|
|
|
2517
2778
|
.error {
|
|
2518
|
-
color:
|
|
2779
|
+
color: var(--accent-warm, #f59e0b);
|
|
2519
2780
|
text-align: center;
|
|
2520
|
-
padding:
|
|
2781
|
+
padding: var(--space-xl, 3lh);
|
|
2521
2782
|
}
|
|
2522
2783
|
|
|
2523
2784
|
h1 {
|
|
2524
|
-
|
|
2785
|
+
/* Typography */
|
|
2786
|
+
font-size: var(--font-size-h1, clamp(1.75rem, 3vw, 2.5rem));
|
|
2787
|
+
font-weight: var(--font-weight-bold, 700);
|
|
2788
|
+
line-height: var(--line-height-tight, 1.15);
|
|
2789
|
+
letter-spacing: -0.02em;
|
|
2790
|
+
color: var(--text-primary, #0b1120);
|
|
2791
|
+
|
|
2792
|
+
/* Box */
|
|
2793
|
+
margin-bottom: var(--space-sm, 0.5lh);
|
|
2525
2794
|
}
|
|
2526
2795
|
|
|
2527
2796
|
.meta {
|
|
2528
|
-
|
|
2529
|
-
|
|
2797
|
+
/* Typography */
|
|
2798
|
+
color: var(--text-secondary, #475569);
|
|
2799
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
2800
|
+
|
|
2801
|
+
/* Box */
|
|
2802
|
+
margin-bottom: var(--space-lg, 2lh);
|
|
2803
|
+
padding-bottom: var(--space-sm, 0.5lh);
|
|
2804
|
+
border-bottom: 1px solid var(--border-subtle, #e5e7eb);
|
|
2530
2805
|
}
|
|
2531
2806
|
|
|
2532
2807
|
.tags {
|
|
2808
|
+
/* Layout */
|
|
2533
2809
|
display: flex;
|
|
2534
|
-
gap: 0.
|
|
2810
|
+
gap: var(--space-2xs, 0.25lh);
|
|
2535
2811
|
flex-wrap: wrap;
|
|
2536
|
-
|
|
2812
|
+
|
|
2813
|
+
/* Box */
|
|
2814
|
+
margin-top: var(--space-md, 1lh);
|
|
2537
2815
|
}
|
|
2538
2816
|
|
|
2539
2817
|
.tag {
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
border:
|
|
2818
|
+
/* Box */
|
|
2819
|
+
background: var(--bg-secondary, #f8fafc);
|
|
2820
|
+
color: var(--text-secondary, #475569);
|
|
2821
|
+
padding: var(--space-3xs, 0.125lh) var(--space-sm, 0.5lh);
|
|
2822
|
+
border: 1px solid var(--border-subtle, #e5e7eb);
|
|
2823
|
+
border-radius: var(--radius-full, 9999px);
|
|
2824
|
+
|
|
2825
|
+
/* Typography */
|
|
2826
|
+
font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
|
|
2827
|
+
font-weight: var(--font-weight-medium, 500);
|
|
2828
|
+
|
|
2829
|
+
/* Misc */
|
|
2830
|
+
transition: background-color var(--transition-fast, 0.15s ease),
|
|
2831
|
+
border-color var(--transition-fast, 0.15s ease);
|
|
2832
|
+
}
|
|
2833
|
+
|
|
2834
|
+
.tag:hover {
|
|
2835
|
+
background: var(--bg-accent, #eff6ff);
|
|
2836
|
+
border-color: var(--brand-color, #2563eb);
|
|
2546
2837
|
}
|
|
2547
2838
|
|
|
2548
2839
|
.content {
|
|
2549
|
-
|
|
2840
|
+
/* Typography */
|
|
2841
|
+
line-height: var(--line-height-relaxed, 1.8);
|
|
2550
2842
|
text-align: left;
|
|
2843
|
+
color: var(--text-primary, #0b1120);
|
|
2551
2844
|
}
|
|
2552
2845
|
|
|
2553
2846
|
.content h1, .content h2, .content h3 {
|
|
2554
|
-
margin-top:
|
|
2847
|
+
margin-top: var(--space-lg, 2lh);
|
|
2555
2848
|
}
|
|
2556
2849
|
`;
|
|
2557
2850
|
var __create = Object.create;
|