Frontend: Fixing overflow with scrolling, pictures are now well formatted, moving the more button.

frontend/src/lib/components/education.svelte

@@ -23,7 +23,9 @@
         </div>
         <div class="slide-text-container">
             <h1 class="slide-title">{title}</h1>
-            <img class="slide-img-mobile" src={picture} alt="Education" />
+            <div class="slide-img-mobile-container">
+                <img class="slide-img-mobile" src={picture} alt="Education" />
+            </div>
             {#if location}
                 <div class="slide-subtitle-container">
                     <SvgIcon size="35" path={mdiMapMarker} type="mdi" />

frontend/src/lib/components/experience.svelte

@@ -28,7 +28,9 @@
         </div>
         <div class="slide-text-container">
             <h1 class="slide-title">{position}</h1>
-            <img class="slide-img-mobile" src={picture} alt="Experience" />
+            <div class="slide-img-mobile-container">
+                <img class="slide-img-mobile" src={picture} alt="Experience" />
+            </div>
             <div class="slide-subtitle-container">
                 <SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
                 <p class="slide-subtitle slide-aftericon">

frontend/src/lib/components/projects.svelte

@@ -25,7 +25,9 @@
         </div>
         <div class="slide-text-container">
             <h1 class="slide-title">{title}</h1>
-            <img class="slide-img-mobile" src={picture} alt="Projects" />
+            <div class="slide-img-mobile-container">
+                <img class="slide-img-mobile" src={picture} alt="Projects" />
+            </div>
             <div class="slide-subtitle-container">
                 <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
                 <p class="slide-subtitle slide-aftericon">

frontend/src/lib/css/base.css

@@ -1,7 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap');
 
+body,
 html {
-  overflow-x: hidden;
+    height: 100%;
+    background: var(--color-background);
+    margin: 0;
+    padding: 0;
 }
 
 :root {

frontend/src/lib/css/cv.css

@@ -1,11 +1,3 @@
-body,
-html {
-    height: 100%;
-    background: var(--color-background);
-    margin: 0;
-    padding: 0;
-}
-
 .container-cv {
     display: flex;
     flex-direction: row;
@@ -98,6 +90,7 @@ html {
 .main {
     width: 100%;
     overflow-x: hidden;
+    overflow-y: hidden;
     z-index: 0;
 }
 

frontend/src/lib/css/slide.css

@@ -24,9 +24,10 @@
         max-width: 25rem;
     }
 
-    .slide-img-mobile {
+    .slide-img-mobile-container {
-        height: 0;
+        visibility: hidden;
         width: 0;
+        height: 0;
     }
 
     .slide-img-container{
@@ -66,6 +67,12 @@
         margin-right: 2.25rem !important;
         box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
     }
+
+    /* For button at the end of the container*/
+    .slide-button-container {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
 
 @media screen and (max-width: 1000px)
@@ -81,17 +88,21 @@
         border-radius: 0.4rem;
         box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
         background-color: var(--color-background);
-        height: 36rem;
+        height: 70dvh;
         width: 90dvw;
         margin-left: 5dvw;
         z-index: 1;
         transition: all .3s ease 0s;
     }
 
+    .slide-img-mobile-container {
+        display: flex;
+        justify-content: center;
+    }
+
     .slide-img-mobile {
-        max-height: 15rem;
-        min-width: 76dvw;
         max-width: 76dvw;
+        max-height: 30dvh;
         margin-top: 1.5rem;
         margin-bottom: 1.5rem;
     }
@@ -123,13 +134,21 @@
 
     .slide-text-container {
         margin: 1.5rem;
-        width: 75dvw;
+        position: relative;
+        width: 100%;
     }
 
     .slide-unactive {
         scale: 0.9;
         box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
     }
+
+    /* For button at the end of the container*/
+    .slide-button-container {
+        bottom: 0;
+        right: 0;
+        position: absolute;
+    }
 }
 
 .slide-subtitle-container {
@@ -179,12 +198,6 @@
     -webkit-line-clamp: 5;
 }
 
-/* For button at the end of the container*/
-.slide-button-container {
-    display: flex;
-    justify-content: flex-end;
-}
-
 /* Every button are centered to the right side of the component */
 .slide-button {
     padding-right: 1rem;

frontend/src/lib/css/slideshow.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    position: relative;
 }
 
 @media screen and (min-width: 1000px)