cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
49f15c51872d2fb7a5503c7029de81a1f989d10f
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2026-01-21T04:43:55Z
theme/static/styles.css | 407 +++++++++++---------------------------------- theme/templates/base.html | 59 ++----- theme/templates/index.html | 6 +- theme/templates/post.html | 2 +- 4 files changed, 121 insertions(+), 353 deletions(-) @@ -1,339 +1,132 @@ +/* --- Variables & System Logic --- */ :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); -} + color-scheme: light dark; + /* Light Mode Palette */ + --bg: #ffffff; + --fg: #1a1a1a; + --accent: #0000ff; /* Classic HTML blue */ + --border: #000000; + --code-bg: #f4f4f4; + --meta: #666666; + --max-width: 800px; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #0d0d0d; + --fg: #e0e0e0; + --accent: #4dabff; + --border: #333333; + --code-bg: #1a1a1a; + --meta: #999999; + } +} + +/* --- Layout Architecture --- */ +* { box-sizing: border-box; } body { - color: var(--text); - font-family: var(--font); - font-size: 0.85rem; - line-height: 1.5; - display: flex; - flex-direction: column; - align-items: center; - overflow: hidden; /* Desktop keeps terminal-shell fixed */ + background: var(--bg); + color: var(--fg); + font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; + line-height: 1.6; + max-width: var(--max-width); + margin: 0 auto; + padding: 2rem 1rem; + text-rendering: optimizeLegibility; } -img { - max-width: 100%; -} +/* --- Navigation & Footer --- */ +nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; border-bottom: 4px solid var(--fg); padding-bottom: 0.5rem; } +nav a { text-transform: uppercase; font-weight: 900; text-decoration: none; } +nav a:hover { background: var(--fg); color: var(--bg); } -/* 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; -} +footer { margin-top: 4rem; border-top: 1px solid var(--border); padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; } -.terminal-shell { - width: 95%; - max-width: 1000px; - height: 98vh; - display: flex; - flex-direction: column; - padding: 10px 0; -} +/* --- Typography (Brutalist) --- */ +h1, h2, h3 { line-height: 1.1; margin-top: 2rem; font-weight: 900; text-transform: uppercase; } +h1 { font-size: 2.2rem; margin-bottom: 1rem; } +h2 { border-left: 10px solid var(--accent); padding-left: 0.75rem; } -main { - flex: 1; - overflow-x: scroll; - overflow-y: auto; - margin: 10px 0; - scrollbar-width: thin; - scrollbar-color: var(--green) transparent; -} +a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } +a:hover { background: var(--accent); color: var(--bg); text-decoration: none; } -/* 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; -} +/* --- Weblorg / Template Specifics --- */ +section b { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--meta); margin-top: 0.5rem; } +section span { display: block; font-weight: bold; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; } -nav ul { - list-style: none; - display: flex; - gap: 1.5rem; - margin: 0; - padding: 0; -} +.post { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--border); padding: 0.5rem 0; } +.post time { font-size: 0.8rem; color: var(--meta); } -nav a { - color: var(--green); - text-decoration: none; - text-transform: uppercase; -} +/* --- Org-Mode Tables (Heavy Grid) --- */ +table { width: 100%; border-collapse: collapse; margin: 2rem 0; border: 3px solid var(--fg); } +th, td { border: 1px solid var(--fg); padding: 0.75rem; text-align: left; } +th { background: var(--fg); color: var(--bg); text-transform: uppercase; font-size: 0.8rem; } -nav a:hover { - text-shadow: 0 0 8px var(--green); - background: var(--green-dim); -} +/* --- Code & Pre blocks --- */ +pre { padding: 1rem; border: 1px solid var(--border); background: var(--code-bg); overflow-x: auto; } +code { background: var(--code-bg); padding: 0.2rem 0.4rem; } -/* 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.8rem; - display: grid; - grid-template-columns: auto 1fr; - gap: 0.5rem 1rem; -} - -.sys-readout b { - color: var(--green); - text-transform: uppercase; - opacity: 0.7; -} +/* --- Accessibility & Efficiency --- */ +img { max-width: 100%; height: auto; filter: grayscale(1); } +img:hover { filter: grayscale(0); } -/* Typography & Elements */ -h1, h2, h3 { - color: var(--green); +/* --- Accessibility: Skip Link --- */ +.skip-link { + position: absolute; + top: -100px; /* Hide off-screen */ + left: 50%; + transform: translateX(-50%); + background: var(--fg); + color: var(--bg); + padding: 1rem 2rem; + z-index: 999; + font-weight: 900; text-transform: uppercase; - letter-spacing: 2px; -} - -h1 { font-size: 1.5rem; margin-bottom: 1rem; } -h2 { font-size: 1.2rem; margin-top: 1.5rem; } -h3 { font-size: 1rem; } - -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); + border: 3px solid var(--accent); + text-decoration: none; + transition: top 0.2s ease-in-out; } -code { - background: var(--green-dim); - padding: 2px 4px; - color: #fff; +/* Show the link when a user tabs to it */ +.skip-link:focus { + top: 0; + outline: none; /* We use the border and color change as the indicator */ } -/* 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; +/* Ensure the main area doesn't show a blue ring when focused via skip-link */ +#main-content:focus { + outline: none; } -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 (TUI Style) */ -.post { - margin: 0.5rem 0; - padding: 8px 5px; - border-bottom: 1px dashed rgba(0, 255, 157, 0.1); +/* --- Footnote Alignment --- */ +.footdef { display: flex; - flex-direction: row; /* Default: Side-by-side for desktop */ - align-items: baseline; -} - -.post time { - color: var(--green); - opacity: 0.6; - font-size: 0.75rem; - margin-right: 1.5rem; - white-space: nowrap; /* Prevents date from wrapping */ - font-family: var(--font); + align-items: flex-start; /* Keeps number at the top if text wraps */ + gap: 1rem; /* Space between number and text */ + margin-bottom: 0.5rem; } -.post a { - font-size: 0.85rem; - text-decoration: none; +/* Ensure the paragraph doesn't add its own block margins */ +.footpara { + margin: 0; flex: 1; -} - -.post a::before { - content: "DIR_ "; - font-size: 0.7rem; - opacity: 0.5; -} - -/* Code Blocks */ -pre { - 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; -} - -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; -} - -/* Tables */ -.table-wrapper { - width: 100%; - overflow-x: auto; - margin: 2rem 0; -} - -table { - width: 100%; - border-collapse: collapse; - font-size: 0.85rem; - background: rgba(0, 0, 0, 0.2); -} - -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); -} - -td:last-child { border-right: none; } - -/* 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); - font-size: 0.7rem; - padding: 2px 10px; 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) { + flex-direction: column; + gap: 0.5rem; } -/* Mobile Responsiveness for Blog List */ -@media (max-width: 650px) { - .post { - flex-direction: column; - align-items: flex-start; - gap: 4px; - } - - .post time { - margin-right: 0; - margin-bottom: 2px; - font-size: 0.7rem; - opacity: 0.4; - } - - .post a { - padding: 4px 0; - } +/* Style the footnote number to be a fixed width for alignment */ +.footnum { + font-weight: bold; + min-width: 1.5rem; + text-align: right; + text-decoration: none; + font-size: 0.85rem; + color: var(--accent); } -/* General Layout Mobile Fixes */ @media (max-width: 600px) { - body { overflow-y: auto; } - .terminal-shell { height: auto; } - .system-header { flex-direction: column; align-items: flex-start; gap: 1rem; } - nav ul { flex-wrap: wrap; gap: 10px 20px;} - .glass-pane { padding: 1rem; } + body { padding: 1rem; } + .post { flex-direction: column; } } \ No newline at end of file @@ -17,50 +17,25 @@ {% endblock %} </head> <body> - <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> + <a href="#main-content" class="skip-link">Skip to content</a> + <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"> - <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> + <main id="main"> + <div> {% block main %}{% endblock %} </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> + </main> + +<footer> + <a href="https://git.cleberg.net/cleberg.net.git">SOURCE</a> · + <a href="/feed.xml">RSS</a> · + <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">ONION</a> </footer> - </div> </body> </html> @@ -1,10 +1,10 @@ {% extends "base.html" %} {% block main %} -<section class="sys-readout"> +<section> <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> + <b>Status</b>Active</span> </section> -<section class="recent-posts"> +<section> <h2>Recent Posts</h2> <!-- BEGIN_POSTS --> <!-- END_POSTS --> @@ -9,7 +9,7 @@ {% endif %} {% endblock %} {% block main %} <article> <section> - <section class="sys-readout"> + <section> <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>