Make whole post clickable in post list

2 files changed, 20 insertions, 8 deletions

diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 7787efd..764fe3f 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -5,8 +5,10 @@
                 --fg: prop(--colors --fg-lo, $global: true),
             ),
             --post: (
-                --bg:     prop(--colors --bg-lo, $global: true),
-                --border: prop(--colors --obj-hi, $global: true),
+                --idle-fg:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+                --visited-fg: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+                --bg:         prop(--colors --bg-lo, $global: true),
+                --border:     prop(--colors --obj-hi, $global: true),
             ),
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
@@ -35,15 +37,25 @@
             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 {
                 border-top: 1px solid prop(--colors --post --border);
             }
+
+            &:visited {
+                @include element('post-title') {
+                    color: prop(--colors --post --visited-fg);
+                }
+            }
         }
 
         @include element('post-title') {
-            margin-right: 1em;
-            font-size:    1 / 16 * 17em;
+            margin-right:    1em;
+            color:           prop(--colors --post --idle-fg);
+            font-size:       1 / 16 * 17em;
+            text-decoration: underline;
         }
 
         @include element('post-date') {
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 0b445ee..60729bd 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -12,17 +12,17 @@ $body$
                     $it.name$
                 </h2>
                 $for(it.pages)$
-                    <div class="c-post-list__post">
-                        <a href="$it.url.rel$" class="c-post-list__post-title">
+                    <a href="$it.url.rel$" class="c-post-list__post">
+                        <span class="c-post-list__post-title">
                             $it.title$
-                        </a>
+                        </span>
 
                         $if(it.category.show_date)$
                             <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date">
                                 $it.date.long$
                             </time>
                         $endif$
-                    </div>
+                    </a>
                 $endfor$
             $endfor$
         </div>