---
import Navbar from "../components/LayoutComponents/Navbar.astro";
import Themes from "astro-themes";
import Icon from "astro-icon";
import socials from "../data/socials.json";

interface Props {
	title: string;
	showAfterMain?: boolean;
}

const { title, showAfterMain } = Astro.props;
---

<!doctype html>
<html lang="en">
	<head>
		<Themes defaultTheme="dark" />

		<meta charset="utf-8" />
		<meta
			name="description"
			content="This is the homepage of C0ntroller."
		/>
		<meta
			name="keyword"
			content="private, homepage, software, portfolio, development, cli, hacker, terminal, javascript, js, typescript, ts, nextjs, react, responsive"
		/>
		<meta name="author" content="C0ntroller" />
		<meta name="copyright" content="C0ntroller" />
		<meta name="robots" content="index,nofollow" />

		<link
			rel="apple-touch-icon"
			sizes="57x57"
			href="/apple-icon-57x57.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="60x60"
			href="/apple-icon-60x60.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="72x72"
			href="/apple-icon-72x72.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="76x76"
			href="/apple-icon-76x76.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="114x114"
			href="/apple-icon-114x114.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="120x120"
			href="/apple-icon-120x120.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="144x144"
			href="/apple-icon-144x144.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="152x152"
			href="/apple-icon-152x152.png"
		/>
		<link
			rel="apple-touch-icon"
			sizes="180x180"
			href="/apple-icon-180x180.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="192x192"
			href="/android-chrome-192x192.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="512x512"
			href="/android-chrome-512x512.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="/favicon-32x32.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="96x96"
			href="/favicon-96x96.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="16x16"
			href="/favicon-16x16.png"
		/>
		<link rel="manifest" href="/manifest.json" />
		<meta name="msapplication-TileColor" content="#444444" />
		<meta name="msapplication-TileImage" content="/mstile-310x310.png" />
		<meta name="theme-color" content="#444444" />

		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{title}</title>
	</head>
	<body>
		<span id="top" aria-hidden></span>
		<header>
			<Navbar />
		</header>
		<main>
			<slot />
		</main>
		{showAfterMain ? <div class="after-main">
			<slot name="after-main" />		
		</div> : null
		}
		<footer id="bottom">
			<span style="visibility:hidden">▲</span>
			<span class="spacer"></span>
			<span class="footerContent">
				<span><a class="nocolor" href="/copyright">Copyright</a></span>
				<span class="divider">|</span>
				{socials.flatMap((social, i) => (
					i !== 0 ? 
						[<span class="divider">|</span>, <a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} /></a>] : 
						[<a href={social.url} target="_blank" rel="noreferrer" class="socialIcon"><Icon name={social.icon} title={social.name} /></a>]
				))}
				<span class="divider">|</span>
				<a class="nocolor" target="_blank" href="mailto:admin-website@c0ntroller.de" rel="noreferrer">Contact</a>
			</span>
			<span class="spacer"></span>
			<a class="nostyle" href="#top" title="Back to top">▲</a>
		</footer>
		
	</body>
</html>
<style is:global lang="scss">
	* {
		box-sizing: border-box !important;
	}

	:root {
		--repl_color: #188a18;
		--repl_color-link: rgb(31, 179, 31);
		--repl_color-hint: rgba(24, 138, 24, 0.3);

		--blog_nav-background: rgba(128, 128, 128, 0.3);
		--blog_nav-border: #ccc;

		/* https://doodad.dev/pattern-generator?share=stripes-8-247_250_252_1-229_62_62_1-0_0_0_1-57-45-3-8-0-0-0-0-0-0-0 */
		--blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(32, 19, 19,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
		--blog_background-main: rgba(32, 19, 19, 1);
		--blog_content-background: rgba(40, 40, 40, 0.2);
		--blog_content-border: rgba(
			221,
			221,
			221,
			0.25
		); /* #ddd but less opacity */
		--blog_content-blur: 10px;
		--blog_color: #ddd;

		--blog_light-el-display: none;
		--blog_dark-el-display: initial;

		--blog_color-accent: rgba(229, 62, 62, 1);
		--blog_color-accent-dark: rgb(190, 54, 54);
	}

	:root[data-theme="light"] {
		--blog_nav-background: rgba(192, 192, 192, 0.3);
		--blog_nav-border: #ccc;

		--blog_back-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='57' height='57' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='100%25' height='100%25' fill='rgba(245, 179, 179,1)'/%3E%3Ccircle cx='0' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Ccircle cx='40' cy='20' r='1.5' fill='rgba(247, 250, 252,1)'/%3E%3Cpath d='m 16 19.5 h8 v1 h-8z' fill='rgba(229, 62, 62,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
		--blog_background-main: rgba(245, 179, 179, 1);
		--blog_content-background: rgba(160, 160, 160, 0.15);
		--blog_content-border: rgb(
			34,
			34,
			34,
			0.17
		); /* #222 but less opacity */
		--blog_content-blur: 5px;
		--blog_color: #222;

		--blog_light-el-display: initial;
		--blog_dark-el-display: none;
	}

	body {
		margin: 0;
		padding: 0;
		background: var(--blog_back-background);
		color: var(--blog_color);
		padding-bottom: 20px;
		min-height: 100vh;
		font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	}

	a.nostyle {
		text-decoration: inherit;
	}

	a.nocolor,
	a.nostyle {
		color: inherit;
	}

	header {
		position: sticky;
		top: 10px;
		z-index: 99;
	}

	main,
	.after-main,
	footer {
		max-width: 950px;
		border: 1px solid var(--blog_content-border);
		background: var(--blog_content-background);
		backdrop-filter: blur(var(--blog_content-blur));
	}

	main {
		margin: 40px auto 0;
		padding: 50px;
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;

		h1 {
			margin-top: 0;
		}

		@media screen and (max-width: 890px) {
			& {
				padding: 20px;
			}
		}
	}

	.after-main {
		margin: 5px auto 0;
		padding: 0px 50px;
	}

	footer {
		margin: 5px auto 0;
		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;
			margin: 0 10px;

			.divider {
				margin: 0 10px;
			}

			.socialIcon {
				color: inherit;
				text-decoration: none;
				height: 1.1em;
				width: 1.1em;
			}
		}
	}

	h1 {
		color: var(--blog_color-accent);
	}
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--blog_color-accent-dark);
	}
</style>
