Footer content

components/Blog/Layout.tsx

@@ -4,6 +4,8 @@ import Navigation from "./Navigation";
 
 import styles from "../../styles/Blog/Blog.module.scss";
 
+import socials from "../../data/socials";
+
 interface ILayoutProps {
     title?: string;
 }
@@ -14,14 +16,28 @@ const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
             <title>{title ?? "c0ntroller.de"}</title>
         </Head>
         <div id={styles.blogBody}>
-            <header id="top">
+            <span id="top" aria-hidden></span>
+            <header>
                 <Navigation />
             </header>
             <main>
                 { children }
             </main>
             <footer id="bottom">
-                Copyright und so nen Stuff
+                <span style={{visibility: "hidden"}}>▲</span>
+                <span className={styles.spacer}></span>
+                <span className={styles.footerContent}>
+                    <span>© 2022 Daniel Kluge</span>
+                    <span className={styles.divider}>|</span>
+                    {socials("1.1em").map((social, i) => <>
+                        {i !== 0 ? <span className={styles.divider} key={`d${i}`}>|</span> : null}
+                        <a key={i} href={social.url} target="_blank" rel="noreferrer" className={styles.socialIcon}>{social.icon}</a>
+                    </>)}
+                    <span className={styles.divider}>|</span>
+                    <a className="nostyle" target="_blank" href="mailto:admin-website@c0ntroller.de" rel="noreferrer">Contact</a>
+                </span>
+                <span className={styles.spacer}></span>
+                <a className="nostyle" href="#top" title="Back to top">▲</a>
             </footer>
         </div>
     </>;

styles/Blog/Blog.module.scss

@@ -35,6 +35,34 @@
         padding: 20px;
         border-bottom-left-radius: 1em;
         border-bottom-right-radius: 1em;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        font-size: 1.1em;
+
+        
+        .spacer {
+            flex-grow: 1;
+        }
+
+        .footerContent {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+
+            .divider {
+                margin: 0 10px;
+            }
+
+            .socialIcon {
+                color: inherit;
+                text-decoration: none;
+                height: 1em;
+            }
+        }
     }
 
     h1 {