use ghost nav

assets/built/styles.css

@@ -726,8 +726,6 @@ footer {
   -webkit-box-direction: normal;
           flex-direction: column;
   width: 100%;
-  display: block;
-  margin-top: 0.5rem;
   display: none;
 }
 
@@ -737,11 +735,11 @@ footer {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
           flex-direction: row;
-  height: 3rem;
-  -webkit-box-align: center;
-          align-items: center;
   -webkit-box-pack: start;
           justify-content: flex-start;
+  -webkit-box-align: center;
+          align-items: center;
+  height: 3rem;
   border-color: #fff;
   border-top-width: 1px;
   border-bottom-width: 1px;
@@ -755,16 +753,27 @@ footer {
 
 @media (min-width: 768px) {
   .nav {
-    display: block;
     width: auto;
+    display: block;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+            flex-direction: row;
   }
 
-  .nav-li {
+  .nav li {
+    -o-object-fit: contain;
+       object-fit: contain;
     -webkit-box-pack: center;
             justify-content: center;
-    border-style: none;
+    -webkit-box-align: center;
+            align-items: center;
+    border-bottom-width: 0;
+    border-top-width: 0;
     margin-top: 0;
     margin-bottom: 0;
+    display: inline-block;
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 }
 

assets/css/styles.css

@@ -60,19 +60,18 @@ footer {
 }
 
 .nav {
-  @apply hidden flex flex-col w-full block mt-2;
+  @apply hidden flex flex-col w-full;
   display: none;
 }
 .nav li {
-  @apply flex flex-row h-12 items-center justify-start border-white border-t border-b my-0 py-2 text-white text-sm;
-  
+  @apply flex flex-row justify-start items-center h-12 border-white border-t border-b my-0 py-2 text-white text-sm;
 }
 @screen md {
   .nav {
-    @apply block w-auto;
+    @apply w-auto block flex-row;
   }
-  .nav-li {
-    @apply justify-center border-none my-0;
+  .nav li {
+    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block px-4;
   }
 }
 @tailwind components;

default.hbs

@@ -17,7 +17,7 @@
         <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
       </div>
       {{/if}}
-      <div class="flex flex-col flex-grow ml-4">
+      <div class="flex flex-col ml-4 flex-grow">
         <div class="">
          <a href="{{@site.url}}">
           <h1 class="text-lg text-white">{{@site.title}}</h1>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "engines": {
         "ghost-api": "v3"
     },