summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-22 19:36:19 +0200
committerVolpeon <git@volpeon.ink>2021-04-22 19:36:19 +0200
commit75dbf84e28977a5c19913892e00dc499626c8827 (patch)
tree4a6194781a1540bfbd21d0ff577fae886006d5e4
parentFix outer button font weight (diff)
downloadvolpeon.ink-75dbf84e28977a5c19913892e00dc499626c8827.tar.gz
volpeon.ink-75dbf84e28977a5c19913892e00dc499626c8827.tar.bz2
volpeon.ink-75dbf84e28977a5c19913892e00dc499626c8827.zip
Improved card hover effect
-rw-r--r--assets/css/components/_card.scss33
-rw-r--r--assets/css/components/_project.scss16
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') {