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            footer {
130                margin-top: 3rem;
131                padding-top: 1rem;
132                border-top: 1px solid var(--border);
133                color: var(--muted);
134                font-size: 0.8rem;
135            }
136        </style>
137    </head>
138    <body>
139        <div class="container">
140            <header>
141                <h1><a href="{{ config.base_url }}">{{ config.title }}</a></h1>
142                <p>{{ config.description }}</p>
143                <nav>
144                    <a href="{{ config.base_url }}">home</a>
145                    <a href="{{ config.base_url }}about/">about</a>
146                </nav>
147            </header>
148            <main>{% block content %}{% endblock %}</main>
149            <footer>
150                built with <a href="https://www.getzola.org">zola</a> on
151                <a href="https://sublimated.com">sublimated!</a>
152            </footer>
153        </div>
154    </body>
155</html>