Make gallery images clickable to display full-sized image

src/gallery.rs

@@ -118,7 +118,9 @@ pub fn GalleryEntry() -> impl IntoView {
                     view! {
                         <div class="main-width gallery-open-entry">
                             <h2 class="gallery-title">{image.title}</h2>
+                            <a class="gallery-image-details-link" href=format!("https://directus.gerome.fi/assets/{}?format=auto&quality=95", image.watermarked.id)>
                                 <img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
+                            </a>
                             {if subtitle.len() > 0 {
                                 Some(view!{<h4 class="gallery-subtitle">{subtitle}</h4>})
                             } else {

style/main.scss

@@ -289,9 +289,13 @@ body {
 
   .blog-illustration {
     position: relative;
+    height: min(60vh, 75vw);
+
+    display: flex;
 
     img {
       max-height: 60vh;
+      height: 100%;
       width: 100vw;
       max-width: 100vw;
       object-fit: cover;
@@ -395,6 +399,10 @@ body {
   align-items: flex-start;
   margin-top: 32px;
 
+  .gallery-image-details-link {
+    display: block;
+    margin: auto;
+
     img {
       object-fit: contain;
       width: 100%;
@@ -402,6 +410,7 @@ body {
       max-width: 1232px;
       align-self: center;
     }
+  }
 
   .gallery-title {
     margin-bottom: 16px;