From 5ede915c4990584fa0ae7747b9a5ad9a4e93acdd Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 21 Nov 2021 08:08:14 +0100
Subject: Improved list structure again

---
 assets/css/components/_card-list.scss   | 58 ---------------------------------
 assets/css/layouts/_card-list.scss      | 41 +++++++++++++++++++++++
 assets/css/scopes/_small.scss           | 16 +++++++++
 assets/css/style.scss                   |  4 ++-
 templates/layouts/categorized_list.html | 10 +++---
 templates/layouts/list.html             |  6 ++--
 templates/partials/grid_card.html       |  2 +-
 templates/partials/list_card.html       |  2 +-
 8 files changed, 70 insertions(+), 69 deletions(-)
 delete mode 100644 assets/css/components/_card-list.scss
 create mode 100644 assets/css/layouts/_card-list.scss
 create mode 100644 assets/css/scopes/_small.scss

diff --git a/assets/css/components/_card-list.scss b/assets/css/components/_card-list.scss
deleted file mode 100644
index aa6eef9..0000000
--- a/assets/css/components/_card-list.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@include namespace('card-list') {
-    @include store((
-        --colors: (
-            --title: prop(--colors --fg-lo, $global: true),
-            --text:  prop(--colors --fg-hi, $global: true),
-        ),
-        --dims: (
-            --col-width: 17em
-        )
-    ));
-
-    @include component(namespace()) {
-        margin-top: $line-height * 2rem;
-        font-size:  1rem;
-
-        @include element('title') {
-            color: prop(--colors --title);
-        }
-
-        @include element('text') {
-            color:       prop(--colors --text);
-            line-height: 1.4;
-
-            p {
-                margin-top: $line-height * .25rem;
-            }
-        }
-
-        @include element('cards') {
-            margin-top: $line-height * .625rem;
-            filter:     drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
-
-            @include modifier('grid') {
-                display:               grid;
-                grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
-                gap:                   6px;
-    
-                @include element('card') {
-                    @include next-twin-element {
-                        margin-top: 0;
-                    }
-                }
-            }
-
-            @media print {
-                filter: none;
-            }
-        }
-
-        @include element('card') {
-            box-shadow: none;
-
-            @include next-twin-element {
-                margin-top: 2px;
-            }
-        }
-    }
-}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
new file mode 100644
index 0000000..e6d1297
--- /dev/null
+++ b/assets/css/layouts/_card-list.scss
@@ -0,0 +1,41 @@
+@include namespace('card-list') {
+    @include store((
+        --dims: (
+            --col-width: 17em
+        )
+    ));
+
+    @include layout(namespace()) {
+        margin-top: $line-height * 2rem;
+        font-size:  1rem;
+
+        @include element('cards') {
+            margin-top: $line-height * .625rem;
+            filter:     drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
+
+            @include modifier('grid') {
+                display:               grid;
+                grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+                gap:                   6px;
+    
+                @include element('card') {
+                    @include next-twin-element {
+                        margin-top: 0;
+                    }
+                }
+            }
+
+            @media print {
+                filter: none;
+            }
+        }
+
+        @include element('card') {
+            box-shadow: none;
+
+            @include next-twin-element {
+                margin-top: 2px;
+            }
+        }
+    }
+}
diff --git a/assets/css/scopes/_small.scss b/assets/css/scopes/_small.scss
new file mode 100644
index 0000000..f7aa61c
--- /dev/null
+++ b/assets/css/scopes/_small.scss
@@ -0,0 +1,16 @@
+@include namespace('small') {
+    @include store((
+        --colors: (
+            --fg: prop(--colors --fg-hi, $global: true),
+        )
+    ));
+
+    @include scope(namespace()) {
+        color:       prop(--colors --fg);
+        line-height: 1.4;
+
+        p {
+            margin-top: $line-height * .25rem;
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 754b91e..9c57b28 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -16,11 +16,13 @@
 @import 'components/header';
 @import 'components/footer';
 @import 'components/card';
-@import 'components/card-list';
+
+@import 'layouts/card-list';
 
 @import 'scopes/colored-links';
 @import 'scopes/invisible-links';
 @import 'scopes/headlines';
+@import 'scopes/small';
 @import 'scopes/body';
 
 @import 'utils';
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 6f06a63..7d53cbe 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -4,21 +4,21 @@
 $body$
 </header>
 
-<div class="c-card-list">
+<div class="l-card-list">
     $for(list)$
         <section>
-            <h2 class="c-card-list__title s-invisible-links">
+            <h2 class="s-invisible-links">
                 <a href="$it.url.rel$">$it.title$</a>
             </h2>
             $if(it.description)$
-                <div class="c-card-list__text s-colored-links">$it.description$</div>
+                <div class="s-small s-colored-links">$it.description$</div>
             $endif$
             $if(it.grid)$
-                <div class="c-card-list__cards c-card-list__cards--grid">
+                <div class="l-card-list__cards l-card-list__cards--grid">
                     $it.items:partials/grid_card()$
                 </div>
             $else$
-                <div class="c-card-list__cards">
+                <div class="l-card-list__cards">
                     $it.items:partials/list_card()$
                 </div>
             $endif$
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index a7d72db..f3e5768 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -4,13 +4,13 @@
 $body$
 </header>
 
-<div class="c-card-list">
+<div class="l-card-list">
     $if(list_grid)$
-        <div class="c-card-list__cards c-card-list__cards--grid">
+        <div class="l-card-list__cards l-card-list__cards--grid">
             $list:partials/grid_card()$
         </div>
     $else$
-        <div class="c-card-list__cards">
+        <div class="l-card-list__cards">
             $list:partials/list_card()$
         </div>
     $endif$
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index e1b7f78..9cd8463 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -1,4 +1,4 @@
-<a href="$it.url.rel$" class="c-card-list__card c-card">
+<a href="$it.url.rel$" class="l-card-list__card c-card">
     $if(it.indicator)$
         <div class="c-card__block c-card__block--indicator"></div>
     $endif$
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html
index 1a085a0..b784c1e 100644
--- a/templates/partials/list_card.html
+++ b/templates/partials/list_card.html
@@ -1,4 +1,4 @@
-<a href="$it.url.rel$" class="c-card-list__card c-card">
+<a href="$it.url.rel$" class="l-card-list__card c-card">
     $if(it.indicator)$
         <div class="c-card__block c-card__block--indicator"></div>
     $endif$
-- 
cgit v1.2.3-70-g09d2