From aaea8d43453b67ccce2bade65626d4be506c4e87 Mon Sep 17 00:00:00 2001
From: Carlos Sanchez <carlos@sanchez.kr>
Date: Sun, 11 Jun 2023 17:03:33 +0900
Subject: [PATCH] CSS adapted to display correctly on mobile devices

---
 src/lib/Footer.svelte          | 12 +-----------
 src/lib/Header.svelte          | 14 +++++---------
 src/routes/+layout.svelte      | 10 ++--------
 src/routes/events/+page.svelte |  3 ++-
 src/routes/events/+page.ts     |  1 -
 5 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
index 935ffaf..83f234b 100644
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@@ -1,4 +1,4 @@
-<div class="footer flex flew-row flex-wrap justify-around mt-[3em] text-[rgb(0,0,255)]">
+<div class="flex flew-row flex-wrap justify-around mt-[3em] text-[rgb(0,0,255)]">
 	<hr />
 	<ul>
 		<li><a href="/">EvenTer</a></li>
@@ -8,12 +8,6 @@
 </div>
 
 <style>
-	.footer {
-		width: 100%;
-		position: fixed;
-		bottom: 0;
-	}
-
 	ul {
 		display: flex;
 		flex-direction: row;
@@ -26,8 +20,4 @@
 	li {
 		padding: 2em;
 	}
-
-	.footer > * {
-		width: 70%;
-	}
 </style>
diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 152af33..33d91c1 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -3,13 +3,9 @@
 	import Navbar from './Navbar.svelte';
 </script>
 
-<div class="border-b-[0.2rem] border-b-[#ED1B24] h-20">
-	<div class="flex m-auto w-3/5 items-center justify-between">
-		<img
-			class="max-w-56 max-h-44 mt-1 align-middle border-none"
-			src="/logo_small.svg"
-			alt="Small EvenTer Logo"
-		/>
-		<Navbar />
-	</div>
+<div
+	class="border-b-[0.2rem] border-b-[#ED1B24] h-20 w-screen flex px-[15%] items-center justify-between overflow-x-auto"
+>
+	<img class="h-4/5 align-middle border-none" src="/logo_small.svg" alt="Small EvenTer Logo" />
+	<Navbar />
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9deb9ef..bd21770 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,15 +6,9 @@
 
 <Header />
 
-<div class="content-container">
+<!-- SVH is a new CSS measure unit for mobile devices https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport -->
+<div class="min-h-[calc(100svh-248px)] m-auto max-w-[70%]">
 	<slot />
 </div>
 
 <Footer />
-
-<style>
-	.content-container {
-		margin: auto;
-		max-width: 70%;
-	}
-</style>
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 19fe4d2..487a162 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import type { EventListData } from '$lib/EventData';
 	import EventListItem from '$lib/EventListItem.svelte';
 
-	export let data;
+	export let data: EventListData;
 </script>
 
 <h1>The Latest and Greatest CodeSeoul Events!</h1>
diff --git a/src/routes/events/+page.ts b/src/routes/events/+page.ts
index d7b6da5..7f1c004 100644
--- a/src/routes/events/+page.ts
+++ b/src/routes/events/+page.ts
@@ -2,7 +2,6 @@ import type { EventListData } from '$lib/EventData';
 import type { LoadEvent } from '@sveltejs/kit';
 import { PUBLIC_API_ROOT_URL } from '$env/static/public';
 
-
 export async function load({ fetch }: LoadEvent): Promise<EventListData | null> {
 	const url = `${PUBLIC_API_ROOT_URL}/events`;
 	const options = {