Fix mobile

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>