feat: masonry view for gallery

themes/paprika/assets/app.css

@@ -213,6 +213,7 @@ math {
 
 }
 
+
 .list-tag {
   background: var(--faint);
   color: var(--lit);
@@ -386,6 +387,44 @@ article {
   img {
     margin: auto;
   }
+
+}
+
+.gallery {
+  img {
+    break-inside: avoid;
+    border-radius: 1rem;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  figure {
+    position: relative;
+  }
+
+  column-count: if(media(width > 768px): 2; else: 1);
+  column-gap: var(--small-gap);
+
+  figure+figure {
+    margin-top: var(--gap);
+  }
+
+  .post-link {
+    position: absolute;
+    border-radius: 1rem;
+    display: grid;
+    place-content: center;
+    font-weight: 600;
+    font-size: if(media(width > 768px): 2.5rem; else: 4rem);
+    background: color-mix(in lab, var(--background) 40%, transparent);
+    opacity: 0;
+
+    transition: opacity 200ms;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 }
 
 .post-link {

themes/paprika/layouts/_default/gallery.html

@@ -9,14 +9,15 @@
   {{.Content}}
 </section>
 
-{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}
-<article>
-  <h2>{{ .Title }}</h2>
-  <br>
-  <img src="{{ .Params.image }}" style="border-radius: 1rem">
-  <a href="{{ .Permalink }}" aria-label="{{ .Title }}" class="post-link"></a>
-</article>
-{{ end }}
+<section class="gallery auto-grid">
+  {{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}
+  <figure>
+    <!-- <h2>{{ .Title }}</h2> -->
+    <img src="{{ .Params.image }}">
+    <a href="{{ .Permalink }}" aria-label="{{ .Title }}" class="post-link">{{ .Title }}</a>
+  </figure>
+  {{ end }}
+</section>
 
 {{ if gt $paginator.TotalPages 1 }}
   <nav data-main>