diff options
author | Volpeon <git@volpeon.ink> | 2021-04-22 19:36:19 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-22 19:36:19 +0200 |
commit | 75dbf84e28977a5c19913892e00dc499626c8827 (patch) | |
tree | 4a6194781a1540bfbd21d0ff577fae886006d5e4 /assets | |
parent | Fix outer button font weight (diff) | |
download | volpeon.ink-75dbf84e28977a5c19913892e00dc499626c8827.tar.gz volpeon.ink-75dbf84e28977a5c19913892e00dc499626c8827.tar.bz2 volpeon.ink-75dbf84e28977a5c19913892e00dc499626c8827.zip |
Improved card hover effect
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/components/_card.scss | 33 | ||||
-rw-r--r-- | assets/css/components/_project.scss | 16 |
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 @@ | |||
1 | @include namespace('card') { | 1 | @include namespace('card') { |
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --pad-x: 1.1em, | 4 | --pad-x: 1.1em, |
5 | --pad-y: .8em | 5 | --pad-y: .8em, |
6 | --hover-offset: -.5rem, | ||
6 | ), | 7 | ), |
7 | --colors: ( | 8 | --colors: ( |
8 | --bg: prop(--colors --bg-lo, $global: true), | 9 | --bg: prop(--colors --bg-lo, $global: true), |
9 | --flip: ( | 10 | --hover: ( |
10 | --bg: prop(--colors --bg-lo, $global: true), | 11 | --bg: prop(--colors --fg-lo, $global: true), |
12 | --fg: prop(--colors --bg-hi, $global: true), | ||
11 | ) | 13 | ) |
12 | ) | 14 | ) |
13 | )); | 15 | )); |
@@ -23,21 +25,28 @@ | |||
23 | display: flex; | 25 | display: flex; |
24 | position: relative; | 26 | position: relative; |
25 | align-items: center; | 27 | align-items: center; |
28 | transition: transform .2s, background-color .2s, color .2s; | ||
26 | background-color: prop(--colors --bg); | 29 | background-color: prop(--colors --bg); |
27 | line-height: 1.4; | 30 | line-height: 1.4; |
28 | 31 | ||
32 | small, | ||
33 | strong { | ||
34 | transition: background-color .2s, color .2s; | ||
35 | } | ||
36 | |||
29 | &:link, | 37 | &:link, |
30 | &:visited { | 38 | &:visited { |
31 | color: currentColor; | 39 | color: currentColor; |
32 | text-decoration: none; | 40 | text-decoration: none; |
33 | } | ||
34 | 41 | ||
35 | &:hover { | 42 | &:hover { |
36 | @include element('content') { | 43 | transform: translateY(#{prop(--dims --hover-offset)}); |
37 | @include modifier('flip') { | 44 | background-color: prop(--colors --hover --bg); |
38 | visibility: visible; | 45 | color: prop(--colors --hover --fg); |
39 | transition: visibility 0s, opacity .2s; | 46 | |
40 | opacity: 1; | 47 | small, |
48 | strong { | ||
49 | color: prop(--colors --hover --fg); | ||
41 | } | 50 | } |
42 | } | 51 | } |
43 | } | 52 | } |
@@ -55,7 +64,7 @@ | |||
55 | height: 100%; | 64 | height: 100%; |
56 | transition: visibility 0s linear .2s, opacity .2s; | 65 | transition: visibility 0s linear .2s, opacity .2s; |
57 | opacity: 0; | 66 | opacity: 0; |
58 | background-color: prop(--colors --flip --bg); | 67 | background-color: prop(--colors --hover --bg); |
59 | } | 68 | } |
60 | 69 | ||
61 | @include sibling-element('icon') { | 70 | @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 @@ | |||
25 | &:visited { | 25 | &:visited { |
26 | color: currentColor; | 26 | color: currentColor; |
27 | text-decoration: none; | 27 | text-decoration: none; |
28 | 28 | ||
29 | &:hover { | 29 | &:hover { |
30 | @include element('picture') { | 30 | @include element('picture') { |
31 | opacity: .75; | 31 | opacity: .75; |
32 | } | 32 | } |
33 | 33 | ||
34 | @include element('card') { | 34 | @include element('card') { |
35 | transform: translateY(-1em); | 35 | transform: translateY(#{prop(--card --dims --hover-offset, $global: true)}); |
36 | background-color: prop(--card --colors --hover --bg, $global: true); | ||
37 | color: prop(--card --colors --hover --fg, $global: true); | ||
38 | |||
39 | small, | ||
40 | strong { | ||
41 | color: prop(--card --colors --hover --fg, $global: true); | ||
42 | } | ||
36 | } | 43 | } |
37 | } | 44 | } |
38 | } | 45 | } |
@@ -56,14 +63,11 @@ | |||
56 | bottom: 1em; | 63 | bottom: 1em; |
57 | min-width: 15em; | 64 | min-width: 15em; |
58 | max-width: calc(100% - 2em); | 65 | max-width: calc(100% - 2em); |
59 | transform: translateY(0); | 66 | box-shadow: 0 .3em 1em rgba(#000, .15); |
60 | transition: transform .2s; | ||
61 | box-shadow: 0 .3em 1em rgba(#000, .25); | ||
62 | } | 67 | } |
63 | 68 | ||
64 | @include element('picture') { | 69 | @include element('picture') { |
65 | transition: opacity .2s; | 70 | transition: opacity .2s; |
66 | opacity: 1; | ||
67 | } | 71 | } |
68 | 72 | ||
69 | @include media('<=sm') { | 73 | @include media('<=sm') { |