themes

public/styles/common.css

@@ -201,7 +201,7 @@ body {
 
 header,
 footer {
-  padding: 20px;
+  padding: 30px 20px;
   font-size: 1.5em;
   display: flex;
   align-items: center;
@@ -270,14 +270,18 @@ pre {
     "calt" 0;
 }
 
-@media (max-width: 768px) {
-  header {
-    font-size: 0.9em;
-    padding: 15px;
-  }
-
+@media (max-width: 1024px) {
+  header,
   footer {
-    font-size: 0.9em;
-    padding: 15px;
+    font-size: 1.2em;
+    padding: 20px 15px;
+  }
+}
+
+@media (max-width: 640px) {
+  header,
+  footer {
+    font-size: 1em;
+    padding: 15px 10px;
   }
 }

public/styles/index.css

@@ -1,31 +1,26 @@
-html {
-  height: 100vh;
-  overflow: hidden;
-}
-
-body {
+/* List pages only - no scroll */
+body:has(.content) {
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
 }
 
-/* Fixed header and footer for list pages */
-body:has(.content) header {
-  flex-shrink: 0;
+body:has(.content) > header {
+  flex: 0 0 auto;
 }
 
-body:has(.content) footer {
-  flex-shrink: 0;
-}
-
-.main {
-  flex: 1;
-  overflow: hidden;
+body:has(.content) > .main {
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
   align-items: center;
 }
 
+body:has(.content) > footer {
+  flex: 0 0 auto;
+}
+
 .content {
   width: 100%;
   height: 100%;
@@ -35,29 +30,17 @@ body:has(.content) footer {
   gap: 80px;
   align-items: center;
   justify-content: space-between;
-  overflow: hidden;
 }
 
 .topics {
-  font-size: 3em;
-  max-height: calc(100vh - 200px);
-  column-count: 2;
-  column-gap: 80px;
+  font-size: clamp(1.5em, 4vw, 3em);
+  max-height: 100%;
+  column-width: 300px;
+  column-gap: clamp(20px, 4vw, 60px);
   column-fill: auto;
   margin: 0;
   padding: 0;
   list-style: none;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.topics::-webkit-scrollbar {
-  display: none;
-}
-
-.topics {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
 }
 
 .topics li:first-child {
@@ -69,7 +52,7 @@ body:has(.content) footer {
 }
 
 .posts {
-  font-size: 2.2em;
+  font-size: clamp(1.2em, 3vw, 2.2em);
   text-align: right;
   display: flex;
   flex-direction: column;
@@ -128,21 +111,35 @@ body:has(.topics:only-child) .content {
 }
 
 body:has(.topics:only-child) .topics {
-  column-count: 2;
+  column-width: 300px;
   column-fill: auto;
-  max-width: 1200px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
+  body:has(.content) {
+    height: 100vh;
+  }
+
+  .content {
+    flex-direction: column;
+    padding: 20px;
+    gap: 40px;
+    justify-content: flex-start;
+    overflow-y: auto;
+  }
+
   .topics {
     font-size: 2em;
-    padding: 0 20px;
+    column-width: unset;
     column-count: 1;
+    max-height: unset;
+    width: 100%;
   }
 
   .posts {
-    font-size: 1.47em;
-    padding: 0 20px;
+    font-size: 1.5em;
+    text-align: left;
+    width: 100%;
   }
 
   .topic a {

public/styles/posts.css

@@ -1,28 +1,3 @@
-body:has(.post-container) {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-}
-
-body:has(.post-container) > header {
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: var(--background);
-}
-
-body:has(.post-container) .main {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-body:has(.post-container) > footer {
-  flex-shrink: 0;
-}
-
 li {
   margin: 5px 0;
 }

src/components/Footer.astro

@@ -29,11 +29,23 @@
     text-decoration: none;
     cursor: pointer;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 1024px) {
+    footer {
+      flex-direction: column;
+      gap: 15px;
+    }
+    .footer-links-left,
+    .footer-links-right {
+      gap: 15px;
+    }
+  }
+
+  @media (max-width: 640px) {
     .footer-links-left,
     .footer-links-right {
       flex-direction: column;
-      gap: 5px;
+      gap: 10px;
+      align-items: center;
     }
   }
 </style>

src/components/Header.astro

@@ -29,18 +29,22 @@ const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
     cursor: pointer;
     user-select: none;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 640px) {
     header {
       flex-direction: row;
-      flex-wrap: wrap;
+      justify-content: space-between;
       gap: 10px;
     }
     .terminal-container {
       flex: 1 1 auto;
       min-width: 0;
     }
+    .terminal-prompt {
+      font-size: 0.9em;
+    }
     #theme-toggle {
       flex: 0 0 auto;
+      font-size: 1.2em;
     }
   }
 </style>