diff options
author | Volpeon <git@volpeon.ink> | 2021-04-21 17:12:50 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-21 17:12:50 +0200 |
commit | 2b58f2589efb48f7df112a2e175ce28b52f2f8f7 (patch) | |
tree | 397eaf39cf2ce50ba1f9abbfa9ecf133386549f2 /assets | |
parent | Less intensive project card shadow (diff) | |
download | volpeon.ink-2b58f2589efb48f7df112a2e175ce28b52f2f8f7.tar.gz volpeon.ink-2b58f2589efb48f7df112a2e175ce28b52f2f8f7.tar.bz2 volpeon.ink-2b58f2589efb48f7df112a2e175ce28b52f2f8f7.zip |
Small build script and design improvements
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/components/_project.scss | 26 | ||||
-rw-r--r-- | assets/css/layouts/_project-grid.scss | 2 |
2 files changed, 22 insertions, 6 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 | } |
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss index 612d857..7c67663 100644 --- a/assets/css/layouts/_project-grid.scss +++ b/assets/css/layouts/_project-grid.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @include namespace('project-grid') { | 1 | @include namespace('project-grid') { |
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --col-width: 26em | 4 | --col-width: 20em |
5 | ) | 5 | ) |
6 | )); | 6 | )); |
7 | 7 | ||