|
4 | 4 |
|
5 | 5 | <article class="border-b border-black"> |
6 | 6 |
|
7 | | - <header class="grid grid-cols-1 md:grid-cols-[minmax(0,3fr)_minmax(220px,1fr)] border-b border-black"> |
8 | | - |
9 | | - <!-- main --> |
10 | | - <div class="px-4 py-3 md:px-6 md:border-r md:border-black"> |
11 | | - |
12 | | - <!-- kicker row --> |
13 | | - <span class="block text-right font-mono text-[0.68rem] uppercase tracking-[0.12em] text-red-600"> |
14 | | - Note {{ page.date | date: "%y%m%d" }} |
15 | | - </span> |
16 | | - |
17 | | - <!-- title --> |
18 | | - <h1 class="max-w-2xl font-serif text-[clamp(1.9rem,3vw,2.6rem)] leading-snug tracking-normal text-black"> |
19 | | - {{ page.title }} |
20 | | - </h1> |
21 | | - |
22 | | - {% if page.authors %} |
23 | | - <div class="mt-3 font-mono text-[0.72rem] uppercase tracking-[0.08em] text-gray-500"> |
24 | | - {% for author in page.authors %} |
25 | | - <span>{{ author }}</span>{% unless forloop.last %}<span class="text-red-600"> · </span>{% endunless %} |
26 | | - {% endfor %} |
27 | | - </div> |
28 | | - {% endif %} |
29 | | - |
| 7 | + <header class="grid grid-cols-1 md:grid-cols-[minmax(0,3fr)_minmax(220px,1fr)] border-b border-black"> |
30 | 8 |
|
31 | | - {% if page.summary %} |
32 | | - <p class="mt-4 max-w-[50ch] text-base leading-[1.55] text-neutral-700"> |
33 | | - {{ page.summary }} |
34 | | - </p> |
35 | | - {% endif %} |
| 9 | + <!-- main --> |
| 10 | + <div class="px-4 py-3 md:px-6 md:border-r md:border-black"> |
36 | 11 |
|
37 | | - </div> |
| 12 | + <!-- kicker row --> |
| 13 | + <span class="block text-right font-mono text-[0.68rem] uppercase tracking-[0.12em] text-red-600"> |
| 14 | + Note {{ page.date | date: "%y%m%d" }} |
| 15 | + </span> |
38 | 16 |
|
39 | | - <!-- meta --> |
40 | | - <aside class="bg-gray-100 px-4 py-6 md:px-6"> |
| 17 | + <!-- title --> |
| 18 | + <h1 class="max-w-2xl font-serif text-[clamp(1.9rem,3vw,2.6rem)] leading-snug tracking-normal text-black"> |
| 19 | + {{ page.title }} |
| 20 | + </h1> |
41 | 21 |
|
42 | | - {% if page.date %} |
43 | | - <div> |
44 | | - <span class="block font-mono text-[0.68rem] uppercase tracking-[0.12em] text-gray-500"> |
45 | | - Published |
46 | | - </span> |
47 | | - <div class="mt-1 font-mono text-[0.74rem] leading-[1.75] text-neutral-800"> |
48 | | - {{ page.date | date: "%B %-d, %Y" }} |
49 | | - </div> |
50 | | - </div> |
51 | | - {% endif %} |
52 | | - |
53 | | - {% if page.tags %} |
54 | | - <div class="mt-5 pt-5 border-t border-black/10"> |
55 | | - <span class="block font-mono text-[0.68rem] uppercase tracking-[0.12em] text-gray-500"> |
56 | | - Tags |
57 | | - </span> |
58 | | - <div class="mt-1 font-mono text-[0.74rem] leading-[1.75] text-neutral-800"> |
59 | | - {% for tag in page.tags %} |
60 | | - <span>{{ tag }}</span>{% unless forloop.last %}<br>{% endunless %} |
61 | | - {% endfor %} |
62 | | - </div> |
63 | | - </div> |
64 | | - {% endif %} |
| 22 | + {% if page.authors %} |
| 23 | + <div class="mt-3 font-mono text-[0.72rem] uppercase tracking-[0.08em] text-gray-500"> |
| 24 | + {% for author in page.authors %} |
| 25 | + <span>{{ author }}</span>{% unless forloop.last %}<span class="text-red-600"> · </span>{% endunless %} |
| 26 | + {% endfor %} |
| 27 | + </div> |
| 28 | + {% endif %} |
65 | 29 |
|
66 | | - </aside> |
67 | 30 |
|
68 | | - </header> |
| 31 | + {% if page.summary %} |
| 32 | + <p class="mt-4 max-w-[50ch] text-base leading-[1.55] text-neutral-700"> |
| 33 | + {{ page.summary }} |
| 34 | + </p> |
| 35 | + {% endif %} |
69 | 36 |
|
70 | | - <!-- body --> |
71 | | - <div class="max-w-[760px] px-4 py-9 md:px-6 md:py-10 prose prose-neutral"> |
72 | | - {{ content }} |
73 | | - </div> |
74 | | - |
75 | | - {% if page.tags %} |
76 | | - <footer class="border-t border-black px-4 py-4 md:px-6"> |
77 | | - <span class="block font-mono text-[0.68rem] uppercase tracking-[0.12em] text-gray-500"> |
78 | | - Filed under |
79 | | - </span> |
| 37 | + </div> |
80 | 38 |
|
81 | | - <div class="mt-2 flex flex-wrap gap-2"> |
82 | | - {% for tag in page.tags %} |
83 | | - <span class="border border-black/20 px-2 py-[3px] font-mono text-[0.66rem] uppercase tracking-[0.08em]"> |
84 | | - {{ tag }} |
85 | | - </span> |
86 | | - {% endfor %} |
| 39 | + <!-- meta --> |
| 40 | + <aside class="bg-gray-100 px-4 py-6 md:px-6"> |
| 41 | + |
| 42 | + {% if page.date %} |
| 43 | + <div> |
| 44 | + <span class="block font-mono text-[0.68rem] uppercase tracking-[0.12em] text-gray-500"> |
| 45 | + Published |
| 46 | + </span> |
| 47 | + <div class="mt-1 font-mono text-[0.74rem] leading-[1.75] text-neutral-800"> |
| 48 | + {{ page.date | date: "%B %-d, %Y" }} |
| 49 | + </div> |
| 50 | + </div> |
| 51 | + {% endif %} |
| 52 | + |
| 53 | + {% if page.tags %} |
| 54 | + <div class="mt-5 pt-5 border-t border-black/10"> |
| 55 | + <span class="block font-mono text-[0.68rem] uppercase tracking-[0.12em] text-gray-500"> |
| 56 | + Tags |
| 57 | + </span> |
| 58 | + <div class="mt-1 font-mono text-[0.74rem] leading-[1.75] text-neutral-800"> |
| 59 | + {% for tag in page.tags %} |
| 60 | + <span>{{ tag }}</span>{% unless forloop.last %}<br>{% endunless %} |
| 61 | + {% endfor %} |
| 62 | + </div> |
| 63 | + </div> |
| 64 | + {% endif %} |
| 65 | + |
| 66 | + </aside> |
| 67 | + |
| 68 | + </header> |
| 69 | + |
| 70 | + <!-- body --> |
| 71 | + <div class="max-w-[760px] px-4 py-9 md:px-6 md:py-10 prose prose-neutral"> |
| 72 | + {{ content }} |
87 | 73 | </div> |
| 74 | + |
| 75 | + <footer class="px-4 md:px-6 py-4"> |
| 76 | + {% include chip.html text="filed under:" %} |
| 77 | + {% if page.tags %} |
| 78 | + {% include tags.html items=page.tags %} |
| 79 | + {% endif %} |
88 | 80 | </footer> |
89 | | - {% endif %} |
90 | 81 |
|
91 | 82 | </article> |
92 | 83 |
|
0 commit comments