Responsive resizing

Author: aboggust

_sass/intro.scss

@@ -9,11 +9,7 @@
 }
 
 #intro-headshot-wrapper {
-    /* Prevent shrinking and set its basis explicitly */
     flex: 0 0 200px;   // shorthand for: flex-grow:0; flex-shrink:0; flex-basis:260px
-    /* optional: enforce a floor just in case */
-    // min-width: 200px;
-    // width: 200px;
 }
 
 #intro-text-wrapper {
@@ -89,16 +85,18 @@
     margin-bottom: calc(3 * $spacing);
     text-align: center;
     font-family: $title-font;
-    font-size: $tag-font-size;
+    font-size: var(--tag-font-size)
     // text-transform: uppercase;
 }
 
-@media only screen and (max-width: 650px) {
+@media only screen and (max-width: $screen-width-threshold) {
 
     #intro {
         display: flex;
         flex-wrap: wrap;
         gap: calc(3 * $spacing);
+        margin-top: calc(6 * $spacing);
+        justify-content: center;
     }
 
     .intro-links {
@@ -109,31 +107,31 @@
         display: contents;
     }
 
-    // #intro-headshot-wrapper {
-    //     max-width: none;
-    // }
-
     #intro-headshot { 
         order: 1;
-        flex: 0 0 auto;
-        min-width: 50px;
-        width: 66px;
-        // height: 66px;
+        flex: 1 1 0;
+        min-width: 80px;
+        max-width: 80px;
     }
 
     #intro-header {
         order: 2;
-        flex: 1 1 0;
-        min-width: 0;
+        flex: 1 1 240px;
+        min-width: 240px;
+        // white-space: nowrap;
     }
 
     #job-market {
-        order: 4;
+        order: 3;
         flex: 0 0 100%;
     }
 
+    #job-market p {
+        text-align: left;
+    }
+
     #intro-text {
-        order: 3;
+        order: 4;
         flex: 0 0 100%;
     }
 

_sass/main.scss

@@ -1,10 +1,14 @@
 
 body {
+    min-width: 380px;
+
 }
 
 header {
     border-bottom: 1px solid #e8e8e8d3;
     box-shadow: 0px 1px 2px #e8e8e8d3;
+    min-width: 400px;
+    width: 100%;
 }
 
 #main {
@@ -109,7 +113,7 @@ img {
 }
 
 #site-header {
-    width: 100vw;
+    // width: 100vw;
     display: flex;
     justify-content: center;
     position: fixed;
@@ -119,8 +123,8 @@ img {
 }
 
 #site-header-content {
-    width: var(--max-width);
-    padding: calc(2 * $spacing) calc(4 * $spacing);
+    width: 90%;
+    margin: calc(2 * $spacing) calc(4 * $spacing);
     display: grid;
     grid-template-columns: auto auto;
     align-items: center;

assets/css/styles.scss

@@ -40,10 +40,13 @@ $link-color-light: #eff5ff;
 $link-color-hover: #e7eef9;
 $award-color: #E7B100;
 
+$screen-width-threshold: 710px;
+
 
 html {
     --title-font-size: 32pt;
     --heading-font-size: 16pt;
+    --tag-font-size: 14pt;
     --body-font-size: 12pt;
     --accent-font-size: 11pt;
     --max-width: 950px;
@@ -58,19 +61,29 @@ html {
 
 
 /* Mobile Styles */
-@media only screen and (max-width: 650px) {
+@media only screen and (max-width: $screen-width-threshold) {
 
     html {
         --title-font-size: 20pt;
         --subtitle-font-size: 14pt;
-        --heading-font-size: 12pt;
-        --body-font-size: 12pt;
+        --heading-font-size: 11pt;
+        --body-font-size: 11pt;
         --accent-font-size: 10pt;
+        --tag-font-size: 13pt;
+        --subbody-font-size: 11pt;
+    }
+
+    #main {
+        margin-left: calc(4 * $spacing);
+        margin-right: calc(4 * $spacing);
     }
 
     body {
-        margin: 2em;
+        // margin: 2em;
     }
+}
+
+@media only screen and (max-width: 500px) {
 
     .publication {
         flex-direction: column;
@@ -96,21 +109,4 @@ html {
         width: 100%;
         height: auto;
     }
-
-    // #intro-description {
-    //     flex-direction: column-reverse;
-    // }
-
-    // #intro-headshot-wrapper {
-    //     max-width: 100px;
-    //     margin-bottom: calc(3 * $spacing);
-    // }
-
-    // #intro, #intro-description {
-    //     align-items: center;
-    // }
-
-    // .news {
-    //     grid-template-columns: 110px auto;
-    // }
 }