From 876945aec9018f906e6beefd9558f599c044f624 Mon Sep 17 00:00:00 2001 From: Maria Bonde Date: Mon, 19 Aug 2024 17:38:38 +0200 Subject: [PATCH] mesteparten ferdig --- src/hemsedal24/activities.module.css | 118 ++++++++ src/hemsedal24/activities.tsx | 57 ++-- .../components/ActivityBlock.module.css | 31 +- src/hemsedal24/components/Day.module.css | 65 ++++- src/hemsedal24/components/Hero.module.css | 33 ++- src/hemsedal24/components/Hero.tsx | 6 +- src/hemsedal24/hemsedal.module.css | 221 +++++++++++++-- src/hemsedal24/images/Mask group.svg | 2 +- src/hemsedal24/images/bigblobmobile.svg | 6 + src/hemsedal24/images/bop.svg | 2 +- src/hemsedal24/images/bottom-blub-mobil.svg | 14 + src/hemsedal24/images/bottom_blub.svg | 14 + src/hemsedal24/images/hemsedalhero1text.svg | 2 +- src/hemsedal24/images/hemsedalhero2.svg | 2 +- src/hemsedal24/images/hund.svg | 2 +- src/hemsedal24/images/latter.svg | 14 + .../images/mobilepagebottomblob.svg | 14 + src/hemsedal24/images/pagebottomblob.svg | 14 + src/hemsedal24/images/resortbottom.svg | 14 + src/hemsedal24/images/retreatmobile.svg | 32 ++- src/hemsedal24/images/sykling.svg | 2 +- src/hemsedal24/images/tingogtangblob.svg | 2 +- src/hemsedal24/images/top-blub-mobil.svg | 14 + src/hemsedal24/images/top_blub.svg | 14 + src/hemsedal24/images/viaferrata.svg | 2 +- src/hemsedal24/index.tsx | 226 +++++++++------ src/hemsedal24/layout.module.css | 265 ++++++++++++++++++ src/hemsedal24/layout.tsx | 56 ++++ src/hemsedal24/tingogtang.tsx | 24 +- 29 files changed, 1094 insertions(+), 174 deletions(-) create mode 100644 src/hemsedal24/activities.module.css create mode 100644 src/hemsedal24/images/bigblobmobile.svg create mode 100644 src/hemsedal24/images/bottom-blub-mobil.svg create mode 100644 src/hemsedal24/images/bottom_blub.svg create mode 100644 src/hemsedal24/images/latter.svg create mode 100644 src/hemsedal24/images/mobilepagebottomblob.svg create mode 100644 src/hemsedal24/images/pagebottomblob.svg create mode 100644 src/hemsedal24/images/resortbottom.svg create mode 100644 src/hemsedal24/images/top-blub-mobil.svg create mode 100644 src/hemsedal24/images/top_blub.svg create mode 100644 src/hemsedal24/layout.module.css create mode 100644 src/hemsedal24/layout.tsx diff --git a/src/hemsedal24/activities.module.css b/src/hemsedal24/activities.module.css new file mode 100644 index 000000000..565606873 --- /dev/null +++ b/src/hemsedal24/activities.module.css @@ -0,0 +1,118 @@ +.header { + margin: 10% 0 10% 0; + display: flex; + flex-direction: column; + justify-content: center; + z-index: 1; +} + +.header h3 { + display: flex; + justify-content: center; + margin-bottom: 5%; +} + +.header span { + display: flex; + justify-content: center; + margin-right: 5%; +} + +.navigation span { + color: var(--color-standard__black); + padding: 0 6px 0 0; + font-weight: 400; + font-family: 'Graphik Web'; +} + +.navigation img { + vertical-align: middle; +} + +.tur { + display: flex; + flex-direction: column; + justify-content: center; + background: #ede8d7; + color: var(--color-standard__black); + margin: 0; + padding: 5% 20% 0 20%; + font-family: 'Graphik Web'; + min-height: 100vh; + overflow: hidden; +} + +.tur h1, +.tur h2, +.tur h3 { + font-family: 'Recoleta'; +} + +.tur h2 { + font-weight: 400; + font-size: 1.5rem; + line-height: 2rem; +} + +.blob { + z-index: auto; + min-width: 35%; + position: absolute; + top: 0; + margin: 0 0 0 30%; +} + +.title { + z-index: 10; +} + +.bop { + flex-shrink: 0; + display: flex; + justify-content: center; + width: 20%; + z-index: 10; + margin: 0 auto; + margin-top: 10%; +} + +@media (max-width: 500px) { + .blob { + min-width: 90%; + top: 0; + margin: -10% 0 0 20%; + } + + .tur { + padding: 10% 10% 0 10%; + } + + .header h3 { + justify-content: flex-start; + } + .header span { + margin: 0; + color: var(--Secondary-4-D4, #2f2e2b); + font-family: Graphik; + font-size: 0.9rem; + font-style: normal; + font-weight: 400; + line-height: 2rem; /* 200% */ + } + + .title h3 { + color: var(--Secondary-4-D4, #2f2e2b); + font-family: Recoleta; + font-size: 1.775rem; + font-style: normal; + font-weight: 400; + line-height: 2.4375rem; /* 130% */ + } + .header { + margin-bottom: 25%; + } + + .bop { + width: 50%; + } +} diff --git a/src/hemsedal24/activities.tsx b/src/hemsedal24/activities.tsx index c21a285c3..0828ff863 100644 --- a/src/hemsedal24/activities.tsx +++ b/src/hemsedal24/activities.tsx @@ -2,34 +2,45 @@ import { NextPage } from "next"; import Link from "next/link"; import arrowleft from "./images/arrow-left.svg" -import styles from "./hemsedal.module.css" +import styles from "./activities.module.css" import Container from "./components/Container"; import blob from "./images/activityblob.svg" +import bop from "./images/bop.svg" import ActivityBlock from "./components/ActivityBlock"; import hund from "./images/hund.svg" import sykling from "./images/sykling.svg" import via from "./images/viaferrata.svg" +import { useEffect, useState} from "react"; const Activities: NextPage = () => { + const [mobile, setMobile] = useState(false); + + useEffect(() => { + const handleWindowSizeChange = () => { + setMobile(window.innerWidth <= 500); + }; + + handleWindowSizeChange(); // Set initial value after component mounts + window.addEventListener('resize', handleWindowSizeChange); + + return () => window.removeEventListener('resize', handleWindowSizeChange); + }, []); return ( -
- - + {mobile ?<> : + style={{display:'flex', gap: '1rem', lineHeight: '28px', marginLeft:"-20%"}}> pil venste Tilbake - -
-

Aktivitetene på lørdag

-
blob
-
-
- - Lørdag! Aktiviteter! Sykle på fjellet, ri på hester eller kose med hunder, det er mye - forskjellig som skjer på lørdag. Her har vi derfor samlet litt informasjon om de forskjellige - aktivitetene her slik at man er forberedt på hva lørdagsaktivitetene vil bringe ⛰️🌞 -
+ } +
blob
+
+

Aktivitetene på lørdag

+ + Lørdag! Aktiviteter! Sykle på fjellet, klatre i fjellveggen eller kose med hunder, + det er mye forskjellig som skjer på lørdag. Her har vi derfor samlet litt informasjon om + de forskjellige aktivitetene her slik at man er forberedt på hva lørdagsaktivitetene vil bringe ⛰️🌞 +
- - + +
big blobs
); }; diff --git a/src/hemsedal24/components/ActivityBlock.module.css b/src/hemsedal24/components/ActivityBlock.module.css index 39d16cc1c..7644f83d4 100644 --- a/src/hemsedal24/components/ActivityBlock.module.css +++ b/src/hemsedal24/components/ActivityBlock.module.css @@ -1,6 +1,6 @@ .block { display: flex; - max-width: 74%; + max-width: 100%; align-items: center; margin: auto; justify-content: space-between; @@ -10,7 +10,7 @@ .textportion { flex-direction: column; display: flex; - width: 58%; + width: 57%; } .textportion h2 { font-weight: 500; @@ -18,8 +18,8 @@ } .picture { display: flex; - margin-left: -10%; - margin-right: -10%; + min-width: 40%; + margin-right: -5%; } p { @@ -35,3 +35,26 @@ p { cursor: pointer; color: #e61a6b; } + +@media (max-width: 500px) { + .block { + flex-direction: column; + } + .textportion { + width: 100%; + } + + p { + margin: 0; + color: var(--Secondary-4-D4, #2f2e2b); + font-family: Graphik; + font-size: 0.9rem; + font-style: normal; + font-weight: 400; + line-height: 2rem; /* 200% */ + } + .picture { + min-width: 100%; + margin: -2% 0 10% 0; + } +} diff --git a/src/hemsedal24/components/Day.module.css b/src/hemsedal24/components/Day.module.css index c3835604c..fc714d40b 100644 --- a/src/hemsedal24/components/Day.module.css +++ b/src/hemsedal24/components/Day.module.css @@ -16,6 +16,12 @@ align-items: center; } +.day time { + display: inline-block; + width: 4rem; + margin-right: 1rem; +} + .day ul { list-style: none; font-size: 110%; @@ -24,9 +30,19 @@ } .day ul > li { - line-height: 46px; - margin-bottom: 1rem; - margin-top: 0; + display: flex; /* Use flexbox to align time and text */ + align-items: flex-start; /* Align items at the top */ + margin-bottom: 2rem; +} + +.day ul > li time { + flex-shrink: 0; /* Prevent the time element from shrinking */ + margin-right: 15px; /* Adds space between time and text */ /* Set consistent height for the time element */ +} + +.day ul > li span { + /* Set a comfortable line height for the text */ + display: inline-block; /* Ensure proper block-level behavior */ } .day a { @@ -41,8 +57,6 @@ } @media (min-width: 1024px) { - .with_background { - } } @media (max-width: 767px) { @@ -56,3 +70,44 @@ margin: 0 0; } } + +@media (max-width: 500px) { + .day { + padding: 1rem; + margin-top: 2.5rem; + flex-direction: column; + align-items: flex-start; + } + + .day > h2 { + font-family: Graphik; + font-size: 1.25rem; + font-style: normal; + font-weight: 600; + line-height: 2rem; + padding-bottom: 2rem; + } + + .with_background { + padding-top: 3rem; + padding-bottom: 2rem; + padding: 3rem 1rem 2rem 1rem; + } + .day ul { + list-style: none; + padding-left: 1rem; + margin: 0 0; + } + + .day a { + padding-left: 10rem; + all: unset; + text-underline-offset: 8px !important; + text-decoration: underline !important; + text-decoration-thickness: 2px !important; + text-decoration-color: #03dac6 !important; + display: inline-flex !important; + gap: 10px !important; + cursor: pointer; + } +} diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css index 6af744168..e790d7d93 100644 --- a/src/hemsedal24/components/Hero.module.css +++ b/src/hemsedal24/components/Hero.module.css @@ -15,11 +15,10 @@ section { line-height: 2.5rem; justify-content: center; margin-left: -20%; - } .text > h1 { - font-size: 200%; + font-size: 5vw; font-weight: 450; } @@ -59,31 +58,43 @@ section { justify-content: center; } -@media (max-width: 400px) { +@media (max-width: 500px) { .hemsedalhero2 { max-width: 0%; } .hemsedalhero1 { - max-width: 90%; - margin: -13% -20% -30% -40%; + max-width: 150%; + margin: -23% -20% -30% -70%; } .blobandtext { - margin: 10% -10% 0 0; + justify-content: flex-end; } .blob { - margin: 0 0 0 -30%; - min-width: 40%; + width: 15rem; + height: 15.4rem; + flex-shrink: 0; + margin: 0 -15% 0 -48%; } .text > h1 { - font-size: 150%; + font-size: 4.25rem; + font-weight: 400; + line-height: 5.1rem; + } + .text > h2 { + display: block; + text-align: right; + font-family: Recoleta; + font-size: 1.25rem; + font-style: normal; font-weight: 400; - margin: 0; + line-height: 1rem; /* 195% */ } .text { - margin: 0 0 0 0; + display: flex; + align-content: center; } .container { flex-direction: column; diff --git a/src/hemsedal24/components/Hero.tsx b/src/hemsedal24/components/Hero.tsx index 7b41b4048..02917a7dc 100644 --- a/src/hemsedal24/components/Hero.tsx +++ b/src/hemsedal24/components/Hero.tsx @@ -1,5 +1,4 @@ import styles from "./Hero.module.css"; -import {isMobile} from 'react-device-detect'; //import arrow from "../images/curved-arrow.svg"; import blob from "../images/blob.svg"; @@ -10,12 +9,11 @@ import Container from "./Container"; -export default function Hero() { +export default function Hero({mobile}: {mobile:boolean}) { return
- - hemsedalbilde + hemsedalbilde

Hemsedal

diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css index 5a608a041..b2fae85b7 100644 --- a/src/hemsedal24/hemsedal.module.css +++ b/src/hemsedal24/hemsedal.module.css @@ -1,3 +1,18 @@ +.backgroundContainer { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + z-index: -1; + overflow: hidden; +} + +.background__item { + position: relative; + width: 60rem; + height: 60rem; +} + .tur { background: #ede8d7; color: var(--color-standard__black); @@ -20,16 +35,6 @@ line-height: 2rem; } -.tur li { - margin-bottom: 2rem; -} - -.tur time { - display: inline-block; - width: 4rem; - margin-right: 3rem; -} - .tur a { all: unset; color: #fff; @@ -64,26 +69,103 @@ html { scroll-behavior: smooth; } +.bigblobsss { + composes: background__item; + top: 70rem; + left: calc(50% - 26rem); + width: 80rem; +} + .bigblobs { - min-width: 100%; - z-index: auto; - margin-top: -10%; + composes: background__item; + width: 100%; + margin-bottom: 15rem; + margin-top: -6rem; +} + +.bigblobtekst { + display: flex; + justify-content: center; + align-items: center; + max-width: 70%; + z-index: 10; + margin-left: 30%; + transform: translateY(-300%); +} + +.overlay { + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + margin-top: -5%; + padding: 5rem 12% 0 12%; +} + +.overlay p { + font-size: 0.9rem; +} + +.latter { + min-width: 40%; + margin-left: 4rem; } .secondbigblobs { - margin-bottom: -30%; - min-width: 100%; + min-width: 100vh; z-index: auto; - margin-top: -10%; + bottom: 0; +} + +.secondbigblobs2 { + width: 100%; + position: absolute; + bottom: 0; } +.secondbigblobs2 img { + position: relative; + display: block; +} + +.resortbottom { + min-width: 25%; + margin-top: -6%; + margin-left: 10%; +} + +.bunninfo { + background: var(--Secondary-4-L2, #f4f1e7); + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + margin-top: -1%; + padding: 3rem 10% 10% 10%; +} +.bunninfo h2 { + margin-bottom: 1.5rem; +} + +.bold { + font-size: 1rem; + font-style: normal; + font-weight: 600; + line-height: 2rem; +} .bop { + flex-shrink: 0; display: flex; justify-content: center; - max-width: 100%; - overflow: hidden; - min-width: 20%; - min-height: 50%; + width: 20%; + z-index: 10; + margin: 0 auto; +} + +.bop img { + /* Or another appropriate value */ + height: auto; /* Maintain aspect ratio */ } .program h3 { @@ -117,8 +199,107 @@ html { font-size: 110%; } +.ttheadertittel { + margin-left: -10%; + z-index: 10; +} + .snokimg { margin-right: -7%; margin-top: -5%; min-width: 45%; } + +@media (max-width: 500px) { + .ttheadertittel { + min-width: 100%; + margin-left: -5.5rem; + } + .tingogtangheader h3 { + font-size: 1.675rem; + font-style: normal; + font-weight: 400; + line-height: 2.4375rem; /* 130% */ + text-wrap: wrap; + } + .tingogtangheader { + margin-top: 10%; + } + + .tingogtangbody { + margin-top: 5%; + flex-direction: column; + } + .tt_textbox { + max-width: 100%; + font-size: 0.8rem; + font-style: normal; + line-height: 2rem; + } + + .snokimg { + min-width: 220%; + margin-top: -20%; + } + + .navigation { + flex-direction: column; + justify-content: center; + align-items: center; + align-content: space-between; + } + + .navigation > a { + margin-bottom: 1.5rem; + } + + .program h3 { + font-size: 1.875rem; + font-style: normal; + font-weight: 400; + } + + .program h2 { + font-family: Graphik; + font-size: 1.25rem; + font-style: normal; + font-weight: 600; + line-height: 2rem; /* 160% */ + } + + .bigblobs { + min-width: 230%; + min-height: 100%; + margin: -40% 0 110% 50%; + transform: translateX(-30%); + } + + .secondbigblobs { + margin-bottom: -40%; + } + + .bunninfo { + flex-direction: column; + margin-top: -2%; + } + + .resortbottom { + margin-top: 3rem; + min-width: 100%; + } + .bop { + width: 38%; + } + .bop img { + min-width: 100%; + } + + .overlay { + flex-direction: column; + justify-content: center; + } + .latter { + min-width: 100%; + margin: 20% 0 20% 0; + } +} diff --git a/src/hemsedal24/images/Mask group.svg b/src/hemsedal24/images/Mask group.svg index 5f1c0046c..693eecaaf 100644 --- a/src/hemsedal24/images/Mask group.svg +++ b/src/hemsedal24/images/Mask group.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/images/bigblobmobile.svg b/src/hemsedal24/images/bigblobmobile.svg new file mode 100644 index 000000000..3a5813b6f --- /dev/null +++ b/src/hemsedal24/images/bigblobmobile.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/hemsedal24/images/bop.svg b/src/hemsedal24/images/bop.svg index 5275ecab2..0b203f796 100644 --- a/src/hemsedal24/images/bop.svg +++ b/src/hemsedal24/images/bop.svg @@ -1,4 +1,4 @@ - +> diff --git a/src/hemsedal24/images/bottom-blub-mobil.svg b/src/hemsedal24/images/bottom-blub-mobil.svg new file mode 100644 index 000000000..e02386767 --- /dev/null +++ b/src/hemsedal24/images/bottom-blub-mobil.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/bottom_blub.svg b/src/hemsedal24/images/bottom_blub.svg new file mode 100644 index 000000000..26a3397fb --- /dev/null +++ b/src/hemsedal24/images/bottom_blub.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/hemsedalhero1text.svg b/src/hemsedal24/images/hemsedalhero1text.svg index 11275243a..f98a4e873 100644 --- a/src/hemsedal24/images/hemsedalhero1text.svg +++ b/src/hemsedal24/images/hemsedalhero1text.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/images/hemsedalhero2.svg b/src/hemsedal24/images/hemsedalhero2.svg index 8b34f6344..dc9a7a14e 100644 --- a/src/hemsedal24/images/hemsedalhero2.svg +++ b/src/hemsedal24/images/hemsedalhero2.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/images/hund.svg b/src/hemsedal24/images/hund.svg index 10ff24543..2df6f1d00 100644 --- a/src/hemsedal24/images/hund.svg +++ b/src/hemsedal24/images/hund.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/images/latter.svg b/src/hemsedal24/images/latter.svg new file mode 100644 index 000000000..63c8dbde3 --- /dev/null +++ b/src/hemsedal24/images/latter.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/mobilepagebottomblob.svg b/src/hemsedal24/images/mobilepagebottomblob.svg new file mode 100644 index 000000000..0e309719b --- /dev/null +++ b/src/hemsedal24/images/mobilepagebottomblob.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/pagebottomblob.svg b/src/hemsedal24/images/pagebottomblob.svg new file mode 100644 index 000000000..0794f543c --- /dev/null +++ b/src/hemsedal24/images/pagebottomblob.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/resortbottom.svg b/src/hemsedal24/images/resortbottom.svg new file mode 100644 index 000000000..77a93bb4b --- /dev/null +++ b/src/hemsedal24/images/resortbottom.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/retreatmobile.svg b/src/hemsedal24/images/retreatmobile.svg index 6deb56335..7a3704cb9 100644 --- a/src/hemsedal24/images/retreatmobile.svg +++ b/src/hemsedal24/images/retreatmobile.svg @@ -1,14 +1,30 @@ - - - + + + - - + + + + + + + + + + + + + + + + + + - - + + - + diff --git a/src/hemsedal24/images/sykling.svg b/src/hemsedal24/images/sykling.svg index 644192d42..a9603e26d 100644 --- a/src/hemsedal24/images/sykling.svg +++ b/src/hemsedal24/images/sykling.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/images/tingogtangblob.svg b/src/hemsedal24/images/tingogtangblob.svg index fa46c64b6..6e3a8ed53 100644 --- a/src/hemsedal24/images/tingogtangblob.svg +++ b/src/hemsedal24/images/tingogtangblob.svg @@ -1,3 +1,3 @@ - + diff --git a/src/hemsedal24/images/top-blub-mobil.svg b/src/hemsedal24/images/top-blub-mobil.svg new file mode 100644 index 000000000..e7919617d --- /dev/null +++ b/src/hemsedal24/images/top-blub-mobil.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/top_blub.svg b/src/hemsedal24/images/top_blub.svg new file mode 100644 index 000000000..aea14bcf4 --- /dev/null +++ b/src/hemsedal24/images/top_blub.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/viaferrata.svg b/src/hemsedal24/images/viaferrata.svg index 58c3ce8b9..a2a39ea61 100644 --- a/src/hemsedal24/images/viaferrata.svg +++ b/src/hemsedal24/images/viaferrata.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx index f1184ad36..e4bc72091 100644 --- a/src/hemsedal24/index.tsx +++ b/src/hemsedal24/index.tsx @@ -5,20 +5,43 @@ import arrowDown from './images/arrow-down.svg'; import arrowRight from './images/arrow-right.svg'; import Hero from './components/Hero' import Day from './components/Day' -import bigblobs from './images/Frame88.svg' import Link from 'next/link'; import bop from './images/bop.svg' import secondbigblobs from './images/secondbigblobs.svg' -import Layout from 'src/layout'; +import topblub from './images/top_blub.svg' +import mobiletopblub from './images/top-blub-mobil.svg' +import bottomblub from './images/bottom_blub.svg' +import mobilebottomblub from "./images/bottom-blub-mobil.svg" +import pagebottomblub from "./images/pagebottomblob.svg" +import mobilepagebottomblub from "./images/mobilepagebottomblob.svg" +import resortbottom from './images/resortbottom.svg' +import { useState, useEffect } from 'react'; +import latter from './images/latter.svg' + + + + const Hemsedal24: NextPage = () => { + const [mobile, setMobile] = useState(false); + + useEffect(() => { + const handleWindowSizeChange = () => { + setMobile(window.innerWidth <= 500); + }; + + handleWindowSizeChange(); // Set initial value after component mounts + window.addEventListener('resize', handleWindowSizeChange); + + return () => window.removeEventListener('resize', handleWindowSizeChange); + }, []); return (
Hemsedal - + -
big blobs
+
big blobs
+
+
+

Hemsedal!!

+

Johooooooo!!! Eller chooo-choooo som toget til Hemsedal... + ikke kommer til å si siden det er elektrisk, men vi kan late som🤝 + Uansett! Årets Varianttur tar oss med opp på fjellet, + og her blir det hygge, kos, god mat og gøye aktiviteter💥

+

Under finner du programmet for turen, blabla mer her

+
koser seg
+
+
big blobs

Program

- -
    -
  • - Oppmøte på Flesland -
    • -
  • - Flyet går -
    • -
  • - Lander i Helsinki -
    • -
  • - Tog til sentrum -
    • -
  • - Innsjekk og faglig bolk på hotellet -
    • -
  • - Middag -
    • -
  • - 🍻 eller 😴 -
    • -
- - -
    -
  • - Frokost 😴 -
    • -
  • - Avgang fra hotellet -
    • -
  • - Felles aktivitet 🤫 -
    • -
  • - {' '} - - Valgfrie aktiviteter + +
      +
    • + Oppmøte på Flesland +
      • +
    • + Flyet går +
      • +
    • + Lander i Helsinki +
      • +
    • + Tog til sentrum +
      • +
    • + Innsjekk og faglig bolk på hotellet +
      • +
    • + Middag +
      • +
    • + 🍻 eller 😴 +
      • +
    +     + + +
      +
    • + Frokost 😴 +
      • +
    • + Avgang fra hotellet +
      • +
    • + Felles aktivitet 🤫 +
      • +
    • + + + + Valgfrie aktiviteter + + +
      • +
    • + Felles avgang til forfriskninger 🍾 +
      • +
    • + Middag 🤤 +
      • +
    • + Gøygøygøy 🕺 +
      • +
    +     - -
    • -
  • - Felles avgang til forfriskninger 🍾 -
    • -
  • - Middag 🤤 -
    • -
  • - Gøygøygøy 🕺 -
    • -
- - -
    -
  • - Frokost 😴 -
    • -
  • - Avgang fra hotellet -
    • -
  • - Felles aktivitet 🤫 -
    • -
  • - {' '} - - Valgfrie aktiviteter + +
      +
    • + Frokost 😴 +
      • +
    • + Avgang fra hotellet +
      • +
    • + Felles aktivitet 🤫 +
      • +
    • + + + + Valgfrie aktiviteter + + +
      • +
    • + Felles avgang til forfriskninger 🍾 +
      • +
    • + Middag 🤤 +
      • +
    • + Gøygøygøy 🕺 +
      • +
    +     - -
    • -
  • - Felles avgang til forfriskninger 🍾 -
    • -
  • - Middag 🤤 -
    • -
  • - Gøygøygøy 🕺 -
    • -
-
-
big blobs
+
big blobs
+
- ); }; diff --git a/src/hemsedal24/layout.module.css b/src/hemsedal24/layout.module.css new file mode 100644 index 000000000..d056776ac --- /dev/null +++ b/src/hemsedal24/layout.module.css @@ -0,0 +1,265 @@ +.main { + position: relative; +} +.main--overflow { + overflow-x: hidden; +} + +.main__inner { + max-width: 50rem; + margin: 0 auto; + min-height: 100vh; + min-height: -webkit-fill-available; +} + +.main__innerFullWidth { + max-width: unset; +} + +.header { + display: flex; + flex-wrap: wrap; + /* padding-right: 7.4rem Commented out when adding temporary calculator url */ + max-width: 50rem; + margin: 0 auto; +} + +.header__logo img { + display: block; + margin: 1.2rem; + height: 0.9rem; +} + +.header__nav { + flex: 1; +} + +.header__nav__ul { + display: flex; + align-content: center; + justify-content: center; + list-style: none; + margin: 0; + padding: 0; + transition: 0.4s; +} + +.header__nav__ul li:last-child { + display: none; +} + +.header__nav a { + display: block; + color: var(--color-standard__white--text); + text-decoration: none; + padding: 1.2rem; + font-size: 1rem; + line-height: 1; + + background: linear-gradient( + to right, + var(--color-secondary1), + var(--color-primary__shade1), + var(--color-secondary2) + ); + background-size: 200% 200%; + background-clip: text; + transition: color 0.2s ease-in-out; +} +.header__nav li:nth-child(2n) a { + background-position-x: right; +} +.header__nav a:hover { + color: rgba(0, 0, 0, 0); +} + +.burgerButtonContainer { + background-color: transparent; + border: 0; + font-size: 1.2rem; + display: none; + cursor: pointer; + position: absolute; + right: 1.5rem; + top: 1.5rem; +} + +.burgerButtonContainer:focus { + outline: none; + box-shadow: 0 0 0 0.15rem rgba(21, 156, 228, 0.4); +} + +.bar1, +.bar2, +.bar3 { + position: relative; + width: 1.8rem; + height: 0.2rem; + background-color: var(--color-secondary1); + margin: 0.29rem 0; + transition: 0.3s; +} + +.bar1_change, +.bar2_change, +.bar3_change { + composes: bar1; +} + +.bar1_change { + -webkit-transform: rotate(-45deg) translate(-0.35rem, 0.35rem); + transform: rotate(-45deg) translate(-0.35rem, 0.35rem); +} +.bar2_change { + opacity: 0; +} +.bar3_change { + -webkit-transform: rotate(45deg) translate(-0.35rem, -0.35rem); + transform: rotate(45deg) translate(-0.35rem, -0.35rem); +} + +@media (max-width: 600px) { + .header__nav { + width: 100%; + height: 100%; + position: absolute; + left: 0; + background-color: rgba(0, 0, 0, 0.4); + transform: translateX(0%); + transition: + transform 450ms ease-in-out, + background-color 300ms ease-in-out 300ms; + z-index: 99; + } + + .header__nav__hidden { + transform: translateX(100%); + transition: + transform 450ms ease-in-out, + background-color 100ms ease-in-out; + background-color: rgba(0, 0, 0, 0); + } + + .header__nav__ul { + width: 60%; + position: fixed; + right: 0rem; + height: 100%; + z-index: 100; + flex-wrap: wrap; + flex-direction: column; + justify-content: start; + background-color: var(--color-secondary4__tint2); + } + + .header__nav__ul li:last-child { + display: flex; + } + + .header__nav__ul li a { + cursor: pointer; + font-size: 1.1rem; + font-family: Recoleta, serif; + color: var(--color-standard__black); + } + + .header__nav__ul li:first-child { + margin-top: 3.5rem; + } + + .header__nav__ul li { + margin-top: 0.5rem; + } + + .burgerButtonContainer { + display: block; + z-index: 101; + } + + .header__logo img { + margin-top: 1.85rem; + margin-left: 1.3rem; + } +} + +@keyframes backgroundPos { + 0% { + background-position: left; + } + 50% { + background-position: right; + } + 100% { + background-position: left; + } +} + +.footer__inner { + position: relative; + z-index: 2; + max-width: 50rem; + margin: 0 auto; + padding: 5.6rem 1.2rem 1.2rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.footer__inner--bottom { + padding: 2.4rem 1.2rem 5.6rem; +} + +.footer__item:nth-child(1):not(.footer__item--address) { + margin-top: 13rem; +} + +.footer__item:nth-child(2):not(.footer__item--address) { + margin-top: 8rem; +} +@media (max-width: 453px) { + .footer__item:nth-child(2):not(.footer__item--address) { + margin-top: 2.4rem; + } +} + +.footer__item:nth-child(3):not(.footer__item--address) { + margin-top: 2.4rem; +} +.footer__item { + color: var(--color-standard__white); + flex: 1; + + min-width: 15rem; +} +.footer__item--address { + margin-top: 0; + margin-bottom: 1.2rem; +} +.footer__item h2 { + font-size: 1.5rem; +} +.footer__item address { + font-style: normal; + line-height: 1.85rem; +} +.footer__item p { + margin: 1.6rem 0; +} +.footer__item ul { + list-style: none; + padding: 0; + margin: 1.6rem 0 0; +} +.footer__item li { + margin-bottom: 0.6rem; +} +.footer__item a { + color: var(--color-secondary2); + text-decoration: none; + border-bottom: 1px solid var(--color-secondary2); + padding-bottom: 0.1rem; + transition: border-bottom 200ms ease-out; +} +.footer__item a:hover { + color: var(--color-secondary2__shade1); + border-bottom: 1px solid var(--color-primary); +} diff --git a/src/hemsedal24/layout.tsx b/src/hemsedal24/layout.tsx new file mode 100644 index 000000000..fbece2dfa --- /dev/null +++ b/src/hemsedal24/layout.tsx @@ -0,0 +1,56 @@ +import Head from 'next/head'; +import Link from 'next/link'; +import { PropsWithChildren, useState } from 'react'; +import AnimatingBackground from 'src/background'; +import { and } from 'src/utils/css'; +import style from './layout.module.css'; + +import PageHeader from '@components/page-header'; +import favicon from '@variant/profile/lib/logo/favicon.png'; + +type LayoutProps = PropsWithChildren<{ + title?: string; + fullWidth?: boolean; + crazy?: boolean; + homepage?: boolean; + zenMode?: boolean; +}>; + +const Layout = ({ + children, + title = 'Variant – En variant av et konsulentselskap', + fullWidth = false, + crazy = false, + homepage = false, + zenMode = false, +}: LayoutProps) => { + const [isMenuVisible, setMenuVisible] = useState(false); + + const mainClass = and( + style.main, + !zenMode ? style['main--overflow'] : undefined, + zenMode ? style['main--zenMode'] : undefined, + ); + + return ( +
+ +
+ +
{children}
+
+ + +
+ ); +}; + +export default Layout; diff --git a/src/hemsedal24/tingogtang.tsx b/src/hemsedal24/tingogtang.tsx index 889afff99..eba5ddf37 100644 --- a/src/hemsedal24/tingogtang.tsx +++ b/src/hemsedal24/tingogtang.tsx @@ -5,10 +5,25 @@ 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 Layout from "./layout"; const TingogTang: NextPage = () => { + const [mobile, setMobile] = useState(false); + + useEffect(() => { + const handleWindowSizeChange = () => { + setMobile(window.innerWidth <= 500); + }; + + handleWindowSizeChange(); // Set initial value after component mounts + window.addEventListener('resize', handleWindowSizeChange); + + return () => window.removeEventListener('resize', handleWindowSizeChange); + }, []); return (
- + { Tilbake
-
blob
-

Ting og tang du kanskje lurer på

+
blob
+

Ting og tang du kanskje lurer på

@@ -29,8 +44,9 @@ const TingogTang: NextPage = () => { Dersom det er noe annet du lurer så er det bare å huke tak i sin nærmeste Variant og spørre🤝
folk som snoker
+
- +
big blobs
);