diff options
author | Volpeon <git@volpeon.ink> | 2021-06-20 17:30:37 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-06-20 17:30:37 +0200 |
commit | 6662a2dfb60cd24a60225c40a91f3ba9019b718d (patch) | |
tree | dfb59112e22a6cf64d57d5bedc9323b7242c583d /assets/css/layouts | |
parent | Better card indicator (diff) | |
download | volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.gz volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.bz2 volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.zip |
CSS/Markup improvements
Diffstat (limited to 'assets/css/layouts')
-rw-r--r-- | assets/css/layouts/_landing.scss | 2 | ||||
-rw-r--r-- | assets/css/layouts/_section.scss | 43 |
2 files changed, 32 insertions, 13 deletions
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index 500849e..a81b105 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss | |||
@@ -12,6 +12,8 @@ | |||
12 | display: flex; | 12 | display: flex; |
13 | flex-direction: row; | 13 | flex-direction: row; |
14 | align-items: center; | 14 | align-items: center; |
15 | margin-top: auto; | ||
16 | margin-bottom: auto; | ||
15 | 17 | ||
16 | @include element('banner') { | 18 | @include element('banner') { |
17 | width: 70%; | 19 | width: 70%; |
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 | } |