Prevent card hover feedback loop

2 files changed, 15 insertions, 1 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 9e73dd9..7bd76f3 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -29,6 +29,16 @@
         background-color: prop(--colors --bg);
         line-height:      1.4;
 
+        &::after {
+            content:  '';
+            display:  none;
+            position: absolute;
+            top:      100%;
+            left:     0;
+            width:    100%;
+            height:   calc(-1 * #{prop(--dims --hover-offset)});
+        }
+
         small,
         strong {
             transition: background-color .2s, color .2s;
@@ -43,6 +53,10 @@
                 transform:        translateY(#{prop(--dims --hover-offset)});
                 background-color: prop(--colors --hover --bg);
                 color:            prop(--colors --hover --fg);
+
+                &::after {
+                    display: block;
+                }
     
                 small,
                 strong {
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 04efb1e..301827c 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -35,7 +35,7 @@
                     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);