Merge pull request #74 from thekid/feature/feed-images

Show 1 preview image and collapse the rest into an overlapping list

src/main/handlebars/feed.handlebars

@@ -42,7 +42,20 @@
             {{> partials/weather in=.}}
           </div>
 
-          {{> partials/images in=. first=@first}}
+          <a class="images is-preview is-{{size-class (size images)}}" href="{{route this}}">
+            {{#with images.0}}
+              <div class="{{#if is.video}}is-video{{/if}} image">
+                <img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless first}}loading="lazy"{{/unless}} {{&dataset meta}} src="/image/{{slug}}/thumb-{{name}}.webp" width="1024">
+              </div>
+            {{/with}}
+            <div class="more">
+              {{#each images}}
+                {{#unless (equals @index 0)}}
+                  <img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless ../@first}}loading="lazy"{{/unless}} style="z-index: -{{@index}}" src="/image/{{slug}}/thumb-{{name}}.webp" width="192">
+                {{/unless}}
+              {{/each}}
+            </div>
+          </a>
 
           <div class="content">
             {{& content}}

src/main/handlebars/layout.handlebars

@@ -543,34 +543,80 @@
     }
 
     .images {
+      position: relative;
       margin-top: 1rem;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1rem;
+      overflow: hidden;
 
       &.overview {
         grid-template-columns: 1fr 1fr 1fr 1fr;
         padding-bottom: 1rem;
       }
 
-      &.all, &.is-single {
+      &.all, &.is-single, &.is-preview {
         grid-template-columns: 1fr;
       }
 
-      &.is-single video {
+      &.is-single .image :is(img, video) {
+        aspect-ratio: auto;
+      }
+
+      &.is-preview .image :is(img, video) {
         aspect-ratio: auto;
       }
 
       &:where(.is-odd:not(.all)) .image:first-child {
         grid-column: 1 / 3;
       }
 
-      .image img, .image video {
+      .image :is(img, video) {
         aspect-ratio: 15 / 10;
         object-fit: cover;
         border-radius: .25rem;
         box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2);
       }
+
+      .is-video::after {
+        content: url('/static/play.svg');
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        width: max(5%, 2rem);
+        aspect-ratio: 1 / 1;
+        filter: drop-shadow(.25rem .25rem .25rem rgb(0 0 0 / .5));
+      }
+
+      .more {
+        --_size: 10rem;
+        --_overlap: 8rem;
+
+        position: absolute;
+        bottom: 1.5rem;
+        left: 1.5rem;
+        display: flex;
+        isolation: isolate;
+
+        img {
+          display: block;
+          border: .25rem solid white;
+          border-radius: .35rem;
+          width: var(--_size);
+          aspect-ratio: 1 / 1;
+          object-fit: cover;
+          box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2);
+          transition: margin ease-in-out 150ms;
+        }
+
+        img:not(:first-child) {
+          margin-left: calc(-1 * var(--_overlap));
+        }
+
+        &:hover img:not(:first-child) {
+          margin-left: 1rem;
+        }
+      }
     }
 
     .marker {
@@ -751,6 +797,17 @@
     }
 
     @media (max-width: 619px) {
+      .images .more {
+        --_size: 5rem;
+        --_overlap: 4rem;
+        bottom: 1rem;
+        left: 1rem;
+
+        img {
+          border-width: .15rem;
+        }
+      }
+
       #lightbox {
         margin-left: 0;
         margin-right: 0;

src/main/handlebars/partials/images.handlebars

@@ -2,7 +2,7 @@
   {{#each in.images}}
     <div class="image">
       {{#if is.video}}
-        <video controls preload="metadata" width="100%" poster="/image/{{in.slug}}/thumb-{{name}}.webp">
+        <video controls playsinline preload="metadata" width="100%" poster="/image/{{in.slug}}/thumb-{{name}}.webp">
           <source src="/image/{{in.slug}}/video-{{name}}.mp4" type="video/mp4">
         </video>
       {{else}}