aboutsummaryrefslogtreecommitdiff
path: root/theme
diff options
context:
space:
mode:
Diffstat (limited to 'theme')
-rw-r--r--theme/static/styles.css308
-rw-r--r--theme/templates/base.html60
-rw-r--r--theme/templates/blog.html2
-rw-r--r--theme/templates/index.html8
-rw-r--r--theme/templates/page.html2
-rw-r--r--theme/templates/post.html9
6 files changed, 316 insertions, 73 deletions
diff --git a/theme/static/styles.css b/theme/static/styles.css
index 71acb7e..09fb2c3 100644
--- a/theme/static/styles.css
+++ b/theme/static/styles.css
@@ -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
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 4aa3118..197de0f 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -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: &lt;{{ now() | strftime("%Y-%m-%d %a %H:%M:%S") }}&gt;</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> &middot;
+ <a href="/feed.xml">RSS</a> &middot;
+ <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>) &middot;
- <a href="/feed.xml">RSS</a> &middot;
- <a href="http://sv3g2dlyvwyk2nvi3eeh55fcrpdvjlclhi6wwsx57cste6lwdjanzyyd.onion">.onion</a>
- </footer>
</body>
</html>
diff --git a/theme/templates/blog.html b/theme/templates/blog.html
index 5aa3293..fabdff1 100644
--- a/theme/templates/blog.html
+++ b/theme/templates/blog.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 %}
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 1ce080c..36fd592 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -1,8 +1,8 @@
{% extends "base.html" %} {% block main %}
-<section>
- <b>User</b>: Christian Cleberg &lt;[email protected]&gt;
- <br><b>Context</b>: Technology Assurance Manager
- <br><b>Status</b>: Active
+<section class="sys-readout">
+ <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>
</section>
<section class="recent-posts">
<h2>Recent Posts</h2>
diff --git a/theme/templates/page.html b/theme/templates/page.html
index fb8d392..96735a6 100644
--- a/theme/templates/page.html
+++ b/theme/templates/page.html
@@ -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 %}
diff --git a/theme/templates/post.html b/theme/templates/post.html
index 66c335c..18b9abc 100644
--- a/theme/templates/post.html
+++ b/theme/templates/post.html
@@ -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:[email protected]">Reply via email &rarr;</a></div>
</article>
generated by cgit v1.2.3 (git 2.39.1) at 2026-08-04 15:22:19 +0000