From ee0b1a7a38a9e82aeb8c14f63bc8c81ded21875a Mon Sep 17 00:00:00 2001
From: drewcassidy <drewcassidy@me.com>
Date: Sun, 26 Nov 2017 20:28:43 -0800
Subject: [PATCH] Try to add responsive design?

---
 _includes/header.html  | 12 ++++---
 _includes/sidebar.html |  6 ++++
 _sass/_util.scss       |  4 ++-
 css/sidebar.scss       | 59 ++++++++++++++++++++++++++++++
 css/style.scss         | 82 ++++++++++++++++++++++++++++--------------
 5 files changed, 131 insertions(+), 32 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index e647c8f..35ea85a 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,9 +1,11 @@
 <header>
     <div id = "title"> 
-        <a href="/"><b>Andrew Cassidy</b></a>
-        <span class="slash">/</span>
-        <a href="/Projects">Projects</a>
-        <span class="slash">/</span>
-        FooBar
+        <a href="/" id="name"><b>Andrew Cassidy</b></a>
+        <span id="path">
+            <span class="slash">/</span>
+            <a href="/Projects">Projects</a>
+            <span class="slash">/</span>
+            FooBar
+        </span>
     </div>
 </header>
\ No newline at end of file
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index ca48f55..15b01c5 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,4 +1,10 @@
+<input id="sidebarToggle" type="checkbox"/>
+<span id="sidebarToggleImage">
+    <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
+</span>
+
 <nav id="sidebar">
+
     <ul id="navFlags">
         <li>{% include flag.html color="blue" name="Home" url="/" %}</li>
         <li>{% include flag.html color="green" name="Blog" url="/Blog" %}</li>
diff --git a/_sass/_util.scss b/_sass/_util.scss
index 27236c0..b9a222a 100644
--- a/_sass/_util.scss
+++ b/_sass/_util.scss
@@ -40,4 +40,6 @@
         // Output standard non-prefixed declaration
         #{$property}: $value;
     }
-}
\ No newline at end of file
+}
+
+$mobile-width: 500px;
\ No newline at end of file
diff --git a/css/sidebar.scss b/css/sidebar.scss
index 0c0a8ba..cb7b30a 100644
--- a/css/sidebar.scss
+++ b/css/sidebar.scss
@@ -19,6 +19,44 @@ $animate-time: 0.03s;
     }
 }
 
+#sidebarToggle {
+    display:none;
+    @media screen and (max-width: $mobile-width){
+        display: block;
+        position: fixed;
+ 
+
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 30px;
+        margin: 0;
+        z-index: 2;
+
+        cursor: pointer;
+        opacity: 0;
+    }
+}
+
+#sidebarToggleImage {
+    display:none;
+    @media screen and (max-width: $mobile-width){
+        display: block;
+        position: fixed;
+
+        text-align: center;
+        color: $title-text;
+
+        top: 7px;
+        left: 0;
+        width: 30px;
+        z-index: 1;
+
+        cursor: pointer;
+        //opacity: 0;
+    }
+}
+
 #navFlags {
     display: block;
     margin-block-start: 0;
@@ -32,6 +70,27 @@ $animate-time: 0.03s;
     }
 }
 
+@media screen and (max-width: $mobile-width){
+    #sidebar{
+        position: fixed;
+        left: -180px;
+        background-color: #FFE;
+        width: 145px;
+        height: 100%;
+
+        padding-top: 40px;
+
+    }
+
+    #sidebarToggle:checked ~ #sidebar{
+        left: 0px;
+    }
+
+    #navLinks a:hover {
+        color: $sidebar-text;
+    }
+}
+
 #navLinks {
     padding: {
         left: 10px;
diff --git a/css/style.scss b/css/style.scss
index d145a0b..dad017b 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -57,7 +57,6 @@
 }
 
 
-
 body {
     margin: 0;
     background-color: $margin;
@@ -72,40 +71,71 @@ body {
     margin-right: auto;
     margin-top: 0;
     height: 100%;
-            box-shadow: 0 0 4px 5px $shadow;
-       -moz-box-shadow: 0 0 4px 5px $shadow;
-    -webkit-box-shadow: 0 0 4px 5px $shadow;
+
+
+    @media screen and (min-width: $mobile-width){
+        box-shadow: 0 0 4px 5px $shadow;
+        -moz-box-shadow: 0 0 4px 5px $shadow;
+     -webkit-box-shadow: 0 0 4px 5px $shadow;
+    }
 }
 
 // HEADER
+header {
 
-#title {
-    margin:0;
-    padding: 10px;
-    font-family: $title-font;
-    color: $title-text;
-    font-weight: normal;
-    font-size: 28px;
-
-    a {
-        color: inherit;
-        text-decoration: none;
-    }
+    @media screen and (max-width: $mobile-width){
+        top: 0;
+        right: 0;
+        z-index: 1;
+        background-color: darken($background, 5%);
 
-    a:hover {
-        color: inherit;
-        text-decoration: underline;
+        border-bottom: 1px solid $subtle;
+        padding: {
+            top: 0;
+            bottom: 0;
+            left: 30px;
+        }
+           
+        line-height: 10px;
     }
-}
 
-.slash {
-    display: inline-block;
-    vertical-align: -10%;
-    font: {
-        size: 36px;
+    #title {
+        margin:0;
+        padding: 10px;
+        font-family: $title-font;
+        color: $title-text;
+        font-weight: normal;
+        font-size: 28px;
+
+        @media screen and (max-width: $mobile-width){
+            font-size: 16px;
+        }
+
+        a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: inherit;
+            text-decoration: underline;
+        }
+
+
+        .slash {
+            display: inline-block;
+            vertical-align: -10%;
+            font: {
+                size: 36px;
+            }
+
+            @media screen and (max-width: $mobile-width){
+                font-size: 20px;
+            }
+        }
     }
-}
 
+}
 #main {
     display: flex;
 }