summaryrefslogtreecommitdiffstats
path: root/assets/css/components/_project.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components/_project.scss')
-rw-r--r--assets/css/components/_project.scss68
1 files changed, 0 insertions, 68 deletions
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
deleted file mode 100644
index 5248e32..0000000
--- a/assets/css/components/_project.scss
+++ /dev/null
@@ -1,68 +0,0 @@
1@include namespace('project') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 )
6 ));
7
8 @include component(namespace()) {
9 position: relative;
10 overflow: hidden;
11 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
12
13 &::before {
14 content: '';
15 display: block;
16 padding-top: 12em;
17 padding-bottom: 5vw;
18 background-color: prop(--colors --bg);
19 }
20
21 &:link,
22 &:visited {
23 color: currentColor;
24 text-decoration: none;
25
26 &:hover,
27 &:focus {
28 @include element('picture') {
29 opacity: .75;
30 filter: blur(0);
31 }
32
33 @include element('card') {
34 transform: translateY(#{prop(--card --dims --hover-offset, $global: true)});
35 background-color: prop(--card --colors --hover --bg, $global: true);
36 color: prop(--card --colors --hover --fg, $global: true);
37
38 * {
39 color: currentColor;
40 }
41 }
42 }
43 }
44
45 @include element('picture') {
46 display: block;
47 position: absolute;
48 z-index: 10;
49 top: 0;
50 left: 0;
51 width: 100%;
52 height: 100%;
53 object-fit: cover;
54 object-position: center center;
55 transition: opacity .2s;
56 mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
57 }
58
59 @include element('card') {
60 position: absolute;
61 z-index: 20;
62 right: 1em;
63 bottom: 1em;
64 min-width: 15em;
65 max-width: calc(100% - 2em);
66 }
67 }
68}