From 4675b433316ce0e54f7ff7b2a0456d9fcda58171 Mon Sep 17 00:00:00 2001 From: Dora Oline Eriksrud Date: Thu, 20 Jul 2023 16:43:27 +0200 Subject: [PATCH] Update css for "how first year look like" --- src/summersplash2022/img/tidslinje.tsx | 153 -------------- src/summersplash2022/img/tidslinje2Mobil.tsx | 189 ------------------ src/summersplash2022/img/tidslinjeNarrow.tsx | 72 +++++++ src/summersplash2022/img/tidslinjeWide.tsx | 69 +++++++ .../nyutdannet/img/tidslinje.tsx | 184 ----------------- .../nyutdannet/nyutdannet.module.css | 149 +++++++------- .../hvordanSerF\303\270rste\303\205retUt.tsx" | 75 ++++--- 7 files changed, 266 insertions(+), 625 deletions(-) delete mode 100644 src/summersplash2022/img/tidslinje.tsx delete mode 100644 src/summersplash2022/img/tidslinje2Mobil.tsx create mode 100644 src/summersplash2022/img/tidslinjeNarrow.tsx create mode 100644 src/summersplash2022/img/tidslinjeWide.tsx delete mode 100644 src/summersplash2022/nyutdannet/img/tidslinje.tsx diff --git a/src/summersplash2022/img/tidslinje.tsx b/src/summersplash2022/img/tidslinje.tsx deleted file mode 100644 index 950e58506..000000000 --- a/src/summersplash2022/img/tidslinje.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const TimeLine = () => { - return ( - - - Søknadsfrist 2. Oktber, Kaffeprat, Tilbud om jobb, Sosiale og faglige - arrangementer, oppstart 1. august - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TimeLine; diff --git a/src/summersplash2022/img/tidslinje2Mobil.tsx b/src/summersplash2022/img/tidslinje2Mobil.tsx deleted file mode 100644 index 93660db25..000000000 --- a/src/summersplash2022/img/tidslinje2Mobil.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; - -const TimeLine2Mobile = () => { - return ( - - - {' '} - August - Startskudd Alle nyutdannede samles til en oppstartsuke med - faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne - jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste - designverktøyene, som Figma og Illustrator. November - Tverrfaglig - samarbeid Samling med fokus på hvordan designere og utviklere best kan - samarbeide. Februar - Consulting for varianter Samling med fokus på - konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi - De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. - Dyktig(ere) konsulent - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TimeLine2Mobile; diff --git a/src/summersplash2022/img/tidslinjeNarrow.tsx b/src/summersplash2022/img/tidslinjeNarrow.tsx new file mode 100644 index 000000000..0cf1ade64 --- /dev/null +++ b/src/summersplash2022/img/tidslinjeNarrow.tsx @@ -0,0 +1,72 @@ +import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; + +const TimelineNarrow = () => { + return ( + + + August - Startskudd Alle nyutdannede samles til en oppstartsuke med + faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne + jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste + designverktøyene, som Figma og Illustrator. November - Tverrfaglig + samarbeid Samling med fokus på hvordan designere og utviklere best kan + samarbeide. Februar - Consulting for varianter Samling med fokus på + konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi + De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. + Dyktig(ere) konsulent + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default TimelineNarrow; diff --git a/src/summersplash2022/img/tidslinjeWide.tsx b/src/summersplash2022/img/tidslinjeWide.tsx new file mode 100644 index 000000000..088ed230d --- /dev/null +++ b/src/summersplash2022/img/tidslinjeWide.tsx @@ -0,0 +1,69 @@ +import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; + +const TimelineWide = () => { + return ( + + + August - Startskudd Alle nyutdannede samles til en oppstartsuke med + faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne + jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste + designverktøyene, som Figma og Illustrator. November - Tverrfaglig + samarbeid Samling med fokus på hvordan designere og utviklere best kan + samarbeide. Februar - Consulting for varianter Samling med fokus på + konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi + De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. + Dyktig(ere) konsulent + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default TimelineWide; diff --git a/src/summersplash2022/nyutdannet/img/tidslinje.tsx b/src/summersplash2022/nyutdannet/img/tidslinje.tsx deleted file mode 100644 index c65c2517f..000000000 --- a/src/summersplash2022/nyutdannet/img/tidslinje.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const TimeLine2 = () => { - return ( - - - {' '} - August - Startskudd Alle nyutdannede samles til en oppstartsuke med - faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne - jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste - designverktøyene, som Figma og Illustrator. November - Tverrfaglig - samarbeid Samling med fokus på hvordan designere og utviklere best kan - samarbeide. Februar - Consulting for varianter Samling med fokus på - konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi - De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. - Dyktig(ere) konsulent - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TimeLine2; diff --git a/src/summersplash2022/nyutdannet/nyutdannet.module.css b/src/summersplash2022/nyutdannet/nyutdannet.module.css index 2f4d6d695..e02493106 100644 --- 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\303\270rste\303\205retUt.tsx" "b/src/summersplash2022/nyutdannet/sections/hvordanSerF\303\270rste\303\205retUt.tsx" index 9a2ce8f42..7a50087a7 100644 --- "a/src/summersplash2022/nyutdannet/sections/hvordanSerF\303\270rste\303\205retUt.tsx" +++ "b/src/summersplash2022/nyutdannet/sections/hvordanSerF\303\270rste\303\205retUt.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 = () => { <>

Hvordan ser første året ut?

-

- For å bidra til personlig og faglig utvikling av nyutdannede - gjennomfører vi oppstartsprogrammet{' '} - - variant:skudd - - . Programmet gjennomføres i løpet av det første året den nyutdannede - jobber i Variant.{' '} -

-
- {isDesktop ? : } -
-
- -
- Mountaint trip in Oppdal +
+
+

+ For å bidra til personlig og faglig utvikling av nyutdannede + gjennomfører vi oppstartsprogrammet{' '} + + variant:skudd + + . Programmet gjennomføres i løpet av det første året den nyutdannede + jobber i Variant.{' '} +

+
+
+ +
+ +
+ Mountaint trip in Oppdal +
+
+ { showWideTimeline && ( + + )} + {!showWideTimeline && ( + + )} +
+
);