From 472c05e2494666adf25f3c9a87753ad0edc78809 Mon Sep 17 00:00:00 2001
From: haakoaho <hakon.hoff@outlook.com>
Date: Thu, 6 Jul 2023 11:06:58 +0200
Subject: [PATCH] =?UTF-8?q?=C3=B8ker=20responsiviteten=20til=20siden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/summersplash2022/Content.tsx              | 17 +++++-
 src/summersplash2022/index.module.css         | 37 ++++++------
 .../nyutdannet/nyutdannet.module.css          |  4 +-
 .../sections/hvaSkjerEtterSonaadsfristen.tsx  | 59 +++++++++----------
 4 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/src/summersplash2022/Content.tsx b/src/summersplash2022/Content.tsx
index bb59e7743..dcd67d703 100644
--- a/src/summersplash2022/Content.tsx
+++ b/src/summersplash2022/Content.tsx
@@ -22,9 +22,11 @@ const Content = () => {
 
   const [whichButtonSelected, setWhichButtonSelected] = useState('');
   const [isMobile, setIsMobile] = useState(false);
+  const [isPad, setIsPad] = useState(false);
 
   const handleResize = () => {
-    setIsMobile(window.matchMedia('(max-width: 900px)').matches);
+    setIsMobile(window.matchMedia('(max-width: 700px)').matches);
+    setIsPad(window.matchMedia('(min-width: 701px) and (max-width: 1200px)').matches);
   };
 
   const handleOnClick = (buttonValue: string) => {
@@ -93,6 +95,17 @@ const Content = () => {
               <h2 className={style.heading}>Hva går sommerjobben ut på?</h2>
               <div className={style.section2Flex}>
                 <div className={style.section2Text}>
+                {isPad ? (
+                    <div className={style.officeMapMobile}>
+                      <img
+                        src={norwayMap}
+                        alt="Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen!"
+                        width="100%"
+                      />
+                    </div>
+                  ) : (
+                    <></>
+                  )}
                   <p className={style.section2Paragraph}>
                     En sommerjobb i Variant er en fin mulighet til å anvende det
                     du har lært på skolen i praksis. Det forventes ikke at du er
@@ -135,7 +148,7 @@ const Content = () => {
                     hva Variant står for og tilbyr.
                   </p>
                 </div>
-                {!isMobile ? (
+                {!isMobile && !isPad ? (
                   <img
                     src={norwayMap}
                     alt="Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen"
diff --git a/src/summersplash2022/index.module.css b/src/summersplash2022/index.module.css
index 840afdd54..200595574 100644
--- a/src/summersplash2022/index.module.css
+++ b/src/summersplash2022/index.module.css
@@ -81,6 +81,8 @@
   width: 60%;
   margin-top: 5%;
   margin-bottom: 5%;
+  position: relative;
+  z-index: 2;
   /* or 135% */
 }
 
@@ -214,20 +216,20 @@
 }
 
 .section2Paragraph {
-  width: 74%;
-}
-
-.section2Text {
-  width: 60%;
+  width: 100%;
 }
 
 .section2Flex {
   display: flex;
   flex-direction: row;
+  width: 100%;
 }
 
 .officeMapMobile {
-  display: none;
+  display: block;
+  position: static;
+  margin: 0;
+  width: 100%;
 }
 
 /* Section 3 styling */
@@ -377,12 +379,6 @@
   justify-content: center;
 }
 
-.søknadstips {
-  margin-top: 20%;
-  margin-top: 120px;
-  margin-bottom: 30%;
-}
-
 .section5Div1 {
   width: 50%;
 }
@@ -721,7 +717,6 @@
     position: static;
     margin: 0;
     width: 100%;
-    /* bottom: 50px; */
   }
 
   .officeMapSVG {
@@ -848,12 +843,12 @@
 
   .timeLine {
     position: relative;
-    bottom: 400px;
+    bottom: 1000px;
     margin-top: 0%;
   }
 
   .søknadstips {
-    bottom: 400px;
+    margin-top: -900px;
   }
 
   /* Section 1 mobile*/
@@ -993,7 +988,7 @@
   .summerstudent1Paragraph,
   .summerstudent2Paragraph,
   .summerstudent3Paragraph {
-    position: static;
+    position: relative;
     width: 80%;
     height: fit-content;
     font-family: 'Graphik Web';
@@ -1001,6 +996,7 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 18px;
+    z-index: 2;
   }
 
   .summerstudent1Paragraph {
@@ -1295,8 +1291,15 @@
   }
 }
 
-@media (max-width: 900px) and (min-width: 720px) {
+@media (max-width: 1100px) and (min-width: 720px) {
   .EvenPicture {
     width: 35%;
   }
+  .timeLine {
+    position: relative;
+    bottom: 900px;
+  }
+  .søknadstips {
+    margin-top: -900px;
+  }
 }
diff --git a/src/summersplash2022/nyutdannet/nyutdannet.module.css b/src/summersplash2022/nyutdannet/nyutdannet.module.css
index bdffe3254..006abed85 100644
--- a/src/summersplash2022/nyutdannet/nyutdannet.module.css
+++ b/src/summersplash2022/nyutdannet/nyutdannet.module.css
@@ -300,12 +300,11 @@ p {
 .flexTimeline {
   display: flex;
   align-items: flex-start;
-  gap: 2rem;
+  gap: 0.5rem;
 }
 
 .section6Div {
   width: 48%;
-  height: 1200px;
   z-index: 1;
 }
 
@@ -454,7 +453,6 @@ p {
   }
 
   .section6Div {
-    height: 1000px;
     width: auto;
   }
 
diff --git a/src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx b/src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx
index 624f72022..4d0299bc7 100644
--- a/src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx
+++ b/src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx
@@ -21,7 +21,6 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
     return (
       <section className={style2.section6} id="hvaskjerettersoknadsfristen">
         <h2 className={style.heading}>Hva skjer etter søknadsfristen?</h2>
-        <div className={style2.flexTimeline}>
           <div className={style2.section6Div}>
             <p className={style.section5ParagraphLeft}>
               Vi liker ikke tradisjonelle intervjuer. De plasserer søker i en
@@ -46,37 +45,34 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
               <DarkRedBlob />
             </div>
           </div>
-          <div className={style.section5Div2}>
-            <div className={style.timeLine}>
-              <img
-                src={TimeLine}
-                alt="Søknadsfrist: 1.oktober, Kaffeprat: 4.-5.oktober, tilbud om sommerjobb: 6.oktober
+          
+          <div className={style.timeLine}>
+            <img
+              src={TimeLine}
+              alt="Søknadsfrist: 1.oktober, Kaffeprat: 4.-5.oktober, tilbud om sommerjobb: 6.oktober
               sosiale og faglige arrangementer: november-juni, første arbeidsperiode: 10.juni - 5.juli (4 uker), ferie
               8.juli - 26 juli (3 uker), andre arbeidsperiode : 29.juli - 9.august (2 uker)   "
-                style={{ zIndex: 1 }}
-              />
-            </div>
+              style={{ zIndex: 1 }}
+            />
+          </div>
 
-            <div className={style.søknadstips}>
-              <h4 className={style.section5HeadingH4}>Søknadstips:</h4>
-              <p className={style.section5Paragraph}>
-                Vi setter pris på en søknad med CV, søknadsbrev,
-                karakterutskrift og gjerne også portifolio og/eller GitHub profil. Det viktigste for oss er å få et helhetlig
-                bilde. Både av deg som person, din eksisterende kompetanse og
-                dine ambisjoner. Så hvem er du og hvorfor søker du sommerjobb i
-                Variant? Vi trenger mennesker som bryr seg om å skape en bedre
-                hverdag. Er det deg?
-              </p>
-            </div>
+          <div className={style.søknadstips}>
+            <h4 className={style.section5HeadingH4}>Søknadstips:</h4>
+            <p className={style.section5Paragraph}>
+              Vi setter pris på en søknad med CV, søknadsbrev, karakterutskrift
+              og gjerne også portifolio og/eller GitHub profil. Det viktigste
+              for oss er å få et helhetlig bilde. Både av deg som person, din
+              eksisterende kompetanse og dine ambisjoner. Så hvem er du og
+              hvorfor søker du sommerjobb i Variant? Vi trenger mennesker som
+              bryr seg om å skape en bedre hverdag. Er det deg?
+            </p>
           </div>
-        </div>
       </section>
     );
   } else {
     return (
       <section className={style2.section6} id="hvaskjerettersoknadsfristen">
         <h3 className={style.heading}>Hva skjer etter søknadsfristen?</h3>
-        <div className={style2.flexTimeline}>
           <div className={style2.section6Div}>
             <p className={style.section5ParagraphLeft}>
               Vi liker ikke tradisjonelle intervjuer. De plasserer søker i en
@@ -101,16 +97,16 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
               spill- og fagkvelder, nyttårskalas og variantdager, som er fine
               muligheter til å bli bedre kjent før man starter.
             </p>
-            <div className={style2.section6Blob}>
-              <Section6Blob />
-            </div>
           </div>
-          <div className={style.section5Div2}>
-            <div className={style.timeLine}>
-              <img src={TimeLine} alt="tidslinje" style={{ zIndex: 1, marginTop:'50px'}} />
+            <div>
+              <img
+                src={TimeLine}
+                alt="tidslinje"
+                style={{ zIndex: 1, marginTop: '50px' }}
+              />
             </div>
 
-            <div className={style.søknadstips}>
+            <div>
               <h4 className={style.section5HeadingH4}>Søknadstips:</h4>
               <p className={style.section5Paragraph}>
                 Vi setter pris på en søknad med CV, søknadsbrev og
@@ -120,8 +116,9 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
                 Variant? Vi trenger mennesker som bryr seg om å skape en bedre
                 hverdag. Er det deg?
               </p>
-            </div>
-          </div>
+        </div>
+        <div className={style2.section6Blob}>
+          <Section6Blob />
         </div>
       </section>
     );