From 86d79844b47925befcacdeed1bd556dce030e018 Mon Sep 17 00:00:00 2001 From: Maria Bonde Date: Tue, 20 Aug 2024 13:58:03 +0200 Subject: [PATCH 1/4] program nesten ferdig --- src/hemsedal24/components/Day.module.css | 66 +++++++------- src/hemsedal24/components/Day.tsx | 2 +- src/hemsedal24/components/Hero.module.css | 49 +++++++--- src/hemsedal24/components/Hero.tsx | 6 +- src/hemsedal24/hemsedal.module.css | 85 ++++++++++++++++-- src/hemsedal24/images/arrow-downpink.svg | 19 ++++ src/hemsedal24/images/arrow-rightpink.svg | 4 + src/hemsedal24/images/arrow-uppink.svg | 5 ++ src/hemsedal24/index.tsx | 104 ++++++++++------------ src/hemsedal24/layout.tsx | 56 ++++++++++++ 10 files changed, 288 insertions(+), 108 deletions(-) create mode 100644 src/hemsedal24/images/arrow-downpink.svg create mode 100644 src/hemsedal24/images/arrow-rightpink.svg create mode 100644 src/hemsedal24/images/arrow-uppink.svg create mode 100644 src/hemsedal24/layout.tsx diff --git a/src/hemsedal24/components/Day.module.css b/src/hemsedal24/components/Day.module.css index fc714d40b..0eb907d70 100644 --- a/src/hemsedal24/components/Day.module.css +++ b/src/hemsedal24/components/Day.module.css @@ -1,8 +1,8 @@ .day { - padding: 7rem; display: flex; justify-content: space-around; - align-items: center; + flex-direction: column; + padding: 6rem 13rem 5rem 9rem; } .with_background { @@ -10,29 +10,41 @@ } .day > h2 { - font-weight: 550; - font-size: 140%; - line-height: 2.25rem; - align-items: center; + color: var(--Primary-Default, #e61a6b); + + /* Heading 4 / Regular */ + font-family: Recoleta; + font-size: 1.675rem; + font-style: normal; + font-weight: 500; + line-height: 2.4375rem; /* 130% */ } .day time { display: inline-block; - width: 4rem; + width: 12rem; margin-right: 1rem; } +.timetable { + width: 100%; +} + .day ul { list-style: none; font-size: 110%; font-weight: 400; font-family: 'Graphik Web'; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0; } .day ul > li { display: flex; /* Use flexbox to align time and text */ align-items: flex-start; /* Align items at the top */ - margin-bottom: 2rem; + margin-bottom: 1.5rem; } .day ul > li time { @@ -45,18 +57,8 @@ display: inline-block; /* Ensure proper block-level behavior */ } -.day a { - 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; -} - -@media (min-width: 1024px) { +.day ul > li p { + margin-top: 1rem; } @media (max-width: 767px) { @@ -70,20 +72,28 @@ margin: 0 0; } } +a { + text-decoration-line: none; +} @media (max-width: 500px) { .day { padding: 1rem; margin-top: 2.5rem; - flex-direction: column; align-items: flex-start; } + .day li { + display: flex; + flex-direction: row; + } + .day > h2 { font-family: Graphik; font-size: 1.25rem; font-style: normal; font-weight: 600; + color: var(--Primary-Default); line-height: 2rem; padding-bottom: 2rem; } @@ -96,18 +106,10 @@ .day ul { list-style: none; padding-left: 1rem; - margin: 0 0; + width: 95%; } - .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; + .day time { + width: 8rem; } } diff --git a/src/hemsedal24/components/Day.tsx b/src/hemsedal24/components/Day.tsx index 2ebf84acb..2b7e4d726 100644 --- a/src/hemsedal24/components/Day.tsx +++ b/src/hemsedal24/components/Day.tsx @@ -8,7 +8,7 @@ export default function Day({ title, children, background = false }: { title: st

{title}

-
+
{children}
diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css index e790d7d93..c9793a9a2 100644 --- a/src/hemsedal24/components/Hero.module.css +++ b/src/hemsedal24/components/Hero.module.css @@ -5,6 +5,7 @@ section { justify-content: space-between; flex-direction: row; width: 100vw; + height: 30rem; } .text { @@ -32,24 +33,43 @@ section { } .blob { + display: flex; margin-left: -45%; margin-top: 50%; z-index: auto; min-width: 65%; + position: relative; +} + +.blobimg { + position: absolute; + max-width: 100%; } +.img1 { + display: flex; + min-width: 45%; + position: relative; + justify-content: flex-start; +} .hemsedalhero1 { - margin-left: -15%; - margin-top: -8%; - max-width: 50%; - margin-right: -5%; + position: absolute; + max-width: 100%; + left: 0; + margin: -5.5rem 0 0 -12rem; +} + +.img2 { + display: flex; + min-width: 40%; + position: relative; + justify-content: flex-end; } .hemsedalhero2 { - max-width: 30%; - margin-top: -9%; - margin-right: 0; - margin-left: -10%; + position: absolute; + max-width: 60%; + margin: -1rem 3rem 0 0; } .blobandtext { @@ -59,16 +79,21 @@ section { } @media (max-width: 500px) { + .container { + height: 50rem; + } .hemsedalhero2 { max-width: 0%; } + .img1 { + height: 30rem; + } .hemsedalhero1 { - max-width: 150%; - margin: -23% -20% -30% -70%; + max-width: 160%; + margin: -7rem -20% -30% -70%; } .blobandtext { - justify-content: flex-end; } .blob { @@ -77,6 +102,7 @@ section { flex-shrink: 0; margin: 0 -15% 0 -48%; } + .text > h1 { font-size: 4.25rem; font-weight: 400; @@ -95,6 +121,7 @@ section { .text { display: flex; align-content: center; + padding-left: 12rem; } .container { flex-direction: column; diff --git a/src/hemsedal24/components/Hero.tsx b/src/hemsedal24/components/Hero.tsx index 012fef2a4..1b70af77a 100644 --- a/src/hemsedal24/components/Hero.tsx +++ b/src/hemsedal24/components/Hero.tsx @@ -12,17 +12,17 @@ export default function Hero({mobile}: {mobile:boolean}) { return
- hemsedalbilde +
hemsedalbilde

Hemsedal

30. august-1. september

- blobben + blobben
- hemsedalbilde +
hemsedalbilde
; } diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css index b2fae85b7..cd0ca317d 100644 --- a/src/hemsedal24/hemsedal.module.css +++ b/src/hemsedal24/hemsedal.module.css @@ -29,7 +29,7 @@ font-family: 'Recoleta'; } -.tur h2 { +.bunninfo h2 { font-weight: 400; font-size: 1.5rem; line-height: 2rem; @@ -37,9 +37,7 @@ .tur a { all: unset; - color: #fff; cursor: pointer; - font-weight: 500; z-index: 10; } @@ -50,8 +48,6 @@ display: flex; flex-direction: row; justify-content: center; - gap: 10%; - align-items: baseline; } .navigation span { @@ -65,8 +61,14 @@ vertical-align: middle; } +.navigation a { + margin-left: 6rem; + margin-right: 4rem; +} + html { scroll-behavior: smooth; + background-color: #ede8d7; } .bigblobsss { @@ -168,9 +170,66 @@ html { height: auto; /* Maintain aspect ratio */ } +.program { + display: flex; + justify-content: flex-start; + flex-direction: column; +} + .program h3 { + font-size: 3rem; +} + +.programbold { + font-weight: 600; +} +.underlined { + display: inline-flex; + position: relative; /* Important for positioning the pseudo-element */ + gap: 10px; /* Adjust gap between the spans if needed */ + cursor: pointer; +} + +.underlined::after { + content: ''; + position: absolute; + left: 0; + bottom: -2px; /* Adjust this to position the underline */ + width: 100%; + height: 2px; /* Thickness of the underline */ + background-color: var(--Primary-Default, #e61a6b); /* The pink color */ +} +details > summary { + list-style: none; display: flex; - justify-content: center; + align-items: center; + cursor: pointer; +} + +details > summary::-webkit-details-marker { + display: none; +} + +.summaryText { + margin-right: 8px; /* Adjust spacing as needed */ +} + +.disclosureArrow { + display: absolute; + width: 22px; + height: 22px; + background-image: url('./images/arrow-downpink.svg'); /* Default to the down arrow */ + background-size: cover; + transition: background-image 0.3s ease; +} + +/* Change the arrow image when the details are open */ +details[open] .disclosureArrow { + background-image: url('./images/arrow-uppink.svg'); +} + +.pl_9 { + margin-left: 9rem; } .font-color { @@ -247,10 +306,13 @@ html { justify-content: center; align-items: center; align-content: space-between; + font-size: 1.25rem; } .navigation > a { margin-bottom: 1.5rem; + margin-left: 0; + margin-right: 0; } .program h3 { @@ -267,6 +329,11 @@ html { line-height: 2rem; /* 160% */ } + .pl_9 { + margin: 0; + display: flex; + justify-content: center; + } .bigblobs { min-width: 230%; min-height: 100%; @@ -302,4 +369,10 @@ html { min-width: 100%; margin: 20% 0 20% 0; } + + .disclosureArrow { + } + .summaryText { + width: 13rem; + } } diff --git a/src/hemsedal24/images/arrow-downpink.svg b/src/hemsedal24/images/arrow-downpink.svg new file mode 100644 index 000000000..b9ce28127 --- /dev/null +++ b/src/hemsedal24/images/arrow-downpink.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/arrow-rightpink.svg b/src/hemsedal24/images/arrow-rightpink.svg new file mode 100644 index 000000000..f698c53e3 --- /dev/null +++ b/src/hemsedal24/images/arrow-rightpink.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/hemsedal24/images/arrow-uppink.svg b/src/hemsedal24/images/arrow-uppink.svg new file mode 100644 index 000000000..8a91983c2 --- /dev/null +++ b/src/hemsedal24/images/arrow-uppink.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx index 81e8f338f..f09e0a742 100644 --- a/src/hemsedal24/index.tsx +++ b/src/hemsedal24/index.tsx @@ -3,6 +3,7 @@ import { NextPage } from 'next'; import Head from 'next/head'; import arrowDown from './images/arrow-down.svg'; import arrowRight from './images/arrow-right.svg'; +import arrowrightpink from './images/arrow-rightpink.svg' import Hero from './components/Hero' import Day from './components/Day' import Link from 'next/link'; @@ -19,8 +20,6 @@ import latter from './images/latter.svg' - - const Hemsedal24: NextPage = () => { const [mobile, setMobile] = useState(false); @@ -36,6 +35,7 @@ const Hemsedal24: NextPage = () => { }, []); return (
+ Hemsedal @@ -63,91 +63,85 @@ const Hemsedal24: NextPage = () => {
big blobs
-

Program

+

Program

  • - Oppmøte på Flesland -
    • -
  • - Flyet går -
    • -
  • - Lander i Helsinki -
    • -
  • - Tog til sentrum -
    • -
  • - Innsjekk og faglig bolk på hotellet + Oppmøte på Bergen togstasjon
  • - Middag + Toget går! 🚂
  • - 🍻 eller 😴 -
    • -
- - - -
    -
  • - Frokost 😴 + Buss til hotellet
  • - Avgang fra hotellet + Ankomst på Fýri Resort (check-in kl 15:00)
  • - Felles aktivitet 🤫 + Lunsj på hotellet
  • - - - - Valgfrie aktiviteter - - + For varianter:  Workshop med Marie, vi får servert snacks og drikke
  • - Felles avgang til forfriskninger 🍾 + +
    For følge:  + Pool Club/treningssenter/fritid
     +

    Dere kan benytte dere av treningssenter og Pool Club som består av innendørs- og utendørsbassenger, + og badstue ute. Gå til resepsjonen etter lunsj og få bånd for å kunne gå i Pool Club + (Variant betaler). Da har dere fri tilgang til bassenget fram til kl 16:00 og kan gå + inn og ut så mye de vil i denne tidsperioden (gjelder kun denne dagen).​ Snacks og drikke + kan settes av på romnummer og betales ved utsjekk på søndagen.

    +
    • +
  • Chill eller gjør hva dere vil🤸🏼
  • - Middag 🤤 + Middag
  • - Gøygøygøy 🕺 + ubestemt
+ +
    +
  • + Frokost 🥐 🍳 +
    • +
  • + + + Hundekjøring / Via Ferrata klatring / Stisykling med Hemsedal Rides + + +
    • +
  • + Pool Club (inne- og utebasseng + badstue) +
    • +
  • + Middag +
    • +
  • + ubestemt +
    • +
+ +
  • - Frokost 😴 -
    • -
  • - Avgang fra hotellet -
    • -
  • - Felles aktivitet 🤫 -
    • -
  • - - - - Valgfrie aktiviteter - - + Frokost 🥐 🍳
  • - Felles avgang til forfriskninger 🍾 + Avreise fra hotellet, vi blir hentet med buss og kjørt til togstasjonen
  • - Middag 🤤 + Toget går! 🚂
  • - Gøygøygøy 🕺 + Tilbake i Bergen
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; From ef322667d900970315f2d8049e6101073cb3d959 Mon Sep 17 00:00:00 2001 From: Maria Bonde Date: Tue, 20 Aug 2024 14:42:40 +0200 Subject: [PATCH 2/4] program nearly done --- src/hemsedal24/components/Day.module.css | 10 ++-------- src/hemsedal24/hemsedal.module.css | 20 ++++++-------------- src/hemsedal24/index.tsx | 11 ++++++----- 3 files changed, 14 insertions(+), 27 deletions(-) diff --git a/src/hemsedal24/components/Day.module.css b/src/hemsedal24/components/Day.module.css index 0eb907d70..b7c68c5e0 100644 --- a/src/hemsedal24/components/Day.module.css +++ b/src/hemsedal24/components/Day.module.css @@ -52,11 +52,6 @@ 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 ul > li p { margin-top: 1rem; } @@ -93,7 +88,6 @@ a { font-size: 1.25rem; font-style: normal; font-weight: 600; - color: var(--Primary-Default); line-height: 2rem; padding-bottom: 2rem; } @@ -106,10 +100,10 @@ a { .day ul { list-style: none; padding-left: 1rem; - width: 95%; + width: 93%; } .day time { - width: 8rem; + width: 4rem; } } diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css index cd0ca317d..96b1ebb07 100644 --- a/src/hemsedal24/hemsedal.module.css +++ b/src/hemsedal24/hemsedal.module.css @@ -35,7 +35,7 @@ line-height: 2rem; } -.tur a { +.navigation a { all: unset; cursor: pointer; z-index: 10; @@ -183,22 +183,14 @@ html { .programbold { font-weight: 600; } + .underlined { - display: inline-flex; - position: relative; /* Important for positioning the pseudo-element */ - gap: 10px; /* Adjust gap between the spans if needed */ - cursor: pointer; + text-decoration: underline; + text-decoration-color: var(--Primary-Default, #e61a6b); + text-decoration-thickness: 2px; + text-underline-offset: 6px; } -.underlined::after { - content: ''; - position: absolute; - left: 0; - bottom: -2px; /* Adjust this to position the underline */ - width: 100%; - height: 2px; /* Thickness of the underline */ - background-color: var(--Primary-Default, #e61a6b); /* The pink color */ -} details > summary { list-style: none; display: flex; diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx index f09e0a742..d002e7a7e 100644 --- a/src/hemsedal24/index.tsx +++ b/src/hemsedal24/index.tsx @@ -86,8 +86,9 @@ const Hemsedal24: NextPage = () => {
  • -
    For følge:  - Pool Club/treningssenter/fritid
     +
    For følge:  + Pool Club/treningssenter/fritid
     +

    Dere kan benytte dere av treningssenter og Pool Club som består av innendørs- og utendørsbassenger, og badstue ute. Gå til resepsjonen etter lunsj og få bånd for å kunne gå i Pool Club (Variant betaler). Da har dere fri tilgang til bassenget fram til kl 16:00 og kan gå @@ -108,11 +109,11 @@ const Hemsedal24: NextPage = () => {

    • - Frokost 🥐 🍳 + Frokost 🥐 🍳 (spis når dere vil mellom 07:30 og 09:00)
    • - + Hundekjøring / Via Ferrata klatring / Stisykling med Hemsedal Rides @@ -132,7 +133,7 @@ const Hemsedal24: NextPage = () => {
      • - Frokost 🥐 🍳 + Frokost 🥐 🍳 (spis når dere vil mellom 07:30 og 09:00)
      • Avreise fra hotellet, vi blir hentet med buss og kjørt til togstasjonen From e4b98e118915a8ec69a504022a87fa0870c5af51 Mon Sep 17 00:00:00 2001 From: Maria Bonde Date: Tue, 20 Aug 2024 14:45:00 +0200 Subject: [PATCH 3/4] I fixx --- src/hemsedal24/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx index d002e7a7e..6578a77ee 100644 --- a/src/hemsedal24/index.tsx +++ b/src/hemsedal24/index.tsx @@ -116,7 +116,7 @@ const Hemsedal24: NextPage = () => { Hundekjøring / Via Ferrata klatring / Stisykling med Hemsedal Rides - +arrow
      • Pool Club (inne- og utebasseng + badstue) From da7d51dd2b169064006e99c7218d390c87cfa7a3 Mon Sep 17 00:00:00 2001 From: Maria Bonde Date: Tue, 20 Aug 2024 14:47:15 +0200 Subject: [PATCH 4/4] deleted layout file --- src/hemsedal24/layout.tsx | 56 --------------------------------------- 1 file changed, 56 deletions(-) delete mode 100644 src/hemsedal24/layout.tsx diff --git a/src/hemsedal24/layout.tsx b/src/hemsedal24/layout.tsx deleted file mode 100644 index fbece2dfa..000000000 --- a/src/hemsedal24/layout.tsx +++ /dev/null @@ -1,56 +0,0 @@ -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;