fix logo overflow

src/layouts/Layout.astro

@@ -24,11 +24,13 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 					><img src='/icons/mastodon.svg' alt='' />
 				</a>
 			</li>
-			<!-- <li class='matrix'>
-				<a href='#' title='HiP 2022 Berlin on Matrix'
+			<li class='matrix'>
+				<a
+					href='https://matrix.to/#/%23xc3-space%3A1312.media'
+					title='HiP 2022 Berlin on Matrix'
 					><img src='/icons/matrix.svg' alt='' />
 				</a>
-			</li> -->
+			</li>
 		</ul>
 		<slot />
 		<footer>
@@ -60,6 +62,11 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 					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);
@@ -67,11 +74,13 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 				font-size: 1rem;
 				line-height: 1.5;
 				font-weight: 500;
-				box-sizing: border-box;
+				width: 100vw;
 			}
 			body {
 				margin: 0;
 				padding: 0;
+				overflow-x: hidden;
+				width: 100%;
 			}
 			.socials {
 				list-style: none;
@@ -92,6 +101,7 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 			main {
 				margin: auto;
 				padding: 1.5rem;
+				width: 100%;
 				max-width: 64ch;
 			}
 			h1,
@@ -108,7 +118,7 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
 				text-decoration: none;
 				transition: opacity 0.2s ease-in-out;
 				&:hover {
-					opacity: 0.8;
+					opacity: 0.75;
 				}
 			}
 			.gradient-bg {

src/pages/index.astro

@@ -28,24 +28,35 @@ import Layout from '../layouts/Layout.astro'
 <style lang='scss'>
 	header {
 		width: 100%;
+		padding: 1.5rem;
 		min-height: 50vh;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 	h1 {
+		display: block;
 		font-size: 6.4ch;
 		line-height: 1.1;
 		color: var(--headline-color);
+		img {
+			max-width: 100%;
+		}
 	}
 	.cfp {
-		margin: 0 -1.5rem 3rem;
+		max-width: 100%;
+		@media screen and (min-width: 768px) {
+			margin: 0 -1.5rem 3rem;
+		}
 		text-align: center;
 		a {
 			color: var(--background);
 		}
 		h2 {
-			font-size: 2.4rem;
+			font-size: 2rem;
+			@media screen and (min-width: 768px) {
+				font-size: 2.4rem;
+			}
 			line-height: 1.2;
 			margin: 0;
 			color: #000;

src/pages/resources/index.astro

@@ -0,0 +1,19 @@
+---
+import Layout from '../../layouts/Layout.astro'
+---
+
+<Layout title='Privacy'>
+	<main>
+		<article>
+			<h1>Design Resources</h1>
+			<p>Thank you for taking a look at this page!</p>
+			<p>
+				Should you need any additional resources feel free to join the
+				HiP-Design channel of our Matrix space.
+			</p>
+			<section>
+				<h2>Logos</h2>
+			</section>
+		</article>
+	</main>
+</Layout>