summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-06-20 17:30:37 +0200
committerVolpeon <git@volpeon.ink>2021-06-20 17:30:37 +0200
commit6662a2dfb60cd24a60225c40a91f3ba9019b718d (patch)
treedfb59112e22a6cf64d57d5bedc9323b7242c583d /assets/css/layouts
parentBetter card indicator (diff)
downloadvolpeon.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.scss2
-rw-r--r--assets/css/layouts/_section.scss43
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}