WIP: Redesign

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 @@
     @include store((
         --dims: (
             --pad-x: 2rem,
-            --pad-x-sm: 1rem,
-            --pad-y: $line-height * 2rem,
-            --pad-y-sm: $line-height * 1rem
+            --pad-y: $line-height * 2rem
         )
     ));
 
+    @include store((
+        --dims: (
+            --pad-x: 1rem,
+            --pad-y: $line-height * 1rem
+        )
+    ), 'sm');
+
     @include layout(namespace()) {
         padding-right: prop(--dims --pad-x);
-        padding-left: prop(--dims --pad-x);
+        padding-left:  prop(--dims --pad-x);
 
         @include modifier('content') {
-            max-width: $content--width;
+            max-width:    $content--width;
             margin-right: auto;
-            margin-left: auto;
+            margin-left:  auto;
         }
 
         @include modifier('pad-v') {
-            padding-top: prop(--dims --pad-y);
+            padding-top:    prop(--dims --pad-y);
             padding-bottom: prop(--dims --pad-y);
         }
-
-        @include media('<=sm') {
-            padding-right: prop(--dims --pad-x-sm);
-            padding-left: prop(--dims --pad-x-sm);
-
-            @include modifier('pad-v') {
-                padding-top: prop(--dims --pad-y-sm);
-                padding-bottom: prop(--dims --pad-y-sm);
-            }
-        }
     }
 }
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 @@
+@include namespace('site') {
+    @include store((
+        --dims: (
+            --outer-pad-x: 6rem,
+            --inner-pad-x: 2rem,
+            --pad-y: 6rem,
+        )
+    ));
+
+    @include layout(namespace()) {
+        display:         flex;
+        flex-direction:  row;
+        justify-content: space-around;
+
+        @include element('col') {
+            box-sizing: border-box;
+            flex:       0 0 auto;
+            width:      100%;
+            min-width:  0;
+            max-width:  35rem;
+            height:     100%;
+            padding:    prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x);
+
+            @include next-twin-element {
+                flex:          1 1 auto;
+                max-width:     45rem;
+                height:        auto;
+                padding-right: prop(--dims --outer-pad-x);
+                padding-left:  prop(--dims --inner-pad-x);
+            }
+        }
+
+        @include media('<=sm') {
+            display: block;
+
+            @include element('col') {
+                width:  auto;
+                height: auto;
+
+                @include next-twin-element {
+                    width: auto;
+                }
+            }
+        }
+    }
+}