progress

src/lib/modules/MsgBox.svelte

@@ -38,12 +38,14 @@
 <style>
   .msg-box {
     display: inline-block;
-    padding: 10px;
+    padding: 1em;
-    margin-bottom: 10px;
+    margin-bottom: 1em;
     border-radius: 5px;
     font-weight: normal;
     border-width: 1px;
     border-style: solid;
+    text-align: center;
+    align-self: center;
   }
 
   .msg-box p {

src/routes/+error.svelte

@@ -2,5 +2,15 @@
     import { page } from '$app/stores';
 </script>
 
-<h1>{$page.status}: {$page.error.message}</h1>
+<h1>
-<p>AHDJIUASHDILAUHSDIUSHD ERRORRRRS</p>
+    {$page.status} | {$page.error.message}
+</h1>
+<p>Looks like you're lost in space. Try flying back to earth!</p>
+<a href="/" role="button" class="link">Fly back to Earth</a>
+
+<style>
+  .link {
+    height: auto;
+    width: 25%;
+  }
+</style>

src/routes/+page.svelte

@@ -1,7 +1,5 @@
 <script>
-	import Counter from './Counter.svelte';
+	import demoImage from '$lib/assets/pictures/pic10.png';
-	import welcome from '$lib/images/svelte-welcome.webp';
-	import welcome_fallback from '$lib/images/svelte-welcome.png';
 </script>
 
 <svelte:head>
@@ -11,54 +9,36 @@
 
 <div class="text-column">
 	<h1>ExploreCraft</h1>
-	<p>Welcome to the ExploreCraft website!</p>
+	<p>
+		This is ExploreCraft! A modpack for Minecraft 1.19.2 (Quilt) designed to keep you moving.<br>
+		You may never know what you'll find, after all
+	</p>
+	<p>Have a look around. You can download the modpack and play, have a look in our gallery, or take a look at our modlist.</p>
 </div>
+<div class="grid buttons">
+	<a href="/downloads" role="button">Download</a>
+	<a href="/modlist" role="button" class="secondary outline">Modlist</a>
+</div>
+<!-- svelte-ignore a11y-img-redundant-alt -->
+<a href="/gallery" data-tooltip="See more..."><img class="banner" src="{demoImage}" alt="Random picture from the gallery."></a>
 
-<!-- <section>
+<style>
-	<h1>
+	img.banner {
-		<span class="welcome">
+		margin: 1em;
-			<picture>
+	  	border-radius: 1em;
-				<source srcset={welcome} type="image/webp" />
+	  	transform: scale(1);
-				<img src={welcome_fallback} alt="Welcome" />
+	  	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-			</picture>
+	  	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-		</span>
+	  	align-self: center;
-
-		to your new<br />SvelteKit app
-	</h1>
-
-	<h2>
-		try editing <strong>src/routes/+page.svelte</strong>
-	</h2>
-
-	<Counter />
-</section> -->
-
-<!-- <style>
-	section {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex: 0.6;
 	}
-
+	img.banner:hover {
-	h1 {
+	  	transform: scale(1.005);
-		width: 100%;
+	  	box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.4);
+	  	cursor: pointer;
 	}
-
+	.buttons {
-	.welcome {
+		margin-left: 25%;
-		display: block;
+		margin-right: 25%;
-		position: relative;
+		margin-bottom: 1em;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
 	}
-
+</style>
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
-</style> -->

src/routes/Header.svelte

@@ -18,7 +18,7 @@
 				<a href="/" class="contrast">Home</a>
 			</li>
 			<li aria-current={$page.url.pathname === '/download' ? 'page' : undefined}>
-				<a href="/download" class="contrast">Download</a>
+				<a href="/downloads" class="contrast">Download</a>
 			</li>
 			<li aria-current={$page.url.pathname.startsWith('/gallery') ? 'page' : undefined}>
 				<a href="/gallery" class="contrast">Gallery</a>

src/routes/download/+page.svelte

@@ -1,9 +0,0 @@
-<svelte:head>
-	<title>Downloads</title>
-	<meta name="description" content="About this app" />
-</svelte:head>
-
-<div class="text-column">
-	<h1>Downloads</h1>
-	<p>Here you'll find all downloads.</p>
-</div>

src/routes/downloads/+page.svelte

@@ -0,0 +1,14 @@
+<svelte:head>
+	<title>Downloads</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<script>
+	import MsgBox from "$lib/modules/MsgBox.svelte";
+</script>
+
+<div class="text-column">
+	<h1>Downloads</h1>
+	<p>Here you'll find all downloads.</p>
+</div>
+<MsgBox type="warning" message="<br>Currently WIP. You'll find downloads on this page,<br>but they may not work properly." prefix="ℹ️ Note ℹ️" />

src/routes/modlist/+page.svelte

@@ -0,0 +1 @@
+<h1>YAY</h1>