1 files changed, 60 insertions, 0 deletions

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