From 4ed605f6edd65e29613478a1ece82d788ccb5c24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Weller?= <info@lost.design>
Date: Tue, 14 May 2019 21:19:08 +0200
Subject: [PATCH] update cards

---
 components/Card.vue | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/components/Card.vue b/components/Card.vue
index 96d7705..d897226 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -1,18 +1,17 @@
 <template lang="pug">
-  .card(@click="goToSite(url)")
-    .card--title
-      p {{title}}
+  .card(@click="goToSite(title,url)")
+    p.card--title {{title}}
     .card--body
       p {{desc}}
-      a(:href="url" target='_blank') Visit Website
+      a(:href="url" :target='title' rel='noreferrer') Visit Website
 </template>
 
 <script>
 export default {
   props: ['title', 'desc', 'url'],
   methods: {
-    goToSite(url){
-      location.href = url
+    goToSite(title,url){
+      window.open(url, title, 'noopener')
     }
   }
 }
@@ -25,8 +24,6 @@ export default {
   border-radius: .3rem;
   padding: 1rem;
   transition: .2s ease-in-out;
-  display:flex;
-  flex-direction: column;
 
   &:hover {
     transform: scale(1.002);
@@ -37,13 +34,14 @@ export default {
   }
 
   &--title {
-    p{
-      font-weight: 900;
-      margin: 0;
-    }
+    font-weight: 900;
+    margin: 0;
   }
 
   &--body {
+    display:flex;
+    flex-direction: column;
+
     p {
       font-size: 13px;
       color: white;
@@ -52,9 +50,9 @@ export default {
       letter-spacing: .5px;
     }
     a {
-     font-size: 12px;
-     line-height: 1;
-     align-self: bottom;
+      font-size: 12px;
+      line-height: 1;
+      align-self: flex-end;
     }
   }
 }