More distinctive appearance for unread posts

1 files changed, 30 insertions, 0 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%;