diff --git a/src/hemsedal24/activities.module.css b/src/hemsedal24/activities.module.css index 1446afef2..f634c76a0 100644 --- a/src/hemsedal24/activities.module.css +++ b/src/hemsedal24/activities.module.css @@ -23,9 +23,11 @@ html { .tilbake { color: var(--color-standard__black); - margin-top: 3rem; - width: 100%; + margin-top: 1rem; + width: 30%; + z-index: 1; display: flex; + gap: 5%; flex-direction: row; justify-content: flex-start; text-decoration: none; @@ -80,6 +82,7 @@ html { } .blob img { position: absolute; + z-index: auto; top: -9rem; right: -20rem; } @@ -100,11 +103,27 @@ html { @media (max-width: 500px) { .blob { - min-width: 90%; + min-width: 40%; top: 0; margin: -10% 0 0 20%; } + .blob { + width: 20%; + } + + .tilbake { + margin: 0; + margin-bottom: 1rem; + align-items: center; + } + .tilbake img { + width: 20%; + vertical-align: middle; + } + element { + margin-left: 0; + } .tur { padding: 10% 10% 0 10%; } @@ -137,4 +156,7 @@ html { .bop { width: 50%; } + p { + font-size: 1.2rem; + } } diff --git a/src/hemsedal24/activities.tsx b/src/hemsedal24/activities.tsx index 066fc7576..cdae5636f 100644 --- a/src/hemsedal24/activities.tsx +++ b/src/hemsedal24/activities.tsx @@ -25,13 +25,13 @@ const Activities: NextPage = () => { }, []); return (
- {mobile ?<> : + + href="/hemsedal24"> pil venste Tilbake - } +
blob

Aktivitetene på lørdag

diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css index dc149e4c3..d72cf6fc8 100644 --- a/src/hemsedal24/hemsedal.module.css +++ b/src/hemsedal24/hemsedal.module.css @@ -133,7 +133,11 @@ html { } .overlay p { - font-size: 0.9rem; + font-size: 1.1rem; +} + +.overlay h4 { + font-size: 2rem; } .latter { @@ -279,7 +283,7 @@ details[open] .disclosureArrow { } .program h3 { - font-size: 1.875rem; + font-size: 2.875rem; font-style: normal; font-weight: 400; } diff --git a/src/hemsedal24/images/arrowtoblob.svg b/src/hemsedal24/images/arrowtoblob.svg index dd8e153ee..5695fe6c9 100644 --- a/src/hemsedal24/images/arrowtoblob.svg +++ b/src/hemsedal24/images/arrowtoblob.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/hemsedal24/images/mobilutsikttingtang.png b/src/hemsedal24/images/mobilutsikttingtang.png index cf6be9c1f..92cbe2778 100644 Binary files a/src/hemsedal24/images/mobilutsikttingtang.png and b/src/hemsedal24/images/mobilutsikttingtang.png differ diff --git a/src/hemsedal24/images/retreatmobile.svg b/src/hemsedal24/images/retreatmobile.svg new file mode 100644 index 000000000..7a3704cb9 --- /dev/null +++ b/src/hemsedal24/images/retreatmobile.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/hemsedal24/tingogtang.module.css b/src/hemsedal24/tingogtang.module.css index bcefa071a..415fb84ef 100644 --- a/src/hemsedal24/tingogtang.module.css +++ b/src/hemsedal24/tingogtang.module.css @@ -12,12 +12,17 @@ .tur h3 { font-family: 'Recoleta'; } +html { + scroll-behavior: smooth; +} .tilbake { color: var(--color-standard__black); - margin-top: 3rem; - width: 100%; + margin-top: 1rem; + width: 30%; + z-index: 1; display: flex; + gap: 5%; flex-direction: row; justify-content: flex-start; text-decoration: none; @@ -44,6 +49,15 @@ justify-content: center; align-items: center; margin-top: 5%; + text-wrap: wrap; + margin-bottom: 3rem; +} + +.blobstyle { + position: absolute; + left: -50px; + z-index: -1; + min-width: 30%; } .tingogtangbody { @@ -63,8 +77,9 @@ } .ttheadertittel { - margin-left: -10%; z-index: 10; + + position: relative; } .snokimg { @@ -99,6 +114,9 @@ h4 { .pakkeliste img { width: 100%; } +.utsiktsblob { + margin-top: -2rem; +} .squiggly { padding-top: 3rem; } @@ -110,6 +128,7 @@ h4 { height: 10rem; margin-left: -3%; margin-top: 3rem; + z-index: 1; } .aktivitetsblob img { @@ -140,12 +159,30 @@ h4 { } @media (max-width: 500px) { + .blobstyle { + left: -50px; + min-width: 40%; + } + .tilbake { + margin: 0; + margin-bottom: 1rem; + align-items: center; + } + .tilbake img { + width: 20%; + vertical-align: middle; + } p { line-height: 2rem; + font-size: 1rem; } + .ttheadertittel { min-width: 100%; - margin-left: -7.5rem; + z-index: 1; + } + .ttheadertittel h3 { + z-index: 1; } .tingogtangheader h3 { font-size: 1.675rem; @@ -155,7 +192,9 @@ h4 { text-wrap: wrap; } .tingogtangheader { + z-index: 1; margin-top: 10%; + margin-bottom: 5rem; } .tingogtangbody { @@ -164,7 +203,7 @@ h4 { } .tt_textbox { max-width: 100%; - font-size: 0.8rem; + font-size: 1rem; font-style: normal; line-height: 2rem; } @@ -191,7 +230,7 @@ h4 { } .aktivitetene { flex-direction: column; - align-items: flex-end; + align-items: flex-start; justify-content: space-around; margin: 5rem 0rem 0rem 0; } @@ -207,14 +246,11 @@ h4 { .mobilearrowblob { display: flex; min-width: 100%; - margin-left: -12%; - margin-bottom: -10%; - margin-top: -9%; + margin-top: -1rem; } .arrowtoblob { margin-top: 3rem; - margin-right: 3rem; flex-direction: row-reverse; align-items: center; } @@ -224,9 +260,10 @@ h4 { margin-left: -5rem; } .utsiktsblob { + z-index: -1; display: flex; justify-content: center; - margin: -9rem 0 -5rem 0; + margin: 5rem 0 5rem 0; min-width: 100%; } .utsiktsblob img { diff --git a/src/hemsedal24/tingogtang.tsx b/src/hemsedal24/tingogtang.tsx index bfbf1e910..9803d9857 100644 --- a/src/hemsedal24/tingogtang.tsx +++ b/src/hemsedal24/tingogtang.tsx @@ -1,87 +1,146 @@ -import { NextPage } from "next"; -import styles from './tingogtang.module.css' -import Container from "./components/Container"; -import Link from "next/link"; -import arrowLeft from "./images/arrow-left.svg" -import blob from "./images/tingogtangblob.svg" -import snok from "./images/snok.svg" -import { useState, useEffect } from "react"; -import bop from './images/bop.svg' -import kosevors from './images/kosevors.svg' -import squiggly from './images/squigglyarrow.svg' -import a_blob from './images/aktivityblob.svg' -import utsiktmobil from './images/mobilutsikttingtang.png' -import utsiktpc from './images/pcutsikt.png' -import arrowblob from './images/arrowtoblob.svg' - +import { NextPage } from 'next'; +import styles from './tingogtang.module.css'; +import Container from './components/Container'; +import Link from 'next/link'; +import arrowLeft from './images/arrow-left.svg'; +import blob from './images/tingogtangblob.svg'; +import snok from './images/snok.svg'; +import { useState, useEffect } from 'react'; +import bop from './images/bop.svg'; +import kosevors from './images/kosevors.svg'; +import squiggly from './images/squigglyarrow.svg'; +import a_blob from './images/aktivityblob.svg'; +import utsiktmobil from './images/mobilutsikttingtang.png'; +import utsiktpc from './images/pcutsikt.png'; +import arrowblob from './images/arrowtoblob.svg'; const TingogTang: NextPage = () => { - const [mobile, setMobile] = useState(false); + const [mobile, setMobile] = useState(false); - useEffect(() => { - const handleWindowSizeChange = () => { - setMobile(window.innerWidth <= 500); - }; + useEffect(() => { + const handleWindowSizeChange = () => { + setMobile(window.innerWidth <= 500); + }; - handleWindowSizeChange(); // Set initial value after component mounts - window.addEventListener('resize', handleWindowSizeChange); + handleWindowSizeChange(); // Set initial value after component mounts + window.addEventListener('resize', handleWindowSizeChange); - return () => window.removeEventListener('resize', handleWindowSizeChange); - }, []); - return ( -
- - {mobile ? <>: - pil venste - Tilbake - } -
-
blob
-

Ting og tang du kanskje lurer på

-
-
-
- Noe du lurer på om turen? Du finner litt praktisk info her!🌟 - (Ikke hos takterrasse-naboen... Marie, Thomas og Andreas har allerede sjekket) -
-
- Dersom det er noe annet du lurer så er det bare å huke tak i sin nærmeste Variant og spørre🤝 -
-
folk som snoker
-
-
-

Om hotellet

-

Hvis du ikke allerede har tatt en titt på hotellet, så kan du sjekke det ut HER.

-
-

Fýri ligger ved Hemsedal skisenter, og er (som de beskriver det selv) ”stedet for de sosiale, eventyrlystne og nysgjerrige”. Guuuuuu som vi skal kose oss!!

-
-
-
strandsenger
-

Husk å ta med:

-

Badetøy! 🩳 🩱

-

Klær, turtøy og gode sko til aktivitetene på lørdag ⛰️.
(ta en titt på værmeldingen)

-

Varianter: pc til workshoppen på fredag 💻

-
-
-
-

Aktivitetene på lørdag

-

Det er mye forskjellig som skjer på lørdagen, så vi har samlet alt på ett - sted slik at det skal være enkelt å finne ut av hvem/hva/hvor og alt imellom💥

+ return () => window.removeEventListener('resize', handleWindowSizeChange); + }, []); + return ( +
+ + + pil venste + Tilbake + +
+
+
+ blob +
+

Ting og tang du kanskje lurer på

+
+
+
+
+ + Noe du lurer på om turen? Du finner litt praktisk info her!🌟 + + + (Ikke hos takterrasse-naboen... Marie, Thomas og Andreas har + allerede sjekket) + +
+
+ + Dersom det er noe annet du lurer så er det bare å huke tak i sin + nærmeste Variant og spørre🤝 + +
+
+ folk som snoker +
+
+
+

Om hotellet

+

+ Hvis du ikke allerede har tatt en titt på hotellet, så kan du sjekke + det ut HER. +

+
+

+ Fýri ligger ved Hemsedal skisenter, og er (som de beskriver det + selv) ”stedet for de sosiale, eventyrlystne og nysgjerrige”. Guuuuuu + som vi skal kose oss!! +

+
+
+
+ strandsenger +
+
+

Husk å ta med:

+

Badetøy! 🩳 🩱

+

+ Klær, turtøy og gode sko til aktivitetene på lørdag ⛰️. +
( + + ta en titt på værmeldingen + + ) +

+

Varianter: pc til workshoppen på fredag 💻

+
+
+
+
+

Aktivitetene på lørdag

+

+ Det er mye forskjellig som skjer på lørdagen, så vi har samlet alt + på ett sted slik at det skal være enkelt å finne ut av + hvem/hva/hvor og alt imellom💥{' '} +

+
+ + {mobile ? ( + +
+ blob +
+ + ) : ( +
+
+ arrow +
+ +
+ blob
- - {mobile ? -
blob
 - :
-
arrow
-
blob
}
- {mobile ?
utsiktsblob
:
utsiktsblob
} -
big blobs
 - + +
+ )}
- ); + {mobile ? ( +
+ utsiktsblob +
+ ) : ( +
+ utsiktsblob +
+ )} + +
+ big blobs +
+ + +
+ ); }; -export default TingogTang; \ No newline at end of file +export default TingogTang;