Improved card hover effect

2 files changed, 31 insertions, 18 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index cb18810..9e73dd9 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,13 +1,15 @@
 @include namespace('card') {
     @include store((
         --dims: (
-            --pad-x: 1.1em,
-            --pad-y: .8em
+            --pad-x:        1.1em,
+            --pad-y:        .8em,
+            --hover-offset: -.5rem,
         ),
         --colors: (
             --bg: prop(--colors --bg-lo, $global: true),
-            --flip: (
-                --bg: prop(--colors --bg-lo, $global: true),
+            --hover: (
+                --bg: prop(--colors --fg-lo, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
             )
         )
     ));
@@ -23,21 +25,28 @@
         display:          flex;
         position:         relative;
         align-items:      center;
+        transition:       transform .2s, background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         line-height:      1.4;
 
+        small,
+        strong {
+            transition: background-color .2s, color .2s;
+        }
+
         &:link,
         &:visited {
             color:           currentColor;
             text-decoration: none;
-        }
 
-        &:hover {
-            @include element('content') {
-                @include modifier('flip') {
-                    visibility: visible;
-                    transition: visibility 0s, opacity .2s;
-                    opacity:    1;
+            &:hover {
+                transform:        translateY(#{prop(--dims --hover-offset)});
+                background-color: prop(--colors --hover --bg);
+                color:            prop(--colors --hover --fg);
+    
+                small,
+                strong {
+                    color: prop(--colors --hover --fg);
                 }
             }
         }
@@ -55,7 +64,7 @@
                 height:           100%;
                 transition:       visibility 0s linear .2s, opacity .2s;
                 opacity:          0;
-                background-color: prop(--colors --flip --bg);
+                background-color: prop(--colors --hover --bg);
             }
 
             @include sibling-element('icon') {
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') {