From 7bed4828ac6e66bf2e8f9d139a7b40fab108e608 Mon Sep 17 00:00:00 2001
From: Rasmus <rsbendtsen@gmail.com>
Date: Mon, 22 Dec 2025 23:33:33 +0100
Subject: [PATCH] css makeover

---
 static/style.css     | 276 +++++++++++++++++++++++--------------------
 templates/index.html |   6 +-
 2 files changed, 156 insertions(+), 126 deletions(-)

diff --git a/static/style.css b/static/style.css
index 1939f3f..acef27e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,191 +1,217 @@
 /* --- 1. CORE THEME & VARIABLES --- */
 :root {
-    --primary: #2563eb;
-    --text: #1e1e1e;
-    --light-bg: #f9fafb;
-    --border: #e5e7eb;
-    --success: #059669; /* For AI labels */
+    --bg-deep: #0a0f14;
+    --arduino-teal: #00979d;      
+    --terminal-yellow: #ffcc00;   /* Brighter, more dominant Yellow */
+    --panel-blue: #161e26;
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --text-main: #f8fafc;
+    --text-dim: #94a3b8;
 }
 
+/* --- Global Reset --- */
+* { box-sizing: border-box; }
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     line-height: 1.6;
     color: var(--text);
     margin: 0;
-    background-color: #f0ecec;
+    background-color: var(--bg-deep);
+    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+    background-size: 25px 25px;
+    color: var(--text-main);
+    font-family: 'Space Grotesk', sans-serif;
+    line-height: 1.6;
 }
 
 .container {
-    max-width: 1200px;
+    max-width: 1000px;
     margin: 0 auto;
     padding: 0 20px;
 }
 
-/* --- 2. NAVIGATION & HEADER --- */
+/* --- Navigation --- */
 header {
-    border-bottom: 1px solid var(--border);
-    padding: 1.5rem 0;
-    background: white;
+    background: rgba(10, 15, 20, 0.9);
+    backdrop-filter: blur(10px);
+    border-bottom: 2px solid var(--terminal-yellow);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
 }
 
-nav {
+nav.container {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .logo {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: var(--primary);
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--terminal-yellow);
     text-decoration: none;
+    font-family: 'JetBrains Mono', monospace;
 }
 
 .nav-links {
     list-style: none;
     display: flex;
-    gap: 20px;
+    gap: 25px;
     margin: 0;
 }
 
 .nav-links a {
     text-decoration: none;
-    color: var(--text);
-    font-weight: 500;
+    color: var(--text-dim);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.85rem;
+    transition: 0.3s;
 }
 
-/* --- 3. BLOG POST CARDS --- */
-.post-item {
-    background: #ffffff;
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 24px;
-    margin-bottom: 20px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    position: relative;
-    top: 0;
+.nav-links a:hover { color: var(--arduino-teal); }
+
+/* --- Hero & Fixed Typewriter --- */
+.hero { padding: 80px 0 40px 0; }
+
+.typewriter-wrapper {
+    width: fit-content; /* FIX: Prevents cursor from flying to page edge */
+    margin: 0;
 }
 
-.post-item:hover {
-    top: -5px;
-    border-color: var(--primary);
-    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1),
-                0 8px 10px -6px rgba(37, 99, 235, 0.1);
+.hero h2 {
+    font-size: 2rem;
+    color: white;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    border-right: 4px solid var(--terminal-yellow);
+    animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
 }
 
-.post-item:hover h3 a { color: var(--primary); }
+@keyframes typing { from { width: 0 } to { width: 100% } }
+@keyframes blink { 50% { border-color: transparent } }
 
-/* --- 4. INTERACTIVE DEMO COMPONENT --- */
+/* --- AI Terminal --- */
 .interactive-demo {
-    width: 100%;
-    margin: 2.5rem 0;
-    padding: 1.5rem;
-    background: #ffffff;
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+    background: var(--panel-blue);
+    border: 1px solid var(--terminal-yellow);
+    border-radius: 4px;
+    margin: 40px 0;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+}
+
+#responseContainer {
+    height: 380px;
+    overflow-y: auto;
+    padding: 25px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
+    background: #05070a;
 }
 
 .input-group {
     display: flex;
-    gap: 10px;
-    margin-bottom: 1rem;
+    background: var(--panel-blue);
+    padding: 15px;
+    gap: 15px;
+    border-top: 1px solid var(--glass-border);
 }
 
-.interactive-demo input {
-    flex-grow: 1;
-    padding: 14px;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    font-size: 1rem;
+input#userInput {
+    flex: 1;
+    background: #0a0f14;
+    border: 1px solid var(--arduino-teal);
+    border-radius: 4px;
+    padding: 12px;
+    color: var(--terminal-yellow);
+    font-family: 'JetBrains Mono', monospace;
     outline: none;
-    transition: border-color 0.2s, box-shadow 0.2s;
 }
 
-.interactive-demo input:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-}
-
-.interactive-demo button {
-    padding: 10px 20px;
-    color: white;
-    background-color: var(--primary);
+#submitBtn {
+    background: var(--terminal-yellow);
+    color: #000;
     border: none;
-    border-radius: 8px;
+    padding: 0 25px;
+    border-radius: 4px;
+    font-weight: 900;
+    font-family: 'JetBrains Mono', monospace;
     cursor: pointer;
-    font-weight: 600;
-    transition: transform 0.1s, opacity 0.2s;
+    transition: 0.2s;
 }
 
