313 lines
8.0 KiB
HTML
313 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>{{ title }}</title>
|
|
{{ meta_tags | safe }}
|
|
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fontsource/iosevka@latest/files/iosevka-latin-300-normal.woff2" as="font" type="font/woff2" crossorigin>
|
|
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fontsource/iosevka@latest/files/iosevka-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
|
|
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fontsource/iosevka@latest/files/iosevka-latin-500-normal.woff2" as="font" type="font/woff2" crossorigin>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Iosevka';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
font-display: block;
|
|
src: url(https://cdn.jsdelivr.net/npm/@fontsource/iosevka@latest/files/iosevka-latin-300-normal.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: 'Iosevka';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: block;
|
|
src: url(https://cdn.jsdelivr.net/npm/@fontsource/iosevka@latest/files/iosevka-latin-400-normal.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: 'Iosevka';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: block;
|
|
src: url(https://cdn.jsdelivr.net/npm/@fontsource/iosevka@latest/files/iosevka-latin-500-normal.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
}
|
|
@font-face {
|
|
font-family: 'Iosevka';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: block;
|
|
src: url(https://cdn.jsdelivr.net/npm/@fontsource/iosevka@latest/files/iosevka-latin-600-normal.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
|
|
}
|
|
</style>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html {
|
|
background: #060d1a;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Iosevka', monospace;
|
|
color: #f0ece4;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
#vanta-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.page-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hero {
|
|
padding: calc(6rem + env(safe-area-inset-top, 0px)) 2rem 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: 'Iosevka', monospace;
|
|
font-size: clamp(2.5rem, 7vw, 4.5rem);
|
|
font-weight: 300;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
color: #ffffff;
|
|
text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
{% if description %}
|
|
.hero p {
|
|
font-size: 1.49rem;
|
|
color: rgba(240, 236, 228, 0.7);
|
|
margin-top: 1rem;
|
|
font-weight: 300;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
{% endif %}
|
|
|
|
{% if draft_banner %}
|
|
.draft-notice {
|
|
display: inline-block;
|
|
background: rgba(245, 158, 11, 0.2);
|
|
border: 1px solid rgba(245, 158, 11, 0.4);
|
|
color: #fbbf24;
|
|
padding: 0.3em 0.8em;
|
|
border-radius: 4px;
|
|
font-size: 1.08rem;
|
|
margin-top: 1rem;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
{% endif %}
|
|
|
|
.posts-container {
|
|
flex: 1;
|
|
max-width: 680px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem 4rem;
|
|
}
|
|
|
|
.post-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.post-item {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: 1.25rem 1.5rem;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 8px;
|
|
margin-bottom: 0.5rem;
|
|
transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
|
|
}
|
|
|
|
.post-item:hover {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
transform: translateY(-1px);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.post-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.post-title {
|
|
font-family: 'Iosevka', monospace;
|
|
font-size: 1.62rem;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.draft-tag {
|
|
font-size: 0.88rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #fbbf24;
|
|
background: rgba(245, 158, 11, 0.15);
|
|
border: 1px solid rgba(245, 158, 11, 0.3);
|
|
padding: 0.15em 0.5em;
|
|
border-radius: 3px;
|
|
font-family: 'Iosevka', monospace;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.post-date {
|
|
font-size: 1.08rem;
|
|
color: rgba(240, 236, 228, 0.4);
|
|
margin-top: 0.3rem;
|
|
font-weight: 300;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.post-description {
|
|
font-size: 1.22rem;
|
|
color: rgba(240, 236, 228, 0.6);
|
|
margin-top: 0.4rem;
|
|
line-height: 1.5;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: rgba(240, 236, 228, 0.4);
|
|
font-style: italic;
|
|
}
|
|
|
|
.site-footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
|
|
font-size: 1.01rem;
|
|
color: rgba(240, 236, 228, 0.25);
|
|
}
|
|
|
|
.site-footer a {
|
|
color: rgba(240, 236, 228, 0.35);
|
|
text-decoration: none;
|
|
}
|
|
|
|
{% if content %}
|
|
.page-body {
|
|
max-width: 680px;
|
|
width: 100%;
|
|
margin: 0 auto 2rem;
|
|
padding: 0 1.5rem;
|
|
color: rgba(240, 236, 228, 0.7);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.page-body a { color: #93c5fd; }
|
|
{% endif %}
|
|
|
|
@media (max-width: 600px) {
|
|
.hero { padding: calc(3rem + env(safe-area-inset-top, 0px)) 1.5rem 2rem; }
|
|
.posts-container { padding-left: calc(1rem + env(safe-area-inset-left, 0px)); padding-right: calc(1rem + env(safe-area-inset-right, 0px)); }
|
|
.post-item { padding: 1rem 1.25rem; }
|
|
.post-title { font-size: 1.42rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="vanta-bg"></div>
|
|
|
|
<div class="page-content">
|
|
<header class="hero">
|
|
<h1>{{ title }}</h1>
|
|
{% if description %}
|
|
<p>{{ description }}</p>
|
|
{% endif %}
|
|
{% if draft_banner %}
|
|
<div class="draft-notice">Draft — not published</div>
|
|
{% endif %}
|
|
</header>
|
|
|
|
{% if content %}
|
|
<div class="page-body">
|
|
{{ content | safe }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="posts-container">
|
|
<ul class="post-list">
|
|
{% for p in pages %}
|
|
<li>
|
|
<a href="{{ p.slug }}{{ preview_query }}" class="post-item">
|
|
<div class="post-header">
|
|
<span class="post-title">{{ p.title }}</span>
|
|
{% if p.draft %}
|
|
<span class="draft-tag">draft</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if p.published_date %}
|
|
<div class="post-date">
|
|
<time datetime="{{ p.published_date }}">{{ p.published_date }}</time>
|
|
</div>
|
|
{% endif %}
|
|
{% if p.description %}
|
|
<p class="post-description">{{ p.description }}</p>
|
|
{% endif %}
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="empty-state">No pages found.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<footer class="site-footer">
|
|
Powered by <a href="https://github.com/felixfoertsch/blatt">Blatt</a>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
|
|
<script>
|
|
VANTA.WAVES({
|
|
el: "#vanta-bg",
|
|
mouseControls: true,
|
|
touchControls: true,
|
|
gyroControls: false,
|
|
minHeight: 200.0,
|
|
minWidth: 200.0,
|
|
scale: 1.0,
|
|
scaleMobile: 1.0,
|
|
color: 0x0a1628,
|
|
shininess: 35.0,
|
|
waveHeight: 20.0,
|
|
waveSpeed: 0.7,
|
|
zoom: 0.85
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|