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 | } |
