Make gallery images clickable to display full-sized image

src/app.rs

@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use leptos_meta::{provide_meta_context, MetaTags, Style, Stylesheet, Title};
+use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
 use leptos_router::{
     components::{Outlet, ParentRoute, Route, Router, Routes, A}, path
 };
@@ -198,44 +198,11 @@ pub fn Resume() -> impl IntoView {
     let resume = Resource::new(move || i18n.get_locale(), move |locale| get_resume(locale.to_string()));
     view! {
         <main class="main-width">
-            <Title text="tanguy.gerome.cv"/>
+            <img
-            <Style>
+                class="resume-image"
-            "
+                src="https://directus.gerome.fi/assets/0c33f439-4e1b-4a1f-a1ab-df1cc9b60f23?width=600&height=600&fit=cover&format=auto&quality=90&withoutEnlargement=true"
-                header, footer {
+                alt="Tanguy Gérôme - portait"
-                    display: none!important;
+            />
-                }
-
-                h1, h2 {
-                    color: #317349!important;
-                }
-
-                h1 {
-                    margin-top: 16px!important;
-                }
-
-                h2 {
-                    margin-top: 32px!important;
-                }
-
-                a {
-                    text-decoration: none;
-                    color: #0F0F0F!important;
-                }
-
-                main {
-                    margin-top: 0!important;
-                }
-            "
-            </Style>
-            <picture class="resume-image">
-                <img
-                    // src="https://directus.gerome.fi/assets/0c33f439-4e1b-4a1f-a1ab-df1cc9b60f23?width=600&height=600&fit=cover&format=auto&quality=90&withoutEnlargement=true"
-                    // src="https://directus.gerome.fi/assets/efdc0b69-7a48-4434-bf07-d406e42a971e?width=1600&fit=inside&format=auto&quality=95&withoutEnlargement=true"
-                    src="https://directus.gerome.fi/assets/4f4838be-9eb2-4a55-95de-8fe5c86f935a?width=600&height=600&fit=cover&format=auto&quality=90&withoutEnlargement=true"
-                    alt="Portrait by Jutta Kivilompolo"
-                />
-                <label class="resume-image-label">Portrait by Jutta Kivilompolo</label>
-            </picture>
             <Suspense
                 fallback=move || view! { <div>"Loading..."</div> }
             >
@@ -249,7 +216,6 @@ pub fn Resume() -> impl IntoView {
                     })
                 }
             </Suspense>
-            // <label class="resume-image-label">Portrait by Jutta Kivilompolo</label>
         </main>
     }
 }

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>
-                            <img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
+                            <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

@@ -257,12 +257,9 @@ body {
 
 .resume-image {
   float: right;
-  height: 250px;
+  max-width: 300px;
-  width: 250px;
+  width: 100%;
-  margin: 0px;
+  margin: 16px;
-  margin-top: 0px;
-  object-fit: cover;
-  position: relative;
 
   @media all and (max-width: 550px) {
     float: unset;
@@ -271,31 +268,8 @@ body {
     margin-top: 16px;
     margin-bottom: 16px;
   }
-
-  >img {
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  label {
-    display: block;
-    text-align: center;
-    font-size: 10px;
-    transform: rotate(-90deg) translate(0%, 101%);
-    position: absolute;
-    // right: 0%;
-    top: 0%;
-    height: 100%;
-    width: 100%;
-  }
 }
 
-// label.resume-image-label {
-//   display: block;
-//   text-align: center;
-//   font-size: 10px;
-// }
-
 .gallery-entries, .blog-entries {
   width: 100%;
   display: flex;
@@ -425,12 +399,17 @@ body {
   align-items: flex-start;
   margin-top: 32px;
 
-  img {
+  .gallery-image-details-link {
-    object-fit: contain;
+    display: block;
-    width: 100%;
+    margin: auto;
-    max-height: 90vh;
+
-    max-width: 1232px;
+    img {
-    align-self: center;
+      object-fit: contain;
+      width: 100%;
+      max-height: 90vh;
+      max-width: 1232px;
+      align-self: center;
+    }
   }
 
   .gallery-title {