Merge pull request #155 from GingertronMk1/feature/fixes

.gitconfig

@@ -1,2 +1 @@
-[push]
-autoSetupRemote = true
+push.autoSetupRemote = true

app.vue

@@ -2,8 +2,7 @@
   <div>
     <client-only>
       <AppNav />
-      <img src="/img/hero-banner.png" width="1600" height="400" class="w-100" />
-      <main class="container col-12 py-3" style="--bs-bg-opacity: 0.8">
+      <main class="col-12" style="--bs-bg-opacity: 0.8">
         <NuxtPage />
       </main>
       <AppFooter />

assets/app.scss

@@ -1,10 +1,16 @@
 @use "sass:math";
 @import 'fonts';
 
+$primary: rgb(224,53,78);
+$secondary: rgb(169,211,244);
+$text-primary: #501017;
+$green: rgb(88, 109, 76);
+
 :root {
-  --primary: rgb(224,53,78);
-  --secondary: rgb(169,211,244);
-  --text-primary: #501017;
+  --primary: #{$primary};
+  --secondary: #{$secondary};
+  --text-primary: #{$text-primary};
+  --green: #{$green};
 }
 
 @mixin bigBit() {
@@ -58,4 +64,88 @@ html, body, #__nuxt, #__nuxt > * {
 img {
   height: auto;
   width: auto;
+}
+
+@mixin shadowStroke($shadow-offset) {
+  $diagonal-offset: calc($shadow-offset * math.sqrt(2));
+  text-shadow:
+    $shadow-offset $shadow-offset 0 #000,
+    (-$shadow-offset) $shadow-offset 0 #000,
+    (-$shadow-offset) (-$shadow-offset) 0 #000,
+    $shadow-offset (-$shadow-offset) 0 #000,
+    $diagonal-offset $diagonal-offset 0 #000,
+    (-$diagonal-offset) $diagonal-offset 0 #000,
+    (-$diagonal-offset) (-$diagonal-offset) 0 #000,
+    $diagonal-offset (-$diagonal-offset) 0 #000
+    ;
+}
+
+#homepage-hero {
+  position: relative;
+  height: auto;
+  width: 100%;
+  margin-bottom: 1rem;
+
+  > #homepage-hero-image {
+    width: 100%;
+  }
+
+  > #homepage-hero-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 50%;
+    color: darken($green, 30%);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    background: none;
+
+    > h1 {
+      font-size: 2rem;
+      text-align: right;
+      text-wrap: nowrap;
+
+      @for $i from 30 through 60 {
+        @media (min-width: #{$i * 32}px) {
+            font-size: #{$i * 0.1}rem;
+        }
+      }
+    }
+
+    @media (max-width: 680px) {
+        right: 0;
+        background-color: #ffffff40;
+
+        > h1 {
+          text-align: left;
+        }
+    }
+
+  }
+}
+
+#itinerary {
+  .itinerary-item {
+    display: flex;
+    flex-direction: row;
+
+    $padding: 0.4rem;
+
+    &__time, &__name {
+      flex: 1;
+    }
+
+    &__name {
+      padding-left: $padding;
+      border-left: 2px solid $green;
+    }
+
+    &__time {
+      padding-right: $padding;
+      border-right: 2px solid $green;
+      text-align: right;
+    }
+  }
 }

components/AppFooter.vue

@@ -1,4 +1,4 @@
 <script setup></script>
 <template>
-  <footer id="footer"></footer>
+  <footer id="footer" class="mt-4"></footer>
 </template>

components/AppNav.vue

@@ -5,10 +5,6 @@ const navItems = ref([
     text: "Home",
     to: "/",
   },
-  {
-    text: "Schedule",
-    to: "/running-order",
-  },
   {
     text: "Locations",
     children: [
@@ -28,6 +24,10 @@ const navItems = ref([
     text: "Accommodation",
     to: "/accommodation",
   },
+  {
+    text: "Links",
+    to: "/invitation-link",
+  },
 ]);
 </script>
 <template>

pages/accommodation.vue

@@ -44,16 +44,20 @@ const options: Array<Option> = [
 ];
 </script>
 <template>
-  <h1>Hotels and such nearby</h1>
+  <div class="container py-3">
+    <h1>Hotels and such nearby</h1>
 
-  <p>
-    We recognise that it's a long trip for many of you so we wanted to make it
-    as straightforward as possible to get somewhere to spend the night.
-  </p>
+    <p>
+      We recognise that it's a long trip for many of you so we wanted to make it
+      as straightforward as possible to get somewhere to spend the night.
+    </p>
 
-  <section v-for="(item, index) in options" :key="index" class="mb-3">
-    <h3 v-text="item.name" />
-    <p v-text="item.description" />
-    <a :href="item.url" class="btn btn-primary me-auto" target="_blank">Link</a>
-  </section>
+    <section v-for="(item, index) in options" :key="index" class="mb-5">
+      <h3 v-text="item.name" />
+      <p v-text="item.description" />
+      <a :href="item.url" class="btn btn-primary me-auto" target="_blank"
+        >Link</a
+      >
+    </section>
+  </div>
 </template>