Feature/footer and other bits

.gitconfig

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

app.vue

@@ -6,6 +6,7 @@
       <main class="container col-12 py-3" style="--bs-bg-opacity: 0.8">
         <NuxtPage />
       </main>
+      <AppFooter />
     </client-only>
   </div>
 </template>

assets/app.scss

@@ -7,17 +7,24 @@
   --text-primary: #501017;
 }
 
+@mixin bigBit() {
+  display: flex;
+  flex-direction: column;
+  min-height: 1px;
+  flex: 1;
+  font-family: 'Fraunces';
+}
+
 html,
 body,
 #__nuxt,
 #__nuxt > *,
 main {
+  @include bigBit();
+}
+
+html, body, #__nuxt, #__nuxt > * {
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 1px;
-  flex: 1;
-  font-family: 'Fraunces';
 }
 
 @for $i from 1 through 6 {
@@ -31,4 +38,24 @@ main {
   &::after {
     display: none;
   }
+}
+
+#footer {
+  background-image: url('/img/footer.jpg');
+  background-position: center 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding: 1rem;
+  margin-top: auto;
+
+  @for $i from 1 through 100 {
+      @media screen and (min-width: #{($i - 1) * 24}px) {
+        min-height: #{$i * 5.5}px;
+      }
+  }
+}
+
+img {
+  height: auto;
+  width: auto;
 }

components/AppFooter.vue

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

pages/accommodation.vue

@@ -1,33 +1,34 @@
 <script setup lang="ts">
 interface Option {
   name: string;
-  description: string;
+  description?: string;
   url: string;
 }
-
-/**
- * Delta by Marriott Nottingham Belfry
- * 0115 973 9393
- * thenottinghambelfry.co.uk
- *
- * Travelodge Wollaton Park
- * 0871 559 1835
- * Travelodge.co.uk
- *
- * Double Tree by Hilton
- * Nottingham Gateway
- * 0115 979 4949
- *
- * Premier Inn - The Phoenix Centre
- * 0333 321 1378
- * Millennium Way West, NG8 6AS
- *
- * Holiday Inn Derby/Nottingham
- * 0871 942 9062
- * hiderbynottinghamhotel.co.uk
- */
-
 const options: Array<Option> = [
+  {
+    name: "Delta by Marriott Nottingham Belfry",
+    description:
+      "A four star hotel a mile from the M1, and close to Central Nottingham if you plan on taking in what Izzy and Jack's adoptive home city has to offer.",
+    url: "https://www.thenottinghambelfry.co.uk",
+  },
+  {
+    name: "Travelodge Wollaton Park",
+    description:
+      "Ideally located almost exactly between the church and the reception venue, you can't go too far wrong with a Travelodge that's basically attached to a steakhouse",
+    url: "https://www.travelodge.co.uk/hotels/474/Nottingham-Wollaton-Park-hotel",
+  },
+  {
+    name: "Double Tree by Hilton",
+    description:
+      "Very handy for the trams, and apparently you get a free warm cookie on checking in!",
+    url: "https://www.hilton.com/en/hotels/emanudi-doubletree-nottingham-gateway/",
+  },
+  {
+    name: "Holiday Inn Derby/Nottingham",
+    description:
+      "Just 200 yards from Junction 25 of the M1, this is an inexpensive and convenient option",
+    url: "https://www.hiderbynottinghamhotel.co.uk",
+  },
   {
     name: "Premier Inn Nottingham West",
     description:
@@ -36,7 +37,8 @@ const options: Array<Option> = [
   },
   {
     name: "The Star Inn, Beeston",
-    description: "Nice pub",
+    description:
+      "A delightful pub in the heart of Beeston, meaning it's a short walk to the church and a great breakfast in the morning. Jack's parents have been known to stay here as well.",
     url: "https://www.starbeeston.co.uk/pub-accommodation",
   },
 ];
@@ -49,13 +51,9 @@ const options: Array<Option> = [
     as straightforward as possible to get somewhere to spend the night.
   </p>
 
-  <ul>
-    <li v-for="(item, index) in options" :key="index" class="card mb-3">
-      <div class="card-header" v-text="item.name" />
-      <div class="card-body" v-text="item.description" />
-      <div class="card-footer">
-        <a :href="item.url" class="btn btn-primary" target="_blank">Link</a>
-      </div>
-    </li>
-  </ul>
+  <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>
 </template>

pages/events/the-ceremony.vue

@@ -2,6 +2,9 @@
 <template>
   <h1>The Ceremony</h1>
 
-  <p>The ceremony will be held at St John The Baptist Church in Beeston.</p>
+  <p>
+    The ceremony will be held at St John The Baptist Church in Beeston. It will
+    be presided over by Father Wayne Plimmer.
+  </p>
   <img src="/img/Church PNG.png" width="2484" height="1782" class="w-100" />
 </template>

pages/index.vue

@@ -5,15 +5,18 @@ import type { Ref } from "vue";
 const col1Width = ref(10);
 const otherColWidths = computed(() => (100 - col1Width.value) / 2);
 
-const itinerary = ref([
+interface ItineraryItem {
+  what: string;
+  where: Array<string>;
+}
+
+const itinerary = ref<Array<ItineraryItem>>([
   {
     what: "Ceremony",
-    when: Date.parse("22 Sep 2024 13:00:00 GMT"),
     where: ["Beeston Parish Church", "Beeston", "Nottingham", "NG9 1GA"],
   },
   {
     what: "Reception",
-    when: Date.parse("22 Sep 2024 19:00:00 GMT"),
     where: ["Swancar Farm", "Trowell Moor", "Trowell", "Nottingham", "NG9 3PQ"],
   },
 ]);
@@ -59,7 +62,7 @@ const links: Ref<Array<Link>> = ref([
     <table class="table mb-0">
       <thead>
         <tr>
-          <th :width="`${col1Width}%`" scope="col"></th>
+          <th class="px-3" :width="`${col1Width}%`" scope="col">What</th>
           <th
             v-for="(item, index) in itinerary"
             :key="index"
@@ -70,14 +73,6 @@ const links: Ref<Array<Link>> = ref([
         </tr>
       </thead>
       <tbody>
-        <tr>
-          <th class="p-3" scope="row">When</th>
-          <td
-            v-for="(item, index) in itinerary"
-            :key="index"
-            v-text="new Date(item.when).toUTCString()"
-          />
-        </tr>
         <tr>
           <th class="p-3" scope="row">Where</th>
           <td v-for="(item, index) in itinerary" :key="index" class="p-0">