Commit `927757547a`

927757547a1b7dbd6fe422d70f9ca422801571cc

parent: 6a2d437c05

Unsigned

cmc <hello@cleberg.net> · 2026-01-18 23:06 UTC

publish new terminal theme

Layout: unified · split

theme/static/styles.css +261 −47

	@@ -1,81 +1,295 @@
		1	:root {
		2	--bg: #0a0b10;
		3	--green: #00ff9d;
		4	--green-dim: rgba(0, 255, 157, 0.2);
		5	--glass: rgba(0, 255, 157, 0.03);
		6	--text: #c0fce6;
		7	--font: "Lucida Console", "Monaco", "Consolas", monospace;
		8	--emacs-blue: #51afef;
		9	--emacs-bg: #1c1f24;
		10	}
		11
		12	/* Base Terminal Environment */
		13	html, body {
		14	height: 100%;
		15	margin: 0;
		16	padding: 0;
		17	background-color: var(--bg);
		18	}
		19
1	body {	20	body {
2	font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;	21	color: var(--text);
3	font-size: 0.85rem;	22	font-family: var(--font);
4	line-height: 1.5;	23	line-height: 1.5;
5	margin: 0 auto;	24	display: flex;
6	max-width: 50em;	25	flex-direction: column;
		26	align-items: center;
		27	overflow: hidden; /* Desktop keeps terminal-shell fixed */
7	}	28	}
8		29
9	body {	30	img {
10	padding: 1rem;	31	max-width: 100%;
11	}	32	}
12		33
13	footer {	34	/* CRT Scanline Effect */
14	margin: 1rem 0;	35	.scanlines {
		36	position: fixed;
		37	top: 0; left: 0; width: 100%; height: 100%;
		38	background: linear-gradient(
		39	rgba(18, 16, 16, 0) 50%,
		40	rgba(0, 0, 0, 0.15) 50%
		41	);
		42	background-size: 100% 4px;
		43	z-index: 9999;
		44	pointer-events: none;
15	}	45	}
16		46
17	nav {	47	.terminal-shell {
18	align-items: center;	48	width: 95%;
		49	max-width: 1000px;
		50	height: 98vh;
19	display: flex;	51	display: flex;
20	justify-content: space-around;	52	flex-direction: column;
21	margin: 1rem 0;	53	padding: 10px 0;
		54	}
		55
		56	main {
		57	flex: 1;
		58	overflow-y: auto;
		59	margin: 10px 0;
		60	scrollbar-width: thin;
		61	scrollbar-color: var(--green) transparent;
		62	}
		63
		64	/* Navigation & Header */
		65	.system-header {
		66	border-bottom: 1px solid var(--green-dim);
		67	padding-bottom: 0.5rem;
		68	margin-bottom: 1.5rem;
		69	display: flex;
		70	justify-content: space-between;
		71	align-items: center;
		72	font-size: 0.8rem;
22	}	73	}
23		74
24	nav ul {	75	nav ul {
		76	list-style: none;
25	display: flex;	77	display: flex;
26	list-style-type: none;	78	gap: 1.5rem;
27	margin: 0;	79	margin: 0;
28	padding: 0;	80	padding: 0;
29	width: 100%;
30	}	81	}
31		82
32	nav ul li {	83	nav a {
33	height: 100%;	84	color: var(--green);
34	margin-bottom: 0.5rem;	85	text-decoration: none;
		86	text-transform: uppercase;
		87	}
		88
		89	nav a:hover {
		90	text-shadow: 0 0 8px var(--green);
		91	background: var(--green-dim);
		92	}
		93
		94	/* Content Pane (The Glass) */
		95	.glass-pane {
		96	background: var(--glass);
		97	backdrop-filter: blur(4px);
		98	border: 1px solid var(--green-dim);
		99	padding: 1.5rem;
		100	min-height: 100%;
		101	box-sizing: border-box;
		102	}
		103
		104	/* Stylized Data Blocks */
		105	.sys-readout {
		106	border: 1px solid var(--green-dim);
		107	background: rgba(0, 0, 0, 0.3);
		108	padding: 1rem;
		109	margin-bottom: 2rem;
		110	font-size: 0.85rem;
		111	display: grid;
		112	grid-template-columns: auto 1fr;
		113	gap: 0.5rem 1rem;
		114	}
		115
		116	.sys-readout b {
		117	color: var(--green);
		118	text-transform: uppercase;
		119	opacity: 0.7;
		120	}
		121
		122	/* Typography & Elements */
		123	h1, h2, h3 {
		124	color: var(--green);
		125	text-transform: uppercase;
		126	letter-spacing: 2px;
		127	}
		128
		129	a {
		130	color: var(--green);
		131	transition: 0.2s;
		132	text-decoration-thickness: 1px;
		133	text-underline-offset: 3px;
		134	}
		135
		136	a:hover {
		137	color: #fff;
		138	text-shadow: 0 0 5px var(--green);
		139	}
		140
		141	code {
		142	background: var(--green-dim);
		143	padding: 2px 4px;
		144	color: #fff;
		145	}
		146
		147	/* Blockquotes: Emacs Style */
		148	blockquote {
		149	background: var(--emacs-bg);
		150	border-left: 4px solid var(--emacs-blue);
		151	margin: 1.5rem 0;
		152	padding: 1rem;
		153	color: #bbc2cf;
		154	font-style: italic;
		155	position: relative;
		156	}
		157
		158	blockquote::before {
		159	content: "/* COMMENT */";
		160	position: absolute;
		161	top: -10px;
		162	right: 10px;
		163	font-size: 0.6rem;
		164	color: var(--emacs-blue);
		165	background: var(--bg);
		166	padding: 0 5px;
		167	}
		168
		169	/* Blog List */
		170	.post {
		171	margin: 0.5rem 0;
		172	padding: 5px;
		173	border-bottom: 1px dashed rgba(0, 255, 157, 0.1);
		174	}
		175
		176	.post time {
		177	color: var(--green);
		178	opacity: 0.6;
		179	font-size: 0.8rem;
35	margin-right: 1rem;	180	margin-right: 1rem;
36	text-align: center;
37	}	181	}
38		182
39	img {	183	.post a::before {
40	max-width: 100%;	184	content: "DIR_ ";
		185	font-size: 0.7rem;
		186	opacity: 0.5;
41	}	187	}
42		188
		189	/* Code Blocks */
