From 2207e6c48f4d3ea2e1209f3be535538be609aa71 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 20 Dec 2021 07:40:23 +0100
Subject: More compact gallery cards

---
 assets/css/components/_card.scss                   |  40 +++++------
 .../doodles/2021-lazy-firefox/firefox_lazy.png     | Bin 37763 -> 88463 bytes
 .../2021-lazy-firefox/firefox_lazy_transparent.png | Bin 0 -> 37763 bytes
 .../projects/doodles/2021-lazy-firefox/index.md    |   2 +
 templates/partials/gallery_card.html               |  76 ++++++++++-----------
 5 files changed, 57 insertions(+), 61 deletions(-)
 create mode 100755 content/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.png

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 5d36e7e..7fa54e5 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -73,15 +73,17 @@
                     color: prop(--colors --hover --fg);
                 }
 
+                @include element('row') {
+                    @include modifier('hidden') {
+                        opacity: 1;
+                    }
+                }
+
                 @include element('block') {
                     @include modifier('indicator') {
                         color: prop(--colors --hover --fg);
                     }
                 }
-
-                /*@include element('row') {
-                    border-top-color: transparent;
-                }*/
             }
         }
 
@@ -111,22 +113,28 @@
             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 modifier('hidden') {
+                position:         absolute;
+                z-index:          10;
+                right:            0;
+                bottom:           0;
+                left:             0;
+                transition:       opacity .2s;
+                opacity:          0;
+                background-color: prop(--colors --hover --bg);
+            }
         }
 
         @include element('thumbnail') {
             position:    relative;
             width:       100%;
             height:      2em;
-            padding-top: 40%;
+            padding-top: 46%;
         }
 
         @include element('thumbnail-img') {
@@ -149,20 +157,6 @@
                 width:       100%;
             }
 
-            /*@include modifier('separator') {
-                align-self:     stretch;
-                padding-top:    0;
-                padding-bottom: 0;
-
-                &::before {
-                    content:          '';
-                    display:          block;
-                    width:            1px;
-                    height:           100%;
-                    background-color: prop(--colors --border);
-                }
-            }*/
-
             @include modifier('indicator') {
                 transition: color .2s;
                 color:      prop(--colors --unread);
diff --git a/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png b/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png
index ab3704a..a10a0b7 100755
Binary files a/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png and b/content/projects/doodles/2021-lazy-firefox/firefox_lazy.png differ
diff --git a/content/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.png b/content/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.png
new file mode 100755
index 0000000..ab3704a
Binary files /dev/null and b/content/projects/doodles/2021-lazy-firefox/firefox_lazy_transparent.png differ
diff --git a/content/projects/doodles/2021-lazy-firefox/index.md b/content/projects/doodles/2021-lazy-firefox/index.md
index 35ad12c..0804f69 100644
--- a/content/projects/doodles/2021-lazy-firefox/index.md
+++ b/content/projects/doodles/2021-lazy-firefox/index.md
@@ -5,3 +5,5 @@ thumbnail: firefox_lazy.png
 ---
 
 ![](firefox_lazy.png)
+
+![](firefox_lazy_transparent.png)
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index f724e3b..485af00 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -1,47 +1,47 @@
 $if(it.url)$
-    <a href="$it.url.rel$" class="l-card-list__card c-card">
-        $if(it.thumbnail)$
+    $if(it.thumbnail)$
+        <a href="$it.url.rel$" class="l-card-list__card c-card">
             <div class="c-card__row c-card__row--flush">
                 <div class="c-card__thumbnail">
                     <img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
                 </div>
             </div>
-        $endif$
-        <div class="c-card__row">
-            $if(it.indicator)$
-                <div class="c-card__block c-card__block--indicator"></div>
-            $endif$
-            $if(it.icon)$
-                <svg class="c-card__block o-icon" width="1em" height="1em">
-                    <use href="/symbols.svg#icon-$it.icon$"></use>
-                </svg>
-            $endif$
-            <div class="c-card__block c-card__block--main">
-                $if(it.subtitle)$
-                    <strong class="u-db u-elp">$it.title$</strong>
-                    <small class="u-db u-elp">$it.subtitle$</small>
-                $elseif(it.category)$
-                    <small class="u-db u-elp">$it.category$</small>
-                    <strong class="u-db u-elp">$it.title$</strong>
-                $elseif(it.date)$
-                    <time datetime="$it.date.yyyy_mm_dd$">
-                        <small class="u-dn@sm-hi">
-                            $it.date.short$
-                        </small>
-                        <small class="u-dn@sm-lo">
-                            $it.date.long$
-                        </small>
-                    </time>
-                    <strong class="u-db u-elp">$it.title$</strong>
-                $else$
-                    $it.title$
+            <div class="c-card__row c-card__row--hidden">
+                $if(it.indicator)$
+                    <div class="c-card__block c-card__block--indicator"></div>
+                $endif$
+                $if(it.icon)$
+                    <svg class="c-card__block o-icon" width="1em" height="1em">
+                        <use href="/symbols.svg#icon-$it.icon$"></use>
+                    </svg>
+                $endif$
+                <div class="c-card__block c-card__block--main">
+                    $if(it.subtitle)$
+                        <strong class="u-db u-elp">$it.title$</strong>
+                        <small class="u-db u-elp">$it.subtitle$</small>
+                    $elseif(it.category)$
+                        <small class="u-db u-elp">$it.category$</small>
+                        <strong class="u-db u-elp">$it.title$</strong>
+                    $elseif(it.date)$
+                        <time datetime="$it.date.yyyy_mm_dd$">
+                            <small class="u-dn@sm-hi">
+                                $it.date.short$
+                            </small>
+                            <small class="u-dn@sm-lo">
+                                $it.date.long$
+                            </small>
+                        </time>
+                        <strong class="u-db u-elp">$it.title$</strong>
+                    $else$
+                        $it.title$
+                    $endif$
+                </div>
+                $if(it.post_icon)$
+                    <svg class="c-card__block o-icon" width="1em" height="1em">
+                        <use href="/symbols.svg#icon-$it.post_icon$"></use>
+                    </svg>
                 $endif$
             </div>
-            $if(it.post_icon)$
-                <svg class="c-card__block o-icon" width="1em" height="1em">
-                    <use href="/symbols.svg#icon-$it.post_icon$"></use>
-                </svg>
-            $endif$
-        </div>
-    </a>
+        </a>
+    $endif$
 $endif$
-- 
cgit v1.2.3-54-g00ecf