From c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 19 Mar 2021 22:10:55 +0100
Subject: WIP: Redesign

---
 assets/css/layouts/_container.scss | 47 +++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 18 deletions(-)

(limited to 'assets/css/layouts')

diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index e99c62f..2bb4d80 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,25 +1,36 @@
-.l-container {
-    padding-right: $container--pad-h;
-    padding-left: $container--pad-h;
+@include namespace('container') {
+    @include store((
+        --dims: (
+            --pad-x: 2rem,
+            --pad-x-sm: 1rem,
+            --pad-y: $line-height * 2rem,
+            --pad-y-sm: $line-height * 1rem
+        )
+    ));
 
-    &--content {
-        max-width: $content--width;
-        margin-right: auto;
-        margin-left: auto;
-    }
+    @include layout(namespace()) {
+        padding-right: prop(--dims --pad-x);
+        padding-left: prop(--dims --pad-x);
 
-    &--pad-v {
-        padding-top: $container--pad-v;
-        padding-bottom: $container--pad-v;
-    }
+        @include modifier('content') {
+            max-width: $content--width;
+            margin-right: auto;
+            margin-left: auto;
+        }
+
+        @include modifier('pad-v') {
+            padding-top: prop(--dims --pad-y);
+            padding-bottom: prop(--dims --pad-y);
+        }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        padding-right: $container--pad-h--sm;
-        padding-left: $container--pad-h--sm;
+        @include media('<=sm') {
+            padding-right: prop(--dims --pad-x-sm);
+            padding-left: prop(--dims --pad-x-sm);
 
-        &--pad-v {
-            padding-top: $container--pad-v--sm;
-            padding-bottom: $container--pad-v--sm;
+            @include modifier('pad-v') {
+                padding-top: prop(--dims --pad-y-sm);
+                padding-bottom: prop(--dims --pad-y-sm);
+            }
         }
     }
 }
-- 
cgit v1.2.3-54-g00ecf