From 0ab7d5c877da56d2bb30c97ee49c00a1641470fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Weller?= <info@lost.design>
Date: Sun, 12 May 2019 01:35:18 +0200
Subject: [PATCH] Fix mobile

---
 components/Card.vue         |  2 +-
 layouts/default.vue         | 28 +++++++++++++++++++++++++++-
 pages/communities/index.vue |  5 -----
 pages/css/index.vue         |  5 -----
 pages/design/index.vue      |  5 -----
 pages/frontend/index.vue    | 34 ++++++++++++++++++++++++++++++++++
 pages/html/index.vue        |  5 -----
 pages/index.vue             |  1 -
 pages/javascript/index.vue  | 11 ++++++-----
 pages/servers/index.vue     |  5 -----
 10 files changed, 68 insertions(+), 33 deletions(-)
 create mode 100644 pages/frontend/index.vue

diff --git a/components/Card.vue b/components/Card.vue
index dbb9764..837a968 100644
--- a/components/Card.vue
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index be67b0e..6d8c611 100644
--- a/layouts/default.vue
+++ b/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>
diff --git a/pages/communities/index.vue b/pages/communities/index.vue
index 4feebca..989f697 100644
--- a/pages/communities/index.vue
+++ b/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>
diff --git a/pages/css/index.vue b/pages/css/index.vue
index 65390b2..b828892 100644
--- a/pages/css/index.vue
+++ b/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>
diff --git a/pages/design/index.vue b/pages/design/index.vue
index 2ad5c25..92beffd 100644
--- a/pages/design/index.vue
+++ b/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>
diff --git a/pages/frontend/index.vue b/pages/frontend/index.vue
new file mode 100644
index 0000000..807d28e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/pages/html/index.vue b/pages/html/index.vue
index a3ad870..debc802 100644
--- a/pages/html/index.vue
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index 6e09fda..76e7ed5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,7 +18,6 @@ export default {}
 
 <style lang="scss" scoped>
 main {
-  width: 100%;
   height: 100vh;
 }
 </style>
diff --git a/pages/javascript/index.vue b/pages/javascript/index.vue
index 90bcbb4..4f1372a 100644
--- a/pages/javascript/index.vue
+++ b/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>
diff --git a/pages/servers/index.vue b/pages/servers/index.vue
index b41e604..316c2be 100644
--- a/pages/servers/index.vue
+++ b/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>