Footer content
This commit is contained in:
parent
3b550058ec
commit
47f8fdb900
@ -4,6 +4,8 @@ import Navigation from "./Navigation";
|
|||||||
|
|
||||||
import styles from "../../styles/Blog/Blog.module.scss";
|
import styles from "../../styles/Blog/Blog.module.scss";
|
||||||
|
|
||||||
|
import socials from "../../data/socials";
|
||||||
|
|
||||||
interface ILayoutProps {
|
interface ILayoutProps {
|
||||||
title?: string;
|
title?: string;
|
||||||
}
|
}
|
||||||
@ -14,14 +16,28 @@ const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
|
|||||||
<title>{title ?? "c0ntroller.de"}</title>
|
<title>{title ?? "c0ntroller.de"}</title>
|
||||||
</Head>
|
</Head>
|
||||||
<div id={styles.blogBody}>
|
<div id={styles.blogBody}>
|
||||||
<header id="top">
|
<span id="top" aria-hidden></span>
|
||||||
|
<header>
|
||||||
<Navigation />
|
<Navigation />
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{ children }
|
{ children }
|
||||||
</main>
|
</main>
|
||||||
<footer id="bottom">
|
<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>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</>;
|
</>;
|
||||||
|
@ -35,6 +35,34 @@
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-bottom-left-radius: 1em;
|
border-bottom-left-radius: 1em;
|
||||||
border-bottom-right-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 {
|
h1 {
|
||||||
|
Loading…
Reference in New Issue
Block a user