Lasterrorhemsedal24 (#515)

* couldt do arrows:/ * hopefully last commit now:)
varianter · Aug 23, 2024 · d2adab9 · d2adab9
1 parent e1039f8
commit d2adab9
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 88 deletions.
diff --git a/src/hemsedal24/activities.module.css b/src/hemsedal24/activities.module.css
@@ -6,6 +6,14 @@
   z-index: 1;
 }
 
+@-moz-document url-prefix() {
+  p {
+    font-size: 1.25rem;
+  }
+}
+.bold {
+  font-weight: 500;
+}
 .header h3 {
   display: flex;
   justify-content: center;
@@ -77,28 +85,30 @@ html {
 
 .blob {
   z-index: auto;
-  max-width: 75%;
   position: relative;
 }
 .blob img {
   position: absolute;
-  z-index: auto;
-  top: -9rem;
-  right: -20rem;
+  width: 70%;
+  top: -13rem;
+  right: -10rem;
 }
 
 .title {
   z-index: 10;
 }
-
 .bop {
   flex-shrink: 0;
   display: flex;
   justify-content: center;
-  width: 20%;
+  width: 25rem;
   z-index: 10;
   margin: 0 auto;
-  margin-top: 10%;
+}
+
+.bop img {
+  /* Or another appropriate value */
+  height: auto; /* Maintain aspect ratio */
 }
 
 @media (max-width: 500px) {

diff --git a/src/hemsedal24/activities.tsx b/src/hemsedal24/activities.tsx
@@ -1,53 +1,101 @@
-
-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 { 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';
 const Activities: NextPage = () => {
-    return (
-        <div  id="top" className={styles.tur}>
-            <meta name="theme-color" content="#EDE8D7"/>
-                        <Link 
-            className={styles.tilbake}
-            href="/hemsedal24">
-                <img src={arrowleft} width={24} height={28} alt="pil venste" />
-                <span>Tilbake</span>
-            </Link>    
-            <div className={styles.blob}><img src={blob} alt="blob"/></div>
-            <div className={styles.header}>
-            <div className={styles.title}><h3>Aktivitetene på lørdag</h3></div>  
-            <p>
-            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 ⛰️🌞 
-            </p></div>
-            <ActivityBlock title="Stisykling med Hemsedal Rides 🚲⛰️"
-            text="Mellom kl 10:00 – 16:00 kan dere ta stolheisen Lodge Express opp fjellet til stiene i Hemsedal Skisenter⛰️ Heisen ligger en kort sykkeltur fra hotellet. Her kan dere sykle ned og ta heisen opp igjen så mange ganger dere vil for å teste ut de ulike stiene. Disse stiene passer for både nybegynnere og adrenalin junkiesene blant oss💥 Sykkel og hjelm får dere låne av hotellet!"
-            link ="https://hemsedal.com/sykling/hemsedal-rides"
-            reference="stisyklingen"
-            secondtext="Lunsj kan dere spise på skisenteret 🥪 (husk å ta vare på kvitteringen)"
-            picture={sykling}/>
-            <ActivityBlock title="Hundekjøring og fjellvandring 🐕⛰️"
-            text='Dere tar bussen fra hotellet sammen med klatregjengen kl 09:00. Vi er framme hos Hemsedal Husky kl 10:25, og så er det hundekjøring fra kl 10:30🥳 Her får vi litt over en time hundekjøring med guide. 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"
-            secondtext={<>Vi blir hentet med bussen igjen kl 11:45 og er framme på hotellet ca 12:45. De som vil kan så gå på tur rundt <Link href='https://hemsedal.com/artikler/rjukandefossen'>Rjukandefossen</Link> (det ser helt sykt fint ut på bildene omg). Turen tar 3 timer tur/retur. Og man kan bade!!! Ellers kan man også henge på hotellet og slappe av etter hundekjøringen, det velger man selv 🤗</>}
-            picture={hund}/>
-            <ActivityBlock title="Via Ferrata klatring med guide 🧗"
-            text="Dere tar bussen fra hotellet sammen med hundegjengen kl 09:00, og blir sluppet av der dere skal møte guiden og resten av gruppen som skal klatre 🚌 Her tar erfarne guider deg med opp bratte fjellsider og langs trange fjellhyller (hjelp) på en rute som tar deg til Vesle Røggjin. Det tar 3-5 timer, avhengig av nivået til de som klatrer💫 Men ikke vær for treig, for bussen plukker dere opp igjen kl 12:30 og kjører dere tilbake til hotellet🤠"
-            link="https://hemsedal.com/hemsedal-fjellsport/via-ferrata"
-            reference="klatreturen"
-            secondtext="Når dere er tilbake på hotellet så kan dere velge om dere vil på tur med hundegjengen eller slappe av på hotellet🌟 "
-            picture={via}/>
-            <a href="#top"><div className={styles.bop}><img src={bop} alt="big blobs"/></div></a>
+
+  return (
+    <div id="top" className={styles.tur}>
+      <meta name="theme-color" content="#EDE8D7" />
+      <Link className={styles.tilbake} href="/hemsedal24">
+        <img src={arrowleft} width={24} height={28} alt="pil venste" />
+        <span>Tilbake</span>
+      </Link>
+      <div className={styles.blob}>
+        <img src={blob} alt="blob" />
+      </div>
+      <div className={styles.header}>
+        <div className={styles.title}>
+          <h3>Aktivitetene på lørdag</h3>
+        </div>
+        <p>
+          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 ⛰️🌞
+        </p>
+      </div>
+      <ActivityBlock
+        title="Stisykling med Hemsedal Rides 🚲⛰️"
+        text="Mellom kl 10:00 – 16:00 kan dere ta stolheisen Lodge Express opp fjellet til stiene i Hemsedal Skisenter⛰️ Heisen ligger en kort sykkeltur fra hotellet. Her kan dere sykle ned og ta heisen opp igjen så mange ganger dere vil for å teste ut de ulike stiene. Disse stiene passer for både nybegynnere og adrenalin junkiesene blant oss💥 Sykkel og hjelm får dere låne av hotellet!"
+        link="https://hemsedal.com/sykling/hemsedal-rides"
+        reference="stisyklingen"
+        secondtext="Lunsj kan dere spise på skisenteret 🥪 (husk å ta vare på kvitteringen)"
+        picture={sykling}
+      />
+      <ActivityBlock
+        title="Hundekjøring og fjellvandring 🐕⛰️"
+        text={
+          <>
+            Dere tar bussen fra hotellet sammen med klatregjengen{' '}
+            <span className={styles.bold}>kl 09:00</span>. Vi er framme hos
+            Hemsedal Husky kl 10:25, og så er det hundekjøring fra kl 10:30🥳
+            Her får vi litt over en time hundekjøring med guide. 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"
+        secondtext={
+          <>
+            Vi blir hentet med bussen igjen kl 11:45 og er framme på hotellet ca
+            12:45. De som vil kan så gå på tur rundt{' '}
+            <Link href="https://hemsedal.com/artikler/rjukandefossen">
+              Rjukandefossen
+            </Link>{' '}
+            (det ser helt sykt fint ut på bildene omg). Turen tar 3 timer
+            tur/retur. Og man kan bade!!! Ellers kan man også henge på hotellet
+            og slappe av etter hundekjøringen, det velger man selv 🤗
+          </>
+        }
+        picture={hund}
+      />
+      <ActivityBlock
+        title="Via Ferrata klatring med guide 🧗"
+        text={
+          <>
+            Dere tar bussen fra hotellet sammen med hundegjengen{' '}
+            <span className={styles.bold}>kl 09:00</span>, og blir sluppet av
+            der dere skal møte guiden og resten av gruppen som skal klatre 🚌
+            Her tar erfarne guider deg med opp bratte fjellsider og langs trange
+            fjellhyller (hjelp) på en rute som tar deg til Vesle Røggjin. Det
+            tar 3-5 timer, avhengig av nivået til de som klatrer💫 Men ikke vær
+            for treig, for bussen plukker dere opp igjen kl 12:30 og kjører dere
+            tilbake til hotellet🤠
+          </>
+        }
+        link="https://hemsedal.com/hemsedal-fjellsport/via-ferrata"
+        reference="klatreturen"
+        secondtext="Når dere er tilbake på hotellet så kan dere velge om dere vil på tur med hundegjengen (info om turen finner du under programmet til hundekjøring) eller slappe av på hotellet🌟"
+        picture={via}
+      />
+
+      <a href="#top">
+        <div className={styles.bop}>
+          <img src={bop} alt="big blobs" />
+        </div>
+      </a>
     </div>
-);
+  );
 };
 
-export default Activities;
+export default Activities;
diff --git a/src/hemsedal24/components/ActivityBlock.module.css b/src/hemsedal24/components/ActivityBlock.module.css
@@ -45,6 +45,9 @@ p {
     width: 100%;
   }
 
+  .textportion h2 {
+    font-size: 1.8rem;
+  }
   p {
     margin: 0;
     color: var(--Secondary-4-D4, #2f2e2b);

diff --git a/src/hemsedal24/components/ActivityBlock.tsx b/src/hemsedal24/components/ActivityBlock.tsx
@@ -4,13 +4,13 @@ import Link from "next/link";
 import styles from "./ActivityBlock.module.css"
 import { ReactNode } from "react";
 
-export default function ActivityBlock({ title, text, link, reference, secondtext, picture}: { title: string, text: string, link: string, reference: string,secondtext:ReactNode,picture:string}) {
+export default function ActivityBlock({ title, text, link, reference, secondtext, picture}: { title: string, text: ReactNode, link: string, reference: string,secondtext:ReactNode,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>
+                <p>Du finner mer informasjon om {reference} <Link href={link}>HER</Link>.</p>
                 <p>{secondtext}</p>
             </div>
             <div className={styles.picture}><img src={picture} alt='bilde' /></div>

diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css
@@ -2,7 +2,7 @@ section {
 }
 .container {
   position: relative;
-  width: 100vw;
+  width: 100%;
   height: 30rem;
 }
 
@@ -46,14 +46,14 @@ section {
 
 .hemsedalhero1 {
   position: absolute;
-  max-width: 50%;
+  width: 35%;
   left: 0;
   top: -4rem;
 }
 
 .hemsedalhero2 {
   position: absolute;
-  max-width: 20%;
+  width: 21%;
   top: 0;
   right: 0;
 }
@@ -66,7 +66,7 @@ section {
     max-width: 0%;
   }
   .hemsedalhero1 {
-    max-width: 160%;
+    width: 75%;
     left: 0;
     top: 0;
   }

diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css
@@ -83,6 +83,13 @@
   padding: 0 6px 0 0;
   font-weight: 400;
   font-family: 'Graphik Web';
+  font-size: 1rem;
+}
+
+@-moz-document url-prefix() {
+  .navigation span {
+    font-size: 1.2rem;
+  }
 }
 
 .navigation img {
@@ -195,7 +202,7 @@ html {
   flex-shrink: 0;
   display: flex;
   justify-content: center;
-  width: 20%;
+  width: 25rem;
   z-index: 10;
   margin: 0 auto;
 }

diff --git a/src/hemsedal24/images/activityarrow.svg b/src/hemsedal24/images/activityarrow.svg
diff --git a/src/hemsedal24/images/kosevors.svg b/src/hemsedal24/images/kosevors.svg
diff --git a/src/hemsedal24/images/mobileactivityarrow.svg b/src/hemsedal24/images/mobileactivityarrow.svg
diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx
@@ -58,7 +58,7 @@ const Hemsedal24: NextPage = () => {
             <span className={styles.italic}> ikke</span> 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💥</p>
-        <p>Under finner du programmet for turen. </p></div>
+        <p>Og bilder!! Det er gøy å dele litt bilder underveis på turen, så vi skal ha vår egen lille fotobank her på denne nettsiden. Den kommer i løpet av uken, så stay tuned! 📸 </p></div>
         <div className={styles.latter}><img src={latter} alt="koser seg"/></div>
       </div>
       <div style={{display:'relative', marginBottom:"10%"}}><img style={{display:"absolute"}} src={mobile ? mobilebottomblub : bottomblub} alt="big blobs"/>  </div> 

diff --git a/src/hemsedal24/tingogtang.module.css b/src/hemsedal24/tingogtang.module.css
@@ -111,9 +111,13 @@ h4 {
   justify-content: space-between;
 }
 
-.pakkeliste img {
-  width: 100%;
+.koseimg {
+  width: 50%;
 }
+.koseimg img {
+  width: 90%;
+}
+
 .utsiktsblob {
   margin-top: -2rem;
 }
@@ -148,7 +152,7 @@ h4 {
   flex-shrink: 0;
   display: flex;
   justify-content: center;
-  width: 20%;
+  width: 25rem;
   z-index: 10;
   margin: 0 auto;
 }
@@ -215,19 +219,19 @@ h4 {
     margin-bottom: -30%;
   }
   .pakkeliste {
-    margin: 5rem 4.5rem 0 0;
     flex-direction: column;
-    margin-top: 7rem;
   }
   .koseimg {
+    width: 80%;
     position: relative;
-    top: -8rem;
-    right: -40%;
+    top: -7rem;
+    right: -70%;
   }
-  .pakkeliste img {
-    width: 15rem;
+  .koseimg img {
+    width: 100%;
     position: absolute;
   }
+
   .aktivitetene {
     flex-direction: column;
     align-items: flex-start;
@@ -260,14 +264,13 @@ h4 {
     margin-left: -5rem;
   }
   .utsiktsblob {
-    z-index: -1;
-    display: flex;
-    justify-content: center;
     margin: 5rem 0 5rem 0;
-    min-width: 100%;
+    width: 160%;
+    position: relative;
+    left: -6rem;
   }
   .utsiktsblob img {
-    min-width: 150%;
+    width: 100%;
   }
   .bop {
     width: 60%;

diff --git a/src/hemsedal24/tingogtang.tsx b/src/hemsedal24/tingogtang.tsx
@@ -79,7 +79,7 @@ const TingogTang: NextPage = () => {
         </div>
         <div className={styles.pakkeliste}>
           <div className={styles.koseimg}>
-            <img src={kosevors} alt="strandsenger" />
+            <img src={kosevors} alt="strandsenger"/>
           </div>
           <div>
             <h4>Husk å ta med:</h4>
@@ -124,15 +124,10 @@ const TingogTang: NextPage = () => {
             </div>
           )}
         </div>
-        {mobile ? (
+
           <div className={styles.utsiktsblob}>
-            <img src={utsiktmobil} alt="utsiktsblob" />
+            <img src={mobile ? utsiktmobil :utsiktpc} alt="utsiktsblob" />
           </div>
-        ) : (
-          <div className={styles.utsiktsblob}>
-            <img src={utsiktpc} alt="utsiktsblob" />
-          </div>
-        )}
         <a href="#ting">
           <div className={styles.bop}>
             <img src={bop} alt="big blobs" />