Fix responsive design elements

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

@@ -10,7 +10,7 @@
 <Island {variables}>
     
     {#if $ql.length === 0}
-    <p>Go to <a href="/null">settings</a> to add your Quick Links</p>
+    <p>Go to <a href="/more/settings">settings</a> to add your Quick Links</p>
     {/if}
     <div class="buttons">
         {#each $ql as link}

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

@@ -11,7 +11,13 @@
         console.log(qlData);
     }
 
-    function saveQl() {
+    let saveButton = "Save"
+
+    async function timeout(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+    async function saveQl() {
       // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
       const inputs = document.getElementsByClassName('qlInput');
       let inputLinks = []
@@ -23,13 +29,18 @@
       }
       console.log(inputLinks)
       ql.set(inputLinks)
+      saveButton = "✔"
+      await timeout(3000);
+      saveButton = "Saved"
     }
 
     function clearQl() {
         ql.set([]);
+        saveButton = "Saved"
     }
 
     function addQlBox() {
+        saveButton = "Save"
         const updatedQl = [...$ql, ""];
         $ql = updatedQl;
         ql.set(updatedQl);
@@ -47,12 +58,13 @@
       <p>Click the + button to add links</p>
     {/if}
     <div id="buttons" class="buttons">
+      <p>Quick links can be CRS Codes or Headcodes</p>
       {#each qlData as link}
         <input class="qlInput" type="text" value={link}>
       {/each}
       <button on:click={addQlBox} id="qlAdd">+</button>
     </div>
-    <button on:click={saveQl}>Save</button>
+    <button on:click={saveQl}>{@html saveButton}</button>
     <button on:click={clearQl}>Clear</button>
   </Island>
   

src/lib/navigation/nav.svelte

@@ -22,7 +22,7 @@
 <footer>
   {#each links as item}
         <a href={item.path} class:active={$page.url.pathname == item.path}>
-          <img src="{item.svgPath}" alt="">
+          <img src="{item.svgPath}" alt="{item.title}">
           <br>
           <span>{item.title}</span>
         </a>

src/routes/more/versions/+page.svelte

@@ -20,7 +20,8 @@
 <style>
     img {
         width: 50%;
-        margin-top: 85px;
+        max-width: 250px;
+        margin-top: 55px;
         margin-bottom: 85px;
     }
 </style>