From 52f9dc373461761d9454dbd9d2fbf28b6059398b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 23 Apr 2021 22:43:33 +0200 Subject: Update --- assets/css/components/_card.scss | 1 + assets/css/components/_project.scss | 12 ++++-------- 2 files changed, 5 insertions(+), 8 deletions(-) (limited to 'assets/css/components') diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 7bd76f3..37d4b0e 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -25,6 +25,7 @@ display: flex; position: relative; align-items: center; + transform: translateY(0); transition: transform .2s, background-color .2s, color .2s; background-color: prop(--colors --bg); line-height: 1.4; diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss index 301827c..6fac047 100644 --- a/assets/css/components/_project.scss +++ b/assets/css/components/_project.scss @@ -16,11 +16,6 @@ background-color: prop(--colors --bg); } - &::after { - content: ''; - background-image: linear-gradient(340deg, rgba(#000, .25) 5em, transparent 18em); - } - &:link, &:visited { color: currentColor; @@ -44,7 +39,7 @@ } } - @include multi('element' 'picture', '&::after') { + @include multi('element' 'picture') { display: block; position: absolute; z-index: 10; @@ -68,11 +63,12 @@ @include element('picture') { transition: opacity .2s; + mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em); } @include media('<=sm') { - &::after { - background-image: linear-gradient(to top, rgba(#000, .25) 1em, transparent 11em); + @include element('picture') { + mask-image: iro-easing-gradient(linear, to top, rgba(#000, .75) 2em, ease, #000 17em); } } } -- cgit v1.2.3-70-g09d2