Design

2 files changed, 21 insertions, 30 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index f444daf..1b46373 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -14,13 +14,6 @@
         )
     ));
 
-    @include store((
-        --dims: (
-            --pad-x: 1em,
-            --pad-y: .7em
-        )
-    ), 'md');
-
     @include component(namespace()) {
         display:          flex;
         position:         relative;
@@ -42,7 +35,7 @@
 
         small,
         strong {
-            transition: background-color .2s, color .2s;
+            transition: color .2s;
         }
 
         &:link,
@@ -62,7 +55,7 @@
     
                 small,
                 strong {
-                    color: prop(--colors --hover --fg);
+                    color: currentColor;
                 }
             }
         }
@@ -72,6 +65,10 @@
             width:      100%;
             padding:    prop(--dims --pad-y) prop(--dims --pad-x);
 
+            @include next-twin-element {
+                width: auto;
+            }
+
             @include modifier('flip') {
                 visibility:       hidden;
                 position:         absolute;
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 5e9f520..9d4c956 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -7,16 +7,10 @@
             --post: (
                 --idle-fg:    prop(--colors --fg-lo, $global: true),
                 --visited-fg: prop(--colors --fg, $global: true),
-                --bg:         prop(--colors --bg-lo, $global: true),
-                --border:     prop(--colors --obj-hi, $global: true),
             ),
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
             )
-        ),
-        --dims: (
-            --pad-x: 1em,
-            --pad-y: .6em,
         )
     ));
 
@@ -33,15 +27,8 @@
         }
 
         @include element('post') {
-            display:          flex;
-            align-items:      baseline;
-            padding:          prop(--dims --pad-y) prop(--dims --pad-x);
-            background-color: prop(--colors --post --bg);
-            color:            currentColor;
-            text-decoration:  none;
-
             @include next-twin-element {
-                margin-top: 2px;
+                margin-top: .6rem;
             }
 
             &:visited {
@@ -49,19 +36,26 @@
                     color: prop(--colors --post --visited-fg);
                 }
             }
+
+            &:hover,
+            &:focus {
+                @include element('post-date') {
+                    color: currentColor;
+                }
+            }
         }
 
         @include element('post-title') {
-            margin-right: 1em;
-            color:        prop(--colors --post --idle-fg);
-            font-size:    1 / 16 * 17em;
+            color:       prop(--colors --post --idle-fg);
+            font-size:   1 / 16 * 17em;
+            font-weight: normal;
         }
 
         @include element('post-date') {
-            flex:        0 0 auto;
-            margin-left: auto;
-            color:       prop(--colors --meta --fg);
-            font-size:   1 / 16 * 14em;
+            flex:       0 0 auto;
+            transition: color .2s;
+            color:      prop(--colors --meta --fg);
+            font-size:  1 / 16 * 14em;
         }
     }
 }