Simplified card component code

2 files changed, 8 insertions, 38 deletions

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;