styling

Author: AdrianGonz97

src/app.css

@@ -0,0 +1,27 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+	height: 100%;
+	overflow: hidden;
+}
+
+body {
+	font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+
+	background-color: #202224;
+	margin: 0 1rem;
+	color: #f0f1f2;
+}
+
+a {
+	font-size: 1.25rem;
+	color: #50b7e0;
+}

src/routes/(app)/+layout.svelte

@@ -34,18 +34,39 @@
 </script>
 
 <main>
-	{#if data.user}
-		<h2>Welcome, {data.user.id}!</h2>
-		<form action="/logout" method="POST">
-			<button type="submit">Logout</button>
-		</form>
-	{:else}
-		<a
-			href={url.toString()}
-			on:click={() => {
-				window.localStorage.setItem('state', state);
-			}}>Connect with Twitch</a
-		>
-	{/if}
+	<div class="header">
+		{#if data.user}
+			<h2>Welcome, {data.user.email}!</h2>
+			<form action="/logout" method="POST">
+				<button type="submit">Logout</button>
+			</form>
+		{:else}
+			<a
+				href={url.toString()}
+				on:click={() => {
+					window.localStorage.setItem('state', state);
+				}}>Connect with Twitch</a
+			>
+		{/if}
+	</div>
 	<slot />
 </main>
+
+<style>
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 1rem 0;
+	}
+
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+	}
+
+	button {
+		cursor: pointer;
+		font-size: 1.25rem;
+	}
+</style>

src/routes/(app)/+page.svelte

@@ -1,2 +1 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<h1>Welcome to a SvelteKit + Pocketbase OAuth2 Demo</h1>

src/routes/+layout.svelte

@@ -1 +1,5 @@
+<script lang="ts">
+	import '../app.css';
+</script>
+
 <slot />