Merge pull request #445 from SwiftFiddle/footer

Footer styling

Author: kishikawakatsumi

Public/index.html

@@ -242,35 +242,36 @@ <h1 class="modal-title fs-5" id="debugger-modal-title">Regex Debugger</h1>
       </div>
     </div>
 
-    <footer class="p-2">
-      <div class="row">
-        <div class="col text-center">
-          <span class="m-2">
-            <a class="text-reset text-decoration-none" href="https://status.swiftregex.com" target="_blank"
-              rel="nofollow noopener noreferrer">
-              <span class="fal fa-monitor-heart-rate"></span><span class="m-2">System Status</span></a>
-          </span>
-          <span class="m-2">
-            <a class="text-reset text-decoration-none" href="https://github.com/swiftfiddle/swiftregex/issues/new"
-              target="_blank" rel="nofollow noopener noreferrer">
-              <span class="far fa-comment-alt-smile"></span><span class="m-2">Feedback</span></a>
-          </span>
-          <span class="m-2">
-            <a class="text-reset text-decoration-none" href="https://github.com/swiftfiddle/swiftregex" target="_blank"
-              rel="nofollow noopener noreferrer">
-              <span class="fab fa-github"></span><span class="m-2">Source Code</span></a>
-          </span>
-          <span class="m-2">
-            <a class="text-reset text-decoration-none" href="https://twitter.com/k_katsumi" target="_blank"
-              rel="nofollow noopener noreferrer">
-              <span class="far fa-at"></span><span class="m-2">Creator</span></a>
-          </span>
-          <span class="m-2">
-            <a class="text-reset text-decoration-none" href="https://github.com/sponsors/kishikawakatsumi"
-              target="_blank" rel="nofollow noopener noreferrer">
-              <span class="fa-solid fa-heart" style="color: #bf3989;"></span><span class="m-2">Donate</span></a>
-          </span>
+    <footer class="row row-cols-1 g-0">
+      <div class="col p-1 text-center">
+        <div class="d-inline-block mx-2">
+          <a class="text-reset text-decoration-none small" href="https://status.swiftregex.com/" target="_blank"
+            rel="nofollow noopener noreferrer"><span class="fa-light fa-monitor-heart-rate"></span><span
+              class="mx-2">System
+              Status</span></a>
         </div>
+        <div class="d-inline-block mx-2">
+          <a class="text-reset text-decoration-none small" href="https://github.com/swiftfiddle/swiftregex/issues/new"
+            target="_blank" rel="nofollow noopener noreferrer"><span class="fa-regular fa-message-smile"></span><span
+              class="mx-2">Feedback</span></a>
+        </div>
+        <div class="d-inline-block mx-2">
+          <a class="text-reset text-decoration-none small" href="https://github.com/swiftfiddle/swiftregex"
+            target="_blank" rel="nofollow noopener noreferrer"><span class="fa-brands fa-github"></span><span
+              class="mx-2">Source
+              Code</span></a>
+        </div>
+        <div class="d-inline-block mx-2">
+          <a class="text-reset text-decoration-none small" href="https://hachyderm.io/@kishikawakatsumi" target="_blank"
+            rel="nofollow noopener noreferrer"><span class="fa-regular fa-at"></span><span
+              class="mx-2">Creator</span></a>
+        </div>
+        <div class="d-inline-block mx-2">
+          <a class="text-reset text-decoration-none small" href="https://github.com/sponsors/kishikawakatsumi"
+            target="_blank" rel="nofollow noopener noreferrer">
+            <span class="fa-solid fa-heart" style="color: #bf3989;"></span></span><span class="mx-2">Donate</span></a>
+        </div>
+      </div>
     </footer>
   </div>
 </body>