summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-22 20:48:06 +0200
committerVolpeon <git@volpeon.ink>2021-04-22 20:48:06 +0200
commit61614e57c4b87c6271fd4fef886ba6626cc8e49a (patch)
tree38016c4d95a19bf2acd3d546ecda8338d303a26a
parentImproved card hover effect (diff)
downloadvolpeon.ink-61614e57c4b87c6271fd4fef886ba6626cc8e49a.tar.gz
volpeon.ink-61614e57c4b87c6271fd4fef886ba6626cc8e49a.tar.bz2
volpeon.ink-61614e57c4b87c6271fd4fef886ba6626cc8e49a.zip
Prevent card hover feedback loop
-rw-r--r--assets/css/components/_card.scss14
-rw-r--r--assets/css/components/_project.scss2
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 @@
29 background-color: prop(--colors --bg); 29 background-color: prop(--colors --bg);
30 line-height: 1.4; 30 line-height: 1.4;
31 31
32 &::after {
33 content: '';
34 display: none;
35 position: absolute;
36 top: 100%;
37 left: 0;
38 width: 100%;
39 height: calc(-1 * #{prop(--dims --hover-offset)});
40 }
41
32 small, 42 small,
33 strong { 43 strong {
34 transition: background-color .2s, color .2s; 44 transition: background-color .2s, color .2s;
@@ -43,6 +53,10 @@
43 transform: translateY(#{prop(--dims --hover-offset)}); 53 transform: translateY(#{prop(--dims --hover-offset)});
44 background-color: prop(--colors --hover --bg); 54 background-color: prop(--colors --hover --bg);
45 color: prop(--colors --hover --fg); 55 color: prop(--colors --hover --fg);
56
57 &::after {
58 display: block;
59 }
46 60
47 small, 61 small,
48 strong { 62 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 @@
35 transform: translateY(#{prop(--card --dims --hover-offset, $global: true)}); 35 transform: translateY(#{prop(--card --dims --hover-offset, $global: true)});
36 background-color: prop(--card --colors --hover --bg, $global: true); 36 background-color: prop(--card --colors --hover --bg, $global: true);
37 color: prop(--card --colors --hover --fg, $global: true); 37 color: prop(--card --colors --hover --fg, $global: true);
38 38
39 small, 39 small,
40 strong { 40 strong {
41 color: prop(--card --colors --hover --fg, $global: true); 41 color: prop(--card --colors --hover --fg, $global: true);