From aea400db5db347894992cf7a00cb3c010f72755c Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Thu, 25 Jan 2024 00:01:23 +0100
Subject: [PATCH] Frontend: Adjusted CSS to work with mobile environnement.

---
 frontend/src/app.html                         |   2 +-
 frontend/src/lib/components/education.svelte  |   1 +
 frontend/src/lib/components/experience.svelte |   1 +
 frontend/src/lib/components/projects.svelte   |   3 +-
 frontend/src/lib/components/slideshow.svelte  |  11 +-
 frontend/src/lib/css/cv.css                   |  53 ++++--
 frontend/src/lib/css/pill.css                 |   6 +-
 frontend/src/lib/css/section.css              |  59 ++++--
 frontend/src/lib/css/slide.css                | 178 ++++++++++++------
 frontend/src/lib/css/slideshow.css            |  56 ++++--
 frontend/vite.config.js                       |   2 +-
 11 files changed, 264 insertions(+), 108 deletions(-)
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 495490a..f3c9371 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" data-theme="crimson">
diff --git a/frontend/src/lib/components/education.svelte b/frontend/src/lib/components/education.svelte
index 5daaf71..e66d7ad 100644
--- a/frontend/src/lib/components/education.svelte
+++ b/frontend/src/lib/components/education.svelte
@@ -23,6 +23,7 @@
         </div>
         <div class="slide-text-container">
             <h1 class="slide-title">{title}</h1>
+            <img class="slide-img-mobile" src={picture} alt="Education" />
             {#if location}
                 <div class="slide-subtitle-container">
                     <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
diff --git a/frontend/src/lib/components/experience.svelte b/frontend/src/lib/components/experience.svelte
index 6342f50..65b3da9 100644
--- a/frontend/src/lib/components/experience.svelte
+++ b/frontend/src/lib/components/experience.svelte
@@ -28,6 +28,7 @@
         </div>
         <div class="slide-text-container">
             <h1 class="slide-title">{position}</h1>
+            <img class="slide-img-mobile" src={picture} alt="Experience" />
             <div class="slide-subtitle-container">
                 <SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
                 <p class="slide-subtitle slide-aftericon">
diff --git a/frontend/src/lib/components/projects.svelte b/frontend/src/lib/components/projects.svelte
index b9372ac..ec334b9 100644
--- a/frontend/src/lib/components/projects.svelte
+++ b/frontend/src/lib/components/projects.svelte
@@ -21,10 +21,11 @@
 <div class="slide-container">
     <div class="slide-main {active ? '' : 'slide-unactive'}">
         <div class="slide-img-container">
-            <img class="slide-img" src={picture} alt="projects" />
+            <img class="slide-img" src={picture} alt="Projects" />
         </div>
         <div class="slide-text-container">
             <h1 class="slide-title">{title}</h1>
+            <img class="slide-img-mobile" src={picture} alt="Projects" />
             <div class="slide-subtitle-container">
                 <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
                 <p class="slide-subtitle slide-aftericon">
diff --git a/frontend/src/lib/components/slideshow.svelte b/frontend/src/lib/components/slideshow.svelte
index b207b09..e59f8db 100644
--- a/frontend/src/lib/components/slideshow.svelte
+++ b/frontend/src/lib/components/slideshow.svelte
@@ -20,13 +20,15 @@
     data = data.reverse();
   }
 
+  // Svelte bindings
+  let windowWidth = 0;
+
   // Resizing variables
   let resizing = false;
 
   // Slideshow global variables
   let slideshow_index = 0;
   let slideshow_hidden = [];
-
   let slideshowTimeline;
   let slideshowElements;
   let slideshowBubbles;
@@ -34,6 +36,7 @@
   // Timeline global variables
   let slideshow;
   let bubbles = [];
+
   onMount(() => {
     /*    Slideshow    */
     //global writer count
@@ -80,7 +83,7 @@
     // Incrementing the transformValue for each element
     let transformValue = 0;
     for (const id of slideshow_hidden) {
-      transformValue += slideshowElements[id].clientWidth;
+        transformValue += slideshowElements[id].clientWidth;
     }
 
     // Translating elements
@@ -166,13 +169,13 @@
   }
 </script>
 
-<svelte:window on:resize={changeSize} />
+<svelte:window on:resize={changeSize} bind:innerWidth={windowWidth}/>
 
 <div class="slideshow" bind:this={slideshow}>
   <button class="slideshow_btn" on:click={slideCards}>
     <div>
       <SvgIcon
-        size="45"
+        size={windowWidth < 1000 ? "30" : "45"}
         path={slideshow_index >= data.length - 1
           ? mdiChevronLeft
           : mdiArrowRight}
diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index 97cc9c0..f9f1dcd 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -45,6 +45,43 @@ html {
     }
 }
 
