From 572e88bbaf7cfd0e2ee5ccafb3c0918f070dda54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ma=C5=84czak?=
 <56172798+jakubmanczak@users.noreply.github.com>
Date: Mon, 12 Apr 2021 08:14:56 +0200
Subject: [PATCH] card hover styles

---
 src/App.vue             | 3 ++-
 src/components/card.vue | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index a6ee290..4e1c7a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,10 +22,11 @@
 
 <style lang="sass">
   @import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap')
+  @import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap')
   :root
     --dark-bg: #1a1a1a
     --dark-bg2: #212121
-    --dark-bg3: #414141
+    --dark-bg3: #313131
     --light: #c0c0c0
   *
     margin: 0
diff --git a/src/components/card.vue b/src/components/card.vue
index a75cc21..09f27a2 100644
--- a/src/components/card.vue
+++ b/src/components/card.vue
@@ -33,6 +33,7 @@ export default defineComponent({
     user-select: none
     color: inherit
     text-decoration: inherit
+    transition-duration: 100ms
     img
       width: 84px
       border-radius: 8px 0 0 8px
@@ -42,4 +43,9 @@ export default defineComponent({
       .name
         font-size: 1.7em
         letter-spacing: 0.1em
+      .meta
+        opacity: 0.5 
+    &:focus,&:hover
+      background-color: var(--dark-bg3)
+      transform: scale(1.05)
 </style>
\ No newline at end of file