fine tuning

varianter · Aug 22, 2024 · 1eb1843 · 1eb1843
1 parent a3d96e9
commit 1eb1843
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 137 deletions.
diff --git a/src/hemsedal24/activities.module.css b/src/hemsedal24/activities.module.css
@@ -17,6 +17,9 @@
   justify-content: center;
   margin-right: 5%;
 }
+html {
+  scroll-behavior: smooth;
+}
 
 .tilbake {
   color: var(--color-standard__black);
@@ -73,9 +76,12 @@
 .blob {
   z-index: auto;
   min-width: 35%;
+  position: relative;
+}
+.blob img {
   position: absolute;
-  top: 0;
-  margin: 0 0 0 30%;
+  top: -7rem;
+  right: -10rem;
 }
 
 .title {

diff --git a/src/hemsedal24/activities.tsx b/src/hemsedal24/activities.tsx
@@ -32,14 +32,14 @@ const Activities: NextPage = () => {
                 <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.blob}><img src={blob} alt="blob"/></div>
             <div className={styles.header}>
             <div className={styles.title}><h3>Aktivitetene på lørdag</h3></div>  
-            <span>
+            <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 ⛰️🌞 
-            </span></div>
+            </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"

diff --git a/src/hemsedal24/components/ActivityBlock.module.css b/src/hemsedal24/components/ActivityBlock.module.css
@@ -49,7 +49,7 @@ p {
     margin: 0;
     color: var(--Secondary-4-D4, #2f2e2b);
     font-family: 'Graphik Web';
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-style: normal;
     font-weight: 400;
     line-height: 2rem; /* 200% */

diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css
@@ -1,21 +1,26 @@
 section {
 }
 .container {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
+  position: relative;
   width: 100vw;
   height: 30rem;
 }
 
+.blobandtext {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
 .text {
   display: flex;
   flex-direction: column;
   z-index: 10;
   font-size: 2.25rem;
   line-height: 2.5rem;
   justify-content: center;
-  margin-left: -20%;
+  position: relative;
 }
 
 .text > h1 {
@@ -32,50 +37,25 @@ section {
   justify-content: center;
 }
 
-.blob {
-  display: flex;
-  margin-left: -45%;
-  margin-top: 50%;
-  z-index: auto;
-  min-width: 65%;
-  position: relative;
-}
-
 .blobimg {
   position: absolute;
-  max-width: 100%;
+  max-width: 70%;
+  right: -5rem;
+  z-index: -1;
 }
 
-.img1 {
-  display: flex;
-  min-width: 45%;
-  position: relative;
-  justify-content: flex-start;
-}
 .hemsedalhero1 {
   position: absolute;
-  max-width: 100%;
+  max-width: 50%;
   left: 0;
-  margin: -5.5rem 0 0 -12rem;
-}
-
-.img2 {
-  display: flex;
-  min-width: 40%;
-  position: relative;
-  justify-content: flex-end;
+  top: -4rem;
 }
 
 .hemsedalhero2 {
   position: absolute;
-  max-width: 60%;
-  margin: -1rem 3rem 0 0;
-}
-
-.blobandtext {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
+  max-width: 20%;
+  top: 0;
+  right: 0;
 }
 
 @media (max-width: 500px) {
@@ -85,26 +65,23 @@ section {
   .hemsedalhero2 {
     max-width: 0%;
   }
-  .img1 {
-    height: 30rem;
-  }
   .hemsedalhero1 {
     max-width: 160%;
-    margin: -7rem -20% -30% -70%;
+    left: 0;
+    top: 0;
   }
-
-  .blobandtext {
+  .blobimg {
+    top: 0;
+    transform: translateY(-25%);
+    max-width: 86%;
   }
 
-  .blob {
-    width: 15rem;
-    height: 15.4rem;
-    flex-shrink: 0;
-    margin: 0 -15% 0 -48%;
+  .blobandtext {
+    align-items: flex-end;
   }
 
   .text > h1 {
-    font-size: 4.25rem;
+    font-size: 5rem;
     font-weight: 400;
     line-height: 5.1rem;
   }
@@ -119,9 +96,8 @@ section {
   }
 
   .text {
-    display: flex;
-    align-content: center;
-    padding-left: 12rem;
+    margin-top: 25rem;
+    padding-right: 1rem;
   }
   .container {
     flex-direction: column;

diff --git a/src/hemsedal24/components/Hero.tsx b/src/hemsedal24/components/Hero.tsx
@@ -1,25 +1,33 @@
-import styles from "./Hero.module.css";
-import blob from "../images/blob.svg";
-import retreatmobile from "../images/retreatmobile.svg"
-import retreat from "../images/Retreatclub-fyri-solbaddar.svg"
-import hemsedalHero2 from "../images/hemsedalhero2.svg"
+import styles from './Hero.module.css';
 
-export default function Hero({mobile}: {mobile:boolean}) {
-  return <section id="hero">
-    <div className={styles.container}>
-
-    <div className={styles.img1}><img src={mobile ? retreatmobile : retreat} alt="hemsedalbilde" className={styles.hemsedalhero1}/></div>
+import blob from '../images/blob.svg';
+import retreatmobile from '../images/retreatmobilee.svg';
+import retreat from '../images/Retreatclub-fyri-solbaddar.svg';
+import hemsedalHero2 from '../images/hemsedalhero2.svg';
+
+export default function Hero({ mobile }: { mobile: boolean }) {
+  return (
+    <section id="hero">
+      <div className={styles.container}>
+          <img
+            src={mobile ? retreatmobile : retreat}
+            alt="hemsedalbilde"
+            className={styles.hemsedalhero1}
+          />
         <div className={styles.blobandtext}>
-        <div className={styles.text}>
-          <h1>Hemsedal</h1>
-          <h2>30. august-1. september</h2>
-        </div>
-        <div className={styles.blob}>
-          <img className={styles.blobimg} src={blob} alt="blobben" />
+          <div className={styles.text}>
+            <h1>Hemsedal</h1>
+            <h2>30. august-1. september</h2>
+            <img className={styles.blobimg} src={blob} alt="blobben" />
+          </div>
+            
         </div>
-        </div>
-        <div className={styles.img2}><img src={hemsedalHero2} alt="hemsedalbilde" className={styles.hemsedalhero2}/></div>
-    </div>
-  </section>;
+          <img
+            src={hemsedalHero2}
+            alt="hemsedalbilde"
+            className={styles.hemsedalhero2}
+          />
+      </div>
+    </section>
+  );
 }
-
diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css
@@ -285,7 +285,7 @@ details[open] .disclosureArrow {
   }
 
   .program h2 {
-    font-family: Graphik;
+    font-family: 'Graphik Web';
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 600;