summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/layouts')
-rw-r--r--assets/css/layouts/_container.scss47
1 files changed, 29 insertions, 18 deletions
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index e99c62f..2bb4d80 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,25 +1,36 @@
1.l-container { 1@include namespace('container') {
2 padding-right: $container--pad-h; 2 @include store((
3 padding-left: $container--pad-h; 3 --dims: (
4 --pad-x: 2rem,
5 --pad-x-sm: 1rem,
6 --pad-y: $line-height * 2rem,
7 --pad-y-sm: $line-height * 1rem
8 )
9 ));
4 10
5 &--content { 11 @include layout(namespace()) {
6 max-width: $content--width; 12 padding-right: prop(--dims --pad-x);
7 margin-right: auto; 13 padding-left: prop(--dims --pad-x);
8 margin-left: auto;
9 }
10 14
11 &--pad-v { 15 @include modifier('content') {
12 padding-top: $container--pad-v; 16 max-width: $content--width;
13 padding-bottom: $container--pad-v; 17 margin-right: auto;
14 } 18 margin-left: auto;
19 }
20
21 @include modifier('pad-v') {
22 padding-top: prop(--dims --pad-y);
23 padding-bottom: prop(--dims --pad-y);
24 }
15 25
16 @media (max-width: map-get($breakpoints, 'sm')) { 26 @include media('<=sm') {
17 padding-right: $container--pad-h--sm; 27 padding-right: prop(--dims --pad-x-sm);
18 padding-left: $container--pad-h--sm; 28 padding-left: prop(--dims --pad-x-sm);
19 29
20 &--pad-v { 30 @include modifier('pad-v') {
21 padding-top: $container--pad-v--sm; 31 padding-top: prop(--dims --pad-y-sm);
22 padding-bottom: $container--pad-v--sm; 32 padding-bottom: prop(--dims --pad-y-sm);
33 }
23 } 34 }
24 } 35 }
25} 36}