---
export interface Props {
	title?: string
}

const { title } = Astro.props
const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
---

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='UTF-8' />
		<meta name='viewport' content='width=device-width' />
		<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
		<title>{`${title ? title + ' / ' : ''}${permaTitle}`}</title>
	</head>
	<body>
		<header class='site-header'>
			<a href='/' class={title ? '' : 'invisible'}>
				<img class='logo' src='/design-resources/logo/slashes.svg' />
			</a>
			<input type='checkbox' id='nav-toggle' class='hidden' />
			<nav>
				<label for='nav-toggle' class='mobile-only'>Close</label>
				<ul class='nav-links'>
					<li>
						<a href='/'>Home</a>
					</li>|
					<li>
						<a href='https://pretix.hip-berlin.de/hip2022/hip2022/'
							>Buy tickets</a
						>
					</li>|
					<li><a href='/merch/'>Merch</a></li>|
					<li>
						<a href='https://pretalx.c3voc.de/hip-berlin-2022/cfp'>CfP</a>
					</li>
				</ul>
				<ul class='mobile-only socials'>
					<li class='mastodon'>
						<a
							href='https://chaos.social/@HIP22'
							title='HiP 2022 Berlin on Mastodon'
							rel='noopener noreferrer'
							target='_blank'
							><img src='/icons/mastodon.svg' alt='' />
						</a>
					</li>
					<li class='matrix'>
						<a
							href='https://matrix.to/#/%23xc3-space%3A1312.media'
							title='HiP 2022 Berlin on Matrix'
							rel='noopener noreferrer'
							target='_blank'
							><img src='/icons/matrix.svg' alt='' />
						</a>
					</li>
				</ul>
			</nav>
			<label for='nav-toggle' class='mobile-only gradient-border'>Menu</label>
			<ul class='desktop-only socials'>
				<li class='mastodon'>
					<a
						href='https://chaos.social/@HIP22'
						title='HiP 2022 Berlin on Mastodon'
						rel='noopener noreferrer'
						target='_blank'
						><img src='/icons/mastodon.svg' alt='' />
					</a>
				</li>
				<li class='matrix'>
					<a
						href='https://matrix.to/#/%23xc3-space%3A1312.media'
						title='HiP 2022 Berlin on Matrix'
						rel='noopener noreferrer'
						target='_blank'
						><img src='/icons/matrix.svg' alt='' />
					</a>
				</li>
			</ul>
		</header>
		<slot />
		<footer>
			<a href='/imprint/'>Imprint</a> ////
			<a href='/privacy/'>Privacy</a>
		</footer>
		<style is:global lang='scss'>
			:root {
				--background: #000;
				--headline-color: #fff;
				--text-color: #7a7879;
				--gradient: linear-gradient(
					95.7deg,
					#44b4e9 -2.12%,
					#008317 41.14%,
					#fed61e 64.72%,
					#ff9900 77.58%,
					#6c2400 96.25%
				);
			}
			@font-face {
				font-family: 'IBM Plex Mono';
				font-style: normal;
				font-weight: 500;
				src: local('IBM Plex Mono Medm'), local('IBMPlexMono-Medm'),
					url('/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
				unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131,
					U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A,
					U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC,
					U+2122, U+2212, U+FB01-FB02;
			}
			*,
			*:after,
			*:before {
				box-sizing: border-box;
			}
			html {
				font-family: 'IBM Plex Mono', monospace;
				background-color: var(--background);
				color: var(--text-color, #cdcfdb);
				font-size: 1rem;
				line-height: 1.5;
				font-weight: 500;
				width: 100vw;
			}
			body {
				margin: 0;
				padding: 0;
				overflow-x: hidden;
				width: 100%;
			}
			.site-header {
				max-height: 4.5rem;
				display: flex;
				justify-content: space-between;
				max-width: 72rem;
				margin: 0 auto;
				align-items: stretch;

				> label {
					font-size: 1.5rem;
					margin: auto 1.5rem;
					padding: 0.25rem 0.75rem;
				}
			}
			.logo {
				width: 6.4rem;
				height: 100%;
				margin: auto;
				margin-left: 0.75rem;
			}
			nav {
				// mobile menu styles
				position: fixed;
				height: 100vh;
				width: 100vw;
				background: var(--background);
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				padding: 2rem;
				font-size: 1.5rem;
				transform: translateX(100vw);
				transition: transform 0.25s ease-in-out;
				z-index: 10;

				// desktop menu styles

				label {
					align-self: flex-end;
				}

				.nav-links {
					// height: 100%;
					list-style: none;
					padding: 0;
					gap: 2rem;
				}

				@media screen and (min-width: 768px) {
					flex-direction: row;
					padding: 0;
					position: relative;
					font-size: 1.25rem;
					width: 100%;
					height: 100%;
					transform: none;
					background: none;
					justify-content: center;

					.nav-links {
						display: flex;
						gap: 1.5rem;
					}
				}
			}
			#nav-toggle {
				height: 0;
				width: 0;
				overflow: hidden;
				position: absolute;
				left: -99999px;
			}
			#nav-toggle:checked + nav {
				transform: none;
			}
			.socials {
				list-style: none;
				display: inline-flex;
				justify-content: center;
				margin: 0;
				padding: 1.5rem;
				width: 100%;
				gap: 4rem;
				li {
					height: 100%;
					flex: 0 1 1.5rem;
					img {
						height: 100%;
					}
				}
				&.desktop-only {
					height: 4.5rem;
					width: auto;
					gap: 1.5rem;
					ul {
						flex-direction: row;
					}
				}
			}
			main {
				margin: auto;
				padding: 1.5rem;
				width: 100%;
				max-width: 64ch;
			}
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-weight: 500;
				color: var(--headline-color);
			}
			a {
				color: var(--headline-color);
				text-decoration: none;
				transition: opacity 0.2s ease-in-out;
				&:hover {
					opacity: 0.75;
				}
			}
			button {
				appearance: none;
				border: none;
				color: inherit;
				font-family: inherit;
				font-size: inherit;
				font-weight: 500;
				cursor: pointer;
			}
			.gradient-bg {
				background: var(--gradient);
				padding: 1.5rem;
				color: var(--background);
				border-radius: 1.5rem;
			}
			.gradient-border {
				position: relative;
				background-clip: padding-box;
				background: var(--background);
				border-radius: 1.5rem;
				padding: 1.5rem;
				transition: border-radius 0.2s ease-in-out;

				&::before {
					position: absolute;
					inset: 0;
					margin: -3px;
					z-index: -1;
					background: var(--gradient);
					border-radius: inherit;
					content: '';
				}
				&:is(button):hover {
					border-radius: 0.5rem;
				}
			}
			footer {
				font-size: 0.75rem;
				text-align: center;
				padding: 1.5rem 0;
			}

			@media screen and (max-width: 768px) {
				.desktop-only {
					display: none;
				}
			}
			@media screen and (min-width: 768px) {
				.mobile-only {
					display: none;
				}
				.desktop-only {
					display: inherit;
				}
			}
			.invisible {
				opacity: 0;
				pointer-events: none;
			}
		</style>
	</body>
</html>
