summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-21 17:12:50 +0200
committerVolpeon <git@volpeon.ink>2021-04-21 17:12:50 +0200
commit2b58f2589efb48f7df112a2e175ce28b52f2f8f7 (patch)
tree397eaf39cf2ce50ba1f9abbfa9ecf133386549f2 /assets/css/components
parentLess intensive project card shadow (diff)
downloadvolpeon.ink-2b58f2589efb48f7df112a2e175ce28b52f2f8f7.tar.gz
volpeon.ink-2b58f2589efb48f7df112a2e175ce28b52f2f8f7.tar.bz2
volpeon.ink-2b58f2589efb48f7df112a2e175ce28b52f2f8f7.zip
Small build script and design improvements
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_project.scss26
1 files changed, 21 insertions, 5 deletions
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 09dc062..62a7118 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -21,6 +21,19 @@
21 background-image: linear-gradient(340deg, rgba(#000, .25) 5em, transparent 18em); 21 background-image: linear-gradient(340deg, rgba(#000, .25) 5em, transparent 18em);
22 } 22 }
23 23
24 &:link,
25 &:visited {
26 &:hover {
27 @include element('picture') {
28 opacity: .75;
29 }
30
31 @include element('card') {
32 transform: translateY(-1em);
33 }
34 }
35 }
36
24 @include multi('element' 'picture', '&::after') { 37 @include multi('element' 'picture', '&::after') {
25 display: block; 38 display: block;
26 position: absolute; 39 position: absolute;
@@ -39,18 +52,21 @@
39 right: 1em; 52 right: 1em;
40 bottom: 1em; 53 bottom: 1em;
41 min-width: 15em; 54 min-width: 15em;
55 max-width: calc(100% - 2em);
56 transform: translateY(0);
57 transition: transform .2s;
42 box-shadow: 0 .3em 1em rgba(#000, .25); 58 box-shadow: 0 .3em 1em rgba(#000, .25);
43 } 59 }
44 60
61 @include element('picture') {
62 transition: opacity .2s;
63 opacity: 1;
64 }
65
45 @include media('<=sm') { 66 @include media('<=sm') {
46 &::after { 67 &::after {
47 background-image: linear-gradient(to top, rgba(#000, .25) 1em, transparent 11em); 68 background-image: linear-gradient(to top, rgba(#000, .25) 1em, transparent 11em);
48 } 69 }
49
50 @include element('card') {
51 width: calc(100% - 2em);
52 min-width: 0;
53 }
54 } 70 }
55 } 71 }
56} 72}