From 2d51c41c31341d92e5270b40ccdc9b220d164b7c Mon Sep 17 00:00:00 2001
From: Zach Magloughlin <zmagloughlin@mines.edu>
Date: Wed, 27 Nov 2024 12:35:09 -0700
Subject: [PATCH] header design tweaked for mobile

---
 webpage/index.html              |  6 ++---
 webpage/partials/_global.scss   | 13 +++++++++++
 webpage/partials/_header.scss   | 34 +++++++++++++++++++++++++++-
 webpage/partials/_projects.scss |  2 ++
 webpage/styles/main.css         | 40 ++++++++++++++++++++++++++++++++-
 webpage/styles/main.css.map     |  2 +-
 6 files changed, 91 insertions(+), 6 deletions(-)

diff --git a/webpage/index.html b/webpage/index.html
index 83a6219..d1afd78 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -25,13 +25,13 @@ <h1>Zach Magloughlin</h1>
                 <p> magloughlin.zach@gmail.com </p>
     
                 <div id="links">
-                    <div class="column" id="left">
+                    <div class="column">
                         <img src="./images/icons/linkedin.png" /> <a href="https://www.linkedin.com/in/zach-magloughlin/" target="_blank">LinkedIn</a>
                     </div>
-                    <div class="column" id="middle">
+                    <div class="column">
                         <img src="./images/icons/github.png" /> <a href="https://github.com/ZachMc21" target="_blank">GitHub</a>
                     </div>
-                    <div class="column" id="right">
+                    <div class="column">
                         <img src="./images/icons/hackerrank.png" /> <a href="https://www.hackerrank.com/profile/magloughlin_zach" target="_blank">HackerRank</a>
                     </div>
                 </div>
diff --git a/webpage/partials/_global.scss b/webpage/partials/_global.scss
index 5675f4a..0fb1c78 100644
--- a/webpage/partials/_global.scss
+++ b/webpage/partials/_global.scss
@@ -12,4 +12,17 @@ body {
 #main {
     margin: 0 auto;
     width: 80%;
+}
+
+//Mobile
+@media (max-width: 480px) {
+    html {
+        font-size: 12px;
+    }
+}
+//Tablet & Desktop
+@media (min-width: 481px) {
+    html {
+        font-size: 16px;
+    }
 }
\ No newline at end of file
diff --git a/webpage/partials/_header.scss b/webpage/partials/_header.scss
index 1500d2f..defde43 100644
--- a/webpage/partials/_header.scss
+++ b/webpage/partials/_header.scss
@@ -45,7 +45,7 @@
     font-size: 1.5rem;
 }
 #links .column img {
-    max-width: 0.8em;
+    max-width: 0.8rem;
     height: auto;
 }
 
@@ -78,4 +78,36 @@ a:visited {
 }
 #whoami p ~ p {
     margin-top: 2%;
+}
+
+//Mobile
+@media (max-width: 480px) {
+    //Adjust font sizes to avoid overflow
+    #title_inner h1 {
+        font-size: 2.5rem;
+    }
+    #title_inner p {
+        font-size: 1.2rem;
+        margin: 1rem 0;
+    }
+
+    //Make links stacked, not next to each other
+    #links {
+        display: block;
+        margin: 0 auto;
+    }
+    #links .column {
+        margin: 0 auto;
+        width: 100%;
+        font-size: 1.25rem;
+    }
+    #links .column img {
+        max-width: 1.25rem;
+        height: auto;
+    }
+
+    #whoami p {
+        font-size: 1.25rem;
+        margin: 3vw;
+    }
 }
\ No newline at end of file
diff --git a/webpage/partials/_projects.scss b/webpage/partials/_projects.scss
index 345c3c7..ba5bbd0 100644
--- a/webpage/partials/_projects.scss
+++ b/webpage/partials/_projects.scss
@@ -20,6 +20,7 @@
         font-size: 1.5rem;
         background-color: v.$light-blue;
         color: v.$navy-blue;
+        box-sizing: border-box;
         border: v.$navy-blue 2px solid;
         border-top: 0;
     }
@@ -31,6 +32,7 @@
     }
 
     .project_container {
+        box-sizing: border-box;
         width: 70%;
         padding: 3%;
         background-color: v.$light-blue;
diff --git a/webpage/styles/main.css b/webpage/styles/main.css
index b39b370..da85117 100644
--- a/webpage/styles/main.css
+++ b/webpage/styles/main.css
@@ -12,6 +12,16 @@ body {
   width: 80%;
 }
 
+@media (max-width: 480px) {
+  html {
+    font-size: 12px;
+  }
+}
+@media (min-width: 481px) {
+  html {
+    font-size: 16px;
+  }
+}
 /* HEADER */
 #header {
   position: relative;
@@ -63,7 +73,7 @@ body {
 }
 
 #links .column img {
-  max-width: 0.8em;
+  max-width: 0.8rem;
   height: auto;
 }
 
