diff --git a/blocks/card/CardMouseShadowed.js b/blocks/card/CardMouseShadowed.js index 10ade6d..64360d5 100644 --- a/blocks/card/CardMouseShadowed.js +++ b/blocks/card/CardMouseShadowed.js @@ -24,7 +24,7 @@ export default class CardMouseShadowed extends MC { super( document.body, ['card'], - `.card${modifier} > .card__inner` + `.card${modifier}` ); /** diff --git a/blocks/card/card--projects__background/card--projects__background.css b/blocks/card/card--projects__background/card--projects__background.css index f3944d2..1e32835 100644 --- a/blocks/card/card--projects__background/card--projects__background.css +++ b/blocks/card/card--projects__background/card--projects__background.css @@ -1,35 +1,72 @@ +.card--projects__background { + --__bg-size: var(--_bg-size, var(--_w) auto); + --_pos: var(--projects--scroll-top, 0) 0; + + background-image: + radial-gradient( + circle at + calc( + var(--card__inner--mouse-shadow-left, -100%) + / var(--_hover-scale) + ) + calc( + var(--card__inner--mouse-shadow-top, -100%) / + var(--_hover-scale) + ), + var(--_c0) 0, + var(--_c1) calc(0.1 * var(--_w)) + ); + + -webkit-mask: + var(--_card-background) repeat + var(--_pos) / + var(--__bg-size); + mask: + var(--_card-background) repeat + var(--_pos) / + var(--__bg-size); + -webkit-mask-composite: xor; + mask-composite: subtract; +} + +@media screen and (orientation: portrait) { + .card--projects__background { + --_pos: 0 0; + } +} + .card--projects__background--portfolio { - background: url("/blocks/card/card--projects__background/goldstein web.svg") repeat; - background-size: calc(0.3 * var(--_w)) auto; + --_card-background: url("/blocks/card/card--projects__background/goldstein web.svg"); + --_bg-size: calc(0.3 * var(--_w)) auto; } .card--projects__background--sincos { - background: url("/blocks/card/card--projects__background/sincos.svg") repeat; - background-size: calc(0.3 * var(--_w)) auto; + --_card-background: url("/blocks/card/card--projects__background/sincos.svg"); + --_bg-size: calc(0.3 * var(--_w)) auto; } .card--projects__background--cyp { - background: url("/blocks/card/card--projects__background/cyp.svg") repeat; - background-size: calc(var(--_w)) auto; + --_card-background: url("/blocks/card/card--projects__background/cyp.svg"); + --_bg-size: calc(var(--_w)) auto; } .card--projects__background--todograph { - background: url("/blocks/card/card--projects__background/todograph.svg") repeat; - background-size: calc(0.5 * var(--_w)) auto; + --_card-background: url("/blocks/card/card--projects__background/todograph.svg"); + --_bg-size: calc(0.5 * var(--_w)) auto; } .card--projects__background--bfs { - background: url("/blocks/card/card--projects__background/bfs.svg") repeat; - background-size: calc(0.75 * var(--_w)) auto; + --_card-background: url("/blocks/card/card--projects__background/bfs.svg"); + --_bg-size: calc(0.75 * var(--_w)); } .card--projects__background--empty { - background: + --_card-background: repeating-linear-gradient( 45deg, var(--c1) 0, - var(--c0) 40px, + transparent 40px, var(--c1) 80px ); - background-size: 114px; + --_bg-size: 114px; } \ No newline at end of file diff --git a/blocks/projects/projects.css b/blocks/projects/projects.css index b68bb0a..e58221f 100644 --- a/blocks/projects/projects.css +++ b/blocks/projects/projects.css @@ -37,10 +37,6 @@ width: var(--h); } -.projects__project-card .card--projects__background { - background-position: var(--projects--scroll-top) 0; -} - .projects__project-card:last-of-type { margin-bottom: 0; } @@ -146,8 +142,4 @@ margin-left: 0; width: auto; } - - .projects__project-card .card--projects__background { - background-position: 0 var(--projects--scroll-top); - } }