Made homepage more mobile-friendly

Adjusted font size and converted me equation from column to 2 rows.

assets/sass/main.scss

@@ -34,7 +34,7 @@ $base-dark-orange: #d27b53;
 //  mixins {{{ // 
 
 $max-page-width: 52em;
-$phone-width: 600px;
+$phone-width: 800px;
 
 @mixin side-padding-rem($n) {
   padding-left: $n * 1rem;
@@ -259,6 +259,8 @@ footer {
 //  homepage  {{{ // 
 
 #homepage {
+  //  about {{{ // 
+  
   #about {
     font-size: 1.25rem;
 
@@ -279,48 +281,131 @@ footer {
       margin-top: 3em;
       text-align: center;
       display: flex;
+      // display: grid;
+      // grid-template-columns: repeat(3, 2fr 1fr) 2fr;
       justify-content: center; /* align horizontal */
       align-items: center; /* align vertical */
 
-      img {
+      .equation-part {
-        width: 8em;
+        // width: 33%;
-        border-radius: 2em;
+        display: flex;
-        display: inline;
+        flex: 1;
+        justify-content: center; /* align horizontal */
+        align-items: center; /* align vertical */
 
-        &#gnu {
+        a {
-          background-color: $base04;
+          text-decoration: none;
-          // background-color: $base05;
         }
-      }
 
-      p {
+        img {
-        font-size: 4rem;
+          // width: 7em;
-        display: inline;
+          width: 70%;
-        @include side-padding-rem(1);
+          // width: 15vw;
-      }
+          // min-width: 25%;
+          // height: 25%;
+          // height: auto;
 
-      @media (max-width: $phone-width) {
+          // object-fit: contain;
-        margin-top: 2em;
+          // flex-basis: 20%;
-        display: block;
+          // flex: 2 2 0;
+          // border-radius: 1.5em;
+          border-radius: 1.1em;
+          display: inline;
+
+          &#gnu {
+            background-color: $base04;
+            // background-color: $base05;
+          }
+        }
 
         p {
-          display: block;
+          // font-size: 3rem;
-          @include vert-padding-rem(0.1);
+          font-size: 3vw;
-          margin-bottom: 0rem;
+          // width: 20%;
+          // flex: 1;
+          // display: inline;
+          display: inline-block;
+          @include side-padding-rem(0.2);
         }
       }
+
+      //  media {{{ // 
+      
+      // @media (max-width: $phone-width) {
+        // margin-top: 2em;
+        // display: block;
+
+        // p {
+          // display: block;
+          // @include vert-padding-rem(0.1);
+          // margin-bottom: 0rem;
+        // }
+      // }
+
+      // @media (max-width: 800px) {
+      @media (max-width: $phone-width) {
+        // flex-direction: column;
+        flex-wrap: wrap;
+        margin-top: 2em;
+        justify-content: space-around; /* align horizontal */
+        // height: 100vh;
+        // height: 50vh;
+        .equation-part {
+          // min-width: 50vw;
+          // display: inline-block;
+          // min-width: 50%;
+          min-width: 33%;
+          // max-height: 25vh;
+          // flex-direction: column;
+          img {
+            // display: block;
+            // width: 50%;
+            flex: 1.5;
+            // flex: 1;
+            // height: 50%;
+            // max-height: 30%;
+            // max-height: 25vh;
+
+            &#hexatar {
+              // max-width: 70%;
+              // max-width: 33%;
+              max-width: 28%;
+              // margin-top: 2rem;
+              margin-top: 1.75rem;
+            }
+          }
+
+          p {
+            // font-size: 3rem;
+            font-size: 6vw;
+            // width: 20%;
+            flex: 1;
+            // @include side-padding-rem(0.2);
+          }
+
+          &#uoft-part {
+            justify-content: flex-end;
+          }
+        }
+      }
+      
+      //  }}} media // 
     }
     
     //  }}} me-equation // 
 
     @media (max-width: $phone-width) {
-      font-size: 1.1em;
+      // font-size: 1.1em;
+      font-size: .9em;
 
       h1 {
-        font-size: 1.75rem;
+        // font-size: 1.75rem;
+        font-size: 1.4rem;
       }
     }
   }
