WIP: Redesign

3 files changed, 74 insertions, 51 deletions

diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 2e102ee..0726950 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,10 +1,17 @@
 @include namespace('container') {
     @include store((
         --dims: (
+            --pad-x: 3rem,
+            --pad-y: $line-height * 3rem
+        )
+    ));
+
+    @include store((
+        --dims: (
             --pad-x: 2rem,
             --pad-y: $line-height * 2rem
         )
-    ));
+    ), 'md');
 
     @include store((
         --dims: (
@@ -14,16 +21,18 @@
     ), 'sm');
 
     @include layout(namespace()) {
-        padding-right: prop(--dims --pad-x);
-        padding-left:  prop(--dims --pad-x);
-
         @include modifier('content') {
             max-width:    $content--width;
             margin-right: auto;
             margin-left:  auto;
         }
 
-        @include modifier('pad-v') {
+        @include modifier('pad-x') {
+            padding-right: prop(--dims --pad-x);
+            padding-left:  prop(--dims --pad-x);
+        }
+
+        @include modifier('pad-y') {
             padding-top:    prop(--dims --pad-y);
             padding-bottom: prop(--dims --pad-y);
         }
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
new file mode 100644
index 0000000..b824005
--- /dev/null
+++ b/assets/css/layouts/_landing.scss
@@ -0,0 +1,60 @@
+@include namespace('landing') {
+    @include store((
+        --dims: (
+            --banner-width: 30rem,
+        ),
+        --colors: (
+            --banner-bg: prop(--colors --bg, $global: true)
+        )
+    ));
+
+    @include layout(namespace()) {
+        display:        flex;
+        flex-direction: row;
+        align-items:    center;
+        min-height:     100%;
+
+        @include element('banner') {
+            flex-shrink:      1.2;
+            width:            100%;
+            max-width:        prop(--dims --banner-width);
+            background-color: prop(--colors --banner-bg);
+        }
+
+        @include element('content') {
+            width:     100%;
+            min-width: 0;
+        }
+
+        @include iro-responsive-env(('md', 'lg')) {
+            @include element('banner') {
+                padding:
+                    iro-responsive-set((2rem, 6rem))
+                    iro-responsive-set((0, 6rem));
+            }
+    
+            @include element('content') {
+                padding:
+                    iro-responsive-set((2rem, 6rem))
+                    iro-responsive-set((0, 6rem))
+                    iro-responsive-set((2rem, 6rem))
+                    0;
+            }
+        }
+
+        @include media('<=md') {
+            display: block;
+            height:  auto;
+
+            @include element('banner', 'content') {
+                width:         auto;
+                padding-right: 0;
+                padding-left:  0;
+            }
+
+            @include element('banner') {
+                max-width: none;
+            }
+        }
+    }
+}
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss
deleted file mode 100644
index 2c06606..0000000
--- a/assets/css/layouts/_site.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@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;
-                }
-            }
-        }
-    }
-}