43	pre {	190	pre {
44	border: 1px solid black;	191	background: var(--emacs-bg);
45	overflow: scroll;	192	border: 1px solid #3e4451;
46	padding: 0.5rem;	193	border-left: 4px solid var(--emacs-blue);
		194	padding: 1rem;
		195	overflow-x: auto;
		196	position: relative;
		197	margin: 1.5rem 0;
47	}	198	}
48		199
49	:not(pre) > code {	200	pre::before {
50	color: red;	201	content: "-uuu:--- F1 buffer.txt All (1,0)";
		202	display: block;
		203	background: #282c34;
		204	color: #bbc2cf;
		205	font-size: 0.7rem;
		206	margin: -1rem -1rem 1rem -1rem;
		207	padding: 4px 10px;
		208	border-bottom: 1px solid #3e4451;
		209	opacity: 0.7;
51	}	210	}
52		211
53	.skip-link {	212	/* Tables */
54	height: 1px;	213	.table-wrapper {
55	left: -10000px;	214	width: 100%;
56	overflow: hidden;	215	overflow-x: auto;
57	position: absolute;	216	margin: 2rem 0;
58	top: auto;
59	width: 1px;
60	}	217	}
61		218
62	.skip-link:focus {	219	table {
63	height: auto;	220	width: 100%;
64	position: static;	221	border-collapse: collapse;
65	width: auto;	222	font-size: 0.85rem;
		223	background: rgba(0, 0, 0, 0.2);
66	}	224	}
67		225
68	@media (prefers-color-scheme: dark) {	226	th {
69	body {	227	background: var(--green-dim);
70	background-color: #000000;	228	color: var(--green);
71	color: #dfdfdf;	229	text-transform: uppercase;
72	}	230	text-align: left;
		231	padding: 12px;
		232	border-bottom: 1px solid var(--green);
		233	}
		234
		235	td {
		236	padding: 10px;
		237	border-bottom: 1px solid rgba(0, 255, 157, 0.1);
		238	color: var(--text);
		239	border-right: 1px solid rgba(0, 255, 157, 0.05);
		240	}
		241
		242	table, thead, tbody, th, tr, td {
		243	border: 1px solid var(--green-dim);
		244	}
73		245
74	a {	246	td:last-child { border-right: none; }
75	color: #67c0ff;
76	}
77		247
78	pre {	248	/* Footer & Status Bar */
79	border-color: white;	249	footer {
80	}	250	margin-top: auto;
		251	font-size: 0.7rem;
		252	}
		253
		254	.system-log {
		255	border-top: 2px solid var(--green);
		256	background: linear-gradient(to bottom, rgba(0,255,157,0.05), transparent);
		257	padding: 10px;
81	}	258	}
		259
		260	.log-entry { font-size: 0.7rem; line-height: 1.4; color: var(--green); }
		261
		262	.status-bar {
		263	background: var(--green);
		264	color: var(--bg);
		265	padding: 4px 12px;
		266	display: flex;
		267	justify-content: space-between;
		268	font-weight: bold;
		269	}
		270
		271	/* Fix for Footer Link Visibility */
		272	.status-bar a {
		273	color: #000; /* High contrast black on green bar */
		274	text-decoration: underline;
		275	font-weight: 900;
		276	}
		277
		278	.status-bar a:hover {
		279	background: #000;
		280	color: var(--green);
		281	}
		282
		283	.status-node::before {
		284	content: "● NORMAL ";
		285	background: #000;
		286	color: var(--green);
		287	padding: 0 8px;
		288	margin-right: 10px;
		289	}
		290
		291	@media (max-width: 600px) {
		292	body { overflow-y: auto; }
		293	.terminal-shell { height: auto; }
		294	.system-header { flex-direction: column; gap: 1rem; }
		295	}\ No newline at end of file

