305 lines
7.4 KiB
Plaintext
305 lines
7.4 KiB
Plaintext
---
|
|
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>
|