From 8817db782f638a8918e49c1073eee005879d3f24 Mon Sep 17 00:00:00 2001
From: "Hunter W." <kfateweaver@gmail.com>
Date: Wed, 10 Jun 2026 01:14:00 -0400
Subject: [PATCH] more mobile display improvements

---
 app/globals.css               | 31 ++++++++++++++++++++++++++++++-
 app/project/[slug]/page.tsx   | 32 ++------------------------------
 components/Nav.tsx            |  2 +-
 components/ProjectCard.tsx    |  2 ++
 components/ProjectsGrid.tsx   |  1 +
 styles/markdown-container.css | 18 ++++++++++++++++++
 6 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a64fc34..d6ad20e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -139,6 +139,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+nav {
+    font-size: 13px;
+}
+
 ::selection {
   background: rgba(110, 231, 183, 0.25);
   color: var(--fg);
@@ -151,6 +155,19 @@ body {
 
 .expand-on-hover-button {
   transition: all 0.2s ease;
+
+  font-family: var(--mono);
+  font-size: 15;
+  color: var(--fg);
+  border: 1px solid var(--border);
+  background-color: var(--bg);
+  height: 3em;
+  display: block;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+  width: 10em;
+  border-radius: var(--radius-md);
 }
 .expand-on-hover-button:hover {
   scale: 1.05;
@@ -158,13 +175,23 @@ body {
 
 
 @media (max-width: 640px) {
+
   h1 {
     font-size: 32px !important;
   }
+
   .footer {
     flex-direction: column;
     height: 36;
   }
+
+  nav {
+    font-size: 16px;
+  }
+.project-grid {
+  scrollbar-width: 10px;
+}
+  
 }
 
 @keyframes wiggle {
@@ -178,4 +205,6 @@ body {
 
 .wiggle {
   animation: wiggle 0.4s ease-in-out infinite;
-}
\ No newline at end of file
+}
+
+
diff --git a/app/project/[slug]/page.tsx b/app/project/[slug]/page.tsx
index a02ad61..82005e1 100644
--- a/app/project/[slug]/page.tsx
+++ b/app/project/[slug]/page.tsx
@@ -59,21 +59,7 @@ export default function ProjectPage({
         }}
         
           className="expand-on-hover-button"
-          style={{
-            fontFamily: "var(--mono)",
-            fontSize: 15,
-            color: "var(--fg)",
-            border: "1px solid var(--border)",
-            backgroundColor: "var(--bg)",
-            height: "3em",
-            display: "block",
-            alignContent: "center",
-            alignItems: "center",
-            textAlign: "center",
-            width: "10em",
-            borderRadius: "var(--radius-md)",
-            
-          }} href={"#"}>Back To Top</Link>
+          href={"#"}>Back To Top</Link>
 
           <Link onClick={(e)=>{
           window.scrollTo({
@@ -84,21 +70,7 @@ export default function ProjectPage({
         }}
         
           className="expand-on-hover-button"
-          style={{
-            fontFamily: "var(--mono)",
-            fontSize: 15,
-            color: "var(--fg)",
-            border: "1px solid var(--border)",
-            backgroundColor: "var(--bg)",
-            height: "3em",
-            display: "block",
-            alignContent: "center",
-            alignItems: "center",
-            textAlign: "center",
-            width: "10em",
-            borderRadius: "var(--radius-md)",
-            
-          }} href={"/project"}>More Projects</Link>
+          href={"/project"}>More Projects</Link>
         </div>
     </div>
   );
diff --git a/components/Nav.tsx b/components/Nav.tsx
index 645829c..384c10d 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -23,7 +23,7 @@ export default function Nav({ section }: Props) {
         gap: 0,
         borderBottom: "1px solid var(--border)",
         fontFamily: "var(--mono)",
-        fontSize: 13,
+     
         userSelect: "none",
       }}>
 
diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
index 5692e47..2d5ff03 100644
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -113,9 +113,11 @@ export default function ProjectCard({ project, visible, selected = false, setSel
         className="project-card"
         style={{
           minWidth: "10em",
+          maxWidth: "90vw",
           overflow: "hidden",
           textDecoration: "none",
           padding: 28,
+          marginTop: 3,
           background: hovered ? "var(--surface-hover)" : "var(--surface)",
           border: `2px solid var(--accent)`,
           borderRadius: 8,
diff --git a/components/ProjectsGrid.tsx b/components/ProjectsGrid.tsx
index 70e1fae..3448ada 100644
--- a/components/ProjectsGrid.tsx
+++ b/components/ProjectsGrid.tsx
@@ -131,6 +131,7 @@ const updateHeight = useCallback((projectId: number, heightPx: number) => {
       <div style={{ padding: "48px 0", minWidth: 0 }}>
         {header}
         <div
+        className={"project-grid"}
           ref={containerRef}
           style={{
             display: "flex",
diff --git a/styles/markdown-container.css b/styles/markdown-container.css
index fd0ca48..d4127a2 100644
--- a/styles/markdown-container.css
+++ b/styles/markdown-container.css
@@ -67,4 +67,22 @@
         font-family: var(--mono);
         margin-bottom: 0.1em;
     }
+
+    img {
+        max-width: 80vw;
+    }
+
+    video {
+        max-width: 90vw;
+    }
+}
+
+@media (max-width: 768px) {
+
+    .markdown-container {
+       div:last-of-type {
+            margin-bottom: 4em !important;
+       }
+  }
+
 }
\ No newline at end of file