diff options
author | Volpeon <git@volpeon.ink> | 2021-04-23 22:43:33 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-23 22:43:33 +0200 |
commit | 52f9dc373461761d9454dbd9d2fbf28b6059398b (patch) | |
tree | 1f820391e2d74b8bc69987e2da344443a4aa6ca9 /assets/css/layouts | |
parent | Prevent card hover feedback loop (diff) | |
download | volpeon.ink-52f9dc373461761d9454dbd9d2fbf28b6059398b.tar.gz volpeon.ink-52f9dc373461761d9454dbd9d2fbf28b6059398b.tar.bz2 volpeon.ink-52f9dc373461761d9454dbd9d2fbf28b6059398b.zip |
Update
Diffstat (limited to 'assets/css/layouts')
-rw-r--r-- | assets/css/layouts/_section.scss | 18 |
1 files changed, 18 insertions, 0 deletions
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 51e3dc8..1bc86fe 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss | |||
@@ -3,9 +3,14 @@ | |||
3 | --colors: ( | 3 | --colors: ( |
4 | --border: prop(--colors --obj-hi, $global: true), | 4 | --border: prop(--colors --obj-hi, $global: true), |
5 | ), | 5 | ), |
6 | --dims: ( | ||
7 | --banner-blur: .5rem, | ||
8 | ) | ||
6 | )); | 9 | )); |
7 | 10 | ||
8 | @include layout(namespace()) { | 11 | @include layout(namespace()) { |
12 | position: relative; | ||
13 | |||
9 | @include modifier('fullscreen') { | 14 | @include modifier('fullscreen') { |
10 | box-sizing: border-box; | 15 | box-sizing: border-box; |
11 | min-height: 100%; | 16 | min-height: 100%; |
@@ -37,5 +42,18 @@ | |||
37 | border-top: 1px solid prop(--colors --border); | 42 | border-top: 1px solid prop(--colors --border); |
38 | } | 43 | } |
39 | } | 44 | } |
45 | |||
46 | @include element('banner') { | ||
47 | position: absolute; | ||
48 | z-index: -20; | ||
49 | top: calc(-2 * #{prop(--dims --banner-blur)}); | ||
50 | left: calc(-2 * #{prop(--dims --banner-blur)}); | ||
51 | width: calc(100% + 4 * #{prop(--dims --banner-blur)}); | ||
52 | height: 60rem; | ||
53 | object-fit: cover; | ||
54 | object-position: top center; | ||
55 | filter: blur(#{prop(--dims --banner-blur)}); | ||
56 | mask-image: iro-easing-gradient(linear, to bottom, rgba(#000, .25), ease, transparent); | ||
57 | } | ||
40 | } | 58 | } |
41 | } | 59 | } |