mesteparten ferdig

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

src/hemsedal24/activities.tsx

@@ -2,55 +2,66 @@
 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 (
-        <div className={styles.tur} style={{ paddingTop: '3rem' }}>
-        <Container style={{display:"flex", justifyContent:"center", flexDirection:"column"}}>
-            <Link 
+        <div  id="top" className={styles.tur}>
+                        {mobile ?<></> : <Link 
             className={styles.navigation}
             href="/hemsedal24"
-            style={{display:'flex', gap: '1rem', lineHeight: '28px'}}>
+            style={{display:'flex', gap: '1rem', lineHeight: '28px', marginLeft:"-20%"}}>
                 <img src={arrowleft} width={24} height={28} alt="pil venste" />
                 <span>Tilbake</span>
-            </Link>
-            <div className={styles.tingogtangheader}>
-            <div style={{zIndex:10, margin: "-12% -15% 0 20%"}}><h3>Aktivitetene på lørdag</h3></div>
-            <div style={{zIndex:"auto", margin:"-12% -15% 0 0", minWidth:"50%"}}><img src={blob} alt="blob"/></div>
-            </div> 
-            <div style={{display:"flex", justifyContent:"center", marginBottom:"5%" }}>   
-            <span style={{display:"inline-block", zIndex:10, maxWidth:"74%", marginTop:"-15%"}}>
-                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 ⛰️🌞 
-            </span></div> 
+            </Link> }
+            <div style={{display:"relative"}} className={styles.blob}><img src={blob} alt="blob"/></div>
+            <div className={styles.header}>
+            <div className={styles.title}><h3>Aktivitetene på lørdag</h3></div>  
+            <span>
+            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 ⛰️🌞 
+            </span></div>
             <ActivityBlock title="Stisykling med Hemsedal Rides 🚲⛰️" 
             text="Mellom kl 10.00 – 15.00 kan man ta stolheisen Lodge Express opp fjellet til stiene i Hemsedal Skisenter. 
             Her kan man sykle ned og ta heisen opp igjen så mange ganger man vil for å teste ut de ulike stiene. 
             Disse stiene passer for både nybegynnere og adrenalin junkiesene blant oss💥"
             link ="https://hemsedal.com/sykling/hemsedal-rides"
             reference="stisyklingen"
             picture={sykling}/>
-            <ActivityBlock title="Via Ferrata klatring med guide 🧗"
-            text="Her tar erfarne guider deg med opp bratte fjellsider og langs trange fjellhyller (hjelp) på en rute som 
-            tar deg opp til Vesle Røggjin. Det tar 3-5 timer, avhengig av nivået til de som klatrer💫"
-            link="https://hemsedal.com/hemsedal-fjellsport/via-ferrata"
-            reference="klatreturen"
-            picture={via}/>
             <ActivityBlock title="Hundekjøring og fjellvandring 🐕⛰️"
             text="Her får vi ca 2 timer hundekjøring med guide i kombo med to timers fjellvandring etter lunsj. Det er også 
             viktig å påpeke at “det blir tid til å kose med hundene i hundegården også”😌 På grunn av veldig kosete hunder 
             som er glad i mennesker så blir vi tipset om å gå med klær som tåler poter, snuter og pels. "
             link="https://hemsedalhusky.no/hundekjoring/"
             reference="hundekjøringen"
             picture={hund}/>
-        </Container>
+            <ActivityBlock title="Via Ferrata klatring med guide 🧗"
+            text="Her tar erfarne guider deg med opp bratte fjellsider og langs trange fjellhyller (hjelp) på en rute som 
+            tar deg opp til Vesle Røggjin. Det tar 3-5 timer, avhengig av nivået til de som klatrer💫"
+            link="https://hemsedal.com/hemsedal-fjellsport/via-ferrata"
+            reference="klatreturen"
+            picture={via}/>
+            <a href="#top"><div className={styles.bop}><img src={bop} alt="big blobs"/></div></a>
     </div>
 );
 };

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,16 +10,16 @@
 .textportion {
   flex-direction: column;
   display: flex;
-  width: 58%;
+  width: 57%;
 }
 .textportion h2 {
   font-weight: 500;
   padding-bottom: 2%;
 }
 .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;
+  }
+}

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