Begin implementation of the site with Svelte

web-svelte/src/views/home.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+import SciFiButton from "../components/SciFi-Button.svelte";
+
+
+function testHandler() {
+	console.log(`Hello there!`);
+};
+</script>
+
+<main>
+	<div>
+		<h1>Gravwell</h1>
+		<div class="sci-fi-box">
+			<h2>Multiplayer</h2>
+			<div class="flex-row">
+				<SciFiButton
+					handler={testHandler}
+				>
+					Join Game
+				</SciFiButton>
+				<SciFiButton
+					handler={testHandler}
+				>
+					Host Game
+				</SciFiButton>
+			</div>
+		</div>
+		<br>
+		<div class="sci-fi-box">
+			<h2>Singleplayer</h2>
+			<div class="flex-row">
+				<SciFiButton
+					handler={testHandler}
+				>
+					Start Game
+				</SciFiButton>
+			</div>
+		</div>
+	</div>
+</main>
+
+<style lang="scss">
+main {
+	color: #FFFFFF;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+h1 {
+	font-size: 4rem;
+	font-weight: 100;
+	line-height: 1.1;
+	margin: 2rem auto;
+	max-width: 14rem;
+}
+
+.sci-fi-box {
+	border-radius: 10px;
+	border-width: 2px;
+	border-style: solid;
+	border-color: white;
+	margin: 5px;
+	background: rgba(0, 0, 0, 0.5);
+
+	h2 {
+		margin: 0px;
+		margin-top: 10px;
+	}
+}
+
+.flex-row {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.flex-row > :global(div) {
+	flex-grow: 1;
+}
+
+@media (min-width: 480px) {
+	h1 {
+		max-width: none;
+	}
+}
+</style>