From 012c0041559f250f216b5e45efbdea00eef60d4c Mon Sep 17 00:00:00 2001
From: Kevin Mok <kevin.mok@live.ca>
Date: Wed, 6 Feb 2019 05:36:43 -0500
Subject: [PATCH] Made homepage more mobile-friendly

---
 assets/sass/main.scss                         | 31 ++++++++++++++--
 ideas.md                                      | 37 ++++++++-----------
 ...s_f300667da4f5b5f84e1a9e0702b2fdde.content | 24 +++++++++---
 3 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 449aa21..cd3e563 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -159,13 +159,17 @@ footer {
     background-color: #393939;
     max-width: 62em;
     @include auto-center();
-    height: 1.8em;
+    @include vert-padding-rem(.1);
   }
 
   @media (max-width: $max-page-width) {
     margin-top: 0;
     margin-bottom: 0;
   }
+
+  @media (max-width: $phone-width) {
+    font-size: 0.8em;
+  }
 }
 
 /* Typography */
@@ -269,6 +273,8 @@ footer {
         // }
     }
 
+    //  me-equation {{{ // 
+    
     .me-equation {
       margin-top: 3em;
       text-align: center;
@@ -304,11 +310,22 @@ footer {
         }
       }
     }
+    
+    //  }}} me-equation // 
+
+    @media (max-width: $phone-width) {
+      font-size: 1.1em;
+
+      h1 {
+        font-size: 1.75rem;
+      }
+    }
   }
 
   @media (max-width: $max-page-width) {
     margin-bottom: 2rem;
   }
+
 }
 
 /* .homepage section.categories,
@@ -342,12 +359,14 @@ h1.site-title {
   color: $base05;
   margin-top: 0.5em;
   margin-bottom: 0.2em;
-}
 
-@media (max-width: $max-page-width) {
-  h1.site-title {
+  @media (max-width: $max-page-width) {
     font-size: 3em;
   }
+
+  @media (max-width: $phone-width) {
+    font-size: 2.25em;
+  }
 }
 
 .hero-logo img {
@@ -357,6 +376,10 @@ h1.site-title {
 .nav-bar {
   margin-left: .5em;
   margin-bottom: 1em;
+
+  @media (max-width: $phone-width) {
+    font-size: .9em;
+  }
 }
 
 .hero-tagline{
diff --git a/ideas.md b/ideas.md
index 1622277..41a10b9 100644
--- a/ideas.md
+++ b/ideas.md
@@ -1,3 +1,18 @@
+## Archived
+- about/homepage
+  - typing animation
+  - linux screenshot
+    - fade between two
+- tux icon
+ 
+# Tiny
+- contact page
+- click on name for base URL
+ 
+# Medium
+- fav. apps
+- credits
+
 # Large
 - resume
   - printable version
@@ -5,27 +20,5 @@
   - push to base16 repo
 - loop through URL sections
 - add CSS grid layout
-- add media queries for mobile site
 - terminal simulator for site
   - cd/ls diff. pages
- 
-# Medium
-- fav. apps
-- credits
-
-# Tiny
-- about/homepage
-  - elevator pitch
-    - student
-    - passionate
-    - typing animation
-  - linux screenshot
-    - fade between two
-  - picture equation of my interests
-    - Linux
-    - terminal
-    - UofT
-- contact page
-- click on name for base URL
-- tux icon
- 
diff --git a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 9b1b4d3..0fe19f5 100644
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -119,11 +119,15 @@ footer {
     max-width: 62em;
     margin-left: auto;
     margin-right: auto;
-    height: 1.8em; }
+    padding-top: 0.1rem;
+    padding-bottom: 0.1rem; }
   @media (max-width: 52em) {
     footer {
       margin-top: 0;
       margin-bottom: 0; } }
+  @media (max-width: 600px) {
+    footer {
+      font-size: 0.8em; } }
 
 /* Typography */
 h1 {
@@ -246,6 +250,11 @@ footer a {
           padding-top: 0.1rem;
           padding-bottom: 0.1rem;
           margin-bottom: 0rem; } }
+  @media (max-width: 600px) {
+    #homepage #about {
+      font-size: 1.1em; }
+      #homepage #about h1 {
+        font-size: 1.75rem; } }
 
 @media (max-width: 52em) {
   #homepage {
@@ -274,10 +283,12 @@ h1.site-title {
   color: #d3d0c8;
   margin-top: 0.5em;
   margin-bottom: 0.2em; }
-
-@media (max-width: 52em) {
-  h1.site-title {
-    font-size: 3em; } }
+  @media (max-width: 52em) {
+    h1.site-title {
+      font-size: 3em; } }
+  @media (max-width: 600px) {
+    h1.site-title {
+      font-size: 2.25em; } }
 
 .hero-logo img {
   width: 100%; }
@@ -285,6 +296,9 @@ h1.site-title {
 .nav-bar {
   margin-left: .5em;
   margin-bottom: 1em; }
+  @media (max-width: 600px) {
+    .nav-bar {
+      font-size: .9em; } }
 
 .hero-tagline {
   margin-top: .3em;