update

components/Card.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+  .card
+    .card--title
+      p {{title}}
+    .card--body
+      p {{desc}}
+      a(:href="url") {{url}}
+</template>
+
+<script>
+export default {
+  props: ['title', 'desc', 'url']
+}
+</script>
+
+
+<style lang="scss" scoped>
+.card {
+  &--title {
+    font-weight: 900;
+    margin-bottom: .5rem;
+  }
+
+  &--body {
+    p {
+      font-size: 12px;
+      color: #8795A1;
+      margin-bottom: .5rem;
+    }
+    a {
+     font-size: 9px;
+     line-height: 1;
+    }
+  }
+}
+</style>

components/Logo.vue

@@ -1,79 +1,16 @@
-<template>
+<template lang="pug">
-  <div class="VueToNuxtLogo">
+  nuxt-link(to="/").logo
-    <div class="Triangle Triangle--two" />
+    img(src="~/assets/icons-1.png")
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
 </template>
 
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
 
-.Triangle {
+<style lang="scss" scoped>
-  position: absolute;
+.logo {
-  top: 0;
+  display: flex;
-  left: 0;
+  align-items: center;
-  width: 0;
+  justify-content: center;
-  height: 0;
 }
-
+img {
-.Triangle--one {
+  padding: .2rem;
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
 }
 </style>

components/Search.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  input.search(placeholder="Search")
+</template>
+
+<style lang="scss">
+input {
+  width: 50%;
+  padding: .7rem 2rem .7rem 2rem;
+  border-radius: .5rem;
+  background: #eee;
+
+  &:focus {
+    outline:none;
+  }
+}
+
+</style>

components/Sidebar.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+  aside.sidebar
+    nuxt-link(to="/html") HTML
+    nuxt-link(to="/css") CSS
+    nuxt-link(to="/javascript") Javascript
+    nuxt-link(to="/design") Designs
+    nuxt-link(to="/devops") Devops
+    nuxt-link(to="/servers") Servers
+    nuxt-link(to="/communities") Communities
+</template>
+
+
+<style lang="scss" scoped>
+.sidebar {
+  padding-left: .5rem;
+  font-size: 14px;
+  margin: .5rem;
+
+  a {
+    display: block;
+    padding: 0 1rem 1rem 1rem;
+    text-decoration: none;
+  }
+}
+</style>

layouts/default.vue

@@ -1,12 +1,33 @@
-<template>
+<template lang="pug">
-  <div>
+  .layout
-    <nuxt />
+    Logo
-  </div>
+    Search
+    Sidebar
+    nuxt.content
 </template>
 
-<style>
+<script>
+import Logo from '../components/Logo'
+import Search from '../components/Search'
+import Sidebar from '../components/Sidebar'
+
+export default {
+  components: {
+    Logo,
+    Search,
+    Sidebar
+  }
+}
+</script>
+
+
+<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,900');
 
+body {
+  margin: 0;
+}
+
 html {
   font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -17,41 +38,38 @@ html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
+  color: #22292F;
 }
 
-*,
+a {
-*:before,
+  color: #3490DC;
-*:after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
   text-decoration: none;
-  padding: 10px 30px;
 }
 
-.button--green:hover {
+.layout {
-  color: #fff;
+  display: grid;
-  background-color: #3b8070;
+  grid-template-columns: 4vw 4vw 92vw;
+  grid-gap: 1rem;
+  margin-top: 1rem;
+  grid-template-areas:
+    'logo logo search'
+    '. . .'
+    'sidebar sidebar content';
 }
 
-.button--grey {
+.logo {
-  display: inline-block;
+  grid-area: logo;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
 }
 
-.button--grey:hover {
+.search {
-  color: #fff;
+  grid-area: search;
-  background-color: #35495e;
+}
+
+.sidebar {
+  grid-area: sidebar;
+}
+
+.content {
+  grid-area: content;
 }
 </style>

pages/css/index.vue

@@ -1,10 +1,44 @@
 <template lang="pug">
-  h1 CSS resources
+  div
+    h1 CSS
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Flexbox froggy',
+          desc: 'A game to learn Flexbox',
+          url: 'https://flexboxfroggy.com'
+        },
+        {
+          title: 'CSS Gridgarden',
+          desc: 'A game to learn Grid',
+          url: 'https://cssgridgarden.com'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>

pages/design/index.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+  div
+    h1 Design
+    .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: 'Undraw',
+          desc: 'Free vector illustrations for your website.',
+          url: 'https://undraw.co'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
+</style>

pages/html/index.vue

@@ -1,10 +1,39 @@
 <template lang="pug">
-  h1 HTML resources
+  div
+    h1 HTML
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'HTML ELEMENTS',
+          desc: 'All the HTML elemens you can use. There is more than just a div :)',
+          url: 'https://developer.mozilla.org/de/docs/Web/HTML/Element'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>

pages/index.vue

@@ -1,21 +1,13 @@
 <template lang="pug">
-div(class="lg:flex lg:justify-center lg:content-center")
+div
-  main.flex-col.max-w-md(class="lg:flex lg:justify-center lg:content-center")
+  main
-    h1.text-black.font-bold.text-xl.mb-2 What &nbsp;
+    h1.text-black.font-bold.text-xl.mb-2 What is &nbsp;
       span.text-teal webgems 💎&nbsp;
-      | is you may ask?
+      | ?
-    p.text-grey-darker.text-base.mb-8
+    p As of now, it's a currated list of resources for developers and designers.
-      | As of now, it's a currated list of resources for developers and designers. If you want to suggest a resource, go ahead and contact me&nbsp;
+    p If you want to suggest a resource, go ahead and contact me&nbsp;
       a(href="https://twitter.com/lostdesign") @lostdesign
 
-    ul.list-reset.flex
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/html') HTML
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/css') CSS
-      li.mr-6
-        nuxt-link.text-blue(class='hover:text-blue-darker' to='/javascript') Javascript
-
 </template>
 
 <script>

pages/javascript/index.vue

@@ -1,10 +1,39 @@
 <template lang="pug">
-  h1 JS resources
+  div
+    h1 Javascript
+    .cards
+      template(v-for='resource in resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
 </template>
 
 <script>
-export default {}
+import Card from '../../components/Card'
+
+export default {
+  data() {
+    return {
+      resources: [
+        {
+          title: 'Javascript30',
+          desc: 'Free video courses about javascript. Made by WesBos',
+          url: 'https://javascript30.com'
+        },
+      ]
+    }
+  },
+  components: {
+    Card
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+h1 {
+  margin-bottom: 2rem;
+}
+.cards {
+  display:grid;
+  grid-template-columns: repeat(4, 20%);
+  grid-gap: 3rem;
+}
 </style>