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

- - - - + + + + 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;