diff options
Diffstat (limited to 'assets/css/layouts')
-rw-r--r-- | assets/css/layouts/_container.scss | 13 | ||||
-rw-r--r-- | assets/css/layouts/_landing.scss | 10 | ||||
-rw-r--r-- | assets/css/layouts/_section.scss | 24 |
3 files changed, 23 insertions, 24 deletions
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index d63460b..0f569e4 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss | |||
@@ -1,22 +1,19 @@ | |||
1 | @include namespace('container') { | 1 | @include namespace('container') { |
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --pad-x: 3rem, | 4 | --pad-x: 3rem |
5 | --pad-y: $line-height * 2rem | ||
6 | ) | 5 | ) |
7 | )); | 6 | )); |
8 | 7 | ||
9 | @include store(( | 8 | @include store(( |
10 | --dims: ( | 9 | --dims: ( |
11 | --pad-x: 2rem, | 10 | --pad-x: 2rem |
12 | --pad-y: $line-height * 1.5rem | ||
13 | ) | 11 | ) |
14 | ), 'md'); | 12 | ), 'md'); |
15 | 13 | ||
16 | @include store(( | 14 | @include store(( |
17 | --dims: ( | 15 | --dims: ( |
18 | --pad-x: 4%, | 16 | --pad-x: 4% |
19 | --pad-y: $line-height * 1rem | ||
20 | ) | 17 | ) |
21 | ), 'sm'); | 18 | ), 'sm'); |
22 | 19 | ||
@@ -33,8 +30,8 @@ | |||
33 | } | 30 | } |
34 | 31 | ||
35 | @include modifier('pad-y') { | 32 | @include modifier('pad-y') { |
36 | padding-top: prop(--dims --pad-y); | 33 | padding-top: prop(--dims --spacing-y, $global: true); |
37 | padding-bottom: prop(--dims --pad-y); | 34 | padding-bottom: prop(--dims --spacing-y, $global: true); |
38 | } | 35 | } |
39 | } | 36 | } |
40 | } | 37 | } |
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index a332528..aa85679 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss | |||
@@ -25,16 +25,14 @@ | |||
25 | } | 25 | } |
26 | 26 | ||
27 | @include iro-responsive-env(('md', 'lg')) { | 27 | @include iro-responsive-env(('md', 'lg')) { |
28 | padding-right: iro-responsive-set((0, 6rem)); | 28 | padding-right: iro-responsive-set((0, 3rem)); |
29 | padding-left: iro-responsive-set((0, 6rem)); | 29 | padding-left: iro-responsive-set((0, 6rem)); |
30 | |||
31 | @include element('banner') { | ||
32 | padding-right: iro-responsive-set((0, 6rem)); | ||
33 | } | ||
34 | } | 30 | } |
35 | 31 | ||
36 | @include media('<=md') { | 32 | @include media('<=md') { |
37 | display: block; | 33 | flex-direction: column; |
34 | align-items: stretch; | ||
35 | justify-content: center; | ||
38 | 36 | ||
39 | @include element('side') { | 37 | @include element('side') { |
40 | display: none; | 38 | display: none; |
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 94a145b..38b20aa 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss | |||
@@ -1,17 +1,21 @@ | |||
1 | @include namespace('section') { | 1 | @include namespace('section') { |
2 | @include layout(namespace()) { | 2 | @include layout(namespace()) { |
3 | display: flex; | 3 | display: flex; |
4 | flex-direction: column; | 4 | flex-direction: column; |
5 | align-items: flex-start; | 5 | align-items: stretch; |
6 | min-height: 100%; | 6 | justify-content: flex-start; |
7 | margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); | 7 | min-height: 100%; |
8 | padding-bottom: prop(--dims --outer, $global: true); | 8 | margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); |
9 | padding-bottom: prop(--dims --outer, $global: true); | ||
9 | 10 | ||
10 | @include element('heading') { | 11 | @include element('heading') { |
11 | position: sticky; | 12 | display: flex; |
12 | z-index: 9000; | 13 | position: sticky; |
13 | top: 0; | 14 | z-index: 9000; |
14 | left: 0; | 15 | top: 0; |
16 | left: 0; | ||
17 | flex-direction: row; | ||
18 | justify-self: flex-start; | ||
15 | } | 19 | } |
16 | } | 20 | } |
17 | } | 21 | } |