Tidy general styling and introduce <Welcome /> overlay

src/lib/islands/island.svelte

@@ -12,6 +12,7 @@ span {
     font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-weight: 600;
     font-size: 20px;
+    color: var(--main-text-color)
 }
 div {
     width: 85%;

src/lib/islands/overlay-island.svelte

@@ -12,6 +12,7 @@
 <style>
 span {
     font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    color: var(--main-text-color);
     font-weight: 600;
     font-size: 20px;
 }

src/lib/ldb/alert-bar.svelte

@@ -93,7 +93,7 @@
         background-color: var(--main-alert-color);
         opacity: 0.9;
         width: 100%;
-        max-height: 40%;
+        max-height: 80vh;
         overflow-y: auto;
         overflow-x: clip;
         left: 0;
@@ -104,8 +104,8 @@
         text-align: center;
         width: 80%;
         margin:auto;
-        padding-top: 10px;
-        padding-bottom: 10px;
+        margin-top: 10px;
+        margin-bottom: 10px;
         font-weight: 600;
     }
     .displayAlerts {

src/lib/navigation/header.svelte

@@ -17,6 +17,7 @@
 <style>
 .headerBar {
     background: var(--overlay-color-solid);
+    color: var(--main-text-color);
     position: fixed;
     top: 0; left: 0;
     width: 100%;

src/lib/overlays/welcome.svelte

@@ -0,0 +1,49 @@
+<script>
+    import OverlayIsland from "$lib/islands/overlay-island.svelte";
+
+    const variables = {
+        title: "Welcome to OwlBoard"
+    }
+    const version = "2023.7.1"
+    let pageNum = 0;
+
+    function pageUp() {
+        pageNum ++;
+        console.log(`Welcome page: ${pageNum}`)
+    }
+
+    function pageDn() {
+        pageNum --;
+        console.log(`Welcome page: ${pageNum}`)
+    }
+
+    const pageText = [
+        "<h3>A brand new look</h3>" +
+          "<p>OwlBoard has a brand new look, making it even faster for you to access the data</p>" +
+          "<p>If you have signed up before, you won't have to to it again and any customised Quick Links are here waiting for you</p>",
+        "<h3>Faster Access</h3>" +
+          "<p>Both live station data, and timetable search is available from the homepage.  Making it faster to get the info you need</p>" +
+          "<p>Search the timetable using a headcode to see a trains details - OwlBoard now shows data for all TOCs and FOCs.</p>" +
+          "<p>For GWR services: if a PIS code is available for a service, you'll see it alongside the train details.</p>",
+        "<h3>PIS Finder</h3>" +
+          "<p>Don't worry, the PIS finder hasn't gone away.  It has even been moved to the new navigation bar for faster access</p>" +
+          "<p>If there isn't a PIS code available for a given headcode, you can use this tool to search by start and end stations, enabling you to utilise a different code and skipping stops as needed.</p>",
+        "<h3>Everything Else</h3>" +
+          "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
+    ]
+</script>
+
+<OverlayIsland {variables}>
+  <h2>What's new in OwlBoard {version}</h2>
+    <div>
+        {@html pageText[pageNum]}
+    </div>
+    <button type="button" on:click={pageDn}>&lt;</button>
+    <button type="button" on:click={pageUp}>&gt;</button>
+</OverlayIsland>
+
+<style>
+    div {
+        color: white;
+    }
+</style>