From c34be93b5c4d4f7bc9b8efca0b8dac73166c22d2 Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <alexander.daichendt@tum.de>
Date: Sun, 31 Jul 2022 15:31:57 +0200
Subject: [PATCH] feat: contact page responsive

---
 src/routes/contact.svelte | 42 ++++++++++++++++++++++++++++++---------
 src/routes/index.svelte   |  4 ++--
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/routes/contact.svelte b/src/routes/contact.svelte
index 542ebcb..a4e4c54 100644
--- a/src/routes/contact.svelte
+++ b/src/routes/contact.svelte
@@ -22,21 +22,34 @@
 
 <ul>
 	<ListItem>
-		<Icon path={mdiEmailEditOutline} />
-		E-Mail: <Link disableIcon disablePrefetch href="mailto:me@daichendt.one">me@daichendt.one</Link>
+		<span class="listText">
+			<Icon path={mdiEmailEditOutline} />
+			E-Mail:</span
+		>
+		<span class="listValue">
+			<Link disableIcon disablePrefetch href="mailto:me@daichendt.one">me@daichendt.one</Link>
 
-		<span style="margin-left: 4px;">
-			<Icon path={mdiKey} size="1rem" />
-			<Link href="/pub.key" disablePrefetch>GPG public key</Link>
+			<span style="margin-left: 4px;">
+				<Icon path={mdiKey} size="1rem" />
+				<Link href="/pub.key" disablePrefetch>GPG key</Link>
+			</span>
 		</span>
 	</ListItem>
 	<ListItem>
-		<Icon path={mdiGithub} />
-		Github: <Link disableIcon href="https://github.com/AlexDaichendt">AlexDaichendt</Link>
+		<span class="listText">
+			<Icon path={mdiGithub} />
+			Github:</span
+		>
+		<span class="listValue">
+			<Link disableIcon href="https://github.com/AlexDaichendt">AlexDaichendt</Link></span
+		>
 	</ListItem>
 	<ListItem>
-		<span style="font-size:1rem"><Element /></span>
-		Element: @alexdaichendt:matrix.org
+		<span class="listText">
+			<span style="font-size:1rem"><Element /></span>
+
+			Element:</span
+		> <span class="listValue"> @alexdaichendt:matrix.org</span>
 	</ListItem>
 </ul>
 
@@ -46,4 +59,15 @@ I usually reply within a couple minutes - if it is important.
 	ul {
 		list-style-type: none;
 	}
+	@media screen and (max-width: 480px) {
+		ul {
+			padding-left: unset;
+		}
+		.listText {
+			display: block;
+		}
+		.listValue {
+			margin-left: 2rem;
+		}
+	}
 </style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index d24357c..94cab2e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -16,10 +16,10 @@
 	import type { Skill } from '../lib/utils/types';
 
 	let _SKILLS = [
-		{ name: 'React / Svelte', started: 2019 },
+		{ name: 'React/Svelte', started: 2019 },
 		{ name: 'Scripting with Bash/Python', started: 2018 },
 		{ name: 'Java', started: 2013 },
-		{ name: 'LXC / Docker', started: 2021 },
+		{ name: 'LXC/Docker', started: 2021 },
 		{ name: 'FaaS', started: 2021 },
 		{ name: 'git', started: 2016 },
 		{ name: 'Linux administration (Debian)', started: 2017 },