404 lines
8.4 KiB
HTML
404 lines
8.4 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=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
|
<style>
|
|
html { background: #d4ccc0; }
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--paper: #f8f5ef;
|
|
--paper-dark: #efe9df;
|
|
--text: #1a1714;
|
|
--text-light: #5a524a;
|
|
--text-lighter: #8a7e75;
|
|
--rule: #c8bfb2;
|
|
--accent: #2c4a7a;
|
|
--link: #1a4a8a;
|
|
}
|
|
|
|
html {
|
|
font-size: 26px;
|
|
}
|
|
|
|
body {
|
|
background: #d4ccc0;
|
|
color: var(--text);
|
|
font-family: "EB Garamond", Georgia, "Times New Roman", serif;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.paper {
|
|
max-width: 760px;
|
|
margin: 40px auto;
|
|
background: var(--paper);
|
|
padding: 72px 80px;
|
|
box-shadow:
|
|
0 1px 2px rgba(0,0,0,0.1),
|
|
0 4px 16px rgba(0,0,0,0.1),
|
|
0 8px 32px rgba(0,0,0,0.08);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Document header */
|
|
.doc-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding-bottom: 32px;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.journal-name {
|
|
font-size: 16px;
|
|
letter-spacing: 0.25em;
|
|
text-transform: uppercase;
|
|
color: var(--text-lighter);
|
|
margin-bottom: 32px;
|
|
font-family: "EB Garamond", serif;
|
|
}
|
|
|
|
.doc-title {
|
|
font-size: 2.56rem;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
color: var(--text);
|
|
margin-bottom: 20px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.author-line {
|
|
font-size: 1.42rem;
|
|
color: var(--text-light);
|
|
margin-bottom: 6px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.author-line a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Metadata grid */
|
|
.meta-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
margin-top: 24px;
|
|
border: 1px solid var(--rule);
|
|
font-size: 1.11rem;
|
|
}
|
|
|
|
.meta-cell {
|
|
padding: 8px 14px;
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.meta-cell:nth-child(odd) {
|
|
border-right: 1px solid var(--rule);
|
|
}
|
|
|
|
.meta-cell:nth-last-child(-n+2) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.meta-label {
|
|
font-size: 0.94rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--text-lighter);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.meta-value {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Tags / keywords */
|
|
.keywords {
|
|
margin-top: 20px;
|
|
font-size: 1.15rem;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.keywords strong {
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Abstract (first paragraph) */
|
|
.abstract {
|
|
margin: 32px 0 36px;
|
|
padding: 20px 24px;
|
|
background: var(--paper-dark);
|
|
border-left: 3px solid var(--accent);
|
|
font-size: 1.28rem;
|
|
line-height: 1.7;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.abstract-label {
|
|
font-size: 0.97rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--text-lighter);
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Content — CSS counters for section numbering */
|
|
.doc-body {
|
|
counter-reset: h2-counter;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.doc-body h1 {
|
|
counter-reset: h3-counter;
|
|
counter-increment: h2-counter;
|
|
font-size: 1.69rem;
|
|
font-weight: 500;
|
|
margin-top: 40px;
|
|
margin-bottom: 14px;
|
|
color: var(--text);
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
.doc-body h1::before {
|
|
content: counter(h2-counter) ". ";
|
|
color: var(--text-lighter);
|
|
}
|
|
|
|
.doc-body h2 {
|
|
counter-increment: h3-counter;
|
|
font-size: 1.49rem;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
margin-top: 28px;
|
|
margin-bottom: 10px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.doc-body h2::before {
|
|
content: counter(h2-counter) "." counter(h3-counter) " ";
|
|
font-style: normal;
|
|
color: var(--text-lighter);
|
|
}
|
|
|
|
.doc-body h3 {
|
|
font-size: 1.35rem;
|
|
font-weight: 600;
|
|
margin-top: 20px;
|
|
margin-bottom: 8px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.doc-body p {
|
|
margin-bottom: 14px;
|
|
text-align: justify;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.doc-body p + p {
|
|
text-indent: 1.5em;
|
|
margin-top: -6px;
|
|
}
|
|
|
|
.doc-body h1 + p,
|
|
.doc-body h2 + p,
|
|
.doc-body h3 + p {
|
|
text-indent: 0;
|
|
}
|
|
|
|
.doc-body a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.doc-body a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.doc-body code {
|
|
font-family: "Source Code Pro", monospace;
|
|
font-size: 1.15em;
|
|
background: var(--paper-dark);
|
|
padding: 0 4px;
|
|
border: 1px solid var(--rule);
|
|
}
|
|
|
|
.doc-body pre {
|
|
background: var(--paper-dark);
|
|
border: 1px solid var(--rule);
|
|
padding: 16px 20px;
|
|
margin: 20px 0;
|
|
overflow-x: auto;
|
|
font-family: "Source Code Pro", monospace;
|
|
font-size: 1.12em;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.doc-body pre code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.doc-body blockquote {
|
|
border-left: 2px solid var(--rule);
|
|
padding: 4px 20px;
|
|
margin: 18px 0 18px 16px;
|
|
color: var(--text-light);
|
|
font-style: italic;
|
|
}
|
|
|
|
.doc-body ul,
|
|
.doc-body ol {
|
|
margin: 12px 0 16px 24px;
|
|
}
|
|
|
|
.doc-body li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.doc-body table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
font-size: 1.22rem;
|
|
}
|
|
|
|
.doc-body caption {
|
|
caption-side: top;
|
|
font-size: 1.08rem;
|
|
color: var(--text-lighter);
|
|
text-align: left;
|
|
padding-bottom: 6px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.doc-body th {
|
|
border-top: 2px solid var(--text);
|
|
border-bottom: 1px solid var(--text);
|
|
padding: 6px 10px;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.doc-body td {
|
|
border-bottom: 1px solid var(--rule);
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.doc-body tr:last-child td {
|
|
border-bottom: 1px solid var(--text);
|
|
}
|
|
|
|
.doc-body img {
|
|
max-width: 100%;
|
|
display: block;
|
|
margin: 24px auto;
|
|
}
|
|
|
|
.doc-body hr {
|
|
border: none;
|
|
border-top: 1px solid var(--rule);
|
|
margin: 32px 0;
|
|
}
|
|
|
|
/* Footnote-style footer */
|
|
.doc-footer {
|
|
margin-top: 48px;
|
|
padding-top: 16px;
|
|
border-top: 2px solid var(--text);
|
|
font-size: 1.08rem;
|
|
color: var(--text-lighter);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.paper {
|
|
margin: 0;
|
|
padding: 40px 28px;
|
|
}
|
|
|
|
.meta-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.meta-cell:nth-child(odd) {
|
|
border-right: none;
|
|
}
|
|
|
|
.meta-cell:nth-last-child(-n+2) {
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
|
|
.meta-cell:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
</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>
|
|
|
|
<article class="paper">
|
|
<header class="doc-header">
|
|
<div class="journal-name">{{ config.site.name }}</div>
|
|
<h1 class="doc-title">{{ title }}</h1>
|
|
<div class="author-line">{{ config.site.author }}</div>
|
|
|
|
<div class="meta-grid">
|
|
<div class="meta-cell">
|
|
<div class="meta-label">Published</div>
|
|
<div class="meta-value">{{ published_date }}</div>
|
|
</div>
|
|
<div class="meta-cell">
|
|
<div class="meta-label">Reading Time</div>
|
|
<div class="meta-value">{{ reading_time }}</div>
|
|
</div>
|
|
{% if updated_date %}
|
|
<div class="meta-cell">
|
|
<div class="meta-label">Last Revised</div>
|
|
<div class="meta-value">{{ updated_date }}</div>
|
|
</div>
|
|
<div class="meta-cell">
|
|
<div class="meta-label">Status</div>
|
|
<div class="meta-value">Revised</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if taxonomy.tags %}
|
|
<div class="keywords">
|
|
<strong>Keywords:</strong>
|
|
{% for tag in taxonomy.tags %}{{ tag }}{% if not loop.last %}; {% endif %}{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</header>
|
|
|
|
<div class="doc-body">
|
|
{{ content | safe }}
|
|
</div>
|
|
|
|
<footer class="doc-footer">
|
|
<span>{{ config.site.name }} — {{ config.site.author }}</span>
|
|
<span>{{ published_date }}</span>
|
|
</footer>
|
|
</article>
|
|
|
|
</body>
|
|
</html>
|