add nav toggle

3 files changed, 166 insertions, 94 deletions

diff --git a/static/css/zozo.css b/static/css/zozo.css
index 801d9be..f301410 100644
--- a/static/css/zozo.css
+++ b/static/css/zozo.css
@@ -7,7 +7,7 @@ html {
 
 body {
   color: #333333;
-  font-family: "source-han-sans-simplified-c", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  font-family: 'source-han-sans-simplified-c', 'Source Sans Pro',
 'Helvetica Neue', Arial, sans-serif;
   font-size: 16px;
   width: 100%;
   background-color: #f7f7f7;
@@ -66,12 +66,48 @@ h6 {
 }
 
 .nav_container {
-  width: 720px;
+  width: 740px;
   height: 3rem;
   margin: 0 auto;
   padding: 20px 0;
 }
 
+.nav_container .menu_icon {
+  padding: 10px;
+  float: right;
+}
+
+.nav_container .menu_icon a {
+  cursor: pointer;
+}
+
+.nav_container .site_nav {
+  float: right;
+}
+
+.nav_container .site_nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  float: right;
+}
+
+.nav_container .site_nav li,
+.nav_container .site_nav a {
+  position: relative;
+}
+
+.nav_container .site_nav li {
+  float: left;
+}
+
+.nav_container .site_nav a {
+  display: block;
+  white-space: nowrap;
+  padding: 10px;
+  font-size: 0.9rem;
+}
+
 .header {
   width: 720px;
   padding: 50px 0 140px 0;
@@ -307,45 +343,6 @@ h6 {
   letter-spacing: 1px;
 }
 
-.site_nav {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  float: right;
-}
-
-.site_nav ul {
-  width: 12em;
-}
-
-.site_nav li,
-.site_nav a {
-  position: relative;
-}
-
-.site_nav li {
-  float: left;
-}
-
-.site_nav li span.menu_icon {
-  margin-top: 2px;
-}
-
-.site_nav li span.menu_icon i {
-  font-size: 16px;
-}
-
-.site_nav ul li {
-  float: none;
-}
-
-.site_nav a, .site_nav span.menu_icon {
-  display: block;
-  white-space: nowrap;
-  padding: 10px;
-  font-size: 0.9rem;
-}
-
 /*for archive*/
 .list_with_title {
   font-size: 14px;
@@ -456,7 +453,7 @@ h6 {
 
 .markdown pre,
 .markdown code {
-  font-family: "Roboto Mono", Menlo, Monaco, courier, monospace;
+  font-family: 'Roboto Mono', Menlo, Monaco, courier, monospace;
   font-size: 0.9em;
   background: #f8f8f8;
   border: none;
@@ -524,7 +521,7 @@ h6 {
 }
 
 .markdown blockquote:before {
-  content: "“";
+  content: '“';
   display: block;
   font-family: times, sans-serif;
   font-style: normal;
@@ -585,7 +582,32 @@ a.back_to_top:hover span {
   color: #555555;
 }
 
-@media print, screen and (max-width: 580px) {
+@media print, screen and (max-width: 680px) {
+  .nav_container {
+    position: relative;
+    z-index: 999;
+  }
+  .nav_container .site_nav {
+    position: fixed;
+    right: 0;
+    top: 60px;
+    padding: 10px 0;
+    width: 100%;
+    background-color: #ffffff;
+    -webkit-box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86);
+            box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86);
+  }
+  .nav_container .site_nav ul {
+    float: none;
+    text-align: center;
+  }
+  .nav_container .site_nav li {
+    float: none;
+  }
+  .nav_container .menu_icon {
+    position: fixed;
+    right: 0;
+  }
   .back_to_top {
     display: none !important;
   }
@@ -595,7 +617,9 @@ a.back_to_top:hover span {
   .main {
     width: 1000px;
   }
-  .nav_container,
+  .nav_container {
+    width: 840px;
+  }
   .header,
   .content {
     width: 820px;
@@ -607,7 +631,9 @@ a.back_to_top:hover span {
     width: 95%;
     margin-top: 20px;
   }
-  .nav_container,
+  .nav_container {
+    width: 95%;
+  }
   .header,
   .content {
     width: 90%;
diff --git a/static/css/zozo.scss b/static/css/zozo.scss
index 6a3ab51..4d18019 100644
--- a/static/css/zozo.scss
+++ b/static/css/zozo.scss
@@ -9,7 +9,8 @@ html {
 
 body {
   color: #333333;
-  font-family: "source-han-sans-simplified-c", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  font-family: 'source-han-sans-simplified-c', 'Source Sans Pro',
+    'Helvetica Neue', Arial, sans-serif;
   font-size: 16px;
   width: 100%;
   background-color: #f7f7f7;
@@ -72,10 +73,46 @@ h6 {
 }
 
 .nav_container {
-  width: 720px;
+  width: 740px;
   height: 3rem;
   margin: 0 auto;
   padding: 20px 0;
+
+  .menu_icon {
+    padding: 10px;
+    float: right;
+
+    a {
+      cursor: pointer;
+    }
+  }
+
+  .site_nav {
+    float: right;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      float: right;
+    }
+
+    li,
+    a {
+      position: relative;
+    }
+
+    li {
+      float: left;
+    }
+
+    a {
+      display: block;
+      white-space: nowrap;
+      padding: 10px;
+      font-size: 0.9rem;
+    }
+  }
 }
 
 .header {
@@ -212,7 +249,6 @@ h6 {
         color: #8e0000;
       }
     }
-
   }
 
   .post_footer {
@@ -315,46 +351,6 @@ h6 {
   }
 }
 
-.site_nav {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  float: right;
-
-  ul {
-    width: 12em;
-  }
-
-  li,
-  a {
-    position: relative;
-  }
-
-  li {
-    float: left;
-
-    span.menu_icon {
-      margin-top: 2px;
-
-      i {
-        font-size: 16px;
-      }
-    }
-  }
-
-  ul li {
-    float: none;
-  }
-
-  a, span.menu_icon {
-    display: block;
-    white-space: nowrap;
-    padding: 10px;
-    font-size: 0.9rem;
-  }
-
-}
-
 /*for archive*/
 
 .list_with_title {
@@ -465,7 +461,7 @@ h6 {
 
   pre,
   code {
-    font-family: "Roboto Mono", Menlo, Monaco, courier, monospace;
+    font-family: 'Roboto Mono', Menlo, Monaco, courier, monospace;
     font-size: 0.9em;
     background: #f8f8f8;
     border: none;
@@ -535,7 +531,7 @@ h6 {
   }
 
   blockquote:before {
-    content: "“";
+    content: '“';
     display: block;
     font-family: times, sans-serif;
     font-style: normal;
@@ -595,7 +591,36 @@ a.back_to_top {
   }
 }
 
-@media print, screen and (max-width: 580px) {
+@media print, screen and (max-width: 680px) {
+  .nav_container {
+    position: relative;
+    z-index: 999;
+
+    .site_nav {
+      position: fixed;
+      right: 0;
+      top: 60px;
+      padding: 10px 0;
+      width: 100%;
+      background-color: #ffffff;
+      box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86);
+
+      ul {
+        float: none;
+        text-align: center;
+      }
+
+      li {
+        float: none;
+      }
+    }
+
+    .menu_icon {
+      position: fixed;
+      right: 0;
+    }
+  }
+
   .back_to_top {
     display: none !important;
   }
@@ -605,7 +630,10 @@ a.back_to_top {
   .main {
     width: 1000px;
   }
-  .nav_container,
+  .nav_container {
+    width: 840px;
+  }
+
   .header,
   .content {
     width: 820px;
@@ -617,7 +645,10 @@ a.back_to_top {
     width: 95%;
     margin-top: 20px;
   }
-  .nav_container,
+  .nav_container {
+    width: 95%;
+  }
+
   .header,
   .content {
     width: 90%;
diff --git a/static/js/zozo.js b/static/js/zozo.js
index 2781442..9aaa550 100644
--- a/static/js/zozo.js
+++ b/static/js/zozo.js
@@ -25,6 +25,21 @@ $(document).ready((function (_this) {
   }
 })(this))
 
+// nav-toggle
+$(document).ready((function (_this) {
+  return function () {
+    let nav,icon
+    icon = $('#menu_icon')
+    nav = $('#site_nav')
+    if ($(document).width() < 768) {
+      nav.css('display', 'none')
+    }
+    icon.click(function () {
+      nav.slideToggle(250)
+    })
+  }
+})(this))
+
 // fancybox
 $(document).ready((function (_this) {
   return function() {