Update css for "how first year look like"

varianter · Jul 20, 2023 · 4675b43 · 4675b43
1 parent e401fbf
commit 4675b43
Show file tree

Hide file tree

Showing 7 changed files with 266 additions and 625 deletions.
diff --git a/src/summersplash2022/img/tidslinje.tsx b/src/summersplash2022/img/tidslinje.tsx
diff --git a/src/summersplash2022/img/tidslinje2Mobil.tsx b/src/summersplash2022/img/tidslinje2Mobil.tsx
diff --git a/src/summersplash2022/img/tidslinjeNarrow.tsx b/src/summersplash2022/img/tidslinjeNarrow.tsx
diff --git a/src/summersplash2022/img/tidslinjeWide.tsx b/src/summersplash2022/img/tidslinjeWide.tsx
diff --git a/src/summersplash2022/nyutdannet/img/tidslinje.tsx b/src/summersplash2022/nyutdannet/img/tidslinje.tsx
diff --git a/src/summersplash2022/nyutdannet/nyutdannet.module.css b/src/summersplash2022/nyutdannet/nyutdannet.module.css
@@ -8,6 +8,7 @@
   padding-top: 5%;
   margin-bottom: 0%;
   scroll-snap-align: start;
+  padding: 4rem;
 }
 
 /* SnapScroll */