@@ -99,6 +109,32 @@ a:visited {
   margin-top: 2%;
 }
 
+@media (max-width: 480px) {
+  #title_inner h1 {
+    font-size: 2.5rem;
+  }
+  #title_inner p {
+    font-size: 1.2rem;
+    margin: 1rem 0;
+  }
+  #links {
+    display: block;
+    margin: 0 auto;
+  }
+  #links .column {
+    margin: 0 auto;
+    width: 100%;
+    font-size: 1.25rem;
+  }
+  #links .column img {
+    max-width: 1.25rem;
+    height: auto;
+  }
+  #whoami p {
+    font-size: 1.25rem;
+    margin: 3vw;
+  }
+}
 @media (max-width: 480px) {
   div #skills {
     display: block;
@@ -157,6 +193,7 @@ div#skills .column ul p {
     font-size: 1.5rem;
     background-color: rgb(203, 239, 252);
     color: #091d3a;
+    box-sizing: border-box;
     border: #091d3a 2px solid;
     border-top: 0;
   }
@@ -167,6 +204,7 @@ div#skills .column ul p {
     background-color: rgb(169, 199, 210);
   }
   .project_container {
+    box-sizing: border-box;
     width: 70%;
     padding: 3%;
     background-color: rgb(203, 239, 252);
diff --git a/webpage/styles/main.css.map b/webpage/styles/main.css.map
index 1ee7f46..e5eb71d 100644
--- a/webpage/styles/main.css.map
+++ b/webpage/styles/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../partials/_global.scss","../_variables.scss","../partials/_header.scss","../partials/_skills.scss","../partials/_projects.scss","../partials/_personal.scss","../partials/_footer.scss","../main.scss"],"names":[],"mappings":"AAEA;EACI;EACA;;;AAEJ;EACI,kBCPQ;;;ADWZ;EACI;EACA;;;AEXJ;AACA;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBDnBS;ECoBT,ODtBQ;;;ACwBZ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAIJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAIJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBDxES;ECyET,OD3EQ;EC4ER;;;AAEJ;EACI;;;AC5EJ;EACI;IACI;IACA;;;AAKR;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBFpCS;;;AEuCb;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;ACvCJ;EACI;IACI;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA,kBHlBK;IGmBL,OHrBI;IGsBJ;IACA;;EAEJ;IACI;;EAEJ;IACI,kBH5BI;;EG+BR;IACI;IACA;IACA,kBHjCK;;EGmCT;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OH3CI;;EG6CR;IACI;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBHxHQ;;;AG0HZ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;EACI;;;AAEJ;EACI;IACI;;EAEJ;IACI;;;ACzIR;AACA;EACI;EACA;EACA;EACA,kBJNQ;;;AIQZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA,OJtBQ;;;AKEZ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OLVS;EKWT;EACA;EACA;;;ACNJ","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../partials/_global.scss","../_variables.scss","../partials/_header.scss","../partials/_skills.scss","../partials/_projects.scss","../partials/_personal.scss","../partials/_footer.scss","../main.scss"],"names":[],"mappings":"AAEA;EACI;EACA;;;AAEJ;EACI,kBCPQ;;;ADWZ;EACI;EACA;;;AAIJ;EACI;IACI;;;AAIR;EACI;IACI;;;AEvBR;AACA;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBDnBS;ECoBT,ODtBQ;;;ACwBZ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAIJ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAIJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBDxES;ECyET,OD3EQ;EC4ER;;;AAEJ;EACI;;;AAIJ;EAEI;IACI;;EAEJ;IACI;IACA;;EAIJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;;AC3GR;EACI;IACI;IACA;;;AAKR;EACI;IACI;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBFpCS;;;AEuCb;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;ACvCJ;EACI;IACI;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA,kBHlBK;IGmBL,OHrBI;IGsBJ;IACA;IACA;;EAEJ;IACI;;EAEJ;IACI,kBH7BI;;EGgCR;IACI;IACA;IACA;IACA,kBHnCK;;EGqCT;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OH7CI;;EG+CR;IACI;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;;EAEJ;IACI;IACA;;EAGJ;IACI;IACA;;EAEJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA,kBH1HQ;;;AG4HZ;EACI;;;AAEJ;EACI;;;AAGJ;AACA;EACI;;;AAEJ;EACI;IACI;;EAEJ;IACI;;;AC3IR;AACA;EACI;EACA;EACA;EACA,kBJNQ;;;AIQZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA,OJtBQ;;;AKEZ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,OLVS;EKWT;EACA;EACA;;;ACNJ","file":"main.css"}
\ No newline at end of file