Re-implemented design via iro-design

3 files changed, 43 insertions, 49 deletions

diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index a53b771..96f9060 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -1,37 +1,38 @@
-@include namespace('card-list') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('card-list') {
+    @include iro.props-store((
         --dims: (
-            --col-width: 17em
+            --margin-top: fn.global-dim(--size --600),
+            --spacing:    fn.global-dim(--size --200),
+            --col-width:  17em,
         )
-    ));
+    ), 'dims');
 
-    @include layout(namespace()) {
-        margin-top: $line-height * 2rem;
+    @include iro.bem-layout(iro.props-namespace()) {
+        margin-top: fn.dim(--margin-top);
         font-size:  1rem;
 
-        @include element('cards') {
+        @include iro.bem-elem('cards') {
             display:        flex;
             flex-direction: column;
             gap:            2px;
-            margin-top:     $line-height * .625rem;
+            margin-top:     fn.dim(--spacing);
 
-            @include modifier('grid', 'gallery') {
+            @include iro.bem-modifier('grid', 'gallery') {
                 display:               grid;
-                grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+                grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
                 align-items:           start;
             }
 
-            @include modifier('grid') {
+            @include iro.bem-modifier('grid') {
                 gap: 6px;
             }
 
-            @include modifier('gallery') {
+            @include iro.bem-modifier('gallery') {
                 gap: 20px;
             }
-
-            @media print {
-                filter: none;
-            }
         }
     }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
deleted file mode 100644
index ae23042..0000000
--- a/assets/css/layouts/_container.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@include namespace('container') {
-    @include store((
-        --dims: (
-            --pad-x: 2rem,
-            --pad-y: 4rem,
-        )
-    ));
-
-    @include store((
-        --dims: (
-            --pad-x: 1rem,
-            --pad-y: 3rem,
-        )
-    ), 'sm');
-
-    @include layout(namespace()) {
-        @include modifier('content') {
-            max-width:    $content--width;
-            margin-right: auto;
-            margin-left:  auto;
-        }
-
-        @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/_media.scss b/assets/css/layouts/_media.scss
new file mode 100644
index 0000000..c4ad222
--- /dev/null
+++ b/assets/css/layouts/_media.scss
@@ -0,0 +1,26 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('media') {
+    @include iro.props-store((
+        --dims: (
+            --pad-x: fn.global-dim(--size --200),
+            --pad-y: fn.global-dim(--size --150),
+
+            --75: (
+                --pad-x: fn.global-dim(--size --150),
+                --pad-y: fn.global-dim(--size --85),
+            ),
+
+            --200: (
+                --pad-x: fn.global-dim(--size --450),
+                --pad-y: fn.global-dim(--size --225),
+            ),
+            
+            --300: (
+                --pad-x: fn.global-dim(--size --450),
+                --pad-y: fn.global-dim(--size --225),
+            )
+        )
+    ), 'dims');
+}