-.interactive-demo button:hover:not(:disabled) {
-    opacity: 0.9;
-    transform: translateY(-1px);
+#submitBtn:hover { background: white; }
+
+/* --- Article Cards --- */
+.post-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    padding-bottom: 60px;
 }
 
-.interactive-demo button:disabled {
-    background-color: #9ca3af;
-    cursor: not-allowed;
-}
-
-/* Response Box & Messages */
-#responseContainer {
-    padding: 1.25rem;
-    height: 450px;
-    background-color: var(--light-bg);
-    color: var(--text);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    overflow-y: auto;
-    font-family: 'Consolas', 'Monaco', monospace;
-    font-size: 0.95rem;
-    line-height: 1.6;
-}
-
-.msg {
-    margin-bottom: 1.25rem;
-    padding-bottom: 0.75rem;
-    border-bottom: 1px solid rgba(0,0,0,0.05);
-}
-
-.msg:last-child { border-bottom: none; }
-
-.user-label { color: var(--primary); font-weight: bold; font-size: 0.8rem; text-transform: uppercase; }
-.ai-label { color: var(--success); font-weight: bold; font-size: 0.8rem; text-transform: uppercase; }
-
-.msg-text {
-    display: block;
-    margin-top: 5px;
-    white-space: pre-wrap; /* Keeps formatting for lists/code */
-}
-
-/* --- 5. ANIMATIONS & LOADERS --- */
-#loader {
+.post-item {
+    background: var(--panel-blue);
+    border: 1px solid var(--glass-border);
+    padding: 30px;
+    border-radius: 0; /* Boxy industrial look */
     display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 0 0 15px 5px;
-    color: var(--primary);
-    font-weight: 500;
+    flex-direction: column;
+    transition: 0.3s;
+    border-left: 4px solid var(--glass-border);
 }
 
-.spinner {
-    width: 20px;
-    height: 20px;
-    border: 3px solid rgba(37, 99, 235, 0.1);
-    border-radius: 50%;
-    border-top-color: var(--primary);
-    animation: spin 0.8s linear infinite;
+.post-item:hover {
+    border-left-color: var(--terminal-yellow);
+    background: #1c2630;
+    transform: translateX(5px);
 }
 
-@keyframes spin { to { transform: rotate(360deg); } }
+.post-item .date {
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--terminal-yellow);
+    font-size: 0.8rem;
+    margin-bottom: 10px;
+}
 
-/* --- 6. FOOTER --- */
-footer {
-    text-align: center;
-    padding: 3rem 0;
-    margin-top: 4rem;
-    color: #9ca3af;
-    border-top: 1px solid var(--border);
+.post-item h3 { margin: 0 0 15px 0; }
+
+.post-item h3 a {
+    color: var(--arduino-teal);
+    text-decoration: none;
+    font-size: 1.25rem;
+}
+
+.post-item p {
+    color: var(--text-dim);
+    font-size: 0.95rem;
+    margin-bottom: 25px;
+}
+
+/* Tags Layout Fix */
+.tags {
+    margin-top: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px; /* Better spacing */
+}
+
+.tag-badge {
+    background: rgba(0, 151, 157, 0.05);
+    border: 1px solid var(--arduino-teal);
+    color: var(--arduino-teal);
+    padding: 5px 12px;
+    font-size: 0.7rem;
+    text-decoration: none;
+    font-family: 'JetBrains Mono', monospace;
+    transition: 0.2s;
+}
+
+.tag-badge:hover {
+    background: var(--terminal-yellow);
+    border-color: var(--terminal-yellow);
+    color: #000;
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e6d66ca..8639993 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,11 @@
 
 {% block content %}
 <section class="hero">
-    <h2 style="color:  #2563eb; margin-bottom : 10%">I write about Self-hosting, Arduino, STM32.</h2>
+    <div class="container">
+        <div class="typewriter-wrapper">
+            <h2>I write about Self-hosting, Arduino, STM32.</h2>
+        </div>
+    </div>
 </section>
 
 <div class="post-list">