Add site footer

Add site footer to default template

server/src/client/assets/css/style.css

@@ -119,6 +119,28 @@ ul {
 a {
     color: unset;
     text-decoration: unset;
+
+    &:not(:has(time)):is([href^="http"], [href^="mailto"]) {
+        padding-inline-end: 0.9em;
+
+        &::after {
+            transition: all 0.3s ease;
+            position: absolute;
+            content: '';
+            display: inline-block;
+            width: 1em;
+            height: 1em;
+            margin-inline-start: -0.05em;
+            background-size: 100%;
+            transform: scale(0.8);
+            background-image: url("/assets/images/external.svg");
+        }
+
+        &:is(:hover, :active, :focus-visible)::after {
+            filter: invert(100%);
+        }
+
+    }
 }
 
 form {
@@ -135,7 +157,7 @@ input {
     margin: 0;
 }
 
-input:is([type="text"], [type="password"], [type="search"]) {
+input:is([type="text"], [type="password"], [type="search"], [type="email"], ) {
     padding: 0.5ch 1ch;
 
     &:focus,
@@ -347,7 +369,60 @@ header {
 
 }
 
+footer {
+    border-block-start: var(--border);
+    display: flex;
+    min-block-size: calc(var(--header-size) * 2.5);
+    padding: 1rem;
+    gap: 2rem;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+
+    &>* {
+        max-inline-size: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+    }
+
+    line-height: 1.6em;
+
+    form {
+        display: flex;
+        flex-direction: column;
+
+        & div {
+            display: flex;
+            max-inline-size: 100%;
+
+            &>* {
+                min-inline-size: 0;
+            }
+
+            input[type="submit"] {
+                min-inline-size: min-content;
+            }
+        }
+
+    }
+
+    h1,
+    ul {
+        margin-block: 0 1rem;
+    }
+
+    p,
+    li,
+    input {
+        margin-block: 0.3rem;
+    }
+
+
+}
+
 main {
+    min-block-size: 100svb;
     margin-block: var(--default-padding) 40svb;
     margin-inline: auto;
     max-inline-size: min(60ch, 80%);
@@ -422,6 +497,15 @@ main {
         }
     }
 
+    footer {
+        flex-direction: row;
+
+        &>* {
+            max-inline-size: 40ch;
+            min-inline-size: 30ch;
+        }
+    }
+
     main {
         margin-block: var(--default-padding);
     }

server/src/client/assets/images/external.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 5 5 L 5 27 L 27 27 L 27 5 Z M 7 7 L 25 7 L 25 25 L 7 25 Z M 13 10 L 13 12 L 18.5625 12 L 9.28125 21.28125 L 10.71875 22.71875 L 20 13.4375 L 20 19 L 22 19 L 22 10 Z"/></svg>