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