-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patharticle.html
More file actions
114 lines (106 loc) · 4.77 KB
/
Copy patharticle.html
File metadata and controls
114 lines (106 loc) · 4.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
---
layout: default
disqus: false
archive: false
---
<div class="mb-12 mt-0 px-4 md:mb-24 md:mt-16">
<div class="container max-w-[950px] mx-auto">
<h1 class="font-semibold font-sans leading-none my-8 text-center text-6xl text-proseLinks tracking-tighter dark:text-proseInvertLinks md:font-normal md:text-8xl">
{{ page.title }}
</h1>
</div>
</div>
<div class="container max-w-[900px] mx-auto mt-8 px-4 xl:max-w-[1125px]">
<div class="md:flex">
<div class="basis-[170px] flex-grow-0 flex-shrink-0 hidden md:block"> <!-- needed for sticky -->
<div class="leading-normal text-xs tracking-tighter sticky text-center text-proseBody top-5 dark:text-proseInvertBody">
<div class="border-b px-4 pb-4 dark:border-rosePine-highlightMed">
<div class="font-bold mb-0.5 text-proseLinks dark:text-proseInvertLinks">Article</div>
<div>
<a href="{{ page.url }}">
<span class="mx-0.5 opacity-60">🔗</span> {{ page.title }}
</a>
</div>
</div>
<div class="border-b px-4 py-4 dark:border-rosePine-highlightMed">
<div class="font-bold mb-0.5 text-proseLinks dark:text-proseInvertLinks">Published</div>
<div class="font-normal">{{ page.date | date:"%B %d, %Y" }}</div>
</div>
<div class="italic px-4 py-4 dark:border-rosePine-highlightMed">
<p class="mb-2">I'm on X at <a href="https://twitter.com/ordepdev"
class="font-bold text-proseLinks dark:text-proseInvertLinks">@ordepdev</a>.
</p>
</div>
</div>
</div>
<div class="pb-8 md:border-l md:flex-grow md:min-w-0 dark:border-rosePine-highlightMed md:pl-8 xl:pr-8">
{% if page.toc %}
<div class="
border-b border-l dark:border-rosePine-highlightMed
hidden md:block xl:hidden
float-right
max-w-[190px]
ml-4
mb-3
lg:-mr-[60px]
pl-3
pb-5
pt-3
prose prose-sm dark:prose-invert
prose-li:my-2
prose-ol:prose-li:list-[lower-alpha] prose-ol:prose-li:my-2
prose-a:prose-li:prose-li:font-normal prose-li:prose-li:my-1 prose-li:prose-li:text-[0.65rem]
prose-a:no-underline
prose-ol:prose-li:prose-li:list-[lower-roman]
prose-li:prose-li:prose-li:text-[0.6rem]
text-xs
">
{% toc %}
</div>
{% endif %}
<div class="hyphens-auto
max-w-none
prose prose-lg dark:prose-invert
prose-a:border-b prose-a:border-slate-500 prose-a:font-sans prose-a:no-underline
prose-blockquote:font-normal prose-blockquote:text-rosePineDawn-subtle dark:prose-blockquote:text-rosePineDawn-subtle
hover:prose-a:border-b-slate-200
prose-code:prose-a:text-sm prose-code:prose-p:text-sm
prose-img:w-full
prose-hr:my-10 prose-hr:md:-mx-[2rem] prose-hr:md:w-[calc(100%+4rem)] dark:prose-hr:border-rosePine-highlightMed
prose-p:font-serif prose-p:text-justify
prose-pre:leading-[1.15rem] prose-pre:text-[0.9rem]
prose-strong:font-sans dark:prose-strong:text-slate-100
prose-ol:font-serif
prose-ul:font-serif
">
{{ content }}
</div>
</div>
<div class="basis-[190px] border-l flex-grow-0 flex-shrink-0 hidden dark:border-rosePine-highlightMed xl:block">
{% if page.toc %}
<!--
IMPORTANT: The TOC is duplicated above so that it can be part of
the flexbox at large sizes, but inlined at contents at smaller
ones. Make changes in both places.
-->
<div class="
mb-3
pl-3
pb-5
prose prose-sm dark:prose-invert
prose-li:my-2
prose-ol:prose-li:list-[lower-alpha] prose-ol:prose-li:my-2
prose-a:prose-li:prose-li:font-normal prose-li:prose-li:my-1 prose-li:prose-li:text-[0.65rem]
prose-a:no-underline
prose-ol:prose-li:prose-li:list-[lower-roman]
prose-li:prose-li:prose-li:text-[0.6rem]
sticky top-5
text-xs
">
{% toc %}
</div>
{% endif %}
</div>
</div>
</div>
{% include post-footer.html %}