📝 Add issue tracker to footer

Also improve footer styling

src/assets/cardfoldr.css

@@ -15,6 +15,29 @@ main, footer {
     margin: 0 auto;
 }
 
+footer {
+    display: flex;
+    justify-content: space-between;
+    flex-direction:row;
+    margin: 1em auto;
+}
+
+footer span {
+    flex: 1;
+}
+
+footer span.left {
+    text-align: left;
+}
+
+footer span.center {
+    text-align: center;
+}
+
+footer span.right {
+    text-align: right;
+}
+
 @media only screen and (max-width: 480px) {
     main, footer {
         margin: 0 1em;

src/assets/cardfoldr.js

@@ -1054,10 +1054,9 @@ window.onload = async () => {
     try {
         const versionInfo = await fetch("./version.json");
         const versionData = await versionInfo.json();
-        const version = versionData.commit && versionData.build && versionData.date ? `Build #${versionData.build} of commit ${versionData.commit}` : "Local build";
 
         const versionElement = document.getElementById("version");
-        versionElement.innerHTML = ` · ${version}`;
+        versionElement.innerHTML = versionData.commit && versionData.build && versionData.date ? `Build #${versionData.build} of commit ${versionData.commit}` : "Local build";
     } catch (e) {
         console.error("Error loading version information", e);
     }

src/index.html

@@ -330,9 +330,9 @@ <h2>Result: Generated PDF</h2>
         </main>
 
         <footer>
-            <p>
-                Created with ❤️ by <a href="https://foosel.net">Gina "foosel" Häußge</a><span id="version"></span>
-            </p>
+            <span id="author" class="left">Created with ❤️ by <a href="https://foosel.net">Gina "foosel" Häußge</a></span>
+            <span class="center"><a href="https://github.com/foosel/cardfoldr/issues/new/choose" target="_blank" rel="noopener noreferer">Problems? Suggestions?</a></span>
+            <span id="version" class="right"></span>
         </footer>
     </body>
 </html>