start adding stuff

8 files changed, 209 insertions, 290 deletions

diff --git a/src/app.css b/src/app.css
index 77bf6af..5e12d43 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,107 +1,187 @@
-@import '@fontsource/fira-mono';
-
 :root {
-	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	--font-mono: 'Fira Mono', monospace;
-	--pure-white: #ffffff;
-	--primary-color: #b9c6d2;
-	--secondary-color: #d0dde9;
-	--tertiary-color: #edf0f8;
-	--accent-color: #ff3e00;
-	--heading-color: rgba(0, 0, 0, 0.7);
-	--text-color: #444444;
-	--background-without-opacity: rgba(255, 255, 255, 0.7);
-	--column-width: 42rem;
-	--column-margin-top: 4rem;
+	--theme-main-background: #111;
+	--theme-lighter-background: #222;
+	--theme-lightest-background: #333;
+	--theme-main-text: #eee;
+	--theme-darker-text: #999;
+	--theme-transparent-border: rgba(128, 128, 128, 0.3);
+	--theme-yellow: #ff0;
+}
+/* minecraft font */
+@font-face {
+	font-family: Minecraft;
+	src: url(https://cdn.matdoes.dev/fonts/Minecraft.ttf);
+	font-display: swap;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2)
+		format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+		U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url(https://cdn.matdoes.dev/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-
 body {
-	min-height: 100vh;
+	font-family: 'Atkinson Hyperlegible', sans-serif;
+	color: var(--theme-main-text);
+	background-color: var(--theme-main-background);
 	margin: 0;
-	background-color: var(--primary-color);
-	background: linear-gradient(
-		180deg,
-		var(--primary-color) 0%,
-		var(--secondary-color) 10.45%,
-		var(--tertiary-color) 41.35%
-	);
+	overflow-x: hidden;
 }
 
-body::before {
-	content: '';
-	width: 80vw;
-	height: 100vh;
-	position: absolute;
-	top: 0;
-	left: 10vw;
-	z-index: -1;
-	background: radial-gradient(
-		50% 50% at 50% 50%,
-		var(--pure-white) 0%,
-		rgba(255, 255, 255, 0) 100%
-	);
-	opacity: 0.05;
+html {
+	scroll-behavior: smooth;
 }
 
-#svelte {
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
+/* content is uglier when its max width */
+main {
+	margin: 0 auto;
+	width: 80%;
+	padding: 1em;
 }
 
-h1,
-h2,
-p {
-	font-weight: 400;
-	color: var(--heading-color);
+/* makes random height and stuff look less broken */
+* {
+	box-sizing: border-box;
+	vertical-align: baseline;
 }
 
-p {
-	line-height: 1.5;
+/* base styles for inputs */
+input[type='text'],
+input[type='submit'] {
+	-webkit-appearance: none;
+	background-color: transparent;
+	color: var(--theme-darker-text);
+	transition-duration: 250ms;
+	border: 1px solid var(--theme-transparent-border);
+	border-radius: 4px;
+	margin: 0;
+	height: 2em;
+	font-size: 1em;
 }
 
-a {
-	color: var(--accent-color);
-	text-decoration: none;
+/* base styles for text input boxes */
+input[type='text'] {
+	text-align: left;
+	padding-left: 0.5em;
 }
 
-a:hover {
-	text-decoration: underline;
+/* Selecting a text box */
+input[type='text']:focus {
+	/* make the text lighter */
+	color: var(--theme-main-text);
 }
 
-h1 {
-	font-size: 2rem;
-	text-align: center;
+/* base styles for buttons */
+input[type='submit'] {
+	margin-left: 0.2em;
+	cursor: pointer;
 }
 
-h2 {
-	font-size: 1rem;
+/* Hovering over a button */
+input[type='submit']:hover {
+	/* make the text lighter */
+	color: var(--theme-main-text);
 }
 
-pre {
-	font-size: 16px;
-	font-family: var(--font-mono);
-	background-color: rgba(255, 255, 255, 0.45);
-	border-radius: 3px;
-	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-	padding: 0.5em;
-	overflow-x: auto;
-	color: var(--text-color);
+/* base styles for anchor tags */
+a {
+	color: #19f;
+	text-decoration: none;
 }
 
-input,
-button {
-	font-size: inherit;
-	font-family: inherit;
+h1 {
+	font-size: 2.5em;
+	overflow-wrap: anywhere;
 }
 
-button:focus:not(:focus-visible) {
-	outline: none;
+h2,
+h3 {
+	margin-top: 0;
+	margin-bottom: 0.2em;
+}
+
+hr {
+	opacity: 0.2;
 }
 
-@media (min-width: 720px) {
-	h1 {
-		font-size: 2.4rem;
-	}
+button {
+	outline: none;
+	font-family: inherit;
 }
diff --git a/src/app.d.ts b/src/app.d.ts
index 3ddb22d..efdb902 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,15 +1,15 @@
 /// <reference types="@sveltejs/kit" />
 
-// See https://kit.svelte.dev/docs/typescript
-// for information about these interfaces
-declare namespace App {
-	interface Locals {
-		userid: string;
-	}
+// // See https://kit.svelte.dev/docs/typescript
+// // for information about these interfaces
+// declare namespace App {
+// 	interface Locals {
+// 		userid: string;
+// 	}
 
-	interface Platform {}
+// 	interface Platform {}
 
-	interface Session {}
+// 	interface Session {}
 
-	interface Stuff {}
-}
+// 	interface Stuff {}
+// }
diff --git a/src/app.html b/src/app.html
index e7d2cbd..b0013f4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<meta charset="utf-8" />
-		<meta name="description" content="Svelte demo app" />
-		<link rel="icon" href="%svelte.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta name="theme-color" content="#010101">
+		<meta property="og:site_name" content="Hypixel SkyBlock Stats">
+		<meta property="og:type" content="website"/>
 		%svelte.head%
 	</head>
 	<body>
diff --git a/src/lib/form.ts b/src/lib/form.ts
index 787a397..844ca2d 100644
--- a/src/lib/form.ts
+++ b/src/lib/form.ts
@@ -1,4 +1,4 @@
-import { invalidate } from '$app/navigation';
+import { invalidate } from '$app/navigation'
 
 // this action (https://svelte.dev/tutorial/actions) allows us to
 // progressively enhance a <form> that already works without JS
@@ -32,16 +32,16 @@ export function enhance(
 		}) => void;
 	} = {}
 ): { destroy: () => void } {
-	let current_token: unknown;
+	let current_token: unknown
 
 	async function handle_submit(e: Event) {
-		const token = (current_token = {});
+		const token = (current_token = {})
 
-		e.preventDefault();
+		e.preventDefault()
 
-		const data = new FormData(form);
+		const data = new FormData(form)
 
-		if (pending) pending({ data, form });
+		if (pending) pending({ data, form })
 
 		try {
 			const response = await fetch(form.action, {
@@ -52,33 +52,33 @@ export function enhance(
 				body: data
 			});
 
-			if (token !== current_token) return;
+			if (token !== current_token) return
 
 			if (response.ok) {
-				if (result) result({ data, form, response });
+				if (result) result({ data, form, response })
 
-				const url = new URL(form.action);
-				url.search = url.hash = '';
-				invalidate(url.href);
+				const url = new URL(form.action)
+				url.search = url.hash = ''
+				invalidate(url.href)
 			} else if (error) {
-				error({ data, form, error: null, response });
+				error({ data, form, error: null, response })
 			} else {
-				console.error(await response.text());
+				console.error(await response.text())
 			}
 		} catch (e: any) {
 			if (error) {
-				error({ data, form, error: e, response: null });
+				error({ data, form, error: e, response: null })
 			} else {
-				throw e;
+				throw e
 			}
 		}
 	}
 
-	form.addEventListener('submit', handle_submit);
+	form.addEventListener('submit', handle_submit)
 
 	return {
 		destroy() {
-			form.removeEventListener('submit', handle_submit);
+			form.removeEventListener('submit', handle_submit)
 		}
-	};
+	}
 }
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
deleted file mode 100644
index 9d3120f..0000000
--- a/src/lib/header/Header.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import logo from './svelte-logo.svg';
-</script>
-
-<header>
-	<div class="corner">
-		<a href="https://kit.svelte.dev">
-			<img src={logo} alt="SvelteKit" />
-		</a>
-	</div>
-
-	<nav>
-		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
-		</svg>
-		<ul>
-			<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
-			<li class:active={$page.url.pathname === '/about'}>
-				<a sveltekit:prefetch href="/about">About</a>
-			</li>
-			<li class:active={$page.url.pathname === '/todos'}>
-				<a sveltekit:prefetch href="/todos">Todos</a>
-			</li>
-		</ul>
-		<svg viewBox="0 0 2 3" aria-hidden="true">
-			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
-		</svg>
-	</nav>
-
-	<div class="corner">
-		<!-- TODO put something else here? github link? -->
-	</div>
-</header>
-
-<style>
-	header {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.corner {
-		width: 3em;
-		height: 3em;
-	}
-
-	.corner a {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-	}
-
-	.corner img {
-		width: 2em;
-		height: 2em;
-		object-fit: contain;
-	}
-
-	nav {
-		display: flex;
-		justify-content: center;
-		--background: rgba(255, 255, 255, 0.7);
-	}
-
-	svg {
-		width: 2em;
-		height: 3em;
-		display: block;
-	}
-
-	path {
-		fill: var(--background);
-	}
-
-	ul {
-		position: relative;
-		padding: 0;
-		margin: 0;
-		height: 3em;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		list-style: none;
-		background: var(--background);
-		background-size: contain;
-	}
-
-	li {
-		position: relative;
-		height: 100%;
-	}
-
-	li.active::before {
-		--size: 6px;
-		content: '';
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: 0;
-		left: calc(50% - var(--size));
-		border: var(--size) solid transparent;
-		border-top: var(--size) solid var(--accent-color);
-	}
-
-	nav a {
-		display: flex;
-		height: 100%;
-		align-items: center;
-		padding: 0 1em;
-		color: var(--heading-color);
-		font-weight: 700;
-		font-size: 0.8rem;
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		text-decoration: none;
-		transition: color 0.2s linear;
-	}
-
-	a:hover {
-		color: var(--accent-color);
-	}
-</style>
diff --git a/src/lib/header/svelte-logo.svg b/src/lib/header/svelte-logo.svg
deleted file mode 100644
index 49492a8..0000000
--- a/src/lib/header/svelte-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7fef681..d1fca30 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,45 +1,8 @@
 <script lang="ts">
-	import Header from '$lib/header/Header.svelte';
-	import '../app.css';
+	import Header from '$lib/Header.svelte'
+	import '../app.css'
 </script>
 
-<Header />
-
 <main>
 	<slot />
 </main>
-
-<footer>
-	<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
-</footer>
-
-<style>
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		width: 100%;
-		max-width: 1024px;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
-
-	footer {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 40px;
-	}
-
-	footer a {
-		font-weight: bold;
-	}
-
-	@media (min-width: 480px) {
-		footer {
-			padding: 40px 0;
-		}
-	}
-</style>
diff --git a/src/routes/todos/index.svelte b/src/routes/todos/index.svelte
index e36b6cf..e23c1a1 100644
--- a/src/routes/todos/index.svelte
+++ b/src/routes/todos/index.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { enhance } from '$lib/form';
-	import { scale } from 'svelte/transition';
-	import { flip } from 'svelte/animate';
+	import { enhance } from '$lib/form'
+	import { scale } from 'svelte/transition'
+	import { flip } from 'svelte/animate'
 
 	type Todo = {
-		uid: string;
-		created_at: Date;
-		text: string;
-		done: boolean;
-		pending_delete: boolean;
-	};
-
-	export let todos: Todo[];
+		uid: string
+		created_at: Date
+		text: string
+		done: boolean
+		pending_delete: boolean
+	}
+
+	export let todos: Todo[]
 </script>
 
 <svelte:head>
@@ -27,8 +27,8 @@
 		method="post"
 		use:enhance={{
 			result: async ({ form }) => {
-				form.reset();
-			}
+				form.reset()
+			},
 		}}
 	>
 		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
@@ -46,8 +46,8 @@
 				method="post"
 				use:enhance={{
 					pending: ({ data }) => {
-						todo.done = !!data.get('done');
-					}
+						todo.done = !!data.get('done')
+					},
 				}}
 			>
 				<input type="hidden" name="uid" value={todo.uid} />
@@ -65,7 +65,7 @@
 				action="/todos?_method=DELETE"
 				method="post"
 				use:enhance={{
-					pending: () => (todo.pending_delete = true)
+					pending: () => (todo.pending_delete = true),
 				}}
 			>
 				<input type="hidden" name="uid" value={todo.uid} />