From c4f0767b58e9f4ab35edeab045f634d38e3a2698 Mon Sep 17 00:00:00 2001
From: Caleb Braaten <git@cbraaten.dev>
Date: Tue, 20 Jan 2026 16:53:03 -0800
Subject: [PATCH] ASSISTED: clean up some styles. Add retro list look for small
 viewport.

---
 src/frontend/styles.css | 345 ++++++++++++++++------------------------
 1 file changed, 138 insertions(+), 207 deletions(-)

diff --git a/src/frontend/styles.css b/src/frontend/styles.css
index 046368f..b518f10 100644
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@@ -5,6 +5,7 @@ html {
     --text-primary: #4c4f69;
     --text-secondary: #6c6f85;
     --border-color: #dce0e8;
+    overflow-x: hidden;
 }
 
 /* Catppuccin Latte - Light theme */
@@ -145,6 +146,7 @@ body {
     align-items: flex-start;
     min-height: 100vh;
     width: 100vw;
+    overflow-x: hidden;
 }
 
 /* Hamburger Menu Styles */
@@ -775,8 +777,6 @@ h1 {
 .archive-container::-webkit-scrollbar-thumb:hover {
     background: var(--text-primary);
 }
-    margin-left: auto;
-}
 
 /* Blog Post Styles */
 .blog-post {
@@ -1057,190 +1057,6 @@ h1 {
     line-height: 1.4;
 }
 
-/* Responsive adjustments */
-@media (max-width: 1200px) {
-    aside {
-        width: 300px;
-    }
-}
-
-@media (max-width: 1024px) {
-    body {
-        flex-direction: column-reverse;
-    }
-
-    main {
-        max-width: 100%;
-        width: 100%;
-        padding: 30px 20px;
-    }
-
-    aside {
-        width: auto;
-        max-width: 100%;
-        position: static;
-        max-height: none;
-        border-left: none;
-        border-top: 1px solid var(--border-color);
-        padding: 20px;
-        margin: auto;
-    }
-
-    .blog-post {
-        max-width: 750px;
-        margin: 0 auto;
-    }
-
-    /* Show hamburger button and hide aside on mobile/tablet */
-    .hamburger-button {
-        display: block;
-    }
-
-    aside {
-        position: fixed;
-        top: 0;
-        right: -100%;
-        width: 80%;
-        max-width: 340px;
-        height: 100vh;
-        padding-top: 80px;
-        background-color: var(--bg-primary);
-        z-index: 999;
-        border-left: 1px solid var(--border-color);
-        border-top: none;
-        transition: right 0.3s ease;
-        overflow-y: auto;
-    }
-
-    /* Show aside when checkbox is checked */
-    .menu-toggle:checked ~ aside {
-        right: 0;
-    }
-
-    /* Transform hamburger to X when checked */
-    .menu-toggle:checked ~ .hamburger-button span:nth-child(1) {
-        transform: rotate(45deg) translate(8px, 8px);
-    }
-
-    .menu-toggle:checked ~ .hamburger-button span:nth-child(2) {
-        opacity: 0;
-    }
-
-    .menu-toggle:checked ~ .hamburger-button span:nth-child(3) {
-        transform: rotate(-45deg) translate(9px, -9px);
-    }
-}
-
-@media (max-width: 768px) {
-    main {
-        padding: 20px 16px;
-    }
-
-    aside {
-        padding: 20px 16px;
-    }
-
-    .blog-post {
-        padding: 20px 0;
-    }
-
-    .post-title {
-        font-size: 32px;
-    }
-
-    .post-content {
-        font-size: 17px;
-    }
-
-    .post-content .lead {
-        font-size: 20px;
-    }
-
-    .post-content h2 {
-        font-size: 26px;
-        margin: 36px 0 20px 0;
-    }
-
-    .post-content h3 {
-        font-size: 21px;
-        margin: 28px 0 16px 0;
-    }
-
-    .post-content blockquote {
-        font-size: 18px;
-        padding: 16px 20px;
-    }
-
-    .post-content pre {
-        padding: 16px;
-        margin: 24px -16px;
-        border-radius: 0;
-    }
-
-    .profile-picture {
-        width: 80px;
-        height: 80px;
-    }
-
-    .profile-name {
-        font-size: 20px;
-    }
-
-    .social-links a {
-        width: 38px;
-        height: 38px;
-    }
-
-    .social-links svg {
-        width: 20px;
-        height: 20px;
-    }
-}
-
-@media (max-width: 480px) {
-    .post-title {
-        font-size: 28px;
-    }
-
-    .back-button {
-        margin-bottom: 12px;
-    }
-
-    .back-link {
-        font-size: 13px;
-    }
-
-    .back-arrow {
-        font-size: 15px;
-        margin-right: 6px;
-    }
-
-    .post-content h2 {
-        font-size: 24px;
-    }
-
-    .post-content h3 {
-        font-size: 22px;
-    }
-
-    .post-nav-link {
-        padding: 10px 12px;
-        font-size: 0.9rem;
-    }
-
-    .nav-title {
-        font-size: 0.9rem;
-    }
-
-    .tag-pills {
-        display: flex;
-    }
-
-    .tag-pill {
-        padding: 6px 12px;
-    }
-}
-
 /* Home Page Styles */
 .home-header {
     text-align: center;
@@ -1378,48 +1194,163 @@ h1 {
     margin: 0;
 }
 
-/* Responsive home page styles */
-@media (max-width: 768px) {
-    .home-header {
-        margin-bottom: 32px;
-        padding-bottom: 24px;
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+    body {
+        flex-direction: column-reverse;
+        overflow-x: hidden;
+        width: 100vw;
+        max-width: 100vw;
     }
 
-    .page-title {
-        font-size: 36px;
+    main {
+        max-width: 100%;
+        width: 100%;
+        padding: 30px 20px;
+        overflow-x: hidden;
+        box-sizing: border-box;
     }
 
-    .page-subtitle {
-        font-size: 18px;
+    aside {
+        width: auto;
+        max-width: 100%;
+        position: static;
+        max-height: none;
+        border-left: none;
+        border-top: 1px solid var(--border-color);
+        padding: 20px;
+        margin: auto;
     }
 
+    .blog-post {
+        max-width: 750px;
+        margin: 0 auto;
+    }
+
+    /* Show hamburger button and hide aside on mobile/tablet */
+    .hamburger-button {
+        display: block;
+    }
+
+    aside {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 80%;
+        max-width: 340px;
+        height: 100vh;
+        padding-top: 80px;
+        background-color: var(--bg-primary);
+        z-index: 999;
+        border-left: 1px solid var(--border-color);
+        border-top: none;
+        transition: right 0.3s ease;
+        overflow-y: auto;
+    }
+
+    /* Show aside when checkbox is checked */
+    .menu-toggle:checked ~ aside {
+        right: 0;
+    }
+
+    /* Transform hamburger to X when checked */
+    .menu-toggle:checked ~ .hamburger-button span:nth-child(1) {
+        transform: rotate(45deg) translate(8px, 8px);
+    }
+
+    .menu-toggle:checked ~ .hamburger-button span:nth-child(2) {
+        opacity: 0;
+    }
+
+    .menu-toggle:checked ~ .hamburger-button span:nth-child(3) {
+        transform: rotate(-45deg) translate(9px, -9px);
+    }
+}
+
+/* Retro list style for smaller screens when aside shifts off screen */
+@media (max-width: 1024px) {
     .posts-list {
-        gap: 24px;
+        gap: 0;
+        overflow-x: hidden;
     }
 
     .post-card {
-        padding: 24px;
+        background-color: transparent;
+        border: none;
+        border-radius: 0;
+        padding: 24px 0;
+        border-bottom: 1px solid var(--border-color);
+        transition: none;
+        overflow-x: hidden;
+        width: 100%;
+    }
+
+    .post-card:last-child {
+        border-bottom: none;
+    }
+
+    .post-card:hover {
+        border-color: var(--border-color);
+        transform: none;
+        box-shadow: none;
+    }
+
+    .post-card-header {
+        margin-bottom: 16px;
     }
 
     .post-card-title {
         font-size: 24px;
-    }
-}
-
-@media (max-width: 480px) {
-    .page-title {
-        font-size: 32px;
+        font-weight: 600;
+        line-height: 1.4;
+        margin: 0 0 8px 0;
+        letter-spacing: 0;
     }
 
-    .post-card {
-        padding: 20px;
+    .post-card-link {
+        transition: none;
     }
 
-    .post-card-title {
-        font-size: 22px;
+    .post-card-link:hover {
+        color: var(--text-primary);
+        text-decoration: underline;
+    }
+
+    .post-card-meta {
+        font-size: 14px;
+        margin-bottom: 12px;
+    }
+
+    .post-card-tags {
+        gap: 6px;
+        margin-bottom: 12px;
+        overflow-x: hidden;
+        width: 100%;
+    }
+
+    .post-card-summary {
+        margin-bottom: 12px;
     }
 
     .post-card-summary p {
         font-size: 15px;
     }
+
+    .post-card-footer {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: none;
+    }
+
+    .read-more-link {
+        padding: 0;
+        border-radius: 0;
+        transition: none;
+    }
+
+    .read-more-link:hover {
+        background-color: transparent;
+        color: var(--text-primary);
+        text-decoration: underline;
+    }
 }