From a09d45d7289345ec23b16089265baf64ca6de6d4 Mon Sep 17 00:00:00 2001
From: luxick <git@luxick.de>
Date: Fri, 10 Apr 2026 08:42:19 +0200
Subject: [PATCH] Apply CRT Styling

---
 assets/style.css | 456 ++++++++++++++++++++++++++++++++---------------
 main.go          |   3 +-
 2 files changed, 311 insertions(+), 148 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index c29601b..63e0ff9 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,182 +1,346 @@
-:root {
-  --bg: #1e1e2e;
-  --surface: #313244;
-  --border: #45475a;
-  --text: #cdd6f4;
-  --muted: #6c7086;
-  --accent: #89b4fa;
-  --accent-dim: #1d2a3f;
-  --green: #a6e3a1;
-  --red: #f38ba8;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-  --font-sans: system-ui, -apple-system, sans-serif;
-}
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
+/* === CRT Base === */
 body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: 16px;
-  line-height: 1.6;
-  min-height: 100vh;
+    background-color: black;
+    background-image: radial-gradient(rgba(0, 150, 0, 0.75), black 120%);
+    background-attachment: fixed;
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-height: 100vh;
+    margin: 0;
+    overflow: auto;
+    padding: 0;
+    color: white;
+    font:
+        1rem Inconsolata,
+        monospace;
+    text-shadow: 0 0 5px #c8c8c8;
 }
 
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
+body::after {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.15),
+        rgba(0, 0, 0, 0.15) 1px,
+        transparent 1px,
+        transparent 2px
+    );
+    pointer-events: none;
+    z-index: 9999;
+}
 
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+::selection {
+    background: #0080ff;
+    text-shadow: none;
+}
+
+/* === Links === */
+a {
+    color: white;
+    text-decoration: none;
+}
+a:hover {
+    color: #0f0;
+    text-shadow: 0 0 8px #0f0;
+}
+
+/* === Header === */
 header {
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  padding: 0.75rem 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px dashed #0a0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
 }
 
-header a { color: var(--text); font-weight: 600; }
-header .sep { color: var(--muted); }
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    flex: 1;
+}
 
-.breadcrumb { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; flex: 1; }
-.breadcrumb a { color: var(--accent); }
+.sep {
+    color: #060;
+}
 
 .edit-btn {
-  background: var(--accent-dim);
-  border: 1px solid var(--accent);
-  color: var(--accent);
-  padding: 0.25rem 0.75rem;
-  border-radius: 4px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  text-decoration: none;
-  white-space: nowrap;
+    background: none;
+    border: none;
+    color: white;
+    font: inherit;
+    cursor: pointer;
+    padding: 0;
+    text-decoration: none;
+    white-space: nowrap;
 }
-.edit-btn:hover { background: var(--accent); color: var(--bg); text-decoration: none; }
-
-main { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem; }
-
-.content { margin-bottom: 2rem; }
-
-/* Markdown rendered content */
-.content h1, .content h2, .content h3,
-.content h4, .content h5, .content h6 {
-  margin: 1.25rem 0 0.5rem;
-  line-height: 1.3;
+.edit-btn::before {
+    content: "[";
+}
+.edit-btn::after {
+    content: "]";
+}
+.edit-btn:hover {
+    color: #0f0;
+    text-shadow: 0 0 8px #0f0;
+}
+
+/* === Main === */
+main {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+}
+
+/* === Markdown content === */
+.content {
+    margin-bottom: 2rem;
+}
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+    color: white;
+    margin: 1.25rem 0 0.5rem;
+    line-height: 1.3;
+}
+.content h1 {
+    font-size: 1.75rem;
+    border-bottom: 1px dashed #0a0;
+    padding-bottom: 0.25rem;
+}
+.content h2 {
+    font-size: 1.4rem;
+}
+.content h3 {
+    font-size: 1.15rem;
+}
+.content p {
+    margin: 0.75rem 0;
+}
+.content ul,
+.content ol {
+    margin: 0.75rem 0 0.75rem 1.5rem;
+}
+.content li {
+    margin: 0.25rem 0;
 }
-.content h1 { font-size: 1.75rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
-.content h2 { font-size: 1.4rem; }
-.content h3 { font-size: 1.15rem; }
-.content p { margin: 0.75rem 0; }
-.content ul, .content ol { margin: 0.75rem 0 0.75rem 1.5rem; }
-.content li { margin: 0.25rem 0; }
 .content blockquote {
-  border-left: 3px solid var(--accent);
-  padding: 0.25rem 1rem;
-  color: var(--muted);
-  margin: 0.75rem 0;
+    border-left: 3px solid #0a0;
+    padding: 0.25rem 1rem;
+    color: #888;
+    margin: 0.75rem 0;
 }
 .content code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  background: var(--surface);
-  padding: 0.1em 0.35em;
-  border-radius: 3px;
+    font-family: Inconsolata, monospace;
+    font-size: 0.875em;
+    background: #001a00;
+    padding: 0.1em 0.35em;
 }
 .content pre {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 1rem;
-  overflow-x: auto;
-  margin: 0.75rem 0;
+    background: #001a00;
+    border: 1px solid #0a0;
+    padding: 1rem;
+    overflow-x: auto;
+    margin: 0.75rem 0;
+}
+.content pre code {
+    background: none;
+    padding: 0;
 }
-.content pre code { background: none; padding: 0; }
 .content table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 0.75rem 0;
-  font-size: 0.9rem;
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0.75rem 0;
+    font-size: 0.9rem;
 }
