Merge pull request #8 from barrett-ruth/fix/mobile

fix mobile home view

public/styles/common.css

@@ -264,9 +264,11 @@ pre {
 @media (max-width: 768px) {
   header {
     font-size: 0.9em;
+    padding: 15px;
   }
 
   footer {
     font-size: 0.9em;
+    padding: 15px;
   }
 }

public/styles/index.css

@@ -3,9 +3,8 @@ body {
   display: flex;
   flex-direction: column;
   overscroll-behavior: none;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .content {
@@ -25,7 +24,7 @@ body {
 }
 
 .posts {
-  font-size: 2em;
+  font-size: 2.2em;
   text-align: right;
   flex: 1;
 }
@@ -75,9 +74,15 @@ ul {
 @media (max-width: 768px) {
   .topics {
     font-size: 1.8em;
+    padding: 0 20px;
   }
 
   .posts {
-    font-size: 1.2em;
+    font-size: 1.8em;
+    padding: 0 20px;
+  }
+
+  .topic a {
+    margin-bottom: 15px;
   }
 }

public/styles/posts.css

@@ -40,14 +40,14 @@ li {
 }
 
 .post-meta {
-  font-size: 1.3em;
+  font-size: 1.6em;
   color: var(--text);
   margin-left: 100px;
 }
 
 .post-article {
   font-size: 1.5em;
-  line-height: 1.5em;
+  line-height: 1.25;
   padding-bottom: 50px;
 }
 
@@ -67,11 +67,13 @@ article h3,
 
 article h1,
 .post-article h1 {
+  font-size: 1.8em;
   padding-left: 1.5em;
 }
 
 article h2,
 .post-article h2 {
+  font-size: 1.2em;
   padding-left: 2em;
 }
 
@@ -141,28 +143,16 @@ article pre {
   font-size: 0.8em !important;
 }
 
-.post-article h1:has(.date),
-.post-article h2:has(.date) {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-}
-
-.post-article h1 .date,
-.post-article h2 .date {
-  font-weight: normal;
-}
-
 @media (max-width: 768px) {
   .post-title {
-    font-size: 1.8em;
+    font-size: 3em;
   }
 
   .post-meta {
-    font-size: 1.2em;
+    font-size: 1.6em;
   }
 
   .post-article {
-    font-size: 1em;
+    font-size: 1.3em;
   }
 }

src/components/Header.astro

@@ -31,11 +31,16 @@ const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
   }
   @media (max-width: 768px) {
     header {
-      flex-direction: column;
-      align-items: flex-start;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .terminal-container {
+      flex: 1 1 auto;
+      min-width: 0;
     }
     #theme-toggle {
-      align-self: flex-end;
+      flex: 0 0 auto;
     }
   }
 </style>

src/content/algorithms/leetcode-daily.mdx

@@ -4,7 +4,7 @@ date: "11/9/2024"
 useKatex: true
 ---
 
-# [count good numbers](https://leetcode.com/problems/count-good-numbers) <span class="date">13/12/2024</span>
+# [count good numbers](https://leetcode.com/problems/count-good-numbers)
 
 ## understanding the problem
 
@@ -38,7 +38,7 @@ public:
 };
 ```
 
-# [minimum number of operations to make array distinct](https://leetcode.com/problems/minimum-number-of-operations-to-make-elements-in-array-distinct) <span class="date">04/10/2024</span>
+# [minimum number of operations to make array distinct](https://leetcode.com/problems/minimum-number-of-operations-to-make-elements-in-array-distinct)
 
 ## understanding the problem
 
@@ -55,7 +55,7 @@ The solution is optimal, considering the least amount of elements possible in:
 - <u>Time Complexity</u>: $O(n)$
 - <u>Space Complexity</u>: $\Theta(1)$
 
-# [count the number of fair pairs](https://leetcode.com/problems/count-the-number-of-fair-pairs/) <span class="date">10/12/2024</span>
+# [count the number of fair pairs](https://leetcode.com/problems/count-the-number-of-fair-pairs/)
 
 ## problem statement
 
@@ -145,7 +145,7 @@ The second approach is _asymptotically_ equivalent. However, it's still worth co
   respect to the second approach.
 - <u>Space Complexity</u>: $\Theta(1)$ for both.
 
-# [most beautiful item for each query](https://leetcode.com/problems/most-beautiful-item-for-each-query/description/) <span class="date">09/12/2024</span>
+# [most beautiful item for each query](https://leetcode.com/problems/most-beautiful-item-for-each-query/description/)
 
 ## problem statement
 
@@ -212,7 +212,7 @@ Let `n=len(items)` and `m=len(queries)`. There may be more items than queries, o
   allocated. If `queries`/`items` cannot be modified in-place, increase the
   space complexity by $m$/$n$ respectively.
 
-# [shortest subarray with or at least k ii](https://leetcode.com/problems/shortest-subarray-with-or-at-least-k-ii/description/) <span class="date">09/11/2024</span>
+# [shortest subarray with or at least k ii](https://leetcode.com/problems/shortest-subarray-with-or-at-least-k-ii/description/)
 
 ## problem statement
 
@@ -285,7 +285,7 @@ Note that the size of the frequency map is bounded by $lg_{2}({10^9})\approx30$.
   considered at least once and takes $O(1)$ work each to find the element-wise
   bitwise OR.
 
-# [minimum array end](https://leetcode.com/problems/minimum-array-end/) <span class="date">09/10/2024</span>
+# [minimum array end](https://leetcode.com/problems/minimum-array-end/)
 
 ## problem statement
 

src/content/meditations/suck-less-or-suck-more.mdx

@@ -15,7 +15,7 @@ Maybe this is the point. But I can't avoid [foxglove](https://wiki.ros.org/Foxgl
 
 I've switched to [spectrwm](https://github.com/conformal/spectrwm) (essentially [this](https://github.com/conformal/spectrwm)) and [ghostty](https://ghostty.org/).
 
-# update: goodbye xorg <span class="date">09/10/2025</span>
+# update: goodbye xorg
 
 I am now sick of Xorg and their lack of per-monitor DPI scaling. The new stack is:
 

src/content/software/designing-this-website.mdx

@@ -3,7 +3,7 @@ title: "designing this website"
 date: "18/06/2024"
 ---
 
-## update: port to astro <span class="date">22/05/2025</span>
+## update: port to astro
 
 I'm expanding my website to include more detailed algorithms, implementations, write-ups, and low-level optimization case studies.
 
@@ -55,7 +55,7 @@ Building this website with truly bare-bones technologies has made me appreciate
 - Reusing HTML, styles, and JavaScript feels extremely fragile. Innovative type-safe, optimized, and composable solutions definitely have their place in the web.
 - **You can be efficient with HTML, JS, and CSS.** My iteration speed on on this site versus other React.js/MDX blogs I have worked on is the same if not faster. While this may be a testament to my lack of JavaScript experience, I think people conclude too early that their task is beyond the technologies that form the foundation of the web today.
 
-## the setup <span class="date">15/06/2024</span>
+## the setup
 
 This website is pure HTML, CSS, and JavaScript.