From 5f67e69fa5f8f3442d54bffb589084711afe0e6b Mon Sep 17 00:00:00 2001
From: Felix Hallenberg <feqwin@gmail.com>
Date: Sun, 24 Nov 2024 09:48:51 +0200
Subject: [PATCH] Improve responsiveness

---
 src/landing/index.html | 30 ++++++++++++---------
 src/landing/styles.css | 61 ++++++++++++++++++++++++++----------------
 2 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/src/landing/index.html b/src/landing/index.html
index 4a4c2664..80306acb 100644
--- a/src/landing/index.html
+++ b/src/landing/index.html
@@ -36,12 +36,18 @@
                   <img src="../static/img/ylitse-middle-illustration.svg" class="middle-illustration" />
                </div>
                <div class="middle-right-content">
-                  <h2 localization-key="middleInfo1Heading"></h2>
-                  <p class="card-p white" localization-key="middleInfo1Text"></p>
-                  <h2 localization-key="middleInfo2Heading"></h2>
-                  <p class="card-p white" localization-key="middleInfo2Text"></p>
-                  <h2 localization-key="middleInfo3Heading"></h2>
-                  <p class="card-p white" localization-key="middleInfo3Text"></p>
+                 <div>
+                    <h2 localization-key="middleInfo1Heading"></h2>
+                    <p class="card-p white" localization-key="middleInfo1Text"></p>
+                 </div>
+                 <div>
+                    <h2 localization-key="middleInfo2Heading"></h2>
+                    <p class="card-p white" localization-key="middleInfo2Text"></p>
+                 </div>
+                 <div>
+                    <h2 localization-key="middleInfo3Heading"></h2>
+                    <p class="card-p white" localization-key="middleInfo3Text"></p>
+                 </div>
                </div>
             </div>
             <div class="middle-bottom-footer">
@@ -68,11 +74,11 @@ <h2 class="card-h2">Aalto</h2>
                     </div>
                     <div class="mentor-card-content">
                        <div class="mentor-card-story-container">
-                          <h2 class="black" localization-key="mentorCardMyStory"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
                           <p class="card-p">Olen nuorisokodista itsenäistynyt teini-ikäisen pojan vanhempi. Voin olla sinulle tukena opintoihin, itsenäistymiseen, jälkihuoltoon ja vanhemmuuteen liittyvissä asioissa.</p>
                        </div>
                        <div class="mentor-card-languages-container">
-                          <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Suomi</p>
@@ -83,7 +89,7 @@ <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
                           </div>
                        </div>
                        <div class="mentor-card-skill-container">
-                          <h2 class="black" localization-key="mentorCardSkills"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Lastensuojelu</p>
@@ -123,11 +129,11 @@ <h2 class="card-h2">Havu</h2>
                     </div>
                     <div class="mentor-card-content">
                        <div class="mentor-card-story-container">
-                          <h2 class="black" localization-key="mentorCardMyStory"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardMyStory"></h2>
                           <p class="card-p">Olen helsinkiläinen Havu. Voin olla sinulle tukena esimerkiksi mielenterveyteen liittyvissä pulmissa. Tuen sinua parhaani mukaan kuitenkin missä tahansa aiheessa.</p>
                        </div>
                        <div class="mentor-card-languages-container">
-                          <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSpokenLanguages"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Suomi</p>
@@ -138,7 +144,7 @@ <h2 class="black" localization-key="mentorCardSpokenLanguages"></h2>
                           </div>
                        </div>
                        <div class="mentor-card-skill-container">
-                          <h2 class="black" localization-key="mentorCardSkills"></h2>
+                          <h2 class="card-h2 black" localization-key="mentorCardSkills"></h2>
                           <div class="pill-container">
                              <div class="pill">
                                 <p class="card-p">Mielenterveys</p>
diff --git a/src/landing/styles.css b/src/landing/styles.css
index 8509dce8..8de92393 100644
--- a/src/landing/styles.css
+++ b/src/landing/styles.css
@@ -66,10 +66,6 @@ p {
   color: #1c325d;
 }
 
-.card-h2 {
-  margin-top: 0;
-}
-
 .white {
   color: #ffffff;
 }
@@ -105,27 +101,22 @@ button {
 }
 
 .button:hover,
-button:hover {
-  background-color: #37119d;
+a:hover {
+  background-color: #5c33ff;
   outline: 0;
 }
 
 .button:focus,
-button:focus,
+a:focus,
 .button:active,
-button:active,
+a:active,
 .button:target,
-button:target {
+a:target {
   background-color: #4a2acb;
   outline: #4a2acb solid 3px;
   outline-offset: 4px;
 }
 
-.button:visited,
-button:visited {
-  background-color: #5c33ff;
-}
-
 .middle-container {
   margin: 5rem;
   display: flex;
@@ -135,7 +126,6 @@ button:visited {
 .middle-card {
   background-color: #4A2ACB;
   display: flex;
-  height: 40rem;
   width: 100%;
   border-radius: 1rem 1rem 0 0;
 }
@@ -144,8 +134,8 @@ button:visited {
   flex: 1;
   position: relative;
   display: flex;
-  justify-content: space-evenly;
-  padding-top: 2rem;
+  justify-content: space-between;
+  padding: 1rem 1rem 0 1rem;
 }
 
 .info-ring {
@@ -168,7 +158,10 @@ button:visited {
 
 .middle-right-content {
   flex: 1;
-  padding: 0 2rem 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 4rem 2rem 4rem 0;
   overflow: auto;
 }
 
@@ -276,7 +269,6 @@ h2 {
   font-size: 26px;
   line-height: 42px;
   margin: 0;
-  margin-top: 30px;
   color: #ffffff;
 }
 
@@ -319,12 +311,17 @@ footer {
   height: 2.5rem;
 }
 
+@media only screen and (min-width: 2300px){
+  .middle-left-content {
+      justify-content: space-evenly;
+      padding-top: 2rem;
+  }
+}
+
 @media only screen and (max-width: 1200px){
   .middle-container {
       margin: 2rem;
   }
-
-
 }
 
 @media only screen and (max-width: 1000px){
@@ -332,6 +329,20 @@ footer {
       margin: 1rem;
   }
 
+  .middle-left-content {
+    flex: 1;
+    justify-content: space-evenly;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .middle-illustration {
+    display: none;
+  }
+
+  .bottom-container {
+    padding: 2rem 0;
+  }
 }
 
 
@@ -343,7 +354,6 @@ footer {
   }
 
   h2 {
-    margin-top: 16px;
     font-size: 24px;
     line-height: 28px;
   }
@@ -366,10 +376,11 @@ footer {
 
   .middle-card {
     flex-direction: column-reverse;
+    height: auto;
   }
   
   .middle-right-content {
-    padding: 8px;
+    padding: 1rem;
   }
 
   .middle-left-content {
@@ -416,4 +427,8 @@ footer {
   .ylitse-logo {
     height: 8rem;
   }
+
+  .middle-bottom-footer {
+    padding: 1rem;
+  }
 }