Add thumbnails to cards

2 files changed, 52 insertions, 19 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index b023447..5c2efa4 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -30,11 +30,8 @@
     ), 'light');
 
     @include component(namespace()) {
-        display:          flex;
+        display:          block;
         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);
@@ -81,6 +78,10 @@
                         color: prop(--colors --hover --fg);
                     }
                 }
+
+                /*@include element('row') {
+                    border-top-color: transparent;
+                }*/
             }
         }
 
@@ -92,9 +93,41 @@
             }
         }
 
+        @include element('row') {
+            display:     flex;
+            align-items: center;
+            padding:     prop(--dims --pad-y) prop(--dims --pad-x);
+            gap:         prop(--dims --pad-x);
+            //transition:  border-top-color .2s;
+
+            @include modifier('flush') {
+                padding: 0;
+            }
+
+            /*@include next-twin-element {
+                border-top: 1px solid prop(--colors --border);
+            }*/
+        }
+
+        @include element('thumbnail') {
+            position:    relative;
+            width:       100%;
+            height:      2em;
+            padding-top: 40%;
+        }
+
+        @include element('thumbnail-img') {
+            display:    block;
+            position:   absolute;
+            top:        0;
+            left:       0;
+            width:      100%;
+            height:     100%;
+            object-fit: cover;
+        }
+
         @include element('block') {
             flex:          0 0 auto;
-            padding:       prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
             overflow:      hidden;
             text-overflow: ellipsis;
 
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index e6d1297..3bbcc44 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -10,19 +10,23 @@
         font-size:  1rem;
 
         @include element('cards') {
-            margin-top: $line-height * .625rem;
-            filter:     drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
+            display:        flex;
+            flex-direction: column;
+            gap:            2px;
+            margin-top:     $line-height * .625rem;
+            filter:         drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
-            @include modifier('grid') {
+            @include modifier('grid', 'gallery') {
                 display:               grid;
                 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
-                gap:                   6px;
-    
-                @include element('card') {
-                    @include next-twin-element {
-                        margin-top: 0;
-                    }
-                }
+            }
+
+            @include modifier('grid') {
+                gap: 6px;
+            }
+
+            @include modifier('gallery') {
+                gap: 30px;
             }
 
             @media print {
@@ -32,10 +36,6 @@
 
         @include element('card') {
             box-shadow: none;
-
-            @include next-twin-element {
-                margin-top: 2px;
-            }
         }
     }
 }