Local changes for exporting resume pdf

src/app.rs

@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
+use leptos_meta::{provide_meta_context, MetaTags, Style, Stylesheet, Title};
 use leptos_router::{
     components::{Outlet, ParentRoute, Route, Router, Routes, A}, path
 };
@@ -198,11 +198,44 @@ 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"/>
+            <Style>
+            "
+                header, footer {
+                    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
-                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"
-                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"
-                alt="Tanguy Gérôme - portait"
+                    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> }
             >
@@ -216,6 +249,7 @@ pub fn Resume() -> impl IntoView {
                     })
                 }
             </Suspense>
+            // <label class="resume-image-label">Portrait by Jutta Kivilompolo</label>
         </main>
     }
 }

style/main.scss

@@ -257,9 +257,12 @@ body {
 
 .resume-image {
   float: right;
-  max-width: 300px;
+  height: 250px;
-  width: 100%;
+  width: 250px;
-  margin: 16px;
+  margin: 0px;
+  margin-top: 0px;
+  object-fit: cover;
+  position: relative;
 
   @media all and (max-width: 550px) {
     float: unset;
@@ -268,8 +271,31 @@ 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;
@@ -289,9 +315,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;