From 3b90048ff3592e2a5630a97f611106aa06be1cb6 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 21 Jul 2025 21:25:30 +0200
Subject: Improved card and card list

---
 src/objects/_card.scss | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

(limited to 'src/objects/_card.scss')

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4f8c7fb..aaf46b6 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -16,16 +16,17 @@
         flex-direction:   column;
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
-        border:           1px solid transparent;
+        border:           props.get(vars.$border-width) solid transparent;
         border-color:     props.get(vars.$border-color);
         border-radius:    props.get(vars.$rounding);
-        transition:       transform .2s;
+        transition:       transform .2s, border-color .2s;
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
             &:active,
             &:focus-visible {
-                transform: translateY(props.get(vars.$hover--offset-b));
+                transform:    translateY(props.get(vars.$hover--offset-b));
+                border-color: props.get(vars.$hover--border-color);
 
                 @include bem.elem('body') {
                     @include bem.modifier('hidden') {
@@ -39,9 +40,9 @@
             }
 
             &:focus-visible {
-                margin:        calc(-1 * props.get(vars.$key-focus--border-width) + 1px);
-                border:        props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px);
+                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
                 outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                 box-shadow:
                     0 0 0
@@ -59,19 +60,20 @@
             position:    relative;
             display:     block;
             flex:        0 0 auto;
-            inline-size: 100%;
+            inline-size: calc(100% + 2 * props.get(vars.$border-width));
+            margin:      calc(-1 * props.get(vars.$border-width));
             overflow:    hidden;
             object-fit:  cover;
             transition:  background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
-                border-start-end-radius:   calc(props.get(vars.$rounding) - 1px);
+                border-start-start-radius: props.get(vars.$rounding);
+                border-start-end-radius:   props.get(vars.$rounding);
             }
 
             &:last-child {
-                border-end-start-radius: calc(props.get(vars.$rounding) - 1px);
-                border-end-end-radius:   calc(props.get(vars.$rounding) - 1px);
+                border-end-start-radius: props.get(vars.$rounding);
+                border-end-end-radius:   props.get(vars.$rounding);
             }
 
             @include bem.next-elem('avatar') {
@@ -107,21 +109,21 @@
 
             @include bem.modifier('hidden') {
                 position:                absolute;
-                inset-block-end:         0;
-                inset-inline:            0;
+                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                inset-inline:            calc(-1 * props.get(vars.$border-width));
                 z-index:                 10;
                 visibility:              hidden;
                 background-color:        props.get(vars.$bg-color);
-                //border-end-start-radius: props.get(vars.$rounding);
-                //border-end-end-radius:   props.get(vars.$rounding);
+                border-end-start-radius: props.get(vars.$rounding);
+                border-end-end-radius:   props.get(vars.$rounding);
                 opacity:                 0;
                 transition:
                     opacity .2s ease,
                     visibility 0s .2s linear;
 
                 @include bem.next-elem('image') {
-                    border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
-                    border-start-end-radius:   calc(props.get(vars.$rounding) - 1px);
+                    border-start-start-radius: props.get(vars.$rounding);
+                    border-start-end-radius:   props.get(vars.$rounding);
                 }
             }
         }
@@ -225,11 +227,11 @@
 
                 &:first-child {
                     border-start-end-radius:   0;
-                    border-end-start-radius:   calc(props.get(vars.$rounding) - 1px);
+                    border-end-start-radius:   props.get(vars.$rounding);
                 }
     
                 &:last-child {
-                    border-start-end-radius: calc(props.get(vars.$rounding) - 1px);
+                    border-start-end-radius: props.get(vars.$rounding);
                     border-end-start-radius: 0;
                 }
             }
-- 
cgit v1.3.1