.

modify nav

4 files changed, 67 insertions, 102 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f82731a..da978e5 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,18 +1,4 @@
 <footer class="footer">
-  <div class="nav_container">
-    <div class="nav">
-      <div class="site_nav_wrap">
-        <ul class="site_nav">
-          {{ range .Site.Menus.main }}
-          <li>
-            <a href="{{ .URL | safeURL }}">{{ .Name }}</a>
-          </li>
-          {{ end }}
-        </ul>
-      </div>
-    </div>
-  </div>
-
   <div class="powered_by">
     <a href="https://zeuk.me">Designed by Zeuk,</a>
     <a href="http://www.gohugo.io/">Proudly published with Hugo</a>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2bc3ce8..11eb0e5 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,13 @@
+<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/static/css/zozo.css b/static/css/zozo.css
index 2ef2e39..5e33d43 100644
--- a/static/css/zozo.css
+++ b/static/css/zozo.css
@@ -55,7 +55,6 @@ h6 {
 
 .content {
   width: 720px;
-  padding: 0 20px;
   height: auto;
   margin: 0 auto;
 }
@@ -65,9 +64,16 @@ h6 {
   margin: 0 auto;
 }
 
+.nav_container {
+  width: 720px;
+  height: 3rem;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+
 .header {
   width: 720px;
-  padding: 100px 0 140px 0;
+  padding: 50px 0 140px 0;
   margin: 0 auto;
   -webkit-background-size: cover;
   background-size: cover;
@@ -233,7 +239,7 @@ h6 {
   max-width: 780px;
   text-align: center;
   font-size: 12px;
-  padding: 60px 0px;
+  padding: 40px 0;
   margin: 0 auto;
 }
 .footer a {
@@ -243,20 +249,6 @@ h6 {
 .footer a:hover {
   color: #1f1f1f;
 }
-.footer .nav_container .site_nav_wrap {
-  text-align: center;
-}
-.footer .nav_container .site_nav {
-  display: inline-block;
-  float: none;
-}
-.footer .nav_container .site_nav a {
-  font-size: 13px;
-  color: #666666;
-}
-.footer .nav_container .site_nav a.current {
-  color: #222222;
-}
 .footer .powered_by {
   margin: 0;
   font-size: 11px;
@@ -276,20 +268,11 @@ h6 {
   letter-spacing: 1px;
 }
 
-.nav {
-  width: 100%;
-  text-align: right;
-  position: relative;
-  -webkit-font-smoothing: antialiased;
-}
-.nav a {
-  text-decoration: none;
-}
-
 .site_nav {
   list-style: none;
   margin: 0;
   padding: 0;
+  float: right;
 }
 .site_nav ul {
   width: 12em;
@@ -301,24 +284,22 @@ h6 {
 .site_nav li {
   float: left;
 }
-.site_nav ul li, .site_nav.sm-rtl ul li, .site_nav.sm-vertical li {
+.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 a, .site_nav span.menu_icon {
   display: block;
   white-space: nowrap;
-  padding: 12px;
+  padding: 12px 0 12px 20px;
+  font-size: 14px;
 }
 
-@media screen and (max-width: 768px) {
-  .nav {
-    display: block;
-  }
-
-  .footer .nav_container .site_nav_wrap {
-    /*text-align: left;*/
-  }
-}
 /*for archive*/
 .list_with_title {
   font-size: 14px;
@@ -344,6 +325,10 @@ h6 {
 .list_with_title .listing .listing_post {
   padding-bottom: 5px;
 }
+.list_with_title .listing .listing_post a {
+  display: inline-block;
+  width: 85%;
+}
 .list_with_title .listing .listing_post .post_time {
   float: right;
   color: #c5c5c5;
@@ -529,7 +514,8 @@ a.back_to_top:hover span {
     width: 1000px;
   }
 
-  .header,
+  .nav_container,
+.header,
 .content {
     width: 820px;
   }
@@ -540,7 +526,8 @@ a.back_to_top:hover span {
     margin-top: 20px;
   }
 
-  .header,
+  .nav_container,
+.header,
 .content {
     width: 90%;
   }
diff --git a/static/css/zozo.scss b/static/css/zozo.scss
index a183739..7f130e9 100644
--- a/static/css/zozo.scss
+++ b/static/css/zozo.scss
@@ -64,7 +64,6 @@ h6 {
 
 .content {
   width: 720px;
-  padding: 0 20px;
   height: auto;
   margin: 0 auto;
 }
@@ -74,9 +73,16 @@ h6 {
   margin: 0 auto;
 }
 
+.nav_container {
+  width: 720px;
+  height: 3rem;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+
 .header {
   width: 720px;
-  padding: 100px 0 140px 0;
+  padding: 50px 0 140px 0;
   margin: 0 auto;
   -webkit-background-size: cover;
   background-size: cover;
@@ -276,7 +282,7 @@ h6 {
   max-width: 780px;
   text-align: center;
   font-size: 12px;
-  padding: 60px 0px;
+  padding: 40px 0;
   margin: 0 auto;
 
   a {
@@ -288,26 +294,6 @@ h6 {
     }
   }
 
-  .nav_container {
-    .site_nav_wrap {
-      text-align: center;
-    }
-
-    .site_nav {
-      display: inline-block;
-      float: none;
-
-      a {
-        font-size: 13px;
-        color: #666666;
-
-        &.current {
-          color: #222222;
-        }
-      }
-    }
-  }
-
   .powered_by {
     margin: 0;
     font-size: 11px;
@@ -331,21 +317,11 @@ h6 {
   }
 }
 
-.nav {
-  width: 100%;
-  text-align: right;
-  position: relative;
-  -webkit-font-smoothing: antialiased;
-
-  a {
-    text-decoration: none;
-  }
-}
-
 .site_nav {
   list-style: none;
   margin: 0;
   padding: 0;
+  float: right;
 
   ul {
     width: 12em;
@@ -358,28 +334,27 @@ h6 {
 
   li {
     float: left;
+
+    span.menu_icon {
+      margin-top: 2px;
+
+      i {
+        font-size: 16px;
+      }
+    }
   }
 
-  ul li,
-  &.sm-rtl ul li,
-  &.sm-vertical li {
+  ul li {
     float: none;
   }
 
-  a {
+  a, span.menu_icon {
     display: block;
     white-space: nowrap;
-    padding: 12px;
+    padding: 12px 0 12px 20px;
+    font-size: 14px;
   }
-}
 
-@media screen and (max-width: 768px) {
-  .nav {
-    display: block;
-  }
-  .footer .nav_container .site_nav_wrap {
-    /*text-align: left;*/
-  }
 }
 
 /*for archive*/
@@ -410,6 +385,11 @@ h6 {
     .listing_post {
       padding-bottom: 5px;
 
+      a {
+        display: inline-block;
+        width: 85%;
+      }
+
       .post_time {
         float: right;
         color: #c5c5c5;
@@ -629,6 +609,7 @@ a.back_to_top {
   .main {
     width: 1000px;
   }
+  .nav_container,
   .header,
   .content {
     width: 820px;
@@ -640,6 +621,7 @@ a.back_to_top {
     width: 95%;
     margin-top: 20px;
   }
+  .nav_container,
   .header,
   .content {
     width: 90%;