447 lines
9.9 KiB
HTML
447 lines
9.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>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
background: #3d3d3d;
|
||
font-family: "Verdana", "Tahoma", Arial, sans-serif;
|
||
font-size: 18px;
|
||
color: #dadada;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
body {
|
||
background:
|
||
radial-gradient(ellipse at top, #5d5d5d 0%, #2b2b2b 70%),
|
||
#2b2b2b;
|
||
padding: 24px;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.steam-window {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
background: #4a4a4a;
|
||
border: 1px solid #111;
|
||
box-shadow:
|
||
0 0 0 1px #6a6a6a inset,
|
||
0 8px 32px rgba(0,0,0,0.6);
|
||
}
|
||
|
||
.titlebar {
|
||
background: linear-gradient(to bottom, #5d7a9a 0%, #3f5a78 50%, #2e4560 100%);
|
||
color: #ffffff;
|
||
padding: 4px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #1e2e40;
|
||
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.titlebar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.steam-mark {
|
||
display: inline-block;
|
||
width: 14px;
|
||
height: 14px;
|
||
background: #000;
|
||
border: 1px solid #6d8ab0;
|
||
color: #a7c6e8;
|
||
font-family: "Times New Roman", serif;
|
||
font-style: italic;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 12px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.titlebar-btns { display: flex; gap: 2px; }
|
||
.tb-b {
|
||
width: 16px; height: 14px;
|
||
background: linear-gradient(to bottom, #6d7d90, #394756);
|
||
border: 1px solid #1e2e40;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
|
||
.mainnav {
|
||
background: linear-gradient(to bottom, #3f4b5a 0%, #242c36 100%);
|
||
border-bottom: 1px solid #000;
|
||
padding: 0;
|
||
display: flex;
|
||
gap: 0;
|
||
}
|
||
|
||
.mainnav-tab {
|
||
padding: 8px 18px;
|
||
color: #c0c8d2;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
font-size: 16px;
|
||
letter-spacing: 0.06em;
|
||
border-right: 1px solid #111;
|
||
cursor: default;
|
||
user-select: none;
|
||
}
|
||
|
||
.mainnav-tab.active {
|
||
background: linear-gradient(to bottom, #556b85 0%, #33455c 100%);
|
||
color: #ffcc66;
|
||
box-shadow: inset 0 -2px 0 #ffa200;
|
||
}
|
||
|
||
.mainnav-tab:not(.active):hover {
|
||
color: #fff;
|
||
}
|
||
|
||
.subbar {
|
||
background: #1e1e1e;
|
||
border-bottom: 1px solid #000;
|
||
padding: 4px 12px;
|
||
font-size: 15px;
|
||
color: #8a9ab0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.subbar .crumbs { font-family: "Courier New", monospace; }
|
||
.subbar .who { color: #99c266; font-weight: bold; }
|
||
|
||
.body-grid {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
min-height: 520px;
|
||
background: #2b2b2b;
|
||
}
|
||
|
||
.side {
|
||
background: linear-gradient(to right, #2a3240 0%, #1c2230 100%);
|
||
border-right: 1px solid #000;
|
||
padding: 10px 0;
|
||
color: #c0c8d2;
|
||
}
|
||
|
||
.side-section-title {
|
||
padding: 4px 14px;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
color: #ffcc66;
|
||
letter-spacing: 0.08em;
|
||
border-bottom: 1px solid #000;
|
||
background: rgba(0,0,0,0.25);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.side-item {
|
||
padding: 4px 14px 4px 26px;
|
||
font-size: 16px;
|
||
position: relative;
|
||
}
|
||
|
||
.side-item::before {
|
||
content: "▸";
|
||
color: #6da3d5;
|
||
position: absolute;
|
||
left: 12px;
|
||
}
|
||
|
||
.side-item.alert::before {
|
||
content: "●";
|
||
color: #6fc54c;
|
||
}
|
||
|
||
.side-item b { color: #fff; }
|
||
|
||
.side-meta {
|
||
margin-top: 14px;
|
||
padding: 10px 14px;
|
||
font-size: 15px;
|
||
color: #8a9ab0;
|
||
border-top: 1px solid rgba(0,0,0,0.4);
|
||
}
|
||
|
||
.side-meta .k { color: #c0c8d2; display: block; font-weight: bold; margin-top: 6px; }
|
||
.side-meta .v { color: #99c266; }
|
||
|
||
.main {
|
||
padding: 0;
|
||
background: #2b2b2b;
|
||
}
|
||
|
||
.hero {
|
||
background:
|
||
linear-gradient(to bottom, rgba(30,40,58,0.92) 0%, rgba(20,26,38,0.98) 100%),
|
||
repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px);
|
||
padding: 24px 28px 20px;
|
||
border-bottom: 2px solid #000;
|
||
box-shadow: 0 -1px 0 rgba(255,255,255,0.04) inset;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: "Verdana", "Tahoma", sans-serif;
|
||
font-size: 33px;
|
||
color: #ffcc66;
|
||
font-weight: bold;
|
||
text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
|
||
margin: 0 0 10px 0;
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
|
||
.hero .byline {
|
||
color: #99c266;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hero .byline .date { color: #8a9ab0; font-weight: normal; margin-left: 8px; }
|
||
|
||
.article {
|
||
padding: 24px 28px;
|
||
color: #dadada;
|
||
font-size: 18px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.article h2 {
|
||
font-family: "Verdana", sans-serif;
|
||
font-size: 21px;
|
||
color: #ffcc66;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
margin: 24px 0 8px;
|
||
padding-bottom: 4px;
|
||
border-bottom: 1px solid #1e2e40;
|
||
}
|
||
|
||
.article h3 {
|
||
font-size: 18px;
|
||
color: #a7c6e8;
|
||
font-weight: bold;
|
||
margin: 18px 0 6px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.article p { margin-bottom: 12px; }
|
||
|
||
.article strong { color: #fff; }
|
||
.article em { color: #a7c6e8; font-style: normal; }
|
||
|
||
.article a {
|
||
color: #ffcc66;
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted #ffcc66;
|
||
}
|
||
.article a:hover {
|
||
color: #fff;
|
||
border-bottom-color: #fff;
|
||
}
|
||
|
||
.article ul, .article ol {
|
||
margin: 10px 0 14px 20px;
|
||
}
|
||
|
||
.article li { margin-bottom: 4px; }
|
||
.article li::marker { color: #6da3d5; }
|
||
|
||
.article code {
|
||
font-family: "Consolas", "Courier New", monospace;
|
||
background: #1b1b1b;
|
||
color: #ffcc66;
|
||
border: 1px solid #000;
|
||
padding: 0 4px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.article pre {
|
||
background: #151515;
|
||
border: 1px solid #000;
|
||
box-shadow: inset 0 0 0 1px #333;
|
||
padding: 12px;
|
||
margin: 14px 0;
|
||
overflow-x: auto;
|
||
font-family: "Consolas", "Courier New", monospace;
|
||
font-size: 16px;
|
||
color: #c0c8d2;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.article pre code {
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
color: inherit;
|
||
}
|
||
|
||
.article blockquote {
|
||
border-left: 3px solid #ffa200;
|
||
background: rgba(255,162,0,0.04);
|
||
padding: 10px 14px;
|
||
margin: 14px 0;
|
||
color: #c0c8d2;
|
||
font-style: italic;
|
||
}
|
||
|
||
.article table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
margin: 14px 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.article th {
|
||
background: #1e2e40;
|
||
color: #ffcc66;
|
||
padding: 6px 10px;
|
||
text-align: left;
|
||
text-transform: uppercase;
|
||
font-size: 15px;
|
||
letter-spacing: 0.05em;
|
||
border-bottom: 1px solid #000;
|
||
}
|
||
|
||
.article td {
|
||
padding: 5px 10px;
|
||
border-bottom: 1px solid #1e1e1e;
|
||
color: #c0c8d2;
|
||
}
|
||
|
||
.article tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
|
||
|
||
.article hr {
|
||
border: none;
|
||
height: 1px;
|
||
background: linear-gradient(to right, transparent, #4c6b22, transparent);
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.status {
|
||
background: linear-gradient(to bottom, #3f4b5a 0%, #242c36 100%);
|
||
border-top: 1px solid #000;
|
||
padding: 4px 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 15px;
|
||
color: #8a9ab0;
|
||
}
|
||
|
||
.status .online { color: #6fc54c; }
|
||
.status .online::before { content: "● "; }
|
||
|
||
.back-pill {
|
||
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: "Verdana", sans-serif;
|
||
font-size: 16px;
|
||
padding: 5px 11px;
|
||
background: linear-gradient(to bottom, #5d7a9a, #2e4560);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
border: 1px solid #000;
|
||
box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 2px 6px rgba(0,0,0,0.5);
|
||
font-weight: bold;
|
||
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
|
||
}
|
||
.back-pill:hover { color: #ffcc66; }
|
||
|
||
@media (max-width: 720px) {
|
||
.body-grid { grid-template-columns: 1fr; }
|
||
.side { border-right: none; border-bottom: 1px solid #000; }
|
||
.article { padding: 20px 18px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="back-pill" href="/{{ preview_query }}">← back</a>
|
||
|
||
<div class="steam-window">
|
||
<div class="titlebar">
|
||
<div class="titlebar-left">
|
||
<span class="steam-mark">S</span>
|
||
<span>Steam — {{ title }}</span>
|
||
</div>
|
||
<div class="titlebar-btns">
|
||
<div class="tb-b">_</div>
|
||
<div class="tb-b">□</div>
|
||
<div class="tb-b">×</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mainnav">
|
||
<div class="mainnav-tab">Store</div>
|
||
<div class="mainnav-tab">News</div>
|
||
<div class="mainnav-tab active">My Games</div>
|
||
<div class="mainnav-tab">Community</div>
|
||
<div class="mainnav-tab">Friends</div>
|
||
</div>
|
||
|
||
<div class="subbar">
|
||
<span class="crumbs">My Games › Workshop › {{ title }}</span>
|
||
<span class="who">{{ config.site.author }} <small style="color:#8a9ab0;font-weight:normal;">(Online)</small></span>
|
||
</div>
|
||
|
||
<div class="body-grid">
|
||
<aside class="side">
|
||
<div class="side-section-title">Library</div>
|
||
<div class="side-item alert"><b>{{ title }}</b></div>
|
||
<div class="side-item">Blog</div>
|
||
<div class="side-item">Projects</div>
|
||
<div class="side-item">About</div>
|
||
|
||
<div class="side-meta">
|
||
<span class="k">Installed:</span>
|
||
<span class="v">{{ published_date }}</span>
|
||
|
||
<span class="k">Play time:</span>
|
||
<span class="v">{{ reading_time }}</span>
|
||
|
||
{% if taxonomy.tags %}
|
||
<span class="k">Tags:</span>
|
||
{% for tag in taxonomy.tags %}
|
||
<span class="v" style="display:inline-block;margin-right:6px;">#{{ tag }}</span>
|
||
{% endfor %}
|
||
{% endif %}
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<div class="hero">
|
||
<h1>{{ title }}</h1>
|
||
<div class="byline">
|
||
{{ config.site.author }}
|
||
<span class="date">· {{ published_date }} · {{ reading_time }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<article class="article">
|
||
{{ content | safe }}
|
||
</article>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="status">
|
||
<span class="online">{{ config.site.author }} is online</span>
|
||
<span>{{ published_date }}</span>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|