More distinctive appearance for unread posts

2 files changed, 30 insertions, 9 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index eeaa7c1..1a7d1bd 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -11,6 +11,11 @@
             --hover: (
                 --bg: prop(--colors --fg-lo, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
+            ),
+            --link: (
+                --bg:       prop(--colors --obj-hi, $global: true),
+                --fg:       prop(--colors --fg-lo, $global: true),
+                --fg-faint: prop(--colors --fg, $global: true),
             )
         )
     ));
@@ -18,6 +23,20 @@
     @include store((
         --colors: (
             --bg: prop(--colors --bg-hi, $global: true),
+            --link: (
+                --bg:       hsl(
+                    prop(--colors --secondary-accent --h, $global: true),
+                    prop(--colors --secondary-accent --s, $global: true),
+                    98.8%,
+                ),
+                --fg:       prop(--colors --secondary-accent --color, $global: true),
+                --fg-faint: hsla(
+                    prop(--colors --secondary-accent --h, $global: true),
+                    prop(--colors --secondary-accent --s, $global: true),
+                    prop(--colors --secondary-accent --l, $global: true),
+                    .75
+                ),
+            )
         )
     ), 'light');
 
@@ -67,6 +86,17 @@
             }
         }
 
+        @include modifier('mark-visited') {
+            &:link {
+                background-color: prop(--colors --link --bg);
+                color:            prop(--colors --link --fg);
+
+                small {
+                    color: prop(--colors --link --fg-faint);
+                }
+            }
+        }
+
         @include element('content') {
             box-sizing: border-box;
             width:      100%;
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 9220d1c..922cbd9 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -4,10 +4,6 @@
             --cat: (
                 --fg: prop(--colors --fg-lo, $global: true),
             ),
-            --post: (
-                --idle-fg:    prop(--colors --fg-lo, $global: true),
-                --visited-fg: prop(--colors --fg, $global: true),
-            ),
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
             )
@@ -38,11 +34,6 @@
 
         @include element('post') {
             box-shadow: none;
-            color:      prop(--colors --post --idle-fg);
-
-            &:visited {
-                color: prop(--colors --post --visited-fg);
-            }
 
             @include next-twin-element {
                 margin-top: 4px;