diff --git a/src/summersplash2022/nyutdannet/nyutdannet.module.css b/src/summersplash2022/nyutdannet/nyutdannet.module.css index 40ac59f3b..2f4d6d695 100644 --- a/src/summersplash2022/nyutdannet/nyutdannet.module.css +++ b/src/summersplash2022/nyutdannet/nyutdannet.module.css @@ -182,21 +182,32 @@ p { .section4 { padding-top: 10%; - height: 1200px; + min-height: 100vh; } -.section4 p { +.section4Text, +.section44Calculator { + width: calc(50% - 2rem); +} + +.section4Calculator { position: relative; - z-index: 2; + max-width: 28rem; } -.wrapper { +.calculatorWrapper { width: 80%; - margin-bottom: 10%; - margin-right: 2%; + max-width: 23rem; + margin: 0 4rem; position: relative; z-index: 1; } + +.pinkBlobWrapper svg { + width: 100%; + height: 100%; +} + .wrapper [class*='calculator-controls'] [class*='form-row'] @@ -205,22 +216,36 @@ p { border: none; } +.pinkBlobWrapper { + position: absolute; + top: -2rem; + left: 1rem; + width: 90%; +} + .pinkBlobSalarySVG { - position: relative; z-index: 0; - bottom: 500px; - right: 100px; } .section4Flex { display: flex; flex-direction: row; - justify-content: center; - gap: 10%; + gap: 4rem; } -.section4Text { - width: 48%; +@media (max-width: 1110px) { + .section4Flex { + flex-direction: column; + gap: 4rem; + } + .section4Text, + .section4Calculator { + width: 100%; + } + + .section4Calculator { + margin: auto; + } } /* Section 5*/ @@ -373,21 +398,6 @@ p { .section1BlobSVG { bottom: 1000px; } - - /* Section 4 */ - .section4 { - height: auto; - } - - .section4 p { - font-size: 150%; - line-height: 150%; - } - - .section4Flex { - justify-content: left; - } - /* Section 5 */ .section5 { height: 5000px; @@ -451,16 +461,6 @@ p { @media (max-width: 1134px) { /* Breakpoint for Lønnskalkulator*/ - .section4Flex { - display: block; - } - .section4Text { - width: auto; - } - - .wrapper { - width: 100%; - } .section1Blob { display: none; diff --git a/src/summersplash2022/nyutdannet/sections/lonn.tsx b/src/summersplash2022/nyutdannet/sections/lonn.tsx index a207a1adc..172a4ae69 100644 --- a/src/summersplash2022/nyutdannet/sections/lonn.tsx +++ b/src/summersplash2022/nyutdannet/sections/lonn.tsx @@ -30,11 +30,11 @@ const Payment = () => { om du vil vite mer om lønn og andre goder i Variant.

-
-
+
+
-
+
diff --git a/src/summersplash2022/nyutdannet/utils/calculator.tsx b/src/summersplash2022/nyutdannet/utils/calculator.tsx index 985329335..7e2d03f2e 100644 --- a/src/summersplash2022/nyutdannet/utils/calculator.tsx +++ b/src/summersplash2022/nyutdannet/utils/calculator.tsx @@ -39,7 +39,7 @@ const Calculator = () => { backgroundColor: '#FFDCD7', padding: '5%', borderRadius: '10px', - width: isMobile ? '100%' : '80%', + width: 'min-content', marginTop: isMobile ? '10%' : 0, }} className={style['calculator-controls__summary']}