From db89ce6d897c5e774a68925796c8253e70dbf90d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Weller?= <info@lost.design>
Date: Tue, 14 May 2019 20:27:33 +0200
Subject: [PATCH] add brand, fix typo, clickable cards

---
 components/Card.vue | 21 +++++++++++++++++++--
 components/Logo.vue | 31 +++++++++++++++++++++++++++----
 nuxt.config.js      |  2 +-
 pages/index.vue     |  3 +--
 4 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/components/Card.vue b/components/Card.vue
index 7fd7366..96d7705 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .card
+  .card(@click="goToSite(url)")
     .card--title
       p {{title}}
     .card--body
@@ -9,7 +9,12 @@
 
 <script>
 export default {
-  props: ['title', 'desc', 'url']
+  props: ['title', 'desc', 'url'],
+  methods: {
+    goToSite(url){
+      location.href = url
+    }
+  }
 }
 </script>
 
@@ -19,6 +24,17 @@ export default {
   background: #2D3748;
   border-radius: .3rem;
   padding: 1rem;
+  transition: .2s ease-in-out;
+  display:flex;
+  flex-direction: column;
+
+  &:hover {
+    transform: scale(1.002);
+    background: #008190;
+    cursor: pointer;
+    box-shadow: 0 4px 6px -1px rgba(45, 55, 72, 0.1), 0 2px 4px -1px rgba(45, 55, 72, 0.06);
+
+  }
 
   &--title {
     p{
@@ -38,6 +54,7 @@ export default {
     a {
      font-size: 12px;
      line-height: 1;
+     align-self: bottom;
     }
   }
 }
diff --git a/components/Logo.vue b/components/Logo.vue
index 6144891..7a87b5d 100644
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -1,15 +1,38 @@
 <template lang="pug">
-  nuxt-link(to="/").logo
+  .logo(@click="goToHome")
     img(src="~/assets/logo.svg")
+    p webgems.io
 </template>
 
+<script>
+export default {
+  methods: {
+    goToHome(){
+      this.$router.push("/")
+    }
+  }
+}
+</script>
+
 
 <style lang="scss" scoped>
 .logo {
   display: flex;
   align-items: center;
+  justify-content: center;
+  flex-direction: row;
+
+  &:hover {
+    cursor: pointer;
+  }
+  img {
+    max-width:30px;
+  }
+  p {
+    margin: 0 0 0 .3rem;
+    font-size: 12px;
+  }
 }
-img {
-  padding: .2rem;
-}
+
+
 </style>
diff --git a/nuxt.config.js b/nuxt.config.js
index d0de572..aa5602a 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -7,7 +7,7 @@ export default {
   ** Headers of the page
   */
   head: {
-    title: '💎webgems',
+    title: 'webgems',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
diff --git a/pages/index.vue b/pages/index.vue
index f92fbd8..b317496 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,8 +2,7 @@
 div
   main
     h1.text-black.font-bold.text-xl.mb-2 What is &nbsp;
-      span.text-teal webgems 💎&nbsp;
-      | ?
+      span 💎 webgems ?
     p As of now, it's a curated list of resources for developers and designers. If you want to suggest a resource, go ahead and contact me&nbsp;
       a(href="https://twitter.com/lostdesign") @lostdesign&nbsp;
       | or lost#0001 on discord