better mobile, minor touches to color & "title"

fallow64 · Mar 31, 2024 · 17afad2 · 17afad2
1 parent 98df4af
commit 17afad2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -7,13 +7,13 @@ import pfpImage from "../images/pfp.png";
   <Image id="pfp" loading="eager" alt="Austin Schneider" src={pfpImage} />
   <div id="text">
     <h1>Austin Schneider</h1>
-    <span>Software Developer</span>
+    <span><em>Software Developer</em></span>
   </div>
 
   <style>
     #header-container {
       height: 100px;
-      margin: 10px;
+      margin: 10px 10px 10px 0px;
 
       display: flex;
     }
@@ -28,7 +28,7 @@ import pfpImage from "../images/pfp.png";
     }
 
     #text > span {
-      color: var(--darkgray);
+      color: var(--brown);
     }
 
     #pfp {
@@ -37,5 +37,20 @@ import pfpImage from "../images/pfp.png";
       margin-right: 30px;
       border-radius: 20px;
     }
+
+    @media only screen and (max-width: 600px) {
+      #header-container {
+        height: auto;
+        display: block;
+      }
+
+      #pfp {
+        display: block;
+        width: 100%;
+        max-width: 320px;
+        height: auto;
+        margin: 0px auto 20px auto;
+      }
+    }
   </style>
 </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -25,16 +25,16 @@ const { title } = Astro.props;
   :root {
     --background: #f5f0f0;
     --main-text: #121212;
-    --lightgray: #dddddd;
-    --darkgray: #8c7d70;
 
-    --link: #704e2b;
+    --lightgray: #dddddd;
+    --brown: #704e2b;
   }
 
   html,
   body {
     margin: 20px;
     background-color: var(--background);
+    overflow-x: hidden; 
   }
 
   body {
@@ -53,7 +53,7 @@ const { title } = Astro.props;
   }
 
   a {
-    color: var(--link);
+    color: var(--brown);
   }
 
   a:visited {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -21,8 +21,8 @@ import Horizontal from "../components/Horizontal.astro";
     <ul>
       <li>
         <p>
-          <a href="https://github.com/fallow64/flama">Flama</a> - A programming language
-          written in Rust that transpiles to Minecraft blocks using <a
+          <a href="https://github.com/fallow64/flama">Flama</a> - A toy programming
+          language written in Rust that transpiles to Minecraft blocks using <a
             href="https://mcdiamondfire.com/about">DiamondFire</a
           >'s coding system.
         </p>