ready I thinkk

varianter · Aug 23, 2024 · 672fbfc · 672fbfc
1 parent 9e951ad
commit 672fbfc
Show file tree

Hide file tree

Showing 8 changed files with 254 additions and 102 deletions.
diff --git a/src/hemsedal24/activities.module.css b/src/hemsedal24/activities.module.css
@@ -23,9 +23,11 @@ html {
 
 .tilbake {
   color: var(--color-standard__black);
-  margin-top: 3rem;
-  width: 100%;
+  margin-top: 1rem;
+  width: 30%;
+  z-index: 1;
   display: flex;
+  gap: 5%;
   flex-direction: row;
   justify-content: flex-start;
   text-decoration: none;
@@ -80,6 +82,7 @@ html {
 }
 .blob img {
   position: absolute;
+  z-index: auto;
   top: -9rem;
   right: -20rem;
 }
@@ -100,11 +103,27 @@ html {
 
 @media (max-width: 500px) {
   .blob {
-    min-width: 90%;
+    min-width: 40%;
     top: 0;
     margin: -10% 0 0 20%;
   }
+  .blob {
+    width: 20%;
+  }
+
+  .tilbake {
+    margin: 0;
+    margin-bottom: 1rem;
+    align-items: center;
+  }
+  .tilbake img {
+    width: 20%;
+    vertical-align: middle;
+  }
 
+  element {
+    margin-left: 0;
+  }
   .tur {
     padding: 10% 10% 0 10%;
   }
@@ -137,4 +156,7 @@ html {
   .bop {
     width: 50%;
   }
+  p {
+    font-size: 1.2rem;
+  }
 }
diff --git a/src/hemsedal24/activities.tsx b/src/hemsedal24/activities.tsx
@@ -25,13 +25,13 @@ const Activities: NextPage = () => {
     }, []);
     return (
         <div  id="top" className={styles.tur}>
-                        {mobile ?<></> : <Link 
+            <meta name="theme-color" content="#EDE8D7"/>
+                        <Link 
             className={styles.tilbake}
-            href="/hemsedal24"
-            style={{display:'flex', gap: '1rem', lineHeight: '28px', marginLeft:"-20%"}}>
+            href="/hemsedal24">
                 <img src={arrowleft} width={24} height={28} alt="pil venste" />
                 <span>Tilbake</span>
-            </Link> }       
+            </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>  

diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css
@@ -133,7 +133,11 @@ html {
 }
 
 .overlay p {
-  font-size: 0.9rem;
+  font-size: 1.1rem;
+}
+
+.overlay h4 {
+  font-size: 2rem;
 }
 
 .latter {
@@ -279,7 +283,7 @@ details[open] .disclosureArrow {
   }
 
   .program h3 {
-    font-size: 1.875rem;
+    font-size: 2.875rem;
     font-style: normal;
     font-weight: 400;
   }

diff --git a/src/hemsedal24/images/arrowtoblob.svg b/src/hemsedal24/images/arrowtoblob.svg
diff --git a/src/hemsedal24/images/mobilutsikttingtang.png b/src/hemsedal24/images/mobilutsikttingtang.png
diff --git a/src/hemsedal24/images/retreatmobile.svg b/src/hemsedal24/images/retreatmobile.svg
diff --git a/src/hemsedal24/tingogtang.module.css b/src/hemsedal24/tingogtang.module.css
@@ -12,12 +12,17 @@
 .tur h3 {
   font-family: 'Recoleta';
 }
+html {
+  scroll-behavior: smooth;
+}
 
 .tilbake {
   color: var(--color-standard__black);
-  margin-top: 3rem;
-  width: 100%;
+  margin-top: 1rem;
+  width: 30%;
+  z-index: 1;
   display: flex;
+  gap: 5%;
   flex-direction: row;
   justify-content: flex-start;
   text-decoration: none;
@@ -44,6 +49,15 @@
   justify-content: center;
   align-items: center;
   margin-top: 5%;
+  text-wrap: wrap;
+  margin-bottom: 3rem;
+}
+
+.blobstyle {
+  position: absolute;
+  left: -50px;
+  z-index: -1;
+  min-width: 30%;
 }
 
 .tingogtangbody {
@@ -63,8 +77,9 @@
 }
 
 .ttheadertittel {
-  margin-left: -10%;
   z-index: 10;
+
+  position: relative;
 }
 
 .snokimg {
@@ -99,6 +114,9 @@ h4 {
 .pakkeliste img {
   width: 100%;
 }
+.utsiktsblob {
+  margin-top: -2rem;
+}
 .squiggly {
   padding-top: 3rem;
 }
@@ -110,6 +128,7 @@ h4 {
   height: 10rem;
   margin-left: -3%;
   margin-top: 3rem;
+  z-index: 1;
 }
 
 .aktivitetsblob img {
@@ -140,12 +159,30 @@ h4 {
 }
 
 @media (max-width: 500px) {
+  .blobstyle {
+    left: -50px;
+    min-width: 40%;
+  }
+  .tilbake {
+    margin: 0;
+    margin-bottom: 1rem;
+    align-items: center;
+  }
+  .tilbake img {
+    width: 20%;
+    vertical-align: middle;
+  }
   p {
     line-height: 2rem;
+    font-size: 1rem;
   }
+
   .ttheadertittel {
     min-width: 100%;
-    margin-left: -7.5rem;
+    z-index: 1;
+  }
+  .ttheadertittel h3 {
+    z-index: 1;
   }
   .tingogtangheader h3 {
     font-size: 1.675rem;
@@ -155,7 +192,9 @@ h4 {
     text-wrap: wrap;
   }
   .tingogtangheader {
+    z-index: 1;
     margin-top: 10%;
+    margin-bottom: 5rem;
   }
 
   .tingogtangbody {
@@ -164,7 +203,7 @@ h4 {
   }
   .tt_textbox {
     max-width: 100%;
-    font-size: 0.8rem;
+    font-size: 1rem;
     font-style: normal;
     line-height: 2rem;
   }
@@ -191,7 +230,7 @@ h4 {
   }
   .aktivitetene {
     flex-direction: column;
-    align-items: flex-end;
+    align-items: flex-start;
     justify-content: space-around;
     margin: 5rem 0rem 0rem 0;
   }
@@ -207,14 +246,11 @@ h4 {
   .mobilearrowblob {
     display: flex;
     min-width: 100%;
-    margin-left: -12%;
-    margin-bottom: -10%;
-    margin-top: -9%;
+    margin-top: -1rem;
   }
 
   .arrowtoblob {
     margin-top: 3rem;
-    margin-right: 3rem;
     flex-direction: row-reverse;
     align-items: center;
   }
@@ -224,9 +260,10 @@ h4 {
     margin-left: -5rem;
   }
   .utsiktsblob {
+    z-index: -1;
     display: flex;
     justify-content: center;
-    margin: -9rem 0 -5rem 0;
+    margin: 5rem 0 5rem 0;
     min-width: 100%;
   }
   .utsiktsblob img {