cmc/cleberg.net

My personal web garden & blog. blog personal website https://cleberg.net

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 */
13html, body {
14 height: 100%;
15 margin: 0;
16 padding: 0;
17 background-color: var(--bg);
18}
19
120body {
2 font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
3 font-size: 0.85rem;
21 color: var(--text);
22 font-family: var(--font);
423 line-height: 1.5;
5 margin: 0 auto;
6 max-width: 50em;
24 display: flex;
25 flex-direction: column;
26 align-items: center;
27 overflow: hidden; /* Desktop keeps terminal-shell fixed */
728}
829
9body {
10 padding: 1rem;
30img {
31 max-width: 100%;
1132}
1233
13footer {
14 margin: 1rem 0;
34/* CRT Scanline Effect */
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;
1545}
1646
17nav {
18 align-items: center;
47.terminal-shell {
48 width: 95%;
49 max-width: 1000px;
50 height: 98vh;
1951 display: flex;
20 justify-content: space-around;
21 margin: 1rem 0;
52 flex-direction: column;
53 padding: 10px 0;
54}
55
56main {
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;
2273}
2374
2475nav ul {
76 list-style: none;
2577 display: flex;
26 list-style-type: none;
78 gap: 1.5rem;
2779 margin: 0;
2880 padding: 0;
29 width: 100%;
3081}
3182
32nav ul li {
33 height: 100%;
34 margin-bottom: 0.5rem;
83nav a {
84 color: var(--green);
85 text-decoration: none;
86 text-transform: uppercase;
87}
88
89nav 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 */
123h1, h2, h3 {
124 color: var(--green);
125 text-transform: uppercase;
126 letter-spacing: 2px;
127}
128
129a {
130 color: var(--green);
131 transition: 0.2s;
132 text-decoration-thickness: 1px;
133 text-underline-offset: 3px;
134}
135
136a:hover {
137 color: #fff;
138 text-shadow: 0 0 5px var(--green);
139}
140
141code {
142 background: var(--green-dim);
143 padding: 2px 4px;
144 color: #fff;
145}
146
147/* Blockquotes: Emacs Style */
148blockquote {
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
158blockquote::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;
35180 margin-right: 1rem;
36 text-align: center;
37181}
38182
39img {
40 max-width: 100%;
183.post a::before {
184 content: "DIR_ ";
185 font-size: 0.7rem;
186 opacity: 0.5;
41187}
42188
189/* Code Blocks */
43190pre {
44 border: 1px solid black;
45 overflow: scroll;
46 padding: 0.5rem;
191 background: var(--emacs-bg);
192 border: 1px solid #3e4451;
193 border-left: 4px solid var(--emacs-blue);
194 padding: 1rem;
195 overflow-x: auto;
196 position: relative;
197 margin: 1.5rem 0;
47198}
48199
49:not(pre) > code {
50 color: red;
200pre::before {
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;
51210}
52211
53.skip-link {
54 height: 1px;
55 left: -10000px;
56 overflow: hidden;
57 position: absolute;
58 top: auto;
59 width: 1px;
212/* Tables */
213.table-wrapper {
214 width: 100%;
215 overflow-x: auto;
216 margin: 2rem 0;
60217}
61218
62.skip-link:focus {
63 height: auto;
64 position: static;
65 width: auto;
219table {
220 width: 100%;
221 border-collapse: collapse;
222 font-size: 0.85rem;
223 background: rgba(0, 0, 0, 0.2);
66224}
67225
68@media (prefers-color-scheme: dark) {
69 body {
70 background-color: #000000;
71 color: #dfdfdf;
72 }
226th {
227 background: var(--green-dim);
228 color: var(--green);
229 text-transform: uppercase;
230 text-align: left;
231 padding: 12px;
232 border-bottom: 1px solid var(--green);
233}
234
235td {
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
242table, thead, tbody, th, tr, td {
243 border: 1px solid var(--green-dim);
244}
73245
74 a {
75 color: #67c0ff;
76 }
246td:last-child { border-right: none; }
77247
78 pre {
79 border-color: white;
80 }
248/* Footer & Status Bar */
249footer {
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;
81258}
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 @@
1717 {% endblock %}
1818</head>
1919<body>
20 <div aria-label="Skip to Content" role="navigation">
21 <a href="#main" class="skip-link">Skip to content</a>
20 <div class="scanlines"></div>
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: &lt;{{ now() | strftime("%Y-%m-%d %a %H:%M:%S") }}&gt;</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> &middot;
59 <a href="/feed.xml">RSS</a> &middot;
60 <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">ONION</a>
61 </span>
62 </div>
63</footer>
2264 </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>) &middot;
34 <a href="/feed.xml">RSS</a> &middot;
35 <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">.onion</a>
36 </footer>
3765</body>
3866</html>
theme/templates/blog.html +1 −1
@@ -14,6 +14,6 @@ main %}
1414 <time datetime='{{ post.date | strftime("%Y-%m-%d") }}'
1515 >{{ post.date|strftime("%Y-%m-%d") }}</time
1616 >
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>
1818</div>
1919{% endfor %} {% endblock %}
theme/templates/index.html +4 −4
@@ -1,8 +1,8 @@
11{% extends "base.html" %} {% block main %}
2<section>
3 <b>User</b>: Christian Cleberg &lt;hello@cleberg.net&gt;
4 <br><b>Context</b>: Technology Assurance Manager
5 <br><b>Status</b>: Active
2<section class="sys-readout">
3 <b>User</b> <span>Christian Cleberg &lt;hello@cleberg.net&gt;</span>
4 <b>Context</b> <span>Technology Assurance Manager</span>
5 <b>Status</b> <span style="color: #fff; text-shadow: 0 0 5px var(--green);">[ ACTIVE ]</span>
66</section>
77<section class="recent-posts">
88 <h2>Recent Posts</h2>
theme/templates/page.html +1 −1
@@ -5,7 +5,7 @@
55{% endblock %}
66{% block main %}
77<article>
8 <h1>{{ post.title }}</h1>
8 <h1 data-text="{{ post.title }}">{{ post.title }}</h1>
99 <section>{{ post.html | safe }}</section>
1010</article>
1111{% endblock %}
theme/templates/post.html +5 −4
@@ -9,10 +9,11 @@
99{% endif %} {% endblock %} {% block main %}
1010<article>
1111 <section>
12 <b>Title</b>: {{ post.title }}
13 <br><b>Date</b>: <time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time>
14 <br><b>Description</b>: {{ post.description }}
15 </section>
12 <section class="sys-readout">
13 <b>Object</b> <span>{{ post.title }}</span>
14 <b>Timestamp</b> <span><time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time></span>
15 <b>Summary</b> <span>{{ post.description }}</span>
16 </section>
1617 <section>{{ post.html | safe }}</section>
1718 <div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email &rarr;</a></div>
1819</article>