summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/layouts')
-rw-r--r--assets/css/layouts/_container.scss29
-rw-r--r--assets/css/layouts/_site.scss46
2 files changed, 58 insertions, 17 deletions
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 2bb4d80..2e102ee 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -2,35 +2,30 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 2rem, 4 --pad-x: 2rem,
5 --pad-x-sm: 1rem, 5 --pad-y: $line-height * 2rem
6 --pad-y: $line-height * 2rem,
7 --pad-y-sm: $line-height * 1rem
8 ) 6 )
9 )); 7 ));
10 8
9 @include store((
10 --dims: (
11 --pad-x: 1rem,
12 --pad-y: $line-height * 1rem
13 )
14 ), 'sm');
15
11 @include layout(namespace()) { 16 @include layout(namespace()) {
12 padding-right: prop(--dims --pad-x); 17 padding-right: prop(--dims --pad-x);
13 padding-left: prop(--dims --pad-x); 18 padding-left: prop(--dims --pad-x);
14 19
15 @include modifier('content') { 20 @include modifier('content') {
16 max-width: $content--width; 21 max-width: $content--width;
17 margin-right: auto; 22 margin-right: auto;
18 margin-left: auto; 23 margin-left: auto;
19 } 24 }
20 25
21 @include modifier('pad-v') { 26 @include modifier('pad-v') {
22 padding-top: prop(--dims --pad-y); 27 padding-top: prop(--dims --pad-y);
23 padding-bottom: prop(--dims --pad-y); 28 padding-bottom: prop(--dims --pad-y);
24 } 29 }
25
26 @include media('<=sm') {
27 padding-right: prop(--dims --pad-x-sm);
28 padding-left: prop(--dims --pad-x-sm);
29
30 @include modifier('pad-v') {
31 padding-top: prop(--dims --pad-y-sm);
32 padding-bottom: prop(--dims --pad-y-sm);
33 }
34 }
35 } 30 }
36} 31}
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss
new file mode 100644
index 0000000..2c06606
--- /dev/null
+++ b/assets/css/layouts/_site.scss
@@ -0,0 +1,46 @@
1@include namespace('site') {
2 @include store((
3 --dims: (
4 --outer-pad-x: 6rem,
5 --inner-pad-x: 2rem,
6 --pad-y: 6rem,
7 )
8 ));
9
10 @include layout(namespace()) {
11 display: flex;
12 flex-direction: row;
13 justify-content: space-around;
14
15 @include element('col') {
16 box-sizing: border-box;
17 flex: 0 0 auto;
18 width: 100%;
19 min-width: 0;
20 max-width: 35rem;
21 height: 100%;
22 padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x);
23
24 @include next-twin-element {
25 flex: 1 1 auto;
26 max-width: 45rem;
27 height: auto;
28 padding-right: prop(--dims --outer-pad-x);
29 padding-left: prop(--dims --inner-pad-x);
30 }
31 }
32
33 @include media('<=sm') {
34 display: block;
35
36 @include element('col') {
37 width: auto;
38 height: auto;
39
40 @include next-twin-element {
41 width: auto;
42 }
43 }
44 }
45 }
46}