Improved list structure

11 files changed, 40 insertions, 48 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';
 
diff --git a/content/profiles/index.md b/content/profiles/index.md
index 265a23b..0d8df9f 100644
--- a/content/profiles/index.md
+++ b/content/profiles/index.md
@@ -2,5 +2,5 @@
 title:          Profiles
 position:       1
 list_grid:      true
-list_post_icon: icon-arrow-up-right
+list_post_icon: arrow-up-right
 ---
diff --git a/content/projects/emojis/index.md b/content/projects/emojis/index.md
index 58ad85b..728ade5 100644
--- a/content/projects/emojis/index.md
+++ b/content/projects/emojis/index.md
@@ -1,5 +1,5 @@
 ---
 title:          Emojis
 icon:           smile
-list_post_icon: icon-arrow-right
+list_post_icon: arrow-right
 ---
diff --git a/content/projects/index.md b/content/projects/index.md
index 3b6b718..eaaf808 100644
--- a/content/projects/index.md
+++ b/content/projects/index.md
@@ -4,3 +4,6 @@ position:   2
 list_grid:  true
 list_limit: 4
 ---
+
+A selection of projects I wasn't too lazy to create a page for.
+You can find more projects on [git.vulpes.one](https://git.vulpes.one/).
diff --git a/filters/icons.lua b/filters/icons.lua
index 3800e5d..fb6a608 100644
--- a/filters/icons.lua
+++ b/filters/icons.lua
@@ -3,8 +3,8 @@ function Str(el)
 
     if icon then
         return pandoc.RawInline('html',
-            '<svg class="o-icon o-icon--inline" width="1em" height="1em"><use href="/symbols.svg#' .. icon ..
-                '"></use></svg>')
+            '<svg class="o-icon o-icon--inline" width="1em" height="1em"><use href="/symbols.svg#icon-' ..
+                icon .. '"></use></svg>')
     end
 
     return el
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 690ab68..6f06a63 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -7,23 +7,18 @@ $body$
 <div class="c-card-list">
     $for(list)$
         <section>
-            <header class="c-card-list__category-header">
-                <div>
-                    <h2 class="c-card-list__category-title">
-                        <a href="$it.url.rel$">$it.title$</a>
-                    </h2>
-                    $if(it.omitted)$<small>$it.omitted$ more</small>$endif$
-                </div>
-                $if(it.description)$
-                    <small class="c-card-list__category-description">$it.description$</small>
-                $endif$
-            </header>
+            <h2 class="c-card-list__title 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>
+            $endif$
             $if(it.grid)$
-                <div class="c-card-list__category-content c-card-list__category-content--grid">
+                <div class="c-card-list__cards c-card-list__cards--grid">
                     $it.items:partials/grid_card()$
                 </div>
             $else$
-                <div class="c-card-list__category-content">
+                <div class="c-card-list__cards">
                     $it.items:partials/list_card()$
                 </div>
             $endif$
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 449b25c..e1b7f78 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -30,7 +30,7 @@
     </div>
     $if(it.post_icon)$
         <svg class="c-card__block o-icon" width="1em" height="1em">
-            <use href="/symbols.svg#$it.post_icon$"></use>
+            <use href="/symbols.svg#icon-$it.post_icon$"></use>
         </svg>
     $endif$
 </a>