Initial astro commit

2023-12-11 23:41:48 +01:00
commit 4671378238
81 changed files with 18248 additions and 0 deletions
@@ -0,0 +1,304 @@
+---
+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>