theme/templates/base.html +44 −16

	@@ -17,22 +17,50 @@
17	{% endblock %}	17	{% endblock %}
18	</head>	18	</head>
19	<body>	19	<body>
20	<div aria-label="Skip to Content" role="navigation">	20	<div class="scanlines"></div>
21	<a href="#main" class="skip-link">Skip to content</a>	21	<div class="terminal-shell">
		22	<header class="system-header">
		23	<div class="sys-info">SYS_OS [VER 2.26.1]</div>
		24	<nav aria-label="Site Navigation">
		25	<ul>
		26	<li><a href="/">Home</a></li>
		27	<li><a href="/about/">About</a></li>
		28	<li><a href="/blog/">Blog</a></li>
		29	<li><a href="/services/">Services</a></li>
		30	</ul>
		31	</nav>
		32	</header>
		33
		34	<main id="main">
		35	<div class="glass-pane"> {% block main %}{% endblock %}
		36	</div>
		37	</main>
		38
		39	<footer>
		40	<div class="system-log">
		41	<div class="log-entry">
		42	<span class="log-time">[{{ now() \| strftime("%H:%M:%S") }}]</span>
		43	<span class="log-msg">KERNEL: CLEBERG_OS_NODE INITIALIZED</span>
		44	</div>
		45	<div class="log-entry">
		46	<span class="log-time">[{{ now() \| strftime("%H:%M:%S") }}]</span>
		47	<span class="log-msg">BUILD_TS: <{{ now() \| strftime("%Y-%m-%d %a %H:%M:%S") }}></span>
		48	</div>
		49	<div class="log-entry">
		50	<span class="log-time">[{{ now() \| strftime("%H:%M:%S") }}]</span>
		51	<span class="log-msg">STATUS: SESSION_ID #<span class="session-id"></span> ACTIVE</span>
		52	</div>
		53	</div>
		54
		55	<div class="status-bar">
		56	<span class="status-node">NODE: CLEBERG_NET</span>
		57	<span class="status-links">
		58	<a href="https://git.cleberg.net/cleberg.net.git">SOURCE</a> ·
		59	<a href="/feed.xml">RSS</a> ·
		60	<a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">ONION</a>
		61	</span>
		62	</div>
		63	</footer>
