fix mobile

components/Search.vue

@@ -4,10 +4,10 @@
 
 <style lang="scss">
 input {
-  width: 50%;
   padding: .7rem 2rem .7rem 2rem;
-  border-radius: .5rem;
+  border-radius: .3rem;
   background: #eee;
+  font-size:12px;
 
   &:focus {
     outline:none;

components/Sidebar.vue

@@ -1,28 +1,34 @@
 <template lang="pug">
-  aside.sidebar
-    nuxt-link(to="/general") General
-    nuxt-link(to="/html") HTML
-    nuxt-link(to="/css") CSS
-    nuxt-link(to="/javascript") Javascript
-    nuxt-link(to="/php") PHP
-    nuxt-link(to="/design") Designs
-    nuxt-link(to="/servers") Servers
-    nuxt-link(to="/tools") Tools
-    nuxt-link(to="/daily") Daily
-    small And many more to come :)
+  aside
+    .sidebar
+      nuxt-link(to="/general") General
+      nuxt-link(to="/html") HTML
+      nuxt-link(to="/css") CSS
+      nuxt-link(to="/javascript") Javascript
+      nuxt-link(to="/php") PHP
+      nuxt-link(to="/design") Designs
+      nuxt-link(to="/servers") Servers
+      nuxt-link(to="/tools") Tools
+      nuxt-link(to="/daily") Daily
 </template>
 
 
 <style lang="scss" scoped>
 .sidebar {
-  padding-left: .5rem;
+  display:grid;
+  grid-template-columns: 1fr;
   font-size: 14px;
-  margin: .5rem;
 
   a {
-    display: block;
-    padding: 0 1rem 1rem 1rem;
+    padding: .5rem 1rem .5rem 1rem;
     text-decoration: none;
   }
 }
+
+@media (max-width: 500px) {
+  .sidebar {
+    display:grid;
+    grid-template-columns: repeat(auto-fit, minmax(6rem,1fr));
+  }
+}
 </style>

layouts/default.vue

@@ -25,7 +25,7 @@ export default {
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,900');
 
 body {
-  margin: 0;
+  margin: .5rem;
 }
 
 html {
@@ -49,12 +49,10 @@ a {
 
 .layout {
   display: grid;
-  grid-template-columns: 20vw auto;
+  grid-template-columns: 15vw auto;
   grid-gap: 1rem;
-  margin-top: 1rem;
   grid-template-areas:
     'logo search'
-    '. .'
     'sidebar content';
 }
 
@@ -72,7 +70,6 @@ a {
 
 .content {
   grid-area: content;
-  width: 90%;
 }
 
 .cards {
@@ -82,7 +79,10 @@ a {
 }
 
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
+  body {
+    margin: 1rem;
+  }
   .layout {
     display: grid;
     grid-template-columns: auto;

pages/index.vue

@@ -22,9 +22,3 @@ div
 <script>
 export default {}
 </script>
-
-<style lang="scss" scoped>
-main {
-  height: 100vh;
-}
-</style>