Simplified card component code

4 files changed, 30 insertions, 50 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index fd15836..9a6a53e 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -39,11 +39,6 @@ body {
     padding: 0;
 }
 
-main {
-    display:        flex;
-    flex-direction: column;
-}
-
 pre,
 code {
     font-family: $font-fam--mono;
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 832c410..d650842 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -133,12 +133,27 @@ $content--width:  42rem;
     $gray6: hsl(220, 7%, 16%);
     $gray7: hsl(220, 7%, 0%);
 
-    $link-idle: hsl(220, 60%, 40%);
-
-    $theme-link-bg:    change-color($link-idle, $lightness: 98.8%);
-    $theme-link-obj:   rgba($link-idle, .5);
-    $theme-link-fg-hi: mix($link-idle, $gray0, 75%);
-    $theme-link-fg:    $link-idle;
+    $theme-link-bg: hsl(
+        var(--colors--accent--h),
+        var(--colors--accent--s),
+        98.8%
+    );
+    $theme-link-obj: hsla(
+        var(--colors--accent--h),
+        var(--colors--accent--s),
+        var(--colors--accent--l),
+        .5
+    );
+    $theme-link-fg: hsl(
+        var(--colors--accent--h),
+        var(--colors--accent--s),
+        calc(var(--colors--accent--l) * .8)
+    );
+    $theme-link-fg-hi: hsl(
+        var(--colors--accent--h),
+        calc(var(--colors--accent--s) * .6),
+        calc(var(--colors--accent--l) * 1.2)
+    );
 
     @include store((
         --colors: (
@@ -200,7 +215,7 @@ $content--width:  42rem;
 
             --link: (
                 --colored: (
-                    --idle:    $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --idle:    hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), //
                     --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
                 )
             ),
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6fdd874..d1b549d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -30,6 +30,8 @@
         display:          flex;
         position:         relative;
         align-items:      center;
+        padding-right:    calc(.5 * #{prop(--dims --pad-x)});
+        padding-left:     calc(.5 * #{prop(--dims --pad-x)});
         transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s;
         background-color: prop(--colors --bg);
@@ -83,45 +85,14 @@
             }
         }
 
-        @include element('content') {
-            box-sizing: border-box;
-            width:      100%;
-            padding:    prop(--dims --pad-y) prop(--dims --pad-x);
-
-            @include next-twin-element {
-                width: auto;
-            }
-
-            @include modifier('flip') {
-                visibility:       hidden;
-                position:         absolute;
-                top:              0;
-                left:             0;
-                height:           100%;
-                transition:       visibility 0s linear .2s, opacity .2s;
-                opacity:          0;
-                background-color: prop(--colors --hover --bg);
-            }
-
-            @include sibling-element('icon') {
-                padding-right: prop(--dims --pad-x);
-                padding-left:  0;
-            }
-        }
-
-        @include element('icon') {
-            display: block;
+        @include element('block') {
             flex:    0 0 auto;
-            padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
-        }
+            padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
 
-        @include element('image') {
-            display:         block;
-            flex:            0 0 auto;
-            width:           4em;
-            height:          100%;
-            object-fit:      cover;
-            object-position: center center;
+            @include modifier('main') {
+                flex-shrink: 1;
+                width:       100%;
+            }
         }
     }
 }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index cc0e827..6371411 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,7 +9,6 @@
 
     @include component(namespace()) {
         position:         relative;
-        flex:             0 0 auto;
         min-height:       prop(--dims --outer, $global: true);
         margin-top:       auto;
         overflow:         hidden;