Frontend: Adjustements inthe flag section, each slide has now a fixed height. Some tweaks in subsections and footer.

frontend/src/lib/css/cv.css

@@ -50,6 +50,28 @@
         color: var(--color-background);
         margin: 0.5rem;
     }
+
+    .subsection {
+        margin-left: 3rem;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .end {
+        padding-bottom: 5rem;
+    }
+
+    .footer {
+        position: relative;
+        display: flex;
+        height: 15rem;
+        background-color: var(--color-text);
+        z-index: 3;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
 }
 
 @media screen and (max-width: 1000px) {
@@ -72,6 +94,28 @@
         color: var(--color-background);
         margin: 0.5rem;
     }
+
+    .subsection {
+        margin-left: 5vw;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .end {
+        padding-bottom: 3rem;
+    }
+
+    .footer {
+        position: relative;
+        display: flex;
+        height: 20rem;
+        background-color: var(--color-text);
+        z-index: 3;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
 }
 
 .profile-picture-container {
@@ -108,28 +152,6 @@ h2 {
     font-size: 1.5rem;
 }
 
-.subsection {
-    margin-left: 3rem;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.end {
-    padding-bottom: 5rem;
-}
-
-.footer {
-    position: relative;
-    display: flex;
-    height: 30vh;
-    background-color: var(--color-text);
-    z-index: 3;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
 .footer svg {
     margin: 0;
 }

frontend/src/lib/css/flag.css

@@ -1,15 +1,38 @@
-.flag-main {
+@media screen and (min-width: 1000px) {
-    display: flex;
+    .flag-main {
-    border-radius: 0.4rem;
+        display: flex;
-    box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+        border-radius: 0.4rem;
-    background-color: var(--color-background);
+        box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
-    margin-left: 2.5rem;
+        background-color: var(--color-background);
-    margin-right: 2.5rem;
+        margin-left: 2.5rem;
-    padding: 1rem;
+        margin-right: 2.5rem;
-    z-index: 1;
+        padding: 1rem;
-    transition: all .3s ease 0s;
+        z-index: 1;
-    justify-content: center;
+        transition: all .3s ease 0s;
-    align-items: center;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .flag-main {
+        display: flex;
+        border-radius: 0.4rem;
+        box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+        background-color: var(--color-background);
+        margin-bottom: 1rem;
+        margin-top: 1rem;
+        padding: 1rem;
+        transition: all .3s ease 0s;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .flag-container {
+        margin-left: 10vw !important;
+        margin-right: 10vw;
+    }
 }
 
 .flag-img {

frontend/src/lib/css/slide.css

@@ -93,7 +93,7 @@
         border-radius: 0.4rem;
         box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
         background-color: var(--color-background);
-        height: 60dvh;
+        min-height: 35rem;
         width: 90dvw;
         margin-left: 5dvw;
         z-index: 1;
@@ -103,7 +103,7 @@
     .slide-img-mobile-container {
         display: flex;
         justify-content: center;
-        height: 30dvh;
+        height: 17.25rem;
     }
 
     .slide-img-mobile {
@@ -124,7 +124,7 @@
         color: var(--color-text);
         font-family: 'Gabarito', sans-serif;
         font-weight: 600;
-        font-size: 3vmax;
+        font-size: 1.8rem;
         margin-bottom: 0;
     }
 
@@ -133,7 +133,7 @@
         color: var(--color-text);
         font-family: 'Gabarito', sans-serif;
         font-weight: 500;
-        font-size: 1.75vmax;
+        font-size: 1.1rem;
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
         width: 100%;
@@ -158,7 +158,7 @@
     }
 
     .slide-text {
-        font-size: 1.5vmax;
+        font-size: 1rem;
     }
 }
 

frontend/src/routes/+page.svelte

@@ -143,7 +143,7 @@
 				{/each}
 			</div>
 			<SubSection icon={mdiEarth} title="Languages"/>
-			<div class="subsection end">
+			<div class="subsection flag-container end">
 				{#each cv.skills.languages as langdata}
 					<FlagComponent lang={langdata.lang} level={langdata.level} icon={langdata.icon_alpha}/>
 				{/each}