From 7baa66594ee92c795ce080083764b48154be9f51 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sat, 10 Feb 2024 11:09:11 +0100
Subject: [PATCH] Adapt to lower end devices (really small phones)

---
 frontend/src/lib/css/cv.css        |  2 +-
 frontend/src/lib/css/flag.css      | 13 +++++++++----
 frontend/src/lib/css/section.css   | 31 ++++++++++++++++++++----------
 frontend/src/lib/css/slideshow.css |  2 +-
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index b486f86..7bbe681 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -201,7 +201,7 @@
     .footer-text p {
         font-family: 'Urbanist', sans-serif;
         font-weight: 600;
-        font-size: minmax(2dvh, 1.25rem);
+        font-size: clamp(0.5rem, 4vw, 1.25rem);
         color: var(--color-background);
         margin: 0.5rem;
     }
diff --git a/frontend/src/lib/css/flag.css b/frontend/src/lib/css/flag.css
index 94d3115..23691eb 100644
--- a/frontend/src/lib/css/flag.css
+++ b/frontend/src/lib/css/flag.css
@@ -12,6 +12,10 @@
         justify-content: center;
         align-items: center;
     }
+
+    .flag-text p {
+        margin: 0.5rem;
+    }
 }
 
 @media screen and (max-width: 1000px) {
@@ -33,6 +37,11 @@
         margin-left: 10vw !important;
         margin-right: 10vw;
     }
+
+    .flag-text p {
+        margin: 0.5rem;
+        font-size: 1.25rem;
+    }
 }
 
 .flag-img {
@@ -50,10 +59,6 @@
     font-weight: 600;
 }
 
-.flag-text p {
-    margin: 0.5rem;
-}
-
 .flag-size {
     width: 2rem;
     height: 2rem;
diff --git a/frontend/src/lib/css/section.css b/frontend/src/lib/css/section.css
index 72cd063..f8409d1 100644
--- a/frontend/src/lib/css/section.css
+++ b/frontend/src/lib/css/section.css
@@ -19,6 +19,17 @@
         color: var(--color-subtitle);
         filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
     }
+
+    .section-h1 {
+        margin-left: 2rem;
+        font-size: 2.5rem;
+    }
+    
+    .section-h2 {
+        margin-left: 1rem;
+        font-size: 1.5rem;
+        color: var(--color-subtitle);
+    }
 }
 
 @media screen and (max-width: 1000px)
@@ -43,15 +54,15 @@
         color: var(--color-subtitle);
         filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
     }
-}
 
-.section-h1 {
-    margin-left: 2rem;
-    font-size: 2.5rem;
-}
-
-.section-h2 {
-    margin-left: 1rem;
-    font-size: 1.5rem;
-    color: var(--color-subtitle);
+    .section-h1 {
+        margin-left: 0.5rem;
+        font-size: clamp(1.5rem, 8vh, 2.5rem);
+    }
+    
+    .section-h2 {
+        margin-left: 0.5rem;
+        font-size: clamp(0.8rem, 8vh, 1.2rem);
+        color: var(--color-subtitle);
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/slideshow.css b/frontend/src/lib/css/slideshow.css
index 512caee..0a836ea 100644
--- a/frontend/src/lib/css/slideshow.css
+++ b/frontend/src/lib/css/slideshow.css
@@ -82,6 +82,6 @@
 
 .slideshow_btn:active {
 
-    transform: translateY(3px);
+    transform: translateY(6px);
     box-shadow: 0px 4px 12px -1px #0174BE70;
 }
\ No newline at end of file