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>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
+<template lang="pug">
+  nuxt-link(to="/").logo
+    img(src="~/assets/icons-1.png")
 </template>
 
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
 
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
+<style lang="scss" scoped>
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-
-.Triangle--one {
-  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;
-  }
+img {
+  padding: .2rem;
 }
 </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>