22	</div>	64	</div>
23	<nav aria-label="Site Navigation">
24	<ul>
25	<li><a href="/">Home</a></li>
26	<li><a href="/about/">About</a></li>
27	<li><a href="/blog/">Blog</a></li>
28	<li><a href="/services/">Services</a></li>
29	</ul>
30	</nav>
31	<main id="main">{% block main %}{% endblock %}</main>
32	<footer>
33	<a href="https://git.cleberg.net/cleberg.net.git">Source</a> (<a href="http://3mria4zis7wal2g5rdbdjrkc4yso2xqd6t6psmfz3dpqwflmx3zts5id.onion/">.onion</a>) ·
34	<a href="/feed.xml">RSS</a> ·
35	<a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">.onion</a>
36	</footer>
37	</body>	65	</body>
38	</html>	66	</html>

theme/templates/blog.html +1 −1

	@@ -14,6 +14,6 @@ main %}
14	<time datetime='{{ post.date \| strftime("%Y-%m-%d") }}'	14	<time datetime='{{ post.date \| strftime("%Y-%m-%d") }}'
15	>{{ post.date\|strftime("%Y-%m-%d") }}</time	15	>{{ post.date\|strftime("%Y-%m-%d") }}</time
16	>	16	>
17	<a href='{{ url_for("blog", slug=post.slug) }}'>{{ post.title }}</a>	17	<a href='{{ url_for("blog", slug=post.slug) }}' data-text="{{ post.title }}">{{ post.title }}</a>
18	</div>	18	</div>
19	{% endfor %} {% endblock %}	19	{% endfor %} {% endblock %}

theme/templates/index.html +4 −4

	@@ -1,8 +1,8 @@
1	{% extends "base.html" %} {% block main %}	1	{% extends "base.html" %} {% block main %}
2	<section>	2	<section class="sys-readout">
3	<b>User</b>: Christian Cleberg <hello@cleberg.net>	3	<b>User</b> <span>Christian Cleberg <hello@cleberg.net></span>
4	<br><b>Context</b>: Technology Assurance Manager	4	<b>Context</b> <span>Technology Assurance Manager</span>
5	<br><b>Status</b>: Active	5	<b>Status</b> <span style="color: #fff; text-shadow: 0 0 5px var(--green);">[ ACTIVE ]</span>
6	</section>	6	</section>
7	<section class="recent-posts">	7	<section class="recent-posts">
8	<h2>Recent Posts</h2>	8	<h2>Recent Posts</h2>

theme/templates/page.html +1 −1

	@@ -5,7 +5,7 @@
5	{% endblock %}	5	{% endblock %}
6	{% block main %}	6	{% block main %}
7	<article>	7	<article>
8	<h1>{{ post.title }}</h1>	8	<h1 data-text="{{ post.title }}">{{ post.title }}</h1>
9	<section>{{ post.html \| safe }}</section>	9	<section>{{ post.html \| safe }}</section>
10	</article>	10	</article>
11	{% endblock %}	11	{% endblock %}

theme/templates/post.html +5 −4

 {% endif %} {% endblock %} {% block main %}
 <article>
 	<section>
-		<b>Title</b>: {{ post.title }}
+	<section class="sys-readout">
-		<br><b>Date</b>: <time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time>
+        <b>Object</b> <span>{{ post.title }}</span>
-		<br><b>Description</b>: {{ post.description }}
+        <b>Timestamp</b> <span><time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time></span>
-	</section>
+        <b>Summary</b> <span>{{ post.description }}</span>
+    </section>
 	<section>{{ post.html | safe }}</section>
 	<div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email &rarr;</a></div>
 </article>

Commit 927757547a

Commit `927757547a`