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> on279 <a href="https://sublimated.com">sublimated</a>280 </footer>281 </div>282 </body>283</html> v9
commit e840680
message edit base.html via macOS
author anton
date Apr 24, 2026
size 8.4 KB