add Footer

src/templates/Components/Footer.tsx

@@ -0,0 +1,36 @@
+export default function Footer() {
+  return (
+    <div className="container mx-auto px-4 sm:px-8 mb-4">
+        <div className="flex flex-wrap items-center gap-4 mx-auto">
+          <a
+            className="flex items-center gap-2 text-lg"
+            href="https://wah.su/radiquum"
+          >
+            <span>by @radiquum</span>{" "}
+            <img
+              className="object-contain w-8 rounded-full aspect-square"
+              src="https://radiquum.wah.su/static/avatar_512.jpg"
+              alt=""
+            />
+          </a>
+          <div className="flex items-center gap-2">
+            <p className="text-lg">Find us on:</p>
+            <a href="https://github.com/wah-su">
+              <img
+                className="object-contain w-8 rounded-full aspect-square"
+                src="/static/github-mark-white.png"
+                alt="github"
+              />
+            </a>
+            <a href="https://wah.su">
+              <img
+                className="object-contain w-8 rounded-full aspect-square"
+                src="/static/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
+                alt="website"
+              />
+            </a>
+          </div>
+        </div>
+    </div>
+  );
+}

src/templates/base.tsx

@@ -1,5 +1,6 @@
 import Head from "./Components/Head";
 import Header from "./Components/Header";
+import Footer from "./Components/Footer";
 
 export default function Index(props: {
   children: any;
@@ -28,6 +29,7 @@ export default function Index(props: {
         <div className="container mx-auto py-4 px-4 sm:px-8">
           {props.children}
         </div>
+        <Footer />
       </body>
     </html>
   );

src/templates/index.tsx

@@ -23,7 +23,7 @@ export default function IndexPage() {
       <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Videos</p>
       <div
         id="index_videos"
-        className="mt-2 mb-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+        className="mt-2 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
       >
         {[...Array(3).keys()].map((idx) => {
           return (

src/templates/viewImage.tsx

@@ -2,7 +2,7 @@ import ImagePageNav from "./Components/ImagePageNavigation";
 
 export default function ImagePage() {
   return (
-    <div className="flex flex-col gap-4 mb-4">
+    <div className="flex flex-col gap-4">
       <ImagePageNav />
       <div
         data-type="placeholder__image"