add Footer

src/static/tailwind.css

@@ -521,6 +521,9 @@
   }
 }
 @layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -590,6 +593,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .block {
+    display: block;
+  }
   .contents {
     display: contents;
   }
@@ -602,6 +608,18 @@
   .hidden {
     display: none;
   }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
   .aspect-\[1\/2\] {
     aspect-ratio: 1/2;
   }
@@ -656,6 +674,9 @@
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
@@ -665,12 +686,18 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .resize {
+    resize: both;
+  }
   .grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
   }
   .flex-col {
     flex-direction: column;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .items-center {
     align-items: center;
   }
@@ -695,6 +722,9 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
@@ -702,6 +732,10 @@
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .bg-\[\#faebeb\] {
     background-color: #faebeb;
   }
@@ -714,6 +748,9 @@
   .bg-gray-400\/50 {
     background-color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
   }
+  .bg-orange-800 {
+    background-color: var(--color-orange-800);
+  }
   .bg-orange-800\/50 {
     background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent);
   }
@@ -745,6 +782,10 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
@@ -774,6 +815,10 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -906,6 +951,11 @@
       object-fit: cover;
     }
   }
+  .\[\&amp\;\:not\(\:fullscreen\)\]\:object-cover {
+    &:not(:fullscreen) {
+      object-fit: cover;
+    }
+  }
 }
 .material-symbols--arrow-forward-rounded {
   display: inline-block;
@@ -1068,10 +1118,20 @@
   inherits: false;
   initial-value: skewY(0);
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;

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"