summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_project.scss33
1 files changed, 16 insertions, 17 deletions
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 6fac047..580e70b 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -7,12 +7,13 @@
7 7
8 @include component(namespace()) { 8 @include component(namespace()) {
9 position: relative; 9 position: relative;
10 overflow: hidden;
10 11
11 &::before { 12 &::before {
12 content: ''; 13 content: '';
13 display: block; 14 display: block;
14 padding-top: 12em; 15 padding-top: 12em;
15 padding-bottom: 25%; 16 padding-bottom: 5vw;
16 background-color: prop(--colors --bg); 17 background-color: prop(--colors --bg);
17 } 18 }
18 19
@@ -24,6 +25,7 @@
24 &:hover { 25 &:hover {
25 @include element('picture') { 26 @include element('picture') {
26 opacity: .75; 27 opacity: .75;
28 filter: blur(0);
27 } 29 }
28 30
29 @include element('card') { 31 @include element('card') {
@@ -39,16 +41,18 @@
39 } 41 }
40 } 42 }
41 43
42 @include multi('element' 'picture') { 44 @include element('picture') {
43 display: block; 45 display: block;
44 position: absolute; 46 position: absolute;
45 z-index: 10; 47 z-index: 10;
46 top: 0; 48 top: 0;
47 left: 0; 49 left: 0;
48 width: 100%; 50 width: 100%;
49 height: 100%; 51 height: 100%;
50 object-fit: cover; 52 object-fit: cover;
51 object-position: center center; 53 object-position: center center;
54 transition: opacity .2s;
55 mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
52 } 56 }
53 57
54 @include element('card') { 58 @include element('card') {
@@ -58,12 +62,7 @@
58 bottom: 1em; 62 bottom: 1em;
59 min-width: 15em; 63 min-width: 15em;
60 max-width: calc(100% - 2em); 64 max-width: calc(100% - 2em);
61 box-shadow: 0 .3em 1em rgba(#000, .15); 65 box-shadow: 0 .8em 2.5em rgba(#000, .25);
62 }
63
64 @include element('picture') {
65 transition: opacity .2s;
66 mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
67 } 66 }
68 67
69 @include media('<=sm') { 68 @include media('<=sm') {