diff options
Diffstat (limited to 'assets/css/layouts/_section.scss')
-rw-r--r-- | assets/css/layouts/_section.scss | 43 |
1 files changed, 30 insertions, 13 deletions
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index e8b1617..80b8ca9 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss | |||
@@ -15,6 +15,13 @@ | |||
15 | @include layout(namespace()) { | 15 | @include layout(namespace()) { |
16 | position: relative; | 16 | position: relative; |
17 | 17 | ||
18 | @include modifier('flex') { | ||
19 | display: flex; | ||
20 | flex-direction: column; | ||
21 | align-items: stretch; | ||
22 | justify-content: flex-start; | ||
23 | } | ||
24 | |||
18 | @include modifier('fullscreen') { | 25 | @include modifier('fullscreen') { |
19 | box-sizing: border-box; | 26 | box-sizing: border-box; |
20 | min-height: 100vh; | 27 | min-height: 100vh; |
@@ -26,26 +33,17 @@ | |||
26 | background-color: prop(--colors --body-bg); | 33 | background-color: prop(--colors --body-bg); |
27 | } | 34 | } |
28 | 35 | ||
29 | @include modifier('no-head') { | 36 | @include modifier('no-header') { |
30 | padding-top: prop(--dims --outer, $global: true); | 37 | padding-top: prop(--dims --outer, $global: true); |
31 | } | 38 | } |
32 | 39 | ||
33 | @include element('head') { | 40 | @include element('header') { |
34 | display: flex; | 41 | display: flex; |
35 | flex-direction: row; | 42 | flex-direction: row; |
36 | justify-self: flex-start; | 43 | align-items: center; |
44 | height: prop(--dims --outer, $global: true); | ||
37 | font-size: 1 / 16 * 15em; | 45 | font-size: 1 / 16 * 15em; |
38 | 46 | ||
39 | &::after { | ||
40 | content: ''; | ||
41 | width: 100%; | ||
42 | height: 100%; | ||
43 | margin-top: -1px; | ||
44 | margin-right: prop(--container --dims --pad-x, $global: true); | ||
45 | margin-left: prop(--container --dims --pad-x, $global: true); | ||
46 | border-top: 1px solid prop(--colors --border); | ||
47 | } | ||
48 | |||
49 | @include modifier('sticky') { | 47 | @include modifier('sticky') { |
50 | position: sticky; | 48 | position: sticky; |
51 | z-index: 9000; | 49 | z-index: 9000; |
@@ -53,5 +51,24 @@ | |||
53 | left: 0; | 51 | left: 0; |
54 | } | 52 | } |
55 | } | 53 | } |
54 | |||
55 | /*@include element('footer') { | ||
56 | position: absolute; | ||
57 | z-index: 10000; | ||
58 | right: 0; | ||
59 | bottom: 0; | ||
60 | height: prop(--dims --outer, $global: true); | ||
61 | font-size: 1 / 16 * 15em; | ||
62 | }*/ | ||
63 | |||
64 | @include element('header-separator') { | ||
65 | flex: 1 1 auto; | ||
66 | width: 100%; | ||
67 | height: 100%; | ||
68 | margin-top: -1px; | ||
69 | margin-right: prop(--container --dims --pad-x, $global: true); | ||
70 | margin-left: prop(--container --dims --pad-x, $global: true); | ||
71 | border-top: 1px solid prop(--colors --border); | ||
72 | } | ||
56 | } | 73 | } |
57 | } | 74 | } |