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" />
6        <title>{% block title %}{{ config.title }}{% endblock %}</title>
7        <style>
8            :root {
9                --bg: #fafafa;
10                --fg: #222;
11                --accent: #2563eb;
12                --muted: #666;
13                --border: #e5e7eb;
14                --code-bg: #f3f4f6;
15            }
16            @media (prefers-color-scheme: dark) {
17                :root {
18                    --bg: #1a1a2e;
19                    --fg: #e0e0e0;
20                    --accent: #60a5fa;
21                    --muted: #999;
22                    --border: #333;
23                    --code-bg: #252540;
24                }
25            }
26            * {
27                margin: 0;
28                padding: 0;
29                box-sizing: border-box;
30            }
31            body {
32                font-family:
33                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
34                    sans-serif;
35                background: var(--bg);
36                color: var(--fg);
37                line-height: 1.6;
38            }
39            .container {
40                max-width: 640px;
41                margin: 0 auto;
42                padding: 2rem 1rem;
43            }
44            header {
45                margin-bottom: 2rem;
46                border-bottom: 1px solid var(--border);
47                padding-bottom: 1rem;
48            }
49            header h1 {
50                font-size: 1.5rem;
51            }
52            header h1 a {
53                color: var(--fg);
54                text-decoration: none;
55            }
56            header p {
57                color: var(--muted);
58                font-size: 0.9rem;
59                margin-top: 0.25rem;
60            }
61            nav {
62                margin-top: 0.5rem;
63                display: flex;
64                gap: 1rem;
65            }
66            nav a {
67                color: var(--accent);
68                text-decoration: none;
69                font-size: 0.9rem;
70            }
71            nav a:hover {
72                text-decoration: underline;
73            }
74            a {
75                color: var(--accent);
76            }
77            h1,
78            h2,
79            h3 {
80                margin: 1.5rem 0 0.5rem;
81            }
82            h1 {
83                font-size: 1.75rem;
84            }
85            h2 {
86                font-size: 1.3rem;
87            }
88            p {
89                margin-bottom: 1rem;
90            }
91            ul,
92            ol {
93                margin: 0 0 1rem 1.5rem;
94            }
95            pre {
96                background: var(--code-bg);
97                padding: 1rem;
98                border-radius: 6px;
99                overflow-x: auto;
100                margin-bottom: 1rem;
101                font-size: 0.875rem;
102            }
103            code {
104                font-family: "SF Mono", Menlo, monospace;
105                font-size: 0.875em;
106            }
107            :not(pre) > code {
108                background: var(--code-bg);
109                padding: 0.15em 0.3em;
110                border-radius: 3px;
111            }
112            .post-list {
113                list-style: none;
114                margin-left: 0;
115            }
116            .post-list li {
117                padding: 0.75rem 0;
118                border-bottom: 1px solid var(--border);
119            }
120            .post-list .date {
121                color: var(--muted);
122                font-size: 0.8rem;
123            }
124            .post-meta {
125                color: var(--muted);
126                font-size: 0.85rem;
127                margin-bottom: 1rem;
128            }
129            .post-tags {
130                margin-bottom: 1rem;
131            }
132            .tag {
133                display: inline-block;
134                background: var(--code-bg);
135                color: var(--accent);
136                padding: 0.15em 0.5em;
137                border-radius: 3px;
138                font-size: 0.8rem;
139                text-decoration: none;
140                margin-right: 0.25rem;
141            }
142            .tag:hover {
143                text-decoration: underline;
144            }
145            .toc {
146                margin: 1rem 0 1.5rem;
147                padding: 0.75rem 1rem;
148                background: var(--code-bg);
149                border-radius: 6px;
150                font-size: 0.85rem;
151            }
152            .toc summary {
153                cursor: pointer;
154                font-weight: 600;
155                color: var(--muted);
156            }
157            .toc ul {
158                margin: 0.5rem 0 0 1.25rem;
159            }
160            .toc li {
161                margin: 0.2rem 0;
162            }
163            .page-nav {
164                display: flex;
165                justify-content: space-between;
166                margin-top: 2rem;
167                padding-top: 1rem;
168                border-top: 1px solid var(--border);
169                font-size: 0.9rem;
170            }
171            blockquote {
172                border-left: 3px solid var(--border);
173                padding-left: 1rem;
174                color: var(--muted);
175                margin: 1rem 0;
176            }
177            figure {
178                margin: 1.5rem 0;
179            }
180            figure img {
181                max-width: 100%;
182                border-radius: 6px;
183            }
184            figcaption {
185                color: var(--muted);
186                font-size: 0.85rem;
187                margin-top: 0.5rem;
188                text-align: center;
189            }
190            table {
191                width: 100%;
192                border-collapse: collapse;
193                margin: 1rem 0;
194                font-size: 0.9rem;
195            }
196            th, td {
197                text-align: left;
198                padding: 0.5rem;
199                border-bottom: 1px solid var(--border);
200            }
201            th {
202                font-weight: 600;
203            }
204            .search-input {
205                width: 100%;
206                padding: 0.6rem 0.75rem;
207                font-size: 1rem;
208                border: 1px solid var(--border);
209                border-radius: 6px;
210                background: var(--bg);
211                color: var(--fg);
212                outline: none;
213                font-family: inherit;
214            }
215            .search-input:focus {
216                border-color: var(--accent);
217            }
218            .search-results {
219                margin-top: 1rem;
220                list-style: none;
221                margin-left: 0;
222            }
223            .search-results li {
224                padding: 0.75rem 0;
225                border-bottom: 1px solid var(--border);
226            }
227            .search-results .title {
228                font-weight: 600;
229            }
230            .search-results .body {
231                color: var(--muted);
232                font-size: 0.85rem;
233                margin-top: 0.25rem;
234            }
235            .search-meta {
236                color: var(--muted);
237                font-size: 0.85rem;
238                margin-top: 0.5rem;
239            }
240            footer {
241                margin-top: 3rem;
242                padding-top: 1rem;
243                border-top: 1px solid var(--border);
244                color: var(--muted);
245                font-size: 0.8rem;
246            }
247        </style>
248    </head>
249    <body>
250        <div class="container">
251            <header>
252                <h1><a href="{{ config.base_url }}">{{ config.title }}</a></h1>
253                <p>{{ config.description }}</p>
254                <nav>
255                    <a href="{{ config.base_url }}">home</a>
256                    <a href="{{ config.base_url }}about/">about</a>
257                    <a href="{{ config.base_url }}tags/">tags</a>
258                    <a href="{{ config.base_url }}search/">search</a>
259                </nav>
260            </header>
261            <main>{% block content %}{% endblock %}</main>
262            <footer>
263                built with <a href="https://www.getzola.org">zola</a> on
264                <a href="https://sublimated.com">sublimated</a>
265            </footer>
266        </div>
267    </body>
268</html>