summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/layouts')
-rw-r--r--assets/css/layouts/_section.scss18
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}