Improved list structure

5 files changed, 24 insertions, 30 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 4d9f2f5..efa0279 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -171,7 +171,7 @@ p {
 
 :link,
 :visited {
-    color: prop(--colors --link --idle);
+    color: prop(--colors --link --default);
 }
 
 hr {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index a8c7fdf..9e1b661 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -80,7 +80,7 @@ $content--width:  46rem;
             ),
 
             --link: (
-                --idle: var(--colors--fg-lo),
+                --default: var(--colors--fg-lo),
                 --colored: (
                     --idle-h:  220,
                     --idle-s:  100%,
diff --git a/assets/css/components/_card-list.scss b/assets/css/components/_card-list.scss
index 605c442..aa6eef9 100644
--- a/assets/css/components/_card-list.scss
+++ b/assets/css/components/_card-list.scss
@@ -1,12 +1,8 @@
 @include namespace('card-list') {
     @include store((
         --colors: (
-            --cat: (
-                --fg: prop(--colors --fg-lo, $global: true),
-            ),
-            --meta: (
-                --fg: prop(--colors --fg-hi, $global: true),
-            )
+            --title: prop(--colors --fg-lo, $global: true),
+            --text:  prop(--colors --fg-hi, $global: true),
         ),
         --dims: (
             --col-width: 17em
@@ -17,36 +13,20 @@
         margin-top: $line-height * 2rem;
         font-size:  1rem;
 
-        @include element('category-header') {
-            margin-top: $line-height * 2rem;
-            color:      prop(--colors --cat --fg);
+        @include element('title') {
+            color: prop(--colors --title);
         }
 
-        @include element('category-title') {
-            display:      inline-block;
-            margin-top:   0;
-            margin-right: 1em;
-
-            :link,
-            :visited {
-                text-decoration: none;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        @include element('category-description') {
-            display:   block;
-            font-size: px-to-em(15px);
+        @include element('text') {
+            color:       prop(--colors --text);
+            line-height: 1.4;
 
             p {
                 margin-top: $line-height * .25rem;
             }
         }
 
-        @include element('category-content') {
+        @include element('cards') {
             margin-top: $line-height * .625rem;
             filter:     drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss
new file mode 100644
index 0000000..e4d149e
--- /dev/null
+++ b/assets/css/scopes/_invisible-links.scss
@@ -0,0 +1,13 @@
+@include namespace('invisible-links') {
+    @include scope(namespace()) {
+        :link,
+        :visited {
+            color:           currentColor;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 67f44ed..754b91e 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -19,6 +19,7 @@
 @import 'components/card-list';
 
 @import 'scopes/colored-links';
+@import 'scopes/invisible-links';
 @import 'scopes/headlines';
 @import 'scopes/body';