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 +-
 templates/layouts/categorized_list.html |  6 ++--
 templates/layouts/list.html             |  6 ++--
 5 files changed, 59 insertions(+), 50 deletions(-)

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;
             }
         }
     }
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 00ea383..1b9b293 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -15,7 +15,8 @@ $body$
                     <div class="c-post-list__category-content">
                         $if(pages.asc_title.show_dates)$
                             $for(it.pages.desc_date)$
-                                <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
+                                <a href="$it.url.rel$" class="c-post-list__post c-card">
+                                    <div class="c-card__block c-card__block--indicator"></div>
                                     <div class="c-card__block c-card__block--main">
                                         $it.title$
                                     </div>
@@ -31,7 +32,8 @@ $body$
                             $endfor$
                         $else$
                             $for(it.pages.asc_title)$
-                                <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
+                                <a href="$it.url.rel$" class="c-post-list__post c-card">
+                                    <div class="c-card__block c-card__block--indicator"></div>
                                     <div class="c-card__block c-card__block--main">
                                         $it.title$
                                     </div>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 9fc6ebe..8794c07 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -10,7 +10,8 @@ $body$
             <div class="c-post-list__category-content">
                 $if(show_dates)$
                     $for(pages.desc_date)$
-                        <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
+                        <a href="$it.url.rel$" class="c-post-list__post c-card">
+                            <div class="c-card__block c-card__block--indicator"></div>
                             <div class="c-card__block c-card__block--main">
                                 $it.title$
                             </div>
@@ -26,7 +27,8 @@ $body$
                     $endfor$
                 $else$
                     $for(pages.asc_title)$
-                        <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
+                        <a href="$it.url.rel$" class="c-post-list__post c-card">
+                            <div class="c-card__block c-card__block--indicator"></div>
                             <div class="c-card__block c-card__block--main">
                                 $it.title$
                             </div>
-- 
cgit v1.2.3-54-g00ecf