add nav toggle

author: imzeuk <imzeuk@gmail.com> 2019-04-18 10:30:37 +0300
committer: imzeuk <imzeuk@gmail.com> 2019-04-18 10:30:37 +0300
commit: bdffb1eafd663911723b0e9fc12e4ca7205e83c5 (patch)
tree: 4b56caffd92e5d68cd42440d3804c2f61789f1b1
parent: 8da5f7b23122424801dc16478e191ac007243e87 (diff)
10 files changed, 185 insertions, 104 deletions
diff --git a/layouts/404.html b/layouts/404.html
index 49a0a00..c167614 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,6 +1,7 @@
 {{ partial "head.html" . }}
 <body>
 <div class="main animated">
+  {{ partial "nav.html" . }}
   {{ partial "header.html" . }}
   <div class="content">
     <div class="page_tags">
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 7a3b8f6..2d857f5 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,6 +1,7 @@
 {{ partial "head.html" . }}
 <body>
 <div class="main animated">
+  {{ partial "nav.html" . }}
   {{ partial "header.html" . }}
   <div class="content">
     <div class="list_with_title">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e4623b6..8ba2a92 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,7 @@
 {{ partial "head.html" . }}
 <body>
 <div class="main animated">
+  {{ partial "nav.html" . }}
   {{ partial "header.html" . }}
   <div class="content">
     <div class="post_page">
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 3496fae..e440ee1 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,6 +1,7 @@
 {{ partial "head.html" . }}
 <body>
 <div class="main animated">
+  {{ partial "nav.html" . }}
   {{ partial "header.html" . }}
   <div class="content">
     <div class="page_tags">
diff --git a/layouts/index.html b/layouts/index.html
index fcf684c..0f93dc8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,7 @@
 {{ partial "head.html" . }}
 <body>
 <div class="main animated">
+  {{ partial "nav.html" . }}
   {{ partial "header.html" . }}
   <div class="content">
     {{ partial "post.html" .}}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 11eb0e5..2bc3ce8 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,13 +1,3 @@
-<div class="nav_container">
-  <ul class="site_nav">
-    <li><span class="menu_icon"><i class="remixicon-terminal-fill"></i></span></li>
-    {{ range .Site.Menus.main }}
-    <li>
-      <a href="{{ .URL | safeURL }}">{{ .Name }}</a>
-    </li>
-    {{ end }}
-  </ul>
-</div>
 <div class="header animated fadeInDown">
   <div class="site_title_container">
     <div class="site_title">
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
new file mode 100644
index 0000000..1c18a5a
--- /dev/null
+++ b/layouts/partials/nav.html
@@ -0,0 +1,14 @@
+<div class="nav_container animated fadeInDown">
+  <div class="site_nav" id="site_nav">
+    <ul>
+      {{ range.Site.Menus.main }}
+      <li>
+        <a href="{{ .URL | safeURL }}">{{ .Name }}</a>
+      </li>
+      {{ end }}
+    </ul>
+  </div>
+  <div class="menu_icon">
+    <a id="menu_icon"><i class="remixicon-links-line"></i></a>
+  </div>
+</div>
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() {
author	imzeuk <imzeuk@gmail.com>	2019-04-18 10:30:37 +0300
committer	imzeuk <imzeuk@gmail.com>	2019-04-18 10:30:37 +0300
commit	bdffb1eafd663911723b0e9fc12e4ca7205e83c5 (patch)
tree	4b56caffd92e5d68cd42440d3804c2f61789f1b1
parent	8da5f7b23122424801dc16478e191ac007243e87 (diff)