|
13 | 13 |
|
14 | 14 | <div class="relative z-10 grid grid-cols-1 md:grid-cols-12 gap-12"> |
15 | 15 | <aside class="md:col-span-3 md:border-r border-[var(--text-color)]/10 md:pr-8 md:text-right"> |
16 | | - <header class="sticky top-10"> |
| 16 | + <header class="sticky top-10 md:h-[calc(100vh-2rem)]"> |
17 | 17 | <h1 class="text-4xl font-black italic mb-4 text-[var(--accent-color)] tracking-tight">{config.title}</h1> |
18 | 18 | <div class="text-sm text-[var(--text-color)]/60 italic mb-8"> |
19 | 19 | <p>{config.description}</p> |
|
22 | 22 |
|
23 | 23 | {#if memoList.selectedTag} |
24 | 24 | <div class="mb-8"> |
25 | | - <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-color)]/40 mb-2">Filtered View</p> |
| 25 | + <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-color)]/40 mb-2"> |
| 26 | + Filtered View |
| 27 | + </p> |
26 | 28 | <button |
27 | 29 | class="bg-[var(--accent-color)]/10 text-[var(--accent-color)] px-3 py-1 rounded-full text-sm italic hover:bg-[var(--accent-color)]/20 transition-colors" |
28 | 30 | onclick={() => memoList.selectTag(null)} |
|
33 | 35 | {/if} |
34 | 36 |
|
35 | 37 | <div class="hidden md:block"> |
36 | | - <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-color)]/40 mb-4 pb-2 border-b border-[var(--text-color)]/5 inline-block ml-auto">Index</p> |
| 38 | + <p |
| 39 | + class="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-color)]/40 mb-4 pb-2 border-b border-[var(--text-color)]/5 inline-block ml-auto" |
| 40 | + > |
| 41 | + Index |
| 42 | + </p> |
37 | 43 | <ul class="text-sm space-y-3"> |
38 | 44 | {#each memoList.allTags as tag} |
39 | 45 | <li class="list-none"> |
|
50 | 56 | {/each} |
51 | 57 | </ul> |
52 | 58 | </div> |
| 59 | + |
| 60 | + <p class="hidden md:block absolute bottom-6 text-xs opacity-60"> |
| 61 | + © {new Date().getFullYear()} {config.author}, powered by <a href="https://moire.blog/" target="_blank" class="inline hover:underline">MOIRE.BLOG</a> |
| 62 | + </p> |
53 | 63 | </header> |
| 64 | + |
54 | 65 | </aside> |
55 | 66 |
|
56 | 67 | <main class="md:col-span-9 space-y-16 max-w-2xl"> |
|
60 | 71 | <h2 class="text-3xl font-black italic text-[var(--text-color)] tracking-tight"> |
61 | 72 | {format(new Date(dateKey + 'T00:00:00'), 'MMMM dd, yyyy')} |
62 | 73 | </h2> |
63 | | - <span class="text-sm text-[var(--text-color)]/40 italic font-medium">{format(new Date(dateKey + 'T00:00:00'), 'EEEE')}</span> |
| 74 | + <span class="text-sm text-[var(--text-color)]/40 italic font-medium" |
| 75 | + >{format(new Date(dateKey + 'T00:00:00'), 'EEEE')}</span |
| 76 | + > |
64 | 77 | </div> |
65 | 78 |
|
66 | 79 | <div class="space-y-14"> |
67 | 80 | {#each memos as memo} |
68 | | - <article class="group relative" id={memo.slug}> |
69 | | - <div class="absolute -left-20 top-2 hidden xl:block text-xs font-bold tracking-widest text-[var(--text-color)]/30 w-12 text-right uppercase"> |
| 81 | + <article |
| 82 | + class="group relative" |
| 83 | + id={memo.slug} |
| 84 | + > |
| 85 | + <div |
| 86 | + class="absolute -left-20 top-2 hidden xl:block text-xs font-bold tracking-widest text-[var(--text-color)]/30 w-12 text-right uppercase" |
| 87 | + > |
70 | 88 | {format(memo.date, 'HH:mm')} |
71 | 89 | </div> |
72 | 90 |
|
|
91 | 109 | [&_img]:rounded-sm [&_img]:border-[6px] [&_img]:border-white [&_img]:rotate-1 group-hover:[&_img]:rotate-0 [&_img]:transition-all [&_img]:duration-700 |
92 | 110 | [&_.tag-link]:text-xs [&_.tag-link]:mx-1 [&_.tag-link]:font-bold [&_.tag-link]:uppercase [&_.tag-link]:tracking-wider [&_.tag-link]:text-[var(--text-color)]/30 [&_.tag-link:hover]:text-[var(--accent-color)] [&_.tag-link:hover]:underline [&_.tag-link]:no-underline [&_.tag-link]:transition-colors" |
93 | 111 | onclick={(e) => { |
94 | | - const target = e.target as HTMLElement; |
95 | | - if (target.classList.contains('tag-link')) { |
96 | | - const tag = target.dataset.tag; |
97 | | - if (tag) memoList.selectTag(tag); |
98 | | - } |
| 112 | + const target = e.target as HTMLElement; |
| 113 | + if (target.classList.contains('tag-link')) { |
| 114 | + const tag = target.dataset.tag; |
| 115 | + if (tag) memoList.selectTag(tag); |
| 116 | + } |
99 | 117 | }} |
100 | 118 | > |
101 | 119 | {@html memo.content} |
|
0 commit comments