Further componentisation and advancements to homepage

src/lib/islands/input-island.svelte

@@ -8,22 +8,26 @@
     };
 </script>
 
+<Island {variables}>
 <form action={variables.action}>
     <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
     <br>
     <button class="form-button" type="submit">Submit</button>
 </form>
+</Island>
 
 <style>
     .form-input {
         width: 75%;
-        height: 30px;
+        height: 32px;
         margin-top: 5px;
         margin-bottom: 5px;
         border-radius: 50px;
         border: none;
         text-align: center;
         font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        text-transform: uppercase;
+        font-size: 15px;
     }
     .form-button {
         width: 50%;

src/lib/islands/island.svelte

@@ -1,9 +1,9 @@
 <script>
-    export const title = "Uninitialised"
+    export let variables = {title:"UNDEF"}
 </script>
 
 <div>
-    <span>{title}</span>
+    <span>{variables.title}</span>
     <slot />
 </div>
 
@@ -14,7 +14,7 @@ span {
     font-size: 20px;
 }
 div {
-    width: 75%;
+    width: 85%;
     max-width: 400px;
     margin: auto;
     margin-top: 25px;

src/lib/islands/quick-link-island.svelte

@@ -1,4 +1,57 @@
 <script>
+    import Island from "$lib/islands/island.svelte";
+    export let variables = {
+        title: "Quick Links",
+    };
 
+    let quicklinks = ['avn','1f21','2c98','bru','bri','bth','olf']
 </script>
 
+<Island {variables}>
+
+    {#if !quicklinks.length}
+    <p>Go to <a href="/null">settings</a> to add your Quick Links</p>
+    {/if}
+    <div class="buttons">
+        {#each quicklinks as link}
+            {#if link.length === 3}
+                <a class="link" href="/ldb?station={link}">
+                   {link.toUpperCase()}
+                </a>
+            {:else if link.length === 4}
+                <a class="link" href="/result-timetable?headcode={link}">
+                    {link.toUpperCase()}
+                </a>
+            {/if}
+        {/each}
+    </div>
+
+</Island>
+
+<style>
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 90%;
+        margin: auto;
+        padding-top: 5px;
+    }
+    .link {
+        flex: 1;
+        width: 20%;
+        min-width: 50px;
+        margin: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        text-decoration: none;
+        background-color: var(--main-bg-color);
+        color: var(--link-color);
+    }
+</style>
+