more mobile display improvements

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;
-}
+}
+
+

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>
   );

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",
       }}>
 

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,

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",

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;
+       }
+  }
+
 }