Hemsedalprogram

src/hemsedal24/components/Day.module.css

@@ -1,62 +1,59 @@
 .day {
-  padding: 7rem;
   display: flex;
   justify-content: space-around;
-  align-items: center;
+  flex-direction: column;
+  padding: 6rem 13rem 5rem 9rem;
 }
 
 .with_background {
   background-color: rgb(241 237 223);
 }
 
 .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 {
   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 {
-  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,15 +67,22 @@
     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;
@@ -96,18 +100,10 @@
   .day ul {
     list-style: none;
     padding-left: 1rem;
-    margin: 0 0;
+    width: 93%;
   }
 
-  .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: 4rem;
   }
 }

src/hemsedal24/components/Day.tsx

@@ -8,7 +8,7 @@ export default function Day({ title, children, background = false }: { title: st
       <h2>
         {title}
       </h2>
-      <div>
+      <div className={styles.timetable}>
         {children}
       </div>
     </div>

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;

src/hemsedal24/components/Hero.tsx

@@ -12,17 +12,17 @@ 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.img1}><img src={mobile ? retreatmobile : retreat} alt="hemsedalbilde" className={styles.hemsedalhero1}/></div>
         <div className={styles.blobandtext}>
         <div className={styles.text}>
           <h1>Hemsedal</h1>
           <h2>30. august-1. september</h2>
         </div>
         <div className={styles.blob}>
-          <img src={blob} alt="blobben" />
+          <img className={styles.blobimg} src={blob} alt="blobben" />
         </div>
         </div>
-        <img src={hemsedalHero2} alt="hemsedalbilde" className={styles.hemsedalhero2}/>
+        <div className={styles.img2}><img src={hemsedalHero2} alt="hemsedalbilde" className={styles.hemsedalhero2}/></div>
     </div>
   </section>;
 }