Container and navbar menu without js

assets/css/styles.css

@@ -87,7 +87,10 @@ header {
   @apply text-black;
 }
 #post .kg-bookmark-container {
-  @apply flex flex-row justify-between text-black border border-gray-500;
+  @apply flex flex-row justify-between text-black border border-gray-500 bg-white transition-bg;
+}
+#post .kg-bookmark-container:hover {
+  @apply bg-gray-400 transition-bg;
 }
 #post .kg-bookmark-content {
   @apply w-2/3 py-4 px-4;
@@ -121,19 +124,34 @@ footer {
   @apply py-4 px-4;
 }
 
+
 .nav {
-  @apply hidden flex flex-col w-full pl-0 my-0 h-12;
-  display: none;
+  @apply hidden flex-col w-full pl-0 my-0 absolute;
+  background-color: #085d93;
 }
 .nav li {
-  @apply flex flex-row justify-start items-center h-full my-0 py-2 text-white text-sm px-2;
+  @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
 }
+.nav li a {
+  @apply align-middle w-full table-cell;
+  line-height: 3rem;
+}
+#menushow:hover .nav {
+  @apply block w-screen;
+  right: -1rem;
+}
+
 @screen md {
   .nav {
-    @apply w-auto block flex-row;
+    @apply block static w-auto flex-row h-12 bg-transparent;
   }
   .nav li {
-    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block px-4;
+    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
+  }
+  #menushow:hover .nav {
+    @apply pt-0;
+    right: 0;
+    width: initial;
   }
 }
 

assets/js/nav-collapse.js

@@ -1,7 +1,7 @@
     $(document).ready(function () {
         
         var nav = document.querySelector('.index-navbar');
-        var feed = document.querySelector('#post');
+        var feed = document.querySelector('.content');
 
         var lastScrollY = window.scrollY;
         var lastWindowHeight = window.innerHeight;

assets/js/nav.js

@@ -1,24 +0,0 @@
-
-
-function sliderheight(a) {
-        divHeight = $('.navbar').height();
-        if(a) {
-           $('.nav').css({'background-color' : '#3b90c6'});
-        } else {
-           $('.nav').css({'background-color' : ''});
-        }
-}
-
-      $("#menushow").click(function() {
-        var menu = $(".nav");
-        var menubtn = $("#menushow");
-        if(menu.is(":hidden")) {
-          sliderheight(true);
-          menu.slideDown(250);
-        } else {
-          menu.slideUp(250, function() {
-            sliderheight(false) ;
-          });
-        }
-      });
-

author.hbs

@@ -50,7 +50,7 @@
 </div>
 {{/author}}
 
-<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
+<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
 {{#foreach posts}}
   {{> "post-card"}}
 {{/foreach}}

index.hbs

@@ -9,7 +9,7 @@
   </div>
 </div>
 
-<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
+<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
 {{#foreach posts}}
   {{> "post-card"}}
 {{/foreach}}

partials/site-header.hbs

@@ -14,8 +14,8 @@
           <p class="text-sm text-white">{{@site.description}}</p>
         </div>
       </div>
-      <div id="menushow" class="block md:hidden flex flex-column items-center px-2 py-2 cursor-pointer">
-        <img src="{{asset "images/menu.svg"}}" class="h-8 text-white" style="filter: invert(1);" alt="menu"/>
-      </div>
+      <div id="menushow" class="cursor-pointer relative">
+        <img src="{{asset "images/menu.svg"}}" class="h-12 px-3 py-3 text-white md:hidden" style="filter: invert(1);" alt="menu"/>
         {{navigation}}
+      </div>
     </header>

tag.hbs

@@ -27,7 +27,7 @@
 </div>
 {{/tag}}
 
-<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
+<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
 {{#foreach posts}}
   {{> "post-card"}}
 {{/foreach}}