+  
+  //  }}} about // 
 
   @media (max-width: $max-page-width) {
     margin-bottom: 2rem;
@@ -358,14 +443,16 @@ h1.site-title {
   // color: #66cccc;
   color: $base05;
   margin-top: 0.5em;
-  margin-bottom: 0.2em;
+  margin-bottom: 0;
 
   @media (max-width: $max-page-width) {
     font-size: 3em;
   }
 
   @media (max-width: $phone-width) {
-    font-size: 2.25em;
+    // font-size: 3em;
+    // font-size: 2.5em;
+    font-size: 2em;
   }
 }
 
@@ -375,10 +462,13 @@ h1.site-title {
 
 .nav-bar {
   margin-left: .5em;
-  margin-bottom: 1em;
+  // margin-bottom: 1em;
+  // margin-top: .75em;
+  @include vert-padding-rem(1);
 
   @media (max-width: $phone-width) {
-    font-size: .9em;
+    // font-size: .9em;
+    font-size: .8em;
   }
 }
 

ideas.md

@@ -1,3 +1,25 @@
+# Large
+- add CSS grid layout
+  - add tooltip saying responsive 
+- resume
+  - printable version
+- rewrite CSS in Sass
+  - push to base16 repo
+- loop through URL sections
+- terminal simulator for site
+  - cd/ls diff. pages
+
+# Medium
+- fav. apps
+- credits
+
+# Tiny
+- socials in footer?
+- shrink font sizing for mobile
+- add links to all equation parts
+- contact page
+- click on name for base URL
+ 
 ## Archived
 - about/homepage
   - typing animation
@@ -5,23 +27,3 @@
     - fade between two
 - tux icon
  
-# Tiny
-- shrink font sizing for mobile
-- contact page
-- click on name for base URL
- 
-# Medium
-- fav. apps
-- credits
-
-# Large
-- resume
-  - printable version
-- rewrite CSS in Sass
-  - push to base16 repo
-- loop through URL sections
-- add CSS grid layout
-  - use to make me equation columns for desktop
-    - box layout for mobile
-- terminal simulator for site
-  - cd/ls diff. pages

layouts/partials/about.html

@@ -1,9 +1,9 @@
 <div id="about">
 <!-- <h1 class="headline">About</h1> -->
-<h1>Welcome to my site!</h1>
+<h1>Hello there!</h1>
 <p>
-  I'm Kevin Mok, a 2<sup>nd</sup> year Computer Science student at the University of Toronto.
+  Welcome to my site. I'm Kevin Mok - a 2<sup>nd</sup> year Computer Science
-  I'm interested in all things Linux-related and 
+  student at the University of Toronto, and I'm interested in all things Linux-related and 
   <a href="https://www.gnu.org/philosophy/floss-and-foss.en.html"
     target="_blank">FOSS/FLOSS</a>.
 </p>

layouts/partials/me-equation.html

@@ -1,11 +1,19 @@
 <div class="me-equation">
-  <a href="https://www.gnu.org/" target="_blank">
+  <div class="equation-part">
-    <img src="{{ "img/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
+    <a href="https://www.gnu.org/" target="_blank">
-  </a>
+      <img src="{{ "img/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
-  <p>+</p>
+    </a>
+    <p>+</p>
+  </div>
+  <div class="equation-part">
   <img src="{{ "img/linux-icon.svg" | relURL }}" alt="linux-logo">
   <p>+</p>
+  </div>
+  <div class="equation-part" id="uoft-part">
   <img src="{{ "img/uoft-logo.svg" | relURL }}" alt="uoft-logo">
   <p>=</p>
-  <img src="{{ "img/hexatar.png" | relURL }}" alt="my-avatar">
+  </div>
+  <div class="equation-part">
+  <img src="{{ "img/hexatar.png" | relURL }}" id="hexatar" alt="my-avatar">
+  </div>
 </div>

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -125,7 +125,7 @@ footer {
     footer {
       margin-top: 0;
       margin-bottom: 0; } }
-  @media (max-width: 600px) {
+  @media (max-width: 800px) {
     footer {
       font-size: 0.8em; } }
 
@@ -230,31 +230,49 @@ footer a {
     /* align horizontal */
     align-items: center;
     /* align vertical */ }
-    #homepage #about .me-equation img {
+    #homepage #about .me-equation .equation-part {
-      width: 8em;
+      display: flex;
-      border-radius: 2em;
+      flex: 1;
-      display: inline; }
+      justify-content: center;
-      #homepage #about .me-equation img#gnu {
+      /* align horizontal */
-        background-color: #a09f93; }
+      align-items: center;
-    #homepage #about .me-equation p {
+      /* align vertical */ }
-      font-size: 4rem;
+      #homepage #about .me-equation .equation-part a {
-      display: inline;
+        text-decoration: none; }
-      padding-left: 1rem;
+      #homepage #about .me-equation .equation-part img {
-      padding-right: 1rem; }
+        width: 70%;
-    @media (max-width: 600px) {
+        border-radius: 1.1em;
+        display: inline; }
+        #homepage #about .me-equation .equation-part img#gnu {
+          background-color: #a09f93; }
+      #homepage #about .me-equation .equation-part p {
+        font-size: 3vw;
+        display: inline-block;
+        padding-left: 0.2rem;
+        padding-right: 0.2rem; }
+    @media (max-width: 800px) {
       #homepage #about .me-equation {
+        flex-wrap: wrap;
         margin-top: 2em;
-        display: block; }
+        justify-content: space-around;
-        #homepage #about .me-equation p {
+        /* align horizontal */ }
-          display: block;
+        #homepage #about .me-equation .equation-part {
-          padding-top: 0.1rem;
+          min-width: 33%; }
-          padding-bottom: 0.1rem;
+          #homepage #about .me-equation .equation-part img {
-          margin-bottom: 0rem; } }
+            flex: 1.5; }
-  @media (max-width: 600px) {
+            #homepage #about .me-equation .equation-part img#hexatar {
+              max-width: 28%;
+              margin-top: 1.75rem; }
+          #homepage #about .me-equation .equation-part p {
+            font-size: 6vw;
+            flex: 1; }
+          #homepage #about .me-equation .equation-part#uoft-part {
+            justify-content: flex-end; } }
+  @media (max-width: 800px) {
     #homepage #about {
-      font-size: 1.1em; }
+      font-size: .9em; }
       #homepage #about h1 {
-        font-size: 1.75rem; } }
+        font-size: 1.4rem; } }
 
 @media (max-width: 52em) {
   #homepage {
@@ -282,23 +300,24 @@ h1.site-title {
   font-size: 4.8em;
   color: #d3d0c8;
   margin-top: 0.5em;
-  margin-bottom: 0.2em; }
+  margin-bottom: 0; }
   @media (max-width: 52em) {
     h1.site-title {
       font-size: 3em; } }
-  @media (max-width: 600px) {
+  @media (max-width: 800px) {
     h1.site-title {
-      font-size: 2.25em; } }
+      font-size: 2em; } }
 
 .hero-logo img {
   width: 100%; }
 
 .nav-bar {
   margin-left: .5em;
-  margin-bottom: 1em; }
+  padding-top: 1rem;
-  @media (max-width: 600px) {
+  padding-bottom: 1rem; }
+  @media (max-width: 800px) {
     .nav-bar {
-      font-size: .9em; } }
+      font-size: .8em; } }
 
 .hero-tagline {
   margin-top: .3em;