Hemsedal24 (#482)

* activity page

* mesteparten ferdig

* fixings

pages/hemsedal24/aktiviteter.tsx

@@ -0,0 +1 @@
+export { default } from 'src/hemsedal24/activities';

pages/hemsedal24/tingogtang.tsx

@@ -0,0 +1 @@
+export { default } from 'src/hemsedal24/tingogtang'

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

@@ -0,0 +1,68 @@
+
+import { NextPage } from "next";
+import Link from "next/link";
+import arrowleft from "./images/arrow-left.svg"
+import styles from "./activities.module.css"
+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  id="top" className={styles.tur}>
+                        {mobile ?<></> : <Link 
+            className={styles.navigation}
+            href="/hemsedal24"
+            style={{display:'flex', gap: '1rem', lineHeight: '28px', marginLeft:"-20%"}}>
+                <img src={arrowleft} width={24} height={28} alt="pil venste" />
+                <span>Tilbake</span>
+            </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="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}/>
+            <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>
+);
+};
+
+export default Activities;

src/hemsedal24/components/ActivityBlock.module.css

@@ -0,0 +1,60 @@
+.block {
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  margin: auto;
+  justify-content: space-between;
+  margin-bottom: 7%;
+}
+
+.textportion {
+  flex-direction: column;
+  display: flex;
+  width: 57%;
+}
+.textportion h2 {
+  font-weight: 500;
+  padding-bottom: 2%;
+}
+.picture {
+  display: flex;
+  min-width: 40%;
+  margin-right: -5%;
+}
+
+p {
+  font-size: 100%;
+}
+
+.textportion a {
+  all: unset;
+  text-underline-offset: 2px !important;
+  text-decoration: underline !important;
+  text-decoration-thickness: 2px !important;
+  text-decoration-color: #e61a6b !important;
+  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/ActivityBlock.tsx

@@ -0,0 +1,17 @@
+
+import Link from "next/link";
+
+import styles from "./ActivityBlock.module.css"
+
+export default function ActivityBlock({ title, text, link, reference, picture}: { title: string, text: string, link: string, reference: string, picture:string}) {
+    return <section style={{display:"flex", justifyContent:"center", margin: "auto"}}>
+        <div className={styles.block}>
+            <div className={styles.textportion}>
+                <h2>{title}</h2>
+                <p>{text}</p>
+                <p>Du finner mer informasjon om {reference} <Link href={link}>HER</Link></p>
+            </div>
+            <div className={styles.picture}><img src={picture} alt='bilde' /></div>
+        </div>
+    </section>
+}

src/hemsedal24/components/Container.module.css

@@ -0,0 +1,5 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0% 10% 5% 10%;
+}

src/hemsedal24/components/Container.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
+import styles from './Container.module.css'
 
 export default function Container({ children, className, ...props }: { children: ReactNode } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
-  return <div className={`${className ? className : ''} $`} {...props}>{children}</div>
+  return <div className={`${className ? className : ''} ${styles.container}`} {...props}>{children}</div>
 }

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

src/hemsedal24/components/Day.tsx

@@ -1,17 +1,16 @@
 import { ReactNode } from "react";
 
 import styles from './Day.module.css';
-import Container from "./Container";
 
 export default function Day({ title, children, background = false }: { title: string, children: ReactNode, background?: boolean }) {
   return <section>
-    <Container className={`${styles.day} ${background && styles.with_background}`}>
+    <div className={`${styles.day} ${background && styles.with_background}`}>
       <h2>
         {title}
       </h2>
       <div>
         {children}
       </div>
-    </Container>
+    </div>
   </section>;
 }