-.content th, .content td {
-  border: 1px solid var(--border);
-  padding: 0.4rem 0.75rem;
-  text-align: left;
+.content th,
+.content td {
+    border: 1px solid #0a0;
+    padding: 0.4rem 0.75rem;
+    text-align: left;
+}
+.content th {
+    background: #001a00;
+    color: white;
+}
+.content hr {
+    border: none;
+    border-top: 1px dashed #0a0;
+    margin: 1.5rem 0;
+}
+.content img {
+    max-width: 100%;
 }
-.content th { background: var(--surface); }
-.content hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
-.content img { max-width: 100%; border-radius: 4px; }
 
-/* File/folder listing */
-.listing { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+/* === File listing === */
+.listing {
+    border: 1px solid #0a0;
+}
 .listing-header {
-  background: var(--surface);
-  padding: 0.5rem 1rem;
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--muted);
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: white;
+    border-bottom: 1px solid #0a0;
 }
 .listing-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.6rem 1rem;
-  border-top: 1px solid var(--border);
-  font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    border-top: 1px solid #060;
+    font-size: 0.95rem;
+}
+.listing-item:hover {
+    background: #001a00;
+}
+.listing-item .icon {
+    width: 1.25rem;
+    text-align: center;
+    flex-shrink: 0;
+    text-shadow: none;
+}
+.listing-item a {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: white;
+}
+.listing-item .meta {
+    color: #888;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    text-shadow: none;
 }
-.listing-item:hover { background: var(--surface); }
-.listing-item .icon { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
-.listing-item a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.listing-item .meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
 
-/* Edit form */
-.edit-form { display: flex; flex-direction: column; gap: 1rem; }
-.edit-form textarea {
-  width: 100%;
-  min-height: 60vh;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 0.9rem;
-  line-height: 1.6;
-  padding: 1rem;
-  resize: vertical;
-  outline: none;
+/* === Edit form === */
+.edit-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
-.edit-form textarea:focus { border-color: var(--accent); }
-.form-actions { display: flex; gap: 0.75rem; }
+
+textarea {
+    width: 100%;
+    min-height: 60vh;
+    background: #000;
+    border: 1px solid #0a0;
+    color: white;
+    font: inherit;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    padding: 1rem;
+    resize: vertical;
+    outline: none;
+    box-sizing: border-box;
+}
+textarea:focus {
+    border-color: #0f0;
+    box-shadow: 0 0 5px #0a0;
+}
+
+.form-actions {
+    display: flex;
+    gap: 0.75rem;
+}
+
 .btn-save {
-  background: var(--accent);
-  color: var(--bg);
-  border: none;
-  padding: 0.6rem 1.5rem;
-  border-radius: 4px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
+    background: none;
+    border: none;
+    color: white;
+    font: inherit;
+    cursor: pointer;
+    padding: 0;
 }
-.btn-save:hover { opacity: 0.9; }
+.btn-save::before {
+    content: "[";
+}
+.btn-save::after {
+    content: "]";
+}
+.btn-save:hover {
+    color: #0f0;
+    text-shadow: 0 0 8px #0f0;
+}
+
 .btn-cancel {
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--muted);
-  padding: 0.6rem 1.25rem;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-block;
+    background: none;
+    border: none;
+    color: #888;
+    font: inherit;
+    cursor: pointer;
+    padding: 0;
+    text-decoration: none;
+    display: inline-block;
+}
+.btn-cancel::before {
+    content: "[";
+}
+.btn-cancel::after {
+    content: "]";
+}
+.btn-cancel:hover {
+    color: white;
+    text-shadow: none;
 }
-.btn-cancel:hover { border-color: var(--text); color: var(--text); text-decoration: none; }
 
-.empty { color: var(--muted); font-style: italic; padding: 1rem; text-align: center; }
+/* === Empty state === */
+.empty {
+    color: #666;
+    font-style: italic;
+    padding: 1rem;
+    text-align: center;
+}
 
+/* === hr === */
+hr {
+    border: none;
+    border-top: 1px dashed #0a0;
+    margin: 1rem 0;
+}
+
+/* === Scrollbars === */
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #111;
+}
+::-webkit-scrollbar-thumb {
+    background: #0a0;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #0f0;
+}
+
+/* === Responsive === */
 @media (max-width: 600px) {
-  header { padding: 0.5rem 0.75rem; }
-  main { padding: 1rem 0.75rem; }
-  .edit-form textarea { min-height: 50vh; }
+    header {
+        padding: 0.5rem 0.75rem;
+    }
+    main {
+        padding: 1rem 0.75rem;
+    }
+    textarea {
+        min-height: 50vh;
+    }
 }
diff --git a/main.go b/main.go
index c30ec6e..4dc8cd5 100644
--- a/main.go
+++ b/main.go
@@ -44,7 +44,7 @@ var tmpl = template.Must(template.New("").Parse(`<!DOCTYPE html>
     <a href="/">~</a>
     {{range .Crumbs}}<span class="sep">/</span><a href="{{.URL}}">{{.Name}}</a>{{end}}
   </nav>
-  {{if .CanEdit}}<a class="edit-btn" href="?edit">Edit</a>{{end}}
+  {{if .CanEdit}}<a class="edit-btn" href="?edit">EDIT</a>{{end}}
 </header>
 <main>
 {{if .EditMode}}
@@ -306,4 +306,3 @@ func pageTitle(urlPath string) string {
 	parts := strings.Split(strings.Trim(urlPath, "/"), "/")
 	return parts[len(parts)-1]
 }
-