Changed font to mono, added footer with source-code, card use flex-wrap and should not overlap with anything else

src/components/card.tsx

@@ -2,12 +2,12 @@
 import { type Component } from "solid-js";
 import type { CardProps } from "../types/interfaces";
 import { H3 } from "./text";
-import { A } from "./link";
+import { Link } from "./link";
 
 const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => {
     return (
         <>
-            <A className={"text-white"} to={ to } newTab={ newTab }>
+            <Link className={ "text-white" } to={ to } newTab={ newTab }>
                 <div
                     class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 min-w-64 rounded-2xl ${ className }` }>
                     <div class="relative p-5">
@@ -15,7 +15,7 @@ const Card: Component<CardProps> = ({ children, className, title, to, newTab = f
                         { children }
                     </div>
                 </div>
-            </A>
+            </Link>
         </>
     );
 };

src/components/footer.tsx

@@ -0,0 +1,15 @@
+/* @refresh reload */
+import { type Component } from "solid-js";
+import type { SimpleProps } from "../types/interfaces";
+import { Link } from "./link";
+
+const Footer: Component<SimpleProps> = ({ className }) => {
+    return (
+        <footer class={ `text-center py-5 absolute bottom-0 container ${ className }` }>
+            <p>Kildekode på <Link to={ "https://github.com/h600878/martials.no" }>GitHub</Link></p>
+            <p>Self-hosted on Raspberry Pi 4</p>
+        </footer>
+    );
+};
+
+export default Footer;

src/components/header.tsx

@@ -1,13 +1,13 @@
 /* @refresh reload */
 
-import { Component } from "solid-js";
-import { SimpleProps, TitleProps } from "../types/interfaces";
+import { type Component } from "solid-js";
+import type { TitleProps } from "../types/interfaces";
 import { H1 } from "./text";
 
 const Header: Component<TitleProps> = ({ className, title }) => {
     return (
         <header class={ className }>
-            <H1 className={ "text-center" }>{ title }</H1>
+            <H1 className={ "text-center text-cyan-500" }>{ title }</H1>
             <div class={"mx-auto w-fit"}>
                 <p>Av Martin Berg Alstad</p>
             </div>

src/components/layout.tsx

@@ -2,16 +2,20 @@
 import { type Component } from "solid-js";
 import type { TitleProps } from "../types/interfaces";
 import Header from "./header";
+import Footer from "./footer";
 
-export const Layout: Component<TitleProps> = ({ children, title, className }) => {
+const Layout: Component<TitleProps> = ({ children, title, className }) => {
     return (
-        <div class={ `bg-default-bg text-white min-h-screen font-mono ${ className }` }>
-            <div class="container mx-auto debug">
-                <Header className={"my-3"} title={ title } />
+        <div class={ `bg-default-bg text-white min-h-screen relative font-mono ${ className }` }>
+            <div class="container mx-auto">
+                <Header className={ "py-3" } title={ title } />
                 <main>
-                    { children }
+                    <div class={ "pb-28" }>{ children }</div>
+                    <Footer />
                 </main>
             </div>
         </div>
     );
 };
+
+export default Layout;

src/components/link.tsx

@@ -2,7 +2,7 @@
 import { type Component } from "solid-js";
 import type { LinkProps } from "../types/interfaces";
 
-export const A: Component<LinkProps> = (
+export const Link: Component<LinkProps> = (
     {
         to,
         rel,

src/components/text.tsx

@@ -2,17 +2,9 @@ import { type Component } from "solid-js";
 import type { ChildProps } from "../types/interfaces";
 
 export const H1: Component<ChildProps> = ({ children, className }) => {
-    return (
-        <>
-            <h1 class={ `text-4xl ${ className }` }>{ children }</h1>
-        </>
-    );
+    return <h1 class={ `text-4xl ${ className }` }>{ children }</h1>;
 };
 
 export const H3: Component<ChildProps> = ({ children, className }) => {
-    return (
-        <>
-            <h3 class={ `text-2xl ${ className }` }>{ children }</h3>
-        </>
-    );
+    return <h3 class={ `text-2xl ${ className }` }>{ children }</h3>;
 };