From 86251b230e1c3b91c941ff1bbed25d9a5c8021a9 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 19 Jun 2021 20:08:15 +0200
Subject: Color adjustments, improved cards

---
 assets/css/_vars.scss                 | 32 +++++++++---------
 assets/css/components/_card.scss      | 63 +++++++++++++++++++----------------
 assets/css/components/_post-list.scss |  2 +-
 3 files changed, 51 insertions(+), 46 deletions(-)

(limited to 'assets')

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 2377b43..e47ab8e 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -25,14 +25,14 @@ $line-height:     1.7;
 $content--width:  42rem;
 
 @include iro-execute {
-    $gray0: hsl(220, 7%, 7%);
-    $gray1: hsl(220, 7%, 11%);
-    $gray2: hsl(220, 7%, 18%);
-    $gray3: hsl(220, 7%, 23%);
-    $gray4: hsl(220, 7%, 38%);
-    $gray5: hsl(220, 7%, 60%);
-    $gray6: hsl(220, 7%, 76%);
-    $gray7: hsl(220, 7%, 100%);
+    $gray0: hsl(220, 5%, 7%);
+    $gray1: hsl(220, 5%, 11%);
+    $gray2: hsl(220, 5%, 17%);
+    $gray3: hsl(220, 5%, 23%);
+    $gray4: hsl(220, 5%, 38%);
+    $gray5: hsl(220, 5%, 60%);
+    $gray6: hsl(220, 5%, 76%);
+    $gray7: hsl(220, 5%, 100%);
 
     @include store((
         --dims: (
@@ -104,14 +104,14 @@ $content--width:  42rem;
 }
 
 @include iro-execute {
-    $gray0: hsl(220, 7%, 100%);
-    $gray1: hsl(220, 7%, 96%);
-    $gray2: hsl(220, 7%, 88%);
-    $gray3: hsl(220, 7%, 83%);
-    $gray4: hsl(220, 7%, 68%);
-    $gray5: hsl(220, 7%, 47%);
-    $gray6: hsl(220, 7%, 16%);
-    $gray7: hsl(220, 7%, 0%);
+    $gray0: hsl(220, 5%, 100%);
+    $gray1: hsl(220, 5%, 95%);
+    $gray2: hsl(220, 5%, 88%);
+    $gray3: hsl(220, 5%, 83%);
+    $gray4: hsl(220, 5%, 68%);
+    $gray5: hsl(220, 5%, 47%);
+    $gray6: hsl(220, 5%, 16%);
+    $gray7: hsl(220, 5%, 0%);
 
     @include store((
         --colors: (
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;
+                }
+            }
         }
     }
 }
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 922cbd9..7a3b8a0 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -36,7 +36,7 @@
             box-shadow: none;
 
             @include next-twin-element {
-                margin-top: 4px;
+                margin-top: 1px;
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2