@@ -252,6 +253,62 @@ p {
 .section5 {
   background-color: #8b0f40;
   color: white;
+  min-height: 100vh;
+  overflow: hidden;
+}
+.section5Flex {
+  display: flex;
+  flex-direction: row;
+  gap: 4rem;
+}
+
+.section5Text,
+.graphicContainer {
+  width: calc(50% - 2rem);
+}
+
+.graphicContainer {
+  margin-top: -4rem;
+}
+
+.timelineNarrow {
+  height: 100%;
+  width: 100%;
+  max-height: 86vh;
+}
+
+.section5PictureDiv {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.section5Picture {
+  margin: auto 0;
+  display: flex;
+  z-index: 10;
+  width: 90%;
+  margin-left: -2rem;
+  max-width: 800px;
+  position: inherit;
+}
+
+.section5PictureWrap {
+  position: relative;
+  margin: auto 0;
+}
+
+.section5BlobWrapper {
+  position: absolute;
+  left: -15rem;
+  bottom: -9rem;
+  transform: rotate(-145deg);
+  width: 130%;
+}
+
+.section5Blob {
+  width: 100%;
+  height: 100%;
 }
 
 .section5 p {
@@ -260,39 +317,39 @@ p {
   font-weight: 400;
   font-size: 20px;
   line-height: 32px;
-
-  width: 50%;
   margin-top: 2%;
 }
 
-.graphicContainer {
-  position: relative;
-  bottom: 200px;
-  height: 1500px;
-  pointer-events: none;
+.timelineNarrow,
+.timelineWide {
+  width: 100%;
 }
 
-.section5Picture {
-  width: 40%;
-  z-index: 0;
-  position: relative;
-  right: 100px;
-  bottom: 450px;
+@media (max-width: 1700px) {
+  .graphicContainer {
+    margin: auto 0;
+  }
 }
 
-.section5Blob {
-  width: 70%;
-}
+@media (max-width: 1310px) {
+  .section5Flex {
+    flex-direction: column;
+  }
 
-.section5PictureDiv {
-  position: relative;
-  bottom: 1270px;
-  left: 60%;
+  .section5Text,
+  .graphicContainer {
+    width: 100%;
+  }
+
+  .section5PictureDiv {
+    display: none;
+  }
 }
 
-.timeLine2 {
-  width: 100%;
-  z-index: 3;
+@media (max-width: 800px) {
+  .timelineNarrow {
+    height: 100%;
+  }
 }
 
 /* Section 7 */
@@ -398,24 +455,6 @@ p {
   .section1BlobSVG {
     bottom: 1000px;
   }
-  /* Section 5 */
-  .section5 {
-    height: 5000px;
-  }
-
-  .section5 p {
-    font-size: 150%;
-    line-height: 150%;
-  }
-
-  .timeLine2 {
-    width: 100%;
-    height: auto;
-  }
-
-  .section5PictureDiv {
-    display: none;
-  }
 
   .section7 p {
     font-size: 150%;
@@ -432,11 +471,6 @@ p {
     bottom: 300px;
   }
 
-  /* Section 5 */
-  .section5 p {
-    width: 40%;
-  }
-
   .section7Blob {
     top: 8500px;
   }
@@ -477,10 +511,6 @@ p {
   .readMoreArrowWhite {
     width: 35%;
   }
-
-  .section5PictureDiv {
-    bottom: 1100px;
-  }
 }
 
 @media (max-width: 1080px) {
@@ -602,25 +632,6 @@ p {
     bottom: 400px;
   }
 
-  /* Section 5 */
-  .section5 p {
-    width: auto;
-  }
-
-  .section5PictureDiv {
-    bottom: 1050px;
-    left: 120px;
-  }
-
-  .section5Picture {
-    width: 80%;
-    bottom: 400px;
-  }
-
-  .section5Blob {
-    width: 300px;
-  }
-
   /* Section 7 */
   .section7 p {
     width: 100%;

diff --git a/src/summersplash2022/nyutdannet/sections/hvordanSerFørsteÅretUt.tsx b/src/summersplash2022/nyutdannet/sections/hvordanSerFørsteÅretUt.tsx
@@ -1,26 +1,29 @@
 import style from '../nyutdannet.module.css';
-import TimeLine2 from '../img/tidslinje';
 import Section5Blob from '../img/section5Blob';
-import TimeLine2Mobile from 'src/summersplash2022/img/tidslinje2Mobil';
+import TimelineNarrow from 'src/summersplash2022/img/tidslinjeNarrow';
+import TimelineWide from 'src/summersplash2022/img/tidslinjeWide';
 import { useEffect, useState } from 'react';
 const FirstYear = () => {
   const mountain = require('src/summersplash2022/nyutdannet/img/MountainImg.png');
 
-  const [isDesktop, setIsDesktop] = useState(true);
+  const [showWideTimeline, setShowWideTimeline] = useState(true);
 
-  const handleResize = () => {
-    if (window.matchMedia('(max-width: 1400px)').matches) {
-      setIsDesktop(false);
+  const checkIfNarrowOrWideTimeline = () => {
+    if (window.matchMedia('(max-width: 1310px) and (min-width: 801px)').matches) {
+      setShowWideTimeline(true);
     } else {
-      setIsDesktop(true);
+      setShowWideTimeline(false);
     }
+  }
+
+  const handleResize = () => {
+    console.log("Handle resize")
+    checkIfNarrowOrWideTimeline();
   };
 
   useEffect(() => {
     if (window) {
-      if (window.matchMedia('(max-width: 1400px)').matches) {
-        setIsDesktop(false);
-      }
+      checkIfNarrowOrWideTimeline();
       window.addEventListener('resize', handleResize);
     }
   }, []);
@@ -29,28 +32,40 @@ const FirstYear = () => {
     <>
       <section className={style.section5}>
         <h2 className={style.heading}>Hvordan ser første året ut?</h2>
-        <p>
-          For å bidra til personlig og faglig utvikling av nyutdannede
-          gjennomfører vi oppstartsprogrammet{' '}
-          <a href="https://handbook.variant.no/#Utviklingsprogram" style={{ color: 'white' }}>
-            variant:skudd
-          </a>
-          . Programmet gjennomføres i løpet av det første året den nyutdannede
-          jobber i Variant.{' '}
-        </p>
-        <div className={style.graphicContainer}>
-          {isDesktop ? <TimeLine2 /> : <TimeLine2Mobile />}
-          <div className={style.section5PictureDiv}>
-            <div className={style.section5Blob}>
-              <Section5Blob />
-            </div>
-            <img
-              className={style.section5Picture}
-              src={mountain}
-              alt="Mountaint trip in Oppdal"
-            />
+        <div className={style.section5Flex}>
+          <div className={style.section5Text}>
+            <p>
+              For å bidra til personlig og faglig utvikling av nyutdannede
+              gjennomfører vi oppstartsprogrammet{' '}
+              <a href="https://handbook.variant.no/#Utviklingsprogram" style={{ color: 'white' }}>
+                variant:skudd
+              </a>
+              . Programmet gjennomføres i løpet av det første året den nyutdannede
+              jobber i Variant.{' '}
+            </p>
+            <div className={style.section5PictureDiv}>
+              <div className={style.section5PictureWrap}>
+
+              <div className={style.section5BlobWrapper}>
+                <Section5Blob />
+              </div>
+              <img
+                className={style.section5Picture}
+                src={mountain}
+                alt="Mountaint trip in Oppdal"
+              />
+              </div>
           </div>
         </div>
+        <div className={style.graphicContainer}>
+          { showWideTimeline && (
+            <TimelineWide />
+          )}
+          {!showWideTimeline && (
+            <TimelineNarrow />
+          )}
+        </div>
+        </div>
       </section>
     </>
   );