Files
felixfoertsch.de/templates/retro-unix-manual.html

308 lines
6.7 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 }}(1) — {{ 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=IBM+Plex+Mono: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: #0a0a0a; }
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--green: #33ff33;
--green-dim: #22bb22;
--bg: #0a0a0a;
}
body {
background: var(--bg);
color: var(--green);
font-family: "IBM Plex Mono", "Courier New", monospace;
font-size: 21px;
line-height: 1.5;
min-height: 100vh;
}
/* CRT phosphor glow */
body::before {
content: "";
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.15) 2px,
rgba(0,0,0,0.15) 4px
);
pointer-events: none;
z-index: 999;
}
.page {
max-width: 900px;
margin: 0 auto;
padding: 20px 24px 60px;
}
/* Man page header and footer */
.man-header,
.man-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 21px;
color: var(--green);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 0;
border-bottom: 1px solid var(--green-dim);
margin-bottom: 24px;
}
.man-footer {
border-bottom: none;
border-top: 1px solid var(--green-dim);
margin-top: 32px;
margin-bottom: 0;
padding-top: 8px;
}
.man-header-center,
.man-footer-center {
text-align: center;
}
/* Section headings */
.man-section {
font-weight: 700;
text-transform: uppercase;
color: var(--green);
margin-top: 24px;
margin-bottom: 8px;
font-size: 21px;
letter-spacing: 0.08em;
}
.man-section-body {
padding-left: 7ch;
}
/* NAME section */
.man-name-line {
padding-left: 7ch;
margin-bottom: 8px;
}
/* SYNOPSIS */
.man-synopsis {
padding-left: 7ch;
font-weight: 700;
margin-bottom: 8px;
}
/* Content area */
.content-area {
padding-left: 7ch;
}
.content-area h1 {
font-weight: 700;
text-transform: uppercase;
font-size: 21px;
letter-spacing: 0.08em;
color: var(--green);
padding-left: -7ch;
margin-left: -7ch;
margin-top: 24px;
margin-bottom: 8px;
}
.content-area h2 {
font-weight: 700;
font-size: 21px;
color: var(--green);
margin-top: 20px;
margin-bottom: 6px;
text-transform: uppercase;
}
.content-area h3 {
font-weight: 700;
font-size: 21px;
color: var(--green-dim);
margin-top: 16px;
margin-bottom: 4px;
}
.content-area p {
margin-bottom: 12px;
text-shadow: 0 0 2px rgba(51,255,51,0.3);
}
.content-area a {
color: var(--green);
text-decoration: underline;
}
.content-area code {
font-family: "IBM Plex Mono", monospace;
font-weight: 700;
}
.content-area pre {
background: #000;
border-left: 2px solid var(--green-dim);
padding: 12px 16px;
margin: 12px 0;
overflow-x: auto;
}
.content-area pre code {
font-weight: 400;
}
.content-area blockquote {
border-left: 2px solid var(--green-dim);
padding-left: 16px;
margin: 12px 0;
color: var(--green-dim);
font-style: italic;
}
.content-area ul {
margin: 8px 0 12px 0;
list-style: none;
padding: 0;
}
.content-area ul li::before {
content: "o ";
color: var(--green-dim);
}
.content-area ol {
margin: 8px 0 12px 0;
list-style: none;
padding: 0;
counter-reset: man-list;
}
.content-area ol li {
counter-increment: man-list;
}
.content-area ol li::before {
content: counter(man-list) ". ";
color: var(--green-dim);
}
.content-area li {
margin-bottom: 4px;
}
.content-area table {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
font-size: 20px;
}
.content-area th {
font-weight: 700;
text-transform: uppercase;
padding: 4px 12px 4px 0;
text-align: left;
border-bottom: 1px solid var(--green-dim);
}
.content-area td {
padding: 4px 12px 4px 0;
border-bottom: 1px solid rgba(34,187,34,0.2);
}
.content-area img {
max-width: 100%;
filter: grayscale(100%) sepia(50%) hue-rotate(80deg) brightness(0.8);
border: 1px solid var(--green-dim);
margin: 8px 0;
}
.content-area hr {
border: none;
border-top: 1px solid var(--green-dim);
margin: 20px 0;
}
.meta-section {
font-size: 20px;
color: var(--green-dim);
padding-left: 7ch;
margin-bottom: 16px;
}
</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">&larr; back</a>
<div class="page">
<div class="man-header">
<span>POST(1)</span>
<span class="man-header-center">General Commands Manual</span>
<span>POST(1)</span>
</div>
<div class="man-section">NAME</div>
<div class="man-name-line">
{{ title | lower | replace(" ", "_") }} — {{ title }}
</div>
<div class="man-section">SYNOPSIS</div>
<div class="man-synopsis">
<strong>read</strong> [<em>-v</em>] [<em>-author {{ config.site.author }}</em>] <em>{{ title | lower | replace(" ", "_") }}</em>
</div>
<div class="man-section">DESCRIPTION</div>
<div class="meta-section">
<div>AUTHOR {{ config.site.author }}</div>
<div>DATE {{ published_date }}</div>
<div>READING {{ reading_time }}</div>
{% if updated_date %}<div>UPDATED {{ updated_date }}</div>{% endif %}
{% if taxonomy.tags %}<div>TAGS {% for tag in taxonomy.tags %}{{ tag }}{% if not loop.last %}, {% endif %}{% endfor %}</div>{% endif %}
</div>
<div class="content-area">
{{ content | safe }}
</div>
<div class="man-section" style="margin-top: 32px;">SEE ALSO</div>
<div class="meta-section">
{{ config.site.name }}(1), blog(7)
</div>
<div class="man-section">AUTHOR</div>
<div class="meta-section">
Written by {{ config.site.author }}.
</div>
<div class="man-footer">
<span>{{ config.site.name }}</span>
<span class="man-footer-center">{{ published_date }}</span>
<span>POST(1)</span>
</div>
</div>
</body>
</html>