Fix mobile

components/Card.vue

@@ -4,7 +4,7 @@
       p {{title}}
     .card--body
       p {{desc}}
-      a(:href="url") {{url}}
+      a(:href="url" target='_blank') {{url}}
 </template>
 
 <script>

layouts/default.vue

@@ -48,7 +48,7 @@ a {
 
 .layout {
   display: grid;
-  grid-template-columns: 4vw 4vw 92vw;
+  grid-template-columns: 100px 100px auto;
   grid-gap: 1rem;
   margin-top: 1rem;
   grid-template-areas:
@@ -71,5 +71,31 @@ a {
 
 .content {
   grid-area: content;
+  width: 90%;
+}
+
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
+
+@media only screen
+  and (min-device-width: 375px)
+  and (max-device-width: 812px)
+ {
+
+  .cards {
+    display:grid;
+    grid-template-columns: 1fr;
+    grid-gap: 3rem;
+  }
+  .layout {
+    grid-template-columns: 50px 50px auto;
+    grid-template-areas:
+    'logo logo search'
+    '. . .'
+    'sidebar sidebar content';
+  }
 }
 </style>

pages/communities/index.vue

@@ -31,9 +31,4 @@ export default {
 h1 {
   margin-bottom: 2rem;
 }
-.cards {
-  display:grid;
-  grid-template-columns: repeat(4, 20%);
-  grid-gap: 3rem;
-}
 </style>

pages/css/index.vue

@@ -36,9 +36,4 @@ export default {
 h1 {
   margin-bottom: 2rem;
 }
-.cards {
-  display:grid;
-  grid-template-columns: repeat(4, 20%);
-  grid-gap: 3rem;
-}
 </style>

pages/design/index.vue

@@ -41,9 +41,4 @@ export default {
 h1 {
   margin-bottom: 2rem;
 }
-.cards {
-  display:grid;
-  grid-template-columns: repeat(4, 20%);
-  grid-gap: 3rem;
-}
 </style>

pages/frontend/index.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+  div
+    h1 Frontend
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
+</template>
+
+<script>
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Frontend Handbook 2019',
+          desc: 'A lovely guide made by frontendmasters.',
+          url: 'https://frontendmasters.com/books/front-end-handbook/2019/'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+</style>

pages/html/index.vue

@@ -31,9 +31,4 @@ export default {
 h1 {
   margin-bottom: 2rem;
 }
-.cards {
-  display:grid;
-  grid-template-columns: repeat(4, 20%);
-  grid-gap: 3rem;
-}
 </style>

pages/index.vue

@@ -18,7 +18,6 @@ export default {}
 
 <style lang="scss" scoped>
 main {
-  width: 100%;
   height: 100vh;
 }
 </style>

pages/javascript/index.vue

@@ -18,6 +18,11 @@ export default {
           desc: 'Free video courses about javascript. Made by WesBos',
           url: 'https://javascript30.com'
         },
+        {
+          title: 'Learn vanilla js',
+          desc: 'A vanilla JS roadmap, along with learning resources and project ideas to help you get started.',
+          url: 'https://learnvanillajs.com/'
+        },
       ]
     }
   },
@@ -31,9 +36,5 @@ export default {
 h1 {
   margin-bottom: 2rem;
 }
-.cards {
-  display:grid;
-  grid-template-columns: repeat(4, 20%);
-  grid-gap: 3rem;
-}
+
 </style>

pages/servers/index.vue

@@ -42,9 +42,4 @@ export default {
 h1 {
   margin-bottom: 2rem;
 }
-.cards {
-  display:grid;
-  grid-template-columns: repeat(4, 20%);
-  grid-gap: 3rem;
-}
 </style>