more styling, setup for additional pages

pages/varianttur/guildford23/aktiviteter.tsx

@@ -0,0 +1 @@
+export { default } from 'src/varianttur/guildford23/aktiviteter';

pages/varianttur/guildford23/tips.tsx

@@ -0,0 +1 @@
+export { default } from 'src/varianttur/guildford23/tips';

src/varianttur/guildford23/aktiviteter/aktiviteter.module.css

@@ -0,0 +1,4 @@
+.container {
+  background-color: var(--color-primary__shade1);
+  color: var(--color-standard__white);
+}

src/varianttur/guildford23/aktiviteter/index.tsx

@@ -0,0 +1,9 @@
+import style from './aktiviteter.module.css';
+
+export default function Aktiviteter() {
+  return (
+    <div className={style.container}>
+      <h1>Aktiviteter</h1>
+    </div>
+  );
+};

src/varianttur/guildford23/components/description/description.module.css

@@ -1,6 +1,6 @@
 .descriptionContainer {
   background-color: var(--color-primary__shade2);
-  padding: 4rem 8rem 12rem;
+  padding: 7rem 15rem 12rem;
   position: relative;
   height: 60rem;
 }
@@ -10,6 +10,10 @@
   z-index: 10;
 }
 
+.descriptionText {
+  width: 45%;
+}
+
 .importantText {
   text-transform: uppercase;
   font-weight: bold;
@@ -33,11 +37,11 @@
 .imageBlobContainer {
   position: absolute;
   bottom: 0;
-  right: 0;
+  right: 3rem;
 }
 
 .imageContainer {
   position: absolute;
   bottom: 3rem;
-  right: 1rem;
+  right: 5rem;
 }

src/varianttur/guildford23/components/description/description.tsx

@@ -9,20 +9,22 @@ const Description = () => {
         <BackgroundBlob />
       </div>
       <div className={style.textContainer}>
-        <h2>Stop being so apple handome, this is going to be jolly good!</h2>
-        <p>
-          Hundre og <span className={style.importantText}>fem</span>ti mil sørover, litt vest og nedover ligger Guildford – en liten by i distriktet Surrey. Sjølberga med både slott og vinskole, shoppinggate og eget teater. Fritt for vær og vind(🤞), akkurat der vi skal bo på Harbour hotel. Her skal vi feire <span className={style.importantText}>5års</span> dagen til Variant🎉 
-        </p>
-        <p>
-          Det blir litt faglig opplegg 🤓, vi skal spise digg mat 🍴, og dra ut på livlige, typisk engelske aktiviteter 🏰 🎢 🍷 🍸🌆. Vi har prøvd å ha noe for alle og enhver, både med mat og utflukter – håper det faller i smak. Det er også lagt inn tid på lørdagen til å ha litt frilek 🛝, forslag til påfunn finner du under praktisk info.
-        </p>
-        <p className={style.descriptionFooter}>
-          <span className={style.descriptionFooterText}>(“Og hva skjer med båtturen da?” tenker du,</span> 
-          <br/>
-          <span className={style.descriptionFooterText}>og vi må faktisk skuffe dere: ingen båttur i år</span>
-          <span>😱🚨</span>
-          <span className={style.descriptionFooterText}>)</span>
-        </p>
+        <h2>Stop being so apple handsome,<br /> this is going to be jolly good!</h2>
+        <div className={style.descriptionText}>
+          <p>
+            Hundre og <span className={style.importantText}>fem</span>ti mil sørover, litt vest og nedover ligger Guildford – en liten by i distriktet Surrey. Sjølberga med både slott og vinskole, shoppinggate og eget teater. Fritt for vær og vind(🤞), akkurat der vi skal bo på Harbour hotel. Her skal vi feire <span className={style.importantText}>5års</span> dagen til Variant🎉 
+          </p>
+          <p>
+            Det blir litt faglig opplegg 🤓, vi skal spise digg mat 🍴, og dra ut på livlige, typisk engelske aktiviteter 🏰 🎢 🍷 🍸🌆. Vi har prøvd å ha noe for alle og enhver, både med mat og utflukter – håper det faller i smak. Det er også lagt inn tid på lørdagen til å ha litt frilek 🛝, forslag til påfunn finner du under praktisk info.
+          </p>
+          <p className={style.descriptionFooter}>
+            <span className={style.descriptionFooterText}>(“Og hva skjer med båtturen da?” tenker du,</span> 
+            <br/>
+            <span className={style.descriptionFooterText}>og vi må faktisk skuffe dere: ingen båttur i år</span>
+            <span>😱🚨</span>
+            <span className={style.descriptionFooterText}>)</span>
+          </p>
+        </div>
       </div>
       <div className={style.imageBlobContainer}>
         <ImageBlob />

src/varianttur/guildford23/components/hero/hero.module.css

@@ -11,8 +11,13 @@
   width: 50%;
 }
 
+.navbarContainer {
+  margin-left: 8rem;
+}
+
 .imageContainer {
   position: relative;
+  width: 50%;
 }
 
 .blobContainer {

src/varianttur/guildford23/components/hero/hero.tsx

@@ -8,7 +8,9 @@ const Hero = () => {
     <div id='hero' className={style.heroContainer}>
       <div className={style.contentContainer}>
         <Heading />
-        <Navbar />
+        <div className={style.navbarContainer}>
+          <Navbar />
+        </div>
       </div>
       <div className={style.imageContainer}>
         <div className={style.blobContainer}>

src/varianttur/guildford23/components/info/info.module.css

@@ -24,7 +24,7 @@
 .hotelTextContainer {
   position: absolute;
   z-index: 10;
-  top: 13rem;
+  top: 15rem;
 }
 
 .foodBlobContainer {
@@ -60,11 +60,6 @@ h3 {
   margin-bottom: 1rem;
 }
 
-.phone {
-  margin-top: 1rem;
-  margin-bottom: 2.5rem;
-}
-
 .addressContainer {
   margin-bottom: 5rem;
   display: flex;

src/varianttur/guildford23/components/info/info.tsx

@@ -14,7 +14,6 @@ const Info = () => {
       </div>
       <div className={style.hotelTextContainer}>
         <h3>Harbour Hotel Guildford</h3>
-        <p className={style.phone}>☎️ +????</p>
         <div className={style.addressContainer}>
           <span>📍</span>
           <div>

src/varianttur/guildford23/components/itinerary/itinerary.module.css

@@ -1,34 +1,38 @@
-.day {
-  padding: 4rem 8rem 12rem;
-  position: relative;
-  height: 60rem;
+.dayContainer {
+  padding: 4rem 8rem 0;
 }
 
-.oddDay {
-  composes: day;
-  background-color: var(--color-primary__shade2);
+.navbarContainer {
+  margin: 0 auto 7rem;
+  width: 50%;
 }
 
-.evenDay {
-  composes: day;
+.evenDayContainer {
+  composes: dayContainer;
   background-color: var(--color-primary__shade1);
 }
 
+.oddDayContainer {
+  composes: dayContainer;
+  background-color: var(--color-primary__shade2);
+}
+
+.day {
+  position: relative;
+  height: 40rem;
+}
+
 .backgroundBlobContainer {
   position: absolute;
-  top: 25%;
+  top: 0;
   left: 50%;
-  transform: translate(-50%, -25%);
+  transform: translate(-50%);
 }
 
 .textContainer {
   position: absolute;
   z-index: 10;
-}
-
-.dayHeading {
-  font-size: 2.813rem;
-  margin-bottom: 5rem;
+  top: 2rem;
 }
 
 .list {
@@ -53,14 +57,18 @@ time {
   padding-bottom: 2rem;
 }
 
+.unborderedListItem {
+  margin-left: 0.2rem;
+}
+
 .listItemTitle {
   font-size: 1.25rem;
   line-height: 160%;
-  margin-top: -1rem;
+  margin-top: -0.8rem;
 }
 
 .list .listItemTitle::before {
-  content: url('./itinirary-blob.svg');
+  content: url('./itinerary-blob.svg');
   margin-left: -0.875rem;
 }
 
@@ -73,8 +81,7 @@ time {
   display: flex;
 }
 
-.externalLink {
+.link {
   font-size: 0.813rem;
-  margin-left: 0.2rem;
   text-decoration: underline;
 }