diff options
author | Volpeon <git@volpeon.ink> | 2021-04-22 20:48:06 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-22 20:48:06 +0200 |
commit | 61614e57c4b87c6271fd4fef886ba6626cc8e49a (patch) | |
tree | 38016c4d95a19bf2acd3d546ecda8338d303a26a | |
parent | Improved card hover effect (diff) | |
download | volpeon.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.scss | 14 | ||||
-rw-r--r-- | assets/css/components/_project.scss | 2 |
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); |