aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--theme/static/styles.css407
-rw-r--r--theme/templates/base.html59
-rw-r--r--theme/templates/index.html6
-rw-r--r--theme/templates/post.html2
4 files changed, 121 insertions, 353 deletions
diff --git a/theme/static/styles.css b/theme/static/styles.css
index d917c4d..6e30e60 100644
--- a/theme/static/styles.css
+++ b/theme/static/styles.css
@@ -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
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 197de0f..be84156 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -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: &lt;{{ now() | strftime("%Y-%m-%d %a %H:%M:%S") }}&gt;</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> &middot;
- <a href="/feed.xml">RSS</a> &middot;
- <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">ONION</a>
- </span>
- </div>
+ </main>
+
+<footer>
+ <a href="https://git.cleberg.net/cleberg.net.git">SOURCE</a> &middot;
+ <a href="/feed.xml">RSS</a> &middot;
+ <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">ONION</a>
</footer>
- </div>
</body>
</html>
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 36fd592..18d28f5 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -1,10 +1,10 @@
{% extends "base.html" %} {% block main %}
-<section class="sys-readout">
+<section>
<b>User</b> <span>Christian Cleberg &lt;[email protected]&gt;</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 -->
diff --git a/theme/templates/post.html b/theme/templates/post.html
index 18b9abc..bc8afc2 100644
--- a/theme/templates/post.html
+++ b/theme/templates/post.html
@@ -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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-04 16:53:18 +0000