Make whole post clickable in post list

1 files changed, 16 insertions, 4 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') {