396 lines
8.9 KiB
HTML
396 lines
8.9 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 }} — {{ config.site.name }}</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
|
<style>
|
|
html { background: #8a7a60; }
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--newsprint: #f4ecd8;
|
|
--newsprint-dark: #e8dcc5;
|
|
--ink: #1a1410;
|
|
--ink-light: #4a3f30;
|
|
--ink-lighter: #7a6a55;
|
|
--rule-color: #2a1e10;
|
|
}
|
|
|
|
body {
|
|
background: #8a7a60;
|
|
color: var(--ink);
|
|
font-family: "Old Standard TT", Georgia, serif;
|
|
font-size: 22px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.broadsheet {
|
|
max-width: 960px;
|
|
margin: 24px auto;
|
|
background: var(--newsprint);
|
|
padding: 0;
|
|
box-shadow: 4px 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Masthead */
|
|
.masthead {
|
|
padding: 20px 32px 0;
|
|
text-align: center;
|
|
border-bottom: 4px double var(--rule-color);
|
|
}
|
|
|
|
.masthead-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
color: var(--ink-lighter);
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--rule-color);
|
|
margin-bottom: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.masthead-name {
|
|
font-family: "UnifrakturMaguntia", cursive;
|
|
font-size: clamp(36px, 6vw, 72px);
|
|
color: var(--ink);
|
|
line-height: 1;
|
|
letter-spacing: 0.01em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.masthead-tagline {
|
|
font-size: 16px;
|
|
letter-spacing: 0.25em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-lighter);
|
|
font-style: italic;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Horizontal rules */
|
|
.rule-thick {
|
|
border: none;
|
|
border-top: 3px solid var(--rule-color);
|
|
margin: 0;
|
|
}
|
|
|
|
.rule-thin {
|
|
border: none;
|
|
border-top: 1px solid var(--rule-color);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.rule-double {
|
|
border: none;
|
|
border-top: 3px double var(--rule-color);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* Headline section */
|
|
.headline-section {
|
|
padding: 24px 32px 0;
|
|
}
|
|
|
|
.kicker {
|
|
font-size: 16px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-lighter);
|
|
margin-bottom: 8px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.main-headline {
|
|
font-family: "Playfair Display", Georgia, serif;
|
|
font-size: clamp(26px, 4.5vw, 52px);
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
color: var(--ink);
|
|
margin-bottom: 12px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.deck {
|
|
font-family: "Playfair Display", Georgia, serif;
|
|
font-size: 26px;
|
|
font-style: italic;
|
|
color: var(--ink-light);
|
|
line-height: 1.4;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.byline-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 8px 0;
|
|
border-top: 1px solid var(--rule-color);
|
|
border-bottom: 1px solid var(--rule-color);
|
|
margin-bottom: 20px;
|
|
font-size: 16px;
|
|
color: var(--ink-lighter);
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.byline-bar strong {
|
|
color: var(--ink);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Main content columns */
|
|
.content-columns {
|
|
padding: 0 32px 32px;
|
|
}
|
|
|
|
.columns-body {
|
|
columns: 2;
|
|
column-gap: 32px;
|
|
column-rule: 1px solid var(--rule-color);
|
|
font-size: 21px;
|
|
line-height: 1.65;
|
|
text-align: justify;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* Drop cap on first paragraph */
|
|
.columns-body p:first-child::first-letter {
|
|
font-family: "Playfair Display", Georgia, serif;
|
|
font-size: 6.75rem;
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
float: left;
|
|
margin-right: 6px;
|
|
margin-top: 4px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.columns-body h1 {
|
|
column-span: all;
|
|
font-family: "Playfair Display", serif;
|
|
font-size: 33px;
|
|
font-weight: 700;
|
|
margin-top: 24px;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 2px solid var(--rule-color);
|
|
text-align: left;
|
|
}
|
|
|
|
.columns-body h2 {
|
|
font-family: "Playfair Display", serif;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
margin-top: 20px;
|
|
margin-bottom: 8px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.columns-body h3 {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-top: 16px;
|
|
margin-bottom: 6px;
|
|
color: var(--ink-light);
|
|
}
|
|
|
|
.columns-body p {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.columns-body a {
|
|
color: var(--ink);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.columns-body code {
|
|
font-family: "Courier New", monospace;
|
|
font-size: 18px;
|
|
background: var(--newsprint-dark);
|
|
padding: 0 3px;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.columns-body pre {
|
|
background: var(--newsprint-dark);
|
|
border: 1px solid var(--rule-color);
|
|
padding: 12px 14px;
|
|
margin: 12px 0;
|
|
overflow-x: auto;
|
|
font-family: "Courier New", monospace;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
column-span: all;
|
|
}
|
|
|
|
.columns-body pre code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.columns-body blockquote {
|
|
border-top: 2px solid var(--rule-color);
|
|
border-bottom: 2px solid var(--rule-color);
|
|
padding: 12px 0;
|
|
margin: 16px 0;
|
|
font-family: "Playfair Display", serif;
|
|
font-size: 22px;
|
|
font-style: italic;
|
|
color: var(--ink-light);
|
|
text-align: center;
|
|
column-span: all;
|
|
}
|
|
|
|
.columns-body ul,
|
|
.columns-body ol {
|
|
margin: 8px 0 12px 16px;
|
|
}
|
|
|
|
.columns-body li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.columns-body table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 14px 0;
|
|
font-size: 18px;
|
|
column-span: all;
|
|
}
|
|
|
|
.columns-body th {
|
|
border-top: 2px solid var(--ink);
|
|
border-bottom: 1px solid var(--ink);
|
|
padding: 5px 8px;
|
|
text-align: left;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.columns-body td {
|
|
border-bottom: 1px solid var(--newsprint-dark);
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.columns-body img {
|
|
max-width: 100%;
|
|
display: block;
|
|
margin: 12px auto;
|
|
border: 1px solid var(--ink-lighter);
|
|
filter: sepia(20%) contrast(1.05);
|
|
}
|
|
|
|
.columns-body hr {
|
|
border: none;
|
|
border-top: 1px solid var(--rule-color);
|
|
margin: 16px 0;
|
|
column-span: all;
|
|
}
|
|
|
|
/* Page footer */
|
|
.page-footer {
|
|
border-top: 4px double var(--rule-color);
|
|
padding: 10px 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
color: var(--ink-lighter);
|
|
background: var(--newsprint-dark);
|
|
}
|
|
|
|
.page-footer .folio {
|
|
font-family: "Playfair Display", serif;
|
|
font-style: italic;
|
|
}
|
|
|
|
.tags-footer {
|
|
font-size: 16px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.columns-body {
|
|
columns: 1;
|
|
}
|
|
|
|
.broadsheet {
|
|
margin: 0;
|
|
}
|
|
|
|
.headline-section,
|
|
.content-columns {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="/{{ preview_query }}" style="position:fixed;top:calc(1rem + env(safe-area-inset-top, 0px));left:calc(1rem + env(safe-area-inset-left, 0px));z-index:9999;font-family:system-ui,-apple-system,sans-serif;font-size: 1.08rem;padding:0.5rem 0.9rem;background:rgba(255,255,255,0.95);color:#000;text-decoration:none;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,0.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,0.1);transition:transform 0.2s">← back</a>
|
|
|
|
<div class="broadsheet">
|
|
<header class="masthead">
|
|
<div class="masthead-top">
|
|
<span>Vol. 1, No. 1</span>
|
|
<span>Established {{ published_date }}</span>
|
|
<span>{{ reading_time }}</span>
|
|
</div>
|
|
<div class="masthead-name">{{ config.site.name }}</div>
|
|
<div class="masthead-tagline">Independent publishing — {{ config.site.author }}</div>
|
|
</header>
|
|
|
|
<div class="headline-section">
|
|
<hr class="rule-thick">
|
|
<hr class="rule-thin">
|
|
|
|
<div class="kicker">Featured</div>
|
|
<h1 class="main-headline">{{ title }}</h1>
|
|
<p class="deck">An exploration of ideas by {{ config.site.author }}, published on {{ published_date }}.</p>
|
|
|
|
<div class="byline-bar">
|
|
<span>By <strong>{{ config.site.author }}</strong></span>
|
|
<span>{{ published_date }}</span>
|
|
<span>{{ reading_time }}</span>
|
|
{% if updated_date %}<span>Updated {{ updated_date }}</span>{% endif %}
|
|
{% if taxonomy.tags %}
|
|
<span class="tags-footer">
|
|
{% for tag in taxonomy.tags %}{{ tag }}{% if not loop.last %} · {% endif %}{% endfor %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-columns">
|
|
<div class="columns-body">
|
|
{{ content | safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="page-footer">
|
|
<span class="folio">{{ config.site.name }}</span>
|
|
<span>{{ published_date }}</span>
|
|
<span class="folio">{{ config.site.author }}</span>
|
|
</footer>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|