Color adjustments, improved cards

1 files changed, 34 insertions, 29 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 9a49cfd..c153406 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -3,39 +3,27 @@
         --dims: (
             --pad-x:        1.1em,
             --pad-y:        .8em,
-            --hover-offset: -.5rem,
+            --hover-offset: -.3rem,
+            --indicator: (
+                --width:  4px,
+                --height: 1em,
+            ),
         ),
         --colors: (
-            --bg: prop(--colors --bg-lo, $global: true),
-            --fg: prop(--colors --fg, $global: true),
+            --bg:     prop(--colors --bg-lo, $global: true),
+            --fg:     prop(--colors --fg, $global: true),
+            --unread: prop(--colors --bg, $global: true),
             --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-hi: prop(--colors --fg, $global: true),
-            ),
         )
     ));
 
     @include store((
         --colors: (
-            --bg: prop(--colors --bg-hi, $global: true),
-            --link: (
-                --bg:    hsl(
-                    #{prop(--colors --link --colored --idle-h, $global: true)},
-                    #{prop(--colors --link --colored --idle-s, $global: true)},
-                    98.8%
-                ),
-                --fg:    prop(--colors --link --colored --idle, $global: true),
-                --fg-hi: hsl(
-                    #{prop(--colors --link --colored --idle-h, $global: true)},
-                    calc(#{prop(--colors --link --colored --idle-s, $global: true)} * .7),
-                    calc(#{prop(--colors --link --colored --idle-l, $global: true)} * 1.3)
-                ),
-            ),
+            --bg:     prop(--colors --bg-hi, $global: true),
+            --unread: prop(--colors --bg-lo, $global: true),
         )
     ), 'light');
 
@@ -84,16 +72,19 @@
                 * {
                     color: currentColor;
                 }
+
+                @include element('block') {
+                    @include modifier('indicator') {
+                        color: prop(--colors --hover --bg);
+                    }
+                }
             }
         }
 
-        @include modifier('mark-visited') {
-            &:link {
-                background-color: prop(--colors --link --bg);
-                color:            prop(--colors --link --fg);
-
-                small {
-                    color: prop(--colors --link --fg-hi);
+        &:visited {
+            @include element('block') {
+                @include modifier('indicator') {
+                    color: prop(--colors --unread);
                 }
             }
         }
@@ -106,6 +97,20 @@
                 flex-shrink: 1;
                 width:       100%;
             }
+
+            @include modifier('indicator') {
+                transition: color .2s;
+                color:      prop(--colors --bg);
+
+                &::before {
+                    content:          '';
+                    display:          block;
+                    width:            prop(--dims --indicator --width);
+                    height:           prop(--dims --indicator --height);
+                    border-radius:    prop(--dims --indicator --height);
+                    background-color: currentColor;
+                }
+            }
         }
     }
 }