Update

3 files changed, 36 insertions, 11 deletions

diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index 8e9091a..cbc4388 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,7 +1,13 @@
 @include namespace('card-grid') {
+    @include store((
+        --dims: (
+            --card-width: 17em
+        )
+    ));
+
     @include layout(namespace()) {
         display:               grid;
-        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-        gap:                   .7rem;
+        grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
+        gap:                   .6rem;
     }
 }
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 03af39f..a332528 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -13,19 +13,15 @@
         box-sizing:     border-box;
         flex-direction: row;
         align-items:    center;
-        min-height:     100%;
-        padding-bottom: prop(--dims --outer, $global: true);
 
         @include element('banner') {
-            flex-shrink:      1.2;
-            width:            100%;
+            width:            70%;
             max-width:        prop(--dims --banner-width);
             background-color: prop(--colors --banner-bg);
         }
 
         @include element('content') {
-            width:     100%;
-            min-width: 0;
+            width: 100%;
         }
 
         @include iro-responsive-env(('md', 'lg')) {
@@ -38,9 +34,15 @@
         }
 
         @include media('<=md') {
-            display:        block;
-            height:         auto;
-            padding-bottom: 0;
+            display: block;
+
+            @include element('side') {
+                display: none;
+
+                @include sibling-element('side') {
+                    display: block;
+                }
+            }
 
             @include element('banner', 'content') {
                 width:   auto;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
new file mode 100644
index 0000000..94a145b
--- /dev/null
+++ b/assets/css/layouts/_section.scss
@@ -0,0 +1,17 @@
+@include namespace('section') {
+    @include layout(namespace()) {
+        display:        flex;
+        flex-direction: column;
+        align-items:    flex-start;
+        min-height:     100%;
+        margin-bottom:  calc(-1 * #{prop(--dims --outer, $global: true)});
+        padding-bottom: prop(--dims --outer, $global: true);
+
+        @include element('heading') {
+            position: sticky;
+            z-index:  9000;
+            top:      0;
+            left:     0;
+        }
+    }
+}