Add navigation to vue, improve responsiveness of the design

resources/assets/styles/components/miscellaneous.css

@@ -49,11 +49,7 @@ code {
     @apply .pb-4;
 
     @screen smx {
-        @apply .w-1/2 .pr-4;
-
-        &:nth-of-type(2n) {
-            padding-right: 0;
-        }
+        @apply .w-full;
     }
 
     @screen md {

resources/assets/styles/components/navigation.css

@@ -4,11 +4,18 @@
 
     & > .logo {
         @apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2;
+
+        & a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        @screen xsx {
+            @apply .hidden
+        }
     }
 
     & > .menu {
-        @apply .float-right .mx-8 .inline-block;
-
         & > ul {
             @apply .list-reset;
             & > li {
@@ -19,10 +26,21 @@
 
                     &:hover {
                         @apply .bg-blue-dark;
+                    }
 
+                    & .feather {
+                        @apply .h-4;
                     }
                 }
             }
         }
+
+        @screen xsx {
+            @apply .w-full .text-center;
+        }
+
+        @screen sm {
+            @apply .float-right .mx-8 .inline-block;
+        }
     }
 }

resources/assets/styles/main.css

@@ -25,5 +25,11 @@
  * Assorted Other CSS
  */
 body {
-  @apply .font-sans;
+    @apply .font-sans;
+}
+
+.container {
+    @screen xsx {
+        @apply .px-2;
+    }
 }