From 75dbf84e28977a5c19913892e00dc499626c8827 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 22 Apr 2021 19:36:19 +0200
Subject: Improved card hover effect

---
 assets/css/components/_project.scss | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'assets/css/components/_project.scss')

diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 4f4cd1b..04efb1e 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -25,14 +25,21 @@
         &:visited {
             color:           currentColor;
             text-decoration: none;
-            
+
             &:hover {
                 @include element('picture') {
                     opacity: .75;
                 }
 
                 @include element('card') {
-                    transform: translateY(-1em);
+                    transform:        translateY(#{prop(--card --dims --hover-offset, $global: true)});
+                    background-color: prop(--card --colors --hover --bg, $global: true);
+                    color:            prop(--card --colors --hover --fg, $global: true);
+        
+                    small,
+                    strong {
+                        color: prop(--card --colors --hover --fg, $global: true);
+                    }
                 }
             }
         }
@@ -56,14 +63,11 @@
             bottom:     1em;
             min-width:  15em;
             max-width:  calc(100% - 2em);
-            transform:  translateY(0);
-            transition: transform .2s;
-            box-shadow: 0 .3em 1em rgba(#000, .25);
+            box-shadow: 0 .3em 1em rgba(#000, .15);
         }
 
         @include element('picture') {
             transition: opacity .2s;
-            opacity:    1;
         }
 
         @include media('<=sm') {
-- 
cgit v1.2.3-54-g00ecf