cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
927757547a1b7dbd6fe422d70f9ca422801571cc
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2026-01-18T23:06:40Z
theme/static/styles.css | 308 ++++++++++++++++++++++++++++++++++++++------- theme/templates/base.html | 60 ++++++--- theme/templates/blog.html | 2 +- theme/templates/index.html | 8 +- theme/templates/page.html | 2 +- theme/templates/post.html | 9 +- 6 files changed, 316 insertions(+), 73 deletions(-) @@ -1,81 +1,295 @@ +:root { + --bg: #0a0b10; + --green: #00ff9d; + --green-dim: rgba(0, 255, 157, 0.2); + --glass: rgba(0, 255, 157, 0.03); + --text: #c0fce6; + --font: "Lucida Console", "Monaco", "Consolas", monospace; + --emacs-blue: #51afef; + --emacs-bg: #1c1f24; +} + +/* Base Terminal Environment */ +html, body { + height: 100%; + margin: 0; + padding: 0; + background-color: var(--bg); +} + body { - font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; - font-size: 0.85rem; + color: var(--text); + font-family: var(--font); line-height: 1.5; - margin: 0 auto; - max-width: 50em; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; /* Desktop keeps terminal-shell fixed */ } -body { - padding: 1rem; +img { + max-width: 100%; } -footer { - margin: 1rem 0; +/* CRT Scanline Effect */ +.scanlines { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: linear-gradient( + rgba(18, 16, 16, 0) 50%, + rgba(0, 0, 0, 0.15) 50% + ); + background-size: 100% 4px; + z-index: 9999; + pointer-events: none; } -nav { - align-items: center; +.terminal-shell { + width: 95%; + max-width: 1000px; + height: 98vh; display: flex; - justify-content: space-around; - margin: 1rem 0; + flex-direction: column; + padding: 10px 0; +} + +main { + flex: 1; + overflow-y: auto; + margin: 10px 0; + scrollbar-width: thin; + scrollbar-color: var(--green) transparent; +} + +/* Navigation & Header */ +.system-header { + border-bottom: 1px solid var(--green-dim); + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.8rem; } nav ul { + list-style: none; display: flex; - list-style-type: none; + gap: 1.5rem; margin: 0; padding: 0; - width: 100%; } -nav ul li { - height: 100%; - margin-bottom: 0.5rem; +nav a { + color: var(--green); + text-decoration: none; + text-transform: uppercase; +} + +nav a:hover { + text-shadow: 0 0 8px var(--green); + background: var(--green-dim); +} + +/* Content Pane (The Glass) */ +.glass-pane { + background: var(--glass); + backdrop-filter: blur(4px); + border: 1px solid var(--green-dim); + padding: 1.5rem; + min-height: 100%; + box-sizing: border-box; +} + +/* Stylized Data Blocks */ +.sys-readout { + border: 1px solid var(--green-dim); + background: rgba(0, 0, 0, 0.3); + padding: 1rem; + margin-bottom: 2rem; + font-size: 0.85rem; + display: grid; + grid-template-columns: auto 1fr; + gap: 0.5rem 1rem; +} + +.sys-readout b { + color: var(--green); + text-transform: uppercase; + opacity: 0.7; +} + +/* Typography & Elements */ +h1, h2, h3 { + color: var(--green); + text-transform: uppercase; + letter-spacing: 2px; +} + +a { + color: var(--green); + transition: 0.2s; + text-decoration-thickness: 1px; + text-underline-offset: 3px; +} + +a:hover { + color: #fff; + text-shadow: 0 0 5px var(--green); +} + +code { + background: var(--green-dim); + padding: 2px 4px; + color: #fff; +} + +/* Blockquotes: Emacs Style */ +blockquote { + background: var(--emacs-bg); + border-left: 4px solid var(--emacs-blue); + margin: 1.5rem 0; + padding: 1rem; + color: #bbc2cf; + font-style: italic; + position: relative; +} + +blockquote::before { + content: "/* COMMENT */"; + position: absolute; + top: -10px; + right: 10px; + font-size: 0.6rem; + color: var(--emacs-blue); + background: var(--bg); + padding: 0 5px; +} + +/* Blog List */ +.post { + margin: 0.5rem 0; + padding: 5px; + border-bottom: 1px dashed rgba(0, 255, 157, 0.1); +} + +.post time { + color: var(--green); + opacity: 0.6; + font-size: 0.8rem; margin-right: 1rem; - text-align: center; } -img { - max-width: 100%; +.post a::before { + content: "DIR_ "; + font-size: 0.7rem; + opacity: 0.5; } +/* Code Blocks */ pre { - border: 1px solid black; - overflow: scroll; - padding: 0.5rem; + background: var(--emacs-bg); + border: 1px solid #3e4451; + border-left: 4px solid var(--emacs-blue); + padding: 1rem; + overflow-x: auto; + position: relative; + margin: 1.5rem 0; } -:not(pre) > code { - color: red; +pre::before { + content: "-uuu:--- F1 buffer.txt All (1,0)"; + display: block; + background: #282c34; + color: #bbc2cf; + font-size: 0.7rem; + margin: -1rem -1rem 1rem -1rem; + padding: 4px 10px; + border-bottom: 1px solid #3e4451; + opacity: 0.7; } -.skip-link { - height: 1px; - left: -10000px; - overflow: hidden; - position: absolute; - top: auto; - width: 1px; +/* Tables */ +.table-wrapper { + width: 100%; + overflow-x: auto; + margin: 2rem 0; } -.skip-link:focus { - height: auto; - position: static; - width: auto; +table { + width: 100%; + border-collapse: collapse; + font-size: 0.85rem; + background: rgba(0, 0, 0, 0.2); } -@media (prefers-color-scheme: dark) { - body { - background-color: #000000; - color: #dfdfdf; - } +th { + background: var(--green-dim); + color: var(--green); + text-transform: uppercase; + text-align: left; + padding: 12px; + border-bottom: 1px solid var(--green); +} + +td { + padding: 10px; + border-bottom: 1px solid rgba(0, 255, 157, 0.1); + color: var(--text); + border-right: 1px solid rgba(0, 255, 157, 0.05); +} + +table, thead, tbody, th, tr, td { + border: 1px solid var(--green-dim); +} - a { - color: #67c0ff; - } +td:last-child { border-right: none; } - pre { - border-color: white; - } +/* Footer & Status Bar */ +footer { + margin-top: auto; + font-size: 0.7rem; +} + +.system-log { + border-top: 2px solid var(--green); + background: linear-gradient(to bottom, rgba(0,255,157,0.05), transparent); + padding: 10px; } + +.log-entry { font-size: 0.7rem; line-height: 1.4; color: var(--green); } + +.status-bar { + background: var(--green); + color: var(--bg); + padding: 4px 12px; + display: flex; + justify-content: space-between; + font-weight: bold; +} + +/* Fix for Footer Link Visibility */ +.status-bar a { + color: #000; /* High contrast black on green bar */ + text-decoration: underline; + font-weight: 900; +} + +.status-bar a:hover { + background: #000; + color: var(--green); +} + +.status-node::before { + content: "● NORMAL "; + background: #000; + color: var(--green); + padding: 0 8px; + margin-right: 10px; +} + +@media (max-width: 600px) { + body { overflow-y: auto; } + .terminal-shell { height: auto; } + .system-header { flex-direction: column; gap: 1rem; } +} \ No newline at end of file @@ -17,22 +17,50 @@ {% endblock %} </head> <body> - <div aria-label="Skip to Content" role="navigation"> - <a href="#main" class="skip-link">Skip to content</a> + <div class="scanlines"></div> + <div class="terminal-shell"> + <header class="system-header"> + <div class="sys-info">SYS_OS [VER 2.26.1]</div> + <nav aria-label="Site Navigation"> + <ul> + <li><a href="/">Home</a></li> + <li><a href="/about/">About</a></li> + <li><a href="/blog/">Blog</a></li> + <li><a href="/services/">Services</a></li> + </ul> + </nav> + </header> + + <main id="main"> + <div class="glass-pane"> {% block main %}{% endblock %} + </div> + </main> + +<footer> + <div class="system-log"> + <div class="log-entry"> + <span class="log-time">[{{ now() | strftime("%H:%M:%S") }}]</span> + <span class="log-msg">KERNEL: CLEBERG_OS_NODE INITIALIZED</span> + </div> + <div class="log-entry"> + <span class="log-time">[{{ now() | strftime("%H:%M:%S") }}]</span> + <span class="log-msg">BUILD_TS: <{{ now() | strftime("%Y-%m-%d %a %H:%M:%S") }}></span> + </div> + <div class="log-entry"> + <span class="log-time">[{{ now() | strftime("%H:%M:%S") }}]</span> + <span class="log-msg">STATUS: SESSION_ID #<span class="session-id"></span> ACTIVE</span> + </div> + </div> + + <div class="status-bar"> + <span class="status-node">NODE: CLEBERG_NET</span> + <span class="status-links"> + <a href="https://git.cleberg.net/cleberg.net.git">SOURCE</a> · + <a href="/feed.xml">RSS</a> · + <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">ONION</a> + </span> + </div> +</footer> </div> - <nav aria-label="Site Navigation"> - <ul> - <li><a href="/">Home</a></li> - <li><a href="/about/">About</a></li> - <li><a href="/blog/">Blog</a></li> - <li><a href="/services/">Services</a></li> - </ul> - </nav> - <main id="main">{% block main %}{% endblock %}</main> - <footer> - <a href="https://git.cleberg.net/cleberg.net.git">Source</a> (<a href="http://3mria4zis7wal2g5rdbdjrkc4yso2xqd6t6psmfz3dpqwflmx3zts5id.onion/">.onion</a>) · - <a href="/feed.xml">RSS</a> · - <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">.onion</a> - </footer> </body> </html> @@ -14,6 +14,6 @@ main %} <time datetime='{{ post.date | strftime("%Y-%m-%d") }}' >{{ post.date|strftime("%Y-%m-%d") }}</time > - <a href='{{ url_for("blog", slug=post.slug) }}'>{{ post.title }}</a> + <a href='{{ url_for("blog", slug=post.slug) }}' data-text="{{ post.title }}">{{ post.title }}</a> </div> {% endfor %} {% endblock %} @@ -1,8 +1,8 @@ {% extends "base.html" %} {% block main %} -<section> - <b>User</b>: Christian Cleberg <hello@cleberg.net> - <br><b>Context</b>: Technology Assurance Manager - <br><b>Status</b>: Active +<section class="sys-readout"> + <b>User</b> <span>Christian Cleberg <hello@cleberg.net></span> + <b>Context</b> <span>Technology Assurance Manager</span> + <b>Status</b> <span style="color: #fff; text-shadow: 0 0 5px var(--green);">[ ACTIVE ]</span> </section> <section class="recent-posts"> <h2>Recent Posts</h2> @@ -5,7 +5,7 @@ {% endblock %} {% block main %} <article> - <h1>{{ post.title }}</h1> + <h1 data-text="{{ post.title }}">{{ post.title }}</h1> <section>{{ post.html | safe }}</section> </article> {% endblock %} @@ -9,10 +9,11 @@ {% endif %} {% endblock %} {% block main %} <article> <section> - <b>Title</b>: {{ post.title }} - <br><b>Date</b>: <time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time> - <br><b>Description</b>: {{ post.description }} - </section> + <section class="sys-readout"> + <b>Object</b> <span>{{ post.title }}</span> + <b>Timestamp</b> <span><time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time></span> + <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 →</a></div> </article>