smirky 1.0.0 → 1.0.1

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,630 +0,0 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
- @layer properties;
3
- @layer theme, base, components, utilities;
4
- @layer theme {
5
- :root, :host {
6
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
- "Courier New", monospace;
10
- --color-red-600: oklch(57.7% 0.245 27.325);
11
- --color-blue-600: oklch(54.6% 0.245 262.881);
12
- --color-blue-800: oklch(42.4% 0.199 265.638);
13
- --color-indigo-100: oklch(93% 0.034 272.788);
14
- --color-indigo-600: oklch(51.1% 0.262 276.966);
15
- --color-indigo-700: oklch(45.7% 0.24 277.023);
16
- --color-slate-50: oklch(98.4% 0.003 247.858);
17
- --color-slate-200: oklch(92.9% 0.013 255.508);
18
- --color-slate-500: oklch(55.4% 0.046 257.417);
19
- --color-slate-900: oklch(20.8% 0.042 265.755);
20
- --color-gray-100: oklch(96.7% 0.003 264.542);
21
- --color-gray-300: oklch(87.2% 0.01 258.338);
22
- --color-gray-700: oklch(37.3% 0.034 259.733);
23
- --color-gray-900: oklch(21% 0.034 264.665);
24
- --color-white: #fff;
25
- --spacing: 0.25rem;
26
- --container-5xl: 64rem;
27
- --text-xs: 0.75rem;
28
- --text-xs--line-height: calc(1 / 0.75);
29
- --text-sm: 0.875rem;
30
- --text-sm--line-height: calc(1.25 / 0.875);
31
- --text-base: 1rem;
32
- --text-base--line-height: calc(1.5 / 1);
33
- --text-lg: 1.125rem;
34
- --text-lg--line-height: calc(1.75 / 1.125);
35
- --text-xl: 1.25rem;
36
- --text-xl--line-height: calc(1.75 / 1.25);
37
- --text-2xl: 1.5rem;
38
- --text-2xl--line-height: calc(2 / 1.5);
39
- --text-3xl: 1.875rem;
40
- --text-3xl--line-height: calc(2.25 / 1.875);
41
- --text-4xl: 2.25rem;
42
- --text-4xl--line-height: calc(2.5 / 2.25);
43
- --font-weight-medium: 500;
44
- --font-weight-semibold: 600;
45
- --font-weight-bold: 700;
46
- --leading-tight: 1.25;
47
- --leading-snug: 1.375;
48
- --leading-relaxed: 1.625;
49
- --radius-lg: 0.5rem;
50
- --default-transition-duration: 150ms;
51
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
52
- --default-font-family: var(--font-sans);
53
- --default-mono-font-family: var(--font-mono);
54
- }
55
- }
56
- @layer base {
57
- *, ::after, ::before, ::backdrop, ::file-selector-button {
58
- box-sizing: border-box;
59
- margin: 0;
60
- padding: 0;
61
- border: 0 solid;
62
- }
63
- html, :host {
64
- line-height: 1.5;
65
- -webkit-text-size-adjust: 100%;
66
- tab-size: 4;
67
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
68
- font-feature-settings: var(--default-font-feature-settings, normal);
69
- font-variation-settings: var(--default-font-variation-settings, normal);
70
- -webkit-tap-highlight-color: transparent;
71
- }
72
- hr {
73
- height: 0;
74
- color: inherit;
75
- border-top-width: 1px;
76
- }
77
- abbr:where([title]) {
78
- -webkit-text-decoration: underline dotted;
79
- text-decoration: underline dotted;
80
- }
81
- h1, h2, h3, h4, h5, h6 {
82
- font-size: inherit;
83
- font-weight: inherit;
84
- }
85
- a {
86
- color: inherit;
87
- -webkit-text-decoration: inherit;
88
- text-decoration: inherit;
89
- }
90
- b, strong {
91
- font-weight: bolder;
92
- }
93
- code, kbd, samp, pre {
94
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
95
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
96
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
97
- font-size: 1em;
98
- }
99
- small {
100
- font-size: 80%;
101
- }
102
- sub, sup {
103
- font-size: 75%;
104
- line-height: 0;
105
- position: relative;
106
- vertical-align: baseline;
107
- }
108
- sub {
109
- bottom: -0.25em;
110
- }
111
- sup {
112
- top: -0.5em;
113
- }
114
- table {
115
- text-indent: 0;
116
- border-color: inherit;
117
- border-collapse: collapse;
118
- }
119
- :-moz-focusring {
120
- outline: auto;
121
- }
122
- progress {
123
- vertical-align: baseline;
124
- }
125
- summary {
126
- display: list-item;
127
- }
128
- ol, ul, menu {
129
- list-style: none;
130
- }
131
- img, svg, video, canvas, audio, iframe, embed, object {
132
- display: block;
133
- vertical-align: middle;
134
- }
135
- img, video {
136
- max-width: 100%;
137
- height: auto;
138
- }
139
- button, input, select, optgroup, textarea, ::file-selector-button {
140
- font: inherit;
141
- font-feature-settings: inherit;
142
- font-variation-settings: inherit;
143
- letter-spacing: inherit;
144
- color: inherit;
145
- border-radius: 0;
146
- background-color: transparent;
147
- opacity: 1;
148
- }
149
- :where(select:is([multiple], [size])) optgroup {
150
- font-weight: bolder;
151
- }
152
- :where(select:is([multiple], [size])) optgroup option {
153
- padding-inline-start: 20px;
154
- }
155
- ::file-selector-button {
156
- margin-inline-end: 4px;
157
- }
158
- ::placeholder {
159
- opacity: 1;
160
- }
161
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
162
- ::placeholder {
163
- color: currentcolor;
164
- @supports (color: color-mix(in lab, red, red)) {
165
- color: color-mix(in oklab, currentcolor 50%, transparent);
166
- }
167
- }
168
- }
169
- textarea {
170
- resize: vertical;
171
- }
172
- ::-webkit-search-decoration {
173
- -webkit-appearance: none;
174
- }
175
- ::-webkit-date-and-time-value {
176
- min-height: 1lh;
177
- text-align: inherit;
178
- }
179
- ::-webkit-datetime-edit {
180
- display: inline-flex;
181
- }
182
- ::-webkit-datetime-edit-fields-wrapper {
183
- padding: 0;
184
- }
185
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
186
- padding-block: 0;
187
- }
188
- ::-webkit-calendar-picker-indicator {
189
- line-height: 1;
190
- }
191
- :-moz-ui-invalid {
192
- box-shadow: none;
193
- }
194
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
195
- appearance: button;
196
- }
197
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
198
- height: auto;
199
- }
200
- [hidden]:where(:not([hidden="until-found"])) {
201
- display: none !important;
202
- }
203
- }
204
- @layer utilities {
205
- .static {
206
- position: static;
207
- }
208
- .mx-auto {
209
- margin-inline: auto;
210
- }
211
- .mt-1 {
212
- margin-top: calc(var(--spacing) * 1);
213
- }
214
- .mt-3 {
215
- margin-top: calc(var(--spacing) * 3);
216
- }
217
- .mt-12 {
218
- margin-top: calc(var(--spacing) * 12);
219
- }
220
- .mb-6 {
221
- margin-bottom: calc(var(--spacing) * 6);
222
- }
223
- .flex {
224
- display: flex;
225
- }
226
- .grid {
227
- display: grid;
228
- }
229
- .inline-block {
230
- display: inline-block;
231
- }
232
- .h-16 {
233
- height: calc(var(--spacing) * 16);
234
- }
235
- .max-w-5xl {
236
- max-width: var(--container-5xl);
237
- }
238
- .max-w-none {
239
- max-width: none;
240
- }
241
- .flex-wrap {
242
- flex-wrap: wrap;
243
- }
244
- .items-center {
245
- align-items: center;
246
- }
247
- .justify-between {
248
- justify-content: space-between;
249
- }
250
- .gap-2 {
251
- gap: calc(var(--spacing) * 2);
252
- }
253
- .gap-3 {
254
- gap: calc(var(--spacing) * 3);
255
- }
256
- .gap-6 {
257
- gap: calc(var(--spacing) * 6);
258
- }
259
- .space-y-8 {
260
- :where(& > :not(:last-child)) {
261
- --tw-space-y-reverse: 0;
262
- margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
263
- margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
264
- }
265
- }
266
- .space-x-6 {
267
- :where(& > :not(:last-child)) {
268
- --tw-space-x-reverse: 0;
269
- margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
270
- margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
271
- }
272
- }
273
- .rounded-full {
274
- border-radius: calc(infinity * 1px);
275
- }
276
- .rounded-lg {
277
- border-radius: var(--radius-lg);
278
- }
279
- .border-t {
280
- border-top-style: var(--tw-border-style);
281
- border-top-width: 1px;
282
- }
283
- .border-slate-200 {
284
- border-color: var(--color-slate-200);
285
- }
286
- .bg-indigo-100 {
287
- background-color: var(--color-indigo-100);
288
- }
289
- .bg-slate-50 {
290
- background-color: var(--color-slate-50);
291
- }
292
- .bg-white {
293
- background-color: var(--color-white);
294
- }
295
- .p-6 {
296
- padding: calc(var(--spacing) * 6);
297
- }
298
- .px-2 {
299
- padding-inline: calc(var(--spacing) * 2);
300
- }
301
- .px-4 {
302
- padding-inline: calc(var(--spacing) * 4);
303
- }
304
- .py-1 {
305
- padding-block: calc(var(--spacing) * 1);
306
- }
307
- .py-6 {
308
- padding-block: calc(var(--spacing) * 6);
309
- }
310
- .py-10 {
311
- padding-block: calc(var(--spacing) * 10);
312
- }
313
- .text-center {
314
- text-align: center;
315
- }
316
- .text-3xl {
317
- font-size: var(--text-3xl);
318
- line-height: var(--tw-leading, var(--text-3xl--line-height));
319
- }
320
- .text-sm {
321
- font-size: var(--text-sm);
322
- line-height: var(--tw-leading, var(--text-sm--line-height));
323
- }
324
- .text-xl {
325
- font-size: var(--text-xl);
326
- line-height: var(--tw-leading, var(--text-xl--line-height));
327
- }
328
- .text-xs {
329
- font-size: var(--text-xs);
330
- line-height: var(--tw-leading, var(--text-xs--line-height));
331
- }
332
- .font-bold {
333
- --tw-font-weight: var(--font-weight-bold);
334
- font-weight: var(--font-weight-bold);
335
- }
336
- .font-medium {
337
- --tw-font-weight: var(--font-weight-medium);
338
- font-weight: var(--font-weight-medium);
339
- }
340
- .font-semibold {
341
- --tw-font-weight: var(--font-weight-semibold);
342
- font-weight: var(--font-weight-semibold);
343
- }
344
- .text-indigo-600 {
345
- color: var(--color-indigo-600);
346
- }
347
- .text-indigo-700 {
348
- color: var(--color-indigo-700);
349
- }
350
- .text-slate-500 {
351
- color: var(--color-slate-500);
352
- }
353
- .text-slate-900 {
354
- color: var(--color-slate-900);
355
- }
356
- .shadow {
357
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
358
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
359
- }
360
- .shadow-sm {
361
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
362
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
363
- }
364
- .transition {
365
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
366
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
367
- transition-duration: var(--tw-duration, var(--default-transition-duration));
368
- }
369
- .hover\:underline {
370
- &:hover {
371
- @media (hover: hover) {
372
- text-decoration-line: underline;
373
- }
374
- }
375
- }
376
- .hover\:shadow-md {
377
- &:hover {
378
- @media (hover: hover) {
379
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
380
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
381
- }
382
- }
383
- }
384
- }
385
- h1 {
386
- margin-top: calc(var(--spacing) * 8);
387
- margin-bottom: calc(var(--spacing) * 4);
388
- font-size: var(--text-4xl);
389
- line-height: var(--tw-leading, var(--text-4xl--line-height));
390
- --tw-leading: var(--leading-tight);
391
- line-height: var(--leading-tight);
392
- --tw-font-weight: var(--font-weight-bold);
393
- font-weight: var(--font-weight-bold);
394
- }
395
- h2 {
396
- margin-top: calc(var(--spacing) * 6);
397
- margin-bottom: calc(var(--spacing) * 3);
398
- font-size: var(--text-3xl);
399
- line-height: var(--tw-leading, var(--text-3xl--line-height));
400
- --tw-leading: var(--leading-snug);
401
- line-height: var(--leading-snug);
402
- --tw-font-weight: var(--font-weight-semibold);
403
- font-weight: var(--font-weight-semibold);
404
- }
405
- h3 {
406
- margin-top: calc(var(--spacing) * 5);
407
- margin-bottom: calc(var(--spacing) * 2);
408
- font-size: var(--text-2xl);
409
- line-height: var(--tw-leading, var(--text-2xl--line-height));
410
- --tw-leading: var(--leading-snug);
411
- line-height: var(--leading-snug);
412
- --tw-font-weight: var(--font-weight-semibold);
413
- font-weight: var(--font-weight-semibold);
414
- }
415
- h4 {
416
- margin-top: calc(var(--spacing) * 4);
417
- margin-bottom: calc(var(--spacing) * 2);
418
- font-size: var(--text-xl);
419
- line-height: var(--tw-leading, var(--text-xl--line-height));
420
- --tw-font-weight: var(--font-weight-semibold);
421
- font-weight: var(--font-weight-semibold);
422
- }
423
- h5 {
424
- margin-top: calc(var(--spacing) * 3);
425
- margin-bottom: calc(var(--spacing) * 2);
426
- font-size: var(--text-lg);
427
- line-height: var(--tw-leading, var(--text-lg--line-height));
428
- --tw-font-weight: var(--font-weight-medium);
429
- font-weight: var(--font-weight-medium);
430
- }
431
- h6 {
432
- margin-top: calc(var(--spacing) * 2);
433
- margin-bottom: calc(var(--spacing) * 2);
434
- font-size: var(--text-base);
435
- line-height: var(--tw-leading, var(--text-base--line-height));
436
- --tw-font-weight: var(--font-weight-medium);
437
- font-weight: var(--font-weight-medium);
438
- }
439
- p {
440
- margin-bottom: calc(var(--spacing) * 4);
441
- font-size: var(--text-base);
442
- line-height: var(--tw-leading, var(--text-base--line-height));
443
- --tw-leading: var(--leading-relaxed);
444
- line-height: var(--leading-relaxed);
445
- }
446
- a {
447
- color: var(--color-blue-600);
448
- text-decoration-line: underline;
449
- &:hover {
450
- @media (hover: hover) {
451
- color: var(--color-blue-800);
452
- }
453
- }
454
- }
455
- img {
456
- margin-block: calc(var(--spacing) * 4);
457
- border-radius: var(--radius-lg);
458
- }
459
- ul {
460
- margin-bottom: calc(var(--spacing) * 4);
461
- list-style-type: disc;
462
- padding-left: calc(var(--spacing) * 6);
463
- }
464
- ol {
465
- margin-bottom: calc(var(--spacing) * 4);
466
- list-style-type: decimal;
467
- padding-left: calc(var(--spacing) * 6);
468
- }
469
- li {
470
- margin-bottom: calc(var(--spacing) * 1);
471
- }
472
- blockquote {
473
- margin-block: calc(var(--spacing) * 4);
474
- border-left-style: var(--tw-border-style);
475
- border-left-width: 4px;
476
- border-color: var(--color-gray-300);
477
- padding-left: calc(var(--spacing) * 4);
478
- color: var(--color-gray-700);
479
- font-style: italic;
480
- }
481
- pre {
482
- margin-block: calc(var(--spacing) * 4);
483
- overflow-x: auto;
484
- border-radius: var(--radius-lg);
485
- background-color: var(--color-gray-900);
486
- padding: calc(var(--spacing) * 4);
487
- color: var(--color-gray-100);
488
- }
489
- code {
490
- border-radius: 0.25rem;
491
- background-color: var(--color-gray-100);
492
- padding-inline: calc(var(--spacing) * 1);
493
- padding-block: calc(var(--spacing) * 0.5);
494
- color: var(--color-red-600);
495
- }
496
- hr {
497
- margin-block: calc(var(--spacing) * 8);
498
- border-color: var(--color-gray-300);
499
- }
500
- table {
501
- margin-block: calc(var(--spacing) * 6);
502
- width: 100%;
503
- border-collapse: collapse;
504
- }
505
- th {
506
- border-bottom-style: var(--tw-border-style);
507
- border-bottom-width: 1px;
508
- padding: calc(var(--spacing) * 2);
509
- text-align: left;
510
- --tw-font-weight: var(--font-weight-semibold);
511
- font-weight: var(--font-weight-semibold);
512
- }
513
- td {
514
- border-bottom-style: var(--tw-border-style);
515
- border-bottom-width: 1px;
516
- padding: calc(var(--spacing) * 2);
517
- }
518
- @property --tw-space-y-reverse {
519
- syntax: "*";
520
- inherits: false;
521
- initial-value: 0;
522
- }
523
- @property --tw-space-x-reverse {
524
- syntax: "*";
525
- inherits: false;
526
- initial-value: 0;
527
- }
528
- @property --tw-border-style {
529
- syntax: "*";
530
- inherits: false;
531
- initial-value: solid;
532
- }
533
- @property --tw-font-weight {
534
- syntax: "*";
535
- inherits: false;
536
- }
537
- @property --tw-shadow {
538
- syntax: "*";
539
- inherits: false;
540
- initial-value: 0 0 #0000;
541
- }
542
- @property --tw-shadow-color {
543
- syntax: "*";
544
- inherits: false;
545
- }
546
- @property --tw-shadow-alpha {
547
- syntax: "<percentage>";
548
- inherits: false;
549
- initial-value: 100%;
550
- }
551
- @property --tw-inset-shadow {
552
- syntax: "*";
553
- inherits: false;
554
- initial-value: 0 0 #0000;
555
- }
556
- @property --tw-inset-shadow-color {
557
- syntax: "*";
558
- inherits: false;
559
- }
560
- @property --tw-inset-shadow-alpha {
561
- syntax: "<percentage>";
562
- inherits: false;
563
- initial-value: 100%;
564
- }
565
- @property --tw-ring-color {
566
- syntax: "*";
567
- inherits: false;
568
- }
569
- @property --tw-ring-shadow {
570
- syntax: "*";
571
- inherits: false;
572
- initial-value: 0 0 #0000;
573
- }
574
- @property --tw-inset-ring-color {
575
- syntax: "*";
576
- inherits: false;
577
- }
578
- @property --tw-inset-ring-shadow {
579
- syntax: "*";
580
- inherits: false;
581
- initial-value: 0 0 #0000;
582
- }
583
- @property --tw-ring-inset {
584
- syntax: "*";
585
- inherits: false;
586
- }
587
- @property --tw-ring-offset-width {
588
- syntax: "<length>";
589
- inherits: false;
590
- initial-value: 0px;
591
- }
592
- @property --tw-ring-offset-color {
593
- syntax: "*";
594
- inherits: false;
595
- initial-value: #fff;
596
- }
597
- @property --tw-ring-offset-shadow {
598
- syntax: "*";
599
- inherits: false;
600
- initial-value: 0 0 #0000;
601
- }
602
- @property --tw-leading {
603
- syntax: "*";
604
- inherits: false;
605
- }
606
- @layer properties {
607
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
608
- *, ::before, ::after, ::backdrop {
609
- --tw-space-y-reverse: 0;
610
- --tw-space-x-reverse: 0;
611
- --tw-border-style: solid;
612
- --tw-font-weight: initial;
613
- --tw-shadow: 0 0 #0000;
614
- --tw-shadow-color: initial;
615
- --tw-shadow-alpha: 100%;
616
- --tw-inset-shadow: 0 0 #0000;
617
- --tw-inset-shadow-color: initial;
618
- --tw-inset-shadow-alpha: 100%;
619
- --tw-ring-color: initial;
620
- --tw-ring-shadow: 0 0 #0000;
621
- --tw-inset-ring-color: initial;
622
- --tw-inset-ring-shadow: 0 0 #0000;
623
- --tw-ring-inset: initial;
624
- --tw-ring-offset-width: 0px;
625
- --tw-ring-offset-color: #fff;
626
- --tw-ring-offset-shadow: 0 0 #0000;
627
- --tw-leading: initial;
628
- }
629
- }
630
- }
@@ -1,88 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
-
7
- <title>My First Post - My Awesome Blog</title>
8
- <meta name="description" content="A short introduction to my new blog">
9
-
10
- <!-- Tailwind CDN -->
11
- <script src="https://cdn.tailwindcss.com"></script>
12
-
13
- <script>
14
- function toggleMenu() {
15
- document.getElementById("mobile-menu").classList.toggle("hidden");
16
- }
17
- </script>
18
- </head>
19
-
20
- <body class="bg-slate-50 text-slate-900">
21
-
22
- <!-- NAVBAR -->
23
- <nav class="bg-white shadow-sm sticky top-0 z-50">
24
- <div class="max-w-5xl mx-auto px-4">
25
- <div class="flex justify-between items-center h-16">
26
-
27
- <!-- Logo -->
28
- <a href="/" class="text-xl font-bold text-indigo-600">
29
- My Awesome Blog
30
- </a>
31
-
32
- <!-- Desktop Nav -->
33
- <div class="hidden md:flex space-x-8 text-sm font-medium">
34
- <a href="/about/" class="hover:text-indigo-600 text-slate-600">About</a>
35
- <a href="/contact/" class="hover:text-indigo-600 text-slate-600">Contact</a>
36
- <a href="/blog/" class="hover:text-indigo-600 text-indigo-600 font-semibold">Blog</a>
37
- </div>
38
-
39
- <!-- Mobile Button -->
40
- <button onclick="toggleMenu()" class="md:hidden text-slate-700">
41
- <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none"
42
- viewBox="0 0 24 24" stroke="currentColor">
43
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
44
- d="M4 6h16M4 12h16M4 18h16" />
45
- </svg>
46
- </button>
47
-
48
- </div>
49
- </div>
50
-
51
- <!-- Mobile Menu -->
52
- <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
53
- <div class="px-4 py-3 space-y-2 text-sm">
54
- <a href="/about/" class="block text-slate-700">About</a>
55
- <a href="/contact/" class="block text-slate-700">Contact</a>
56
- <a href="/blog/" class="block text-indigo-600 font-semibold">Blog</a>
57
- </div>
58
- </div>
59
- </nav>
60
-
61
- <!-- MAIN CONTENT -->
62
- <main class="max-w-5xl mx-auto px-4 py-10">
63
- <article class="prose prose-lg max-w-none">
64
- <h1 class="mb-2">My First Post</h1>
65
-
66
- <p class="text-sm text-gray-500 mb-6">
67
- 2026-01-01
68
- <span class="ml-2">
69
- blog, intro, personal
70
- </span>
71
- </p>
72
-
73
- <h1>Welcome</h1>
74
- <p>This is my very first post using my super simple static site generator.</p>
75
-
76
- </article>
77
-
78
-
79
- </main>
80
-
81
- <!-- FOOTER -->
82
- <footer class="py-10 text-center text-slate-500 text-sm">
83
- © 2026 My Name
84
- </footer>
85
-
86
- </body>
87
- </html>
88
-