+@media screen and (min-width: 1000px) {
+    .name {
+        text-align: center;
+        text-shadow: -15px 5px 20px #00000030;
+    }
+
+    .footer p {
+        font-family: 'Urbanist', sans-serif;
+        font-weight: 600;
+        font-size: 1.25rem;
+        color: var(--color-background);
+        margin: 0.5rem;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .name {
+        text-align: center;
+        text-shadow: -15px 5px 20px #00000030;
+        background-color: var(--color-special);
+        color: var(--color-background);
+        margin-top: 0;
+        padding-top: 1.5rem;
+        margin-bottom: 0;
+        padding-bottom: 1.5rem;
+        box-shadow: rgba(0, 14, 83, 0.12) 0px 30px 25px, rgba(0, 14, 83, 0.05) 0px 5px 10px;
+    }
+
+    .footer p {
+        font-family: 'Urbanist', sans-serif;
+        font-weight: 600;
+        font-size: 1rem;
+        color: var(--color-background);
+        margin: 0.5rem;
+    }
+}
+
 .profile-picture-container {
     display: flex;
     justify-content: center;
@@ -62,12 +99,6 @@ html {
     width: 100%;
     overflow-x: hidden;
     z-index: 0;
-    padding-right: 2rem;
-}
-
-.name {
-    text-align: center;
-    text-shadow: -15px 5px 20px #00000030;
 }
 
 h1 {
@@ -98,7 +129,7 @@ h2 {
 .footer {
     position: relative;
     display: flex;
-    height: 10rem;
+    height: 30vh;
     background-color: var(--color-text);
     z-index: 3;
     justify-content: center;
@@ -106,14 +137,6 @@ h2 {
     flex-direction: column;
 }
 
-.footer p {
-    font-family: 'Urbanist', sans-serif;
-    font-weight: 600;
-    font-size: 1.25rem;
-    color: var(--color-background);
-    margin: 0.5rem;
-}
-
 .footer svg {
     margin: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/pill.css b/frontend/src/lib/css/pill.css
index bec068e..deea793 100644
--- a/frontend/src/lib/css/pill.css
+++ b/frontend/src/lib/css/pill.css
@@ -29,6 +29,10 @@
     filter: invert(8%) sepia(21%) saturate(1187%) hue-rotate(234deg) brightness(101%) contrast(91%);
 }
 
-.pill-container img, svg {
+.pill-container img {
+    margin-right: 0.5rem;
+}
+
+.pill-container svg {
     margin-right: 0.5rem;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/section.css b/frontend/src/lib/css/section.css
index 9257d6a..72cd063 100644
--- a/frontend/src/lib/css/section.css
+++ b/frontend/src/lib/css/section.css
@@ -1,21 +1,48 @@
-.section-container {
-    margin-top: 3rem;
-    margin-left: 3rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: var(--color-title);
-    filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+@media screen and (min-width: 1000px)
+{
+    .section-container {
+        margin-top: 3rem;
+        margin-left: 3rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: var(--color-title);
+        filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+    }
+
+    .subsection-container {
+        margin-left: 3rem;
+        margin-bottom: 0.5rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: var(--color-subtitle);
+        filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+    }
 }
 
-.subsection-container {
-    margin-left: 3rem;
-    margin-bottom: 0.5rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: var(--color-subtitle);
-    filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+@media screen and (max-width: 1000px)
+{
+    .section-container {
+        margin-top: 2rem;
+        margin-left: 1rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: var(--color-title);
+        filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+    }
+
+    .subsection-container {
+        margin-left: 1rem;
+        margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: var(--color-subtitle);
+        filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+    }
 }
 
 .section-h1 {
diff --git a/frontend/src/lib/css/slide.css b/frontend/src/lib/css/slide.css
index 19d7a5a..547b7d6 100644
--- a/frontend/src/lib/css/slide.css
+++ b/frontend/src/lib/css/slide.css
@@ -1,52 +1,135 @@
-.slide-container {
-    display: flex;
-    flex-direction: column;
-    transition: all .3s ease 0s;
+@media screen and (min-width: 1000px)
+{
+    .slide-container {
+        display: flex;
+        flex-direction: column;
+        transition: all .3s ease 0s;
+    }
+
+    .slide-main {
+        display: flex;
+        border-radius: 0.4rem;
+        box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+        background-color: var(--color-background);
+        height: 22rem;
+        margin-left: 2.5rem;
+        margin-right: 2.5rem;
+        z-index: 1;
+        transition: all .3s ease 0s;
+    }
+
+    .slide-img {
+        max-height: 15rem;
+        min-width: 20rem;
+        max-width: 25rem;
+    }
+
+    .slide-img-mobile {
+        height: 0;
+        width: 0;
+    }
+
+    .slide-img-container{
+        display: flex;
+        margin: 1.5rem;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .slide-title {
+        color: var(--color-text);
+        font-family: 'Gabarito', sans-serif;
+        font-weight: 600;
+        font-size: 2rem;
+        margin-bottom: 0.5rem;
+    }
+
+    /* Any Subtitle */
+    .slide-subtitle {
+        color: var(--color-text);
+        font-family: 'Gabarito', sans-serif;
+        font-weight: 500;
+        font-size: 1.5rem;
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+        width: 100%;
+    }
+
+    .slide-text-container {
+        margin: 1.5rem;
+        width: 25rem;
+    }
+
+    .slide-unactive {
+        scale: 0.9;
+        margin-left: 2.25rem !important;
+        margin-right: 2.25rem !important;
+        box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
+    }
 }
 
-.slide-main {
-    display: flex;
-    border-radius: 0.4rem;
-    box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
-    background-color: var(--color-background);
-    height: 22rem;
-    margin-left: 2.5rem;
-    margin-right: 2.5rem;
-    z-index: 1;
-    transition: all .3s ease 0s;
-}
+@media screen and (max-width: 1000px)
+{
+    .slide-container {
+        display: flex;
+        flex-direction: column;
+        transition: all .3s ease 0s;
+    }
 
-.slide-unactive {
-    scale: 0.9;
-    margin-left: 2.25rem !important;
-    margin-right: 2.25rem !important;
-    box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
-}
+    .slide-main {
+        display: flex;
+        border-radius: 0.4rem;
+        box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+        background-color: var(--color-background);
+        height: 36rem;
+        width: 90dvw;
+        margin-left: 5dvw;
+        z-index: 1;
+        transition: all .3s ease 0s;
+    }
 
-.slide-img-container{
-    display: flex;
-    margin: 1.5rem;
-    justify-content: center;
-    align-items: center;
-}
+    .slide-img-mobile {
+        max-height: 15rem;
+        min-width: 76dvw;
+        max-width: 76dvw;
+        margin-top: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
 
-.slide-img {
-    max-height: 15rem;
-    min-width: 20rem;
-    max-width: 25rem;
-}
+    .slide-img-container{
+        visibility: hidden;
+        width: 0;
+        height: 0;
+    }
 
-.slide-text-container {
-    margin: 1.5rem;
-    width: 25rem;
-}
+    .slide-title {
+        color: var(--color-text);
+        font-family: 'Gabarito', sans-serif;
+        font-weight: 600;
+        font-size: 2rem;
+        margin-bottom: 0;
+    }
 
-.slide-title {
-    color: var(--color-text);
-    font-family: 'Gabarito', sans-serif;
-    font-weight: 600;
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
+    /* Any Subtitle */
+    .slide-subtitle {
+        color: var(--color-text);
+        font-family: 'Gabarito', sans-serif;
+        font-weight: 500;
+        font-size: 1.25rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        width: 100%;
+    }
+
+    .slide-text-container {
+        margin: 1.5rem;
+        width: 75dvw;
+    }
+
+    .slide-unactive {
+        scale: 0.9;
+        box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
+    }
 }
 
 .slide-subtitle-container {
@@ -60,17 +143,6 @@
     margin-left: 0.5rem;
 }
 
-/* Any Subtitle */
-.slide-subtitle {
-    color: var(--color-text);
-    font-family: 'Gabarito', sans-serif;
-    font-weight: 500;
-    font-size: 1.5rem;
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-    width: 100%;
-}
-
 .slide-justify {
     text-align: justify;
     text-justify:auto;
diff --git a/frontend/src/lib/css/slideshow.css b/frontend/src/lib/css/slideshow.css
index 112acfa..b81f4ea 100644
--- a/frontend/src/lib/css/slideshow.css
+++ b/frontend/src/lib/css/slideshow.css
@@ -4,22 +4,46 @@
     align-items: center;
 }
 
-.slideshow_btn {
-    z-index: 5;
-    position: absolute;
-    right: 0;
-    margin-right: 2.5rem;
-    min-width: 5rem;
-    min-height: 5rem;
-    background-color: var(--color-special);
-    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--color-background);
-    border: 0;
-    transition: all .3s ease 0s;
+@media screen and (min-width: 1000px)
+{
+    .slideshow_btn {
+        z-index: 5;
+        position: absolute;
+        right: 0;
+        margin-right: 2.5rem;
+        min-width: 5rem;
+        min-height: 5rem;
+        background-color: var(--color-special);
+        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--color-background);
+        border: 0;
+        transition: all .3s ease 0s;
+    }
+}
+
+@media screen and (max-width: 1000px)
+{
+    .slideshow_btn {
+        z-index: 5;
+        position: absolute;
+        right: 0;
+        margin-right: 1rem;
+        min-width: 3.5rem;
+        min-height: 3.5rem;
+        background-color: var(--color-special);
+        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--color-background);
+        border: 0;
+        transition: all .3s ease 0s;
+    }
 }
 
 .slideshow_btn:hover {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 88ed86b..bc52a1f 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -4,7 +4,7 @@ import { defineConfig } from 'vite';
 export default defineConfig({
 	plugins: [sveltekit()],
 	server: {
-		host: '127.0.0.1',
+		host: '0.0.0.0',
 		port: 5125,
 	},
 });
