From 87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 12 May 2021 08:58:19 +0200
Subject: Design

---
 assets/css/components/_card.scss        | 15 ++++++--------
 assets/css/components/_post-list.scss   | 36 ++++++++++++++-------------------
 templates/layouts/categorized_list.html | 21 ++++++++++---------
 3 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index f444daf..1b46373 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -14,13 +14,6 @@
         )
     ));
 
-    @include store((
-        --dims: (
-            --pad-x: 1em,
-            --pad-y: .7em
-        )
-    ), 'md');
-
     @include component(namespace()) {
         display:          flex;
         position:         relative;
@@ -42,7 +35,7 @@
 
         small,
         strong {
-            transition: background-color .2s, color .2s;
+            transition: color .2s;
         }
 
         &:link,
@@ -62,7 +55,7 @@
     
                 small,
                 strong {
-                    color: prop(--colors --hover --fg);
+                    color: currentColor;
                 }
             }
         }
@@ -72,6 +65,10 @@
             width:      100%;
             padding:    prop(--dims --pad-y) prop(--dims --pad-x);
 
+            @include next-twin-element {
+                width: auto;
+            }
+
             @include modifier('flip') {
                 visibility:       hidden;
                 position:         absolute;
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 5e9f520..9d4c956 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -7,16 +7,10 @@
             --post: (
                 --idle-fg:    prop(--colors --fg-lo, $global: true),
                 --visited-fg: prop(--colors --fg, $global: true),
-                --bg:         prop(--colors --bg-lo, $global: true),
-                --border:     prop(--colors --obj-hi, $global: true),
             ),
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
             )
-        ),
-        --dims: (
-            --pad-x: 1em,
-            --pad-y: .6em,
         )
     ));
 
@@ -33,15 +27,8 @@
         }
 
         @include element('post') {
-            display:          flex;
-            align-items:      baseline;
-            padding:          prop(--dims --pad-y) prop(--dims --pad-x);
-            background-color: prop(--colors --post --bg);
-            color:            currentColor;
-            text-decoration:  none;
-
             @include next-twin-element {
-                margin-top: 2px;
+                margin-top: .6rem;
             }
 
             &:visited {
@@ -49,19 +36,26 @@
                     color: prop(--colors --post --visited-fg);
                 }
             }
+
+            &:hover,
+            &:focus {
+                @include element('post-date') {
+                    color: currentColor;
+                }
+            }
         }
 
         @include element('post-title') {
-            margin-right: 1em;
-            color:        prop(--colors --post --idle-fg);
-            font-size:    1 / 16 * 17em;
+            color:       prop(--colors --post --idle-fg);
+            font-size:   1 / 16 * 17em;
+            font-weight: normal;
         }
 
         @include element('post-date') {
-            flex:        0 0 auto;
-            margin-left: auto;
-            color:       prop(--colors --meta --fg);
-            font-size:   1 / 16 * 14em;
+            flex:       0 0 auto;
+            transition: color .2s;
+            color:      prop(--colors --meta --fg);
+            font-size:  1 / 16 * 14em;
         }
     }
 }
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 5dddc55..ef9e061 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -12,17 +12,18 @@ $body$
                     $it.name$
                 </h2>
                 $for(it.pages)$
-                    <a href="$it.url.rel$" class="c-post-list__post">
-                        <span class="c-post-list__post-title">
-                            $it.title$
-                        </span>
-
+                    <a href="$it.url.rel$" class="c-post-list__post c-card">
+                        <div class="c-card__content">
+                            <strong class="c-post-list__post-title u-db">$it.title$</strong>
+                        </div>
                         $if(it.category.show_date)$
-                            <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date u-dn@sm-hi">
-                                $it.date.short$
-                            </time>
-                            <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date u-dn@sm-lo">
-                                $it.date.long$
+                            <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date c-card__content">
+                                <span class="u-dn@sm-hi">
+                                    $it.date.short$
+                                </span>
+                                <span class="u-dn@sm-lo">
+                                    $it.date.long$
+                                </span>
                             </time>
                         $endif$
                     </a>
-- 
cgit v1.2.3-54-g00ecf