Progress on Downloads Page

- Moved Pictures to different directory
- Modifications on Header and Menu Items
- Progress on Downloads Page

src/app.scss

@@ -4,7 +4,7 @@
 
 /* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
 
-h1, h2, body {
+h1, h2, h3, h4, h5, h6, body {
     font-family: 'IBM Plex Mono', monospace;
     // background-color: #ffffff;
     // color: #000000;
@@ -48,6 +48,11 @@ h1, h2, body {
   --switch-checked-background-color: var(--primary);
 }
 
-p {
+p, li {
   cursor: text;
 }
+
+article {
+  border-radius: 10px;
+  box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2);
+}

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script>
   	import { onMount } from 'svelte';
-	import demoImage from '$lib/assets/pictures/pic0.png'
+	import demoImage from '$lib/assets/images/gallery/pic0.png'
 	
 	function rand(min, max) {
     	return Math.floor(Math.random() * (max - min + 1) + min)
@@ -31,17 +31,15 @@
 	<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 src="{demoImage}" class="banner" id="banner" alt="Random picture from the gallery."></a>
+<a href="/gallery" class="banner" data-tooltip="See more..."><img src="{demoImage}" id="banner" alt="Random picture from the gallery."></a>
 
 <style>
-	img.banner {
+	a.banner img {
-		margin: 1em;
-	  	transform: scale(1);
 		border-radius: 1em;
 	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 	  	align-self: center;
 	}
-	img.banner:hover {
+	a.banner img:hover {
 	  	transform: scale(1.005);
 	  	box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.4);
 	  	cursor: pointer;
@@ -49,6 +47,6 @@
 	.buttons {
 		margin-left: 25%;
 		margin-right: 25%;
-		margin-bottom: 1em;
+		margin-bottom: 2em;
 	}
 </style>

src/routes/Header.svelte

@@ -88,19 +88,31 @@
 .navigation-bar a {
   font-family: 'IBM Plex Mono', monospace;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   font-size: 1em;
-  /* color: #000000; */
   text-decoration: none;
   transition: font-style;
 }
 
-.navigation-bar a:hover {
+[data-theme="dark"] .navigation-bar a {
-  font-style: italic;
+  font-family: 'IBM Plex Mono', monospace;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 1em;
+  text-decoration: none;
+  transition: font-style;
 }
 
 .navigation-bar a.current-page {
-  font-weight: 600;
+  font-weight: 700;
+}
+
+[data-theme="dark"] .navigation-bar a.current-page {
+  font-weight: 500;
+}
+
+.navigation-bar a:hover {
+  font-style: italic;
 }
 
 .link {

src/routes/downloads/+page.svelte

@@ -9,7 +9,7 @@
 
 <div class="text-column">
   <h1>Downloads</h1>
-  <p>Here you'll find all downloads.</p>
+  <p>You've decided to download ExploreCraft?<br>Here you'll find all the download links and instructions to install ExploreCraft!</p>
 </div>
 <MsgBox
   type="warning"
@@ -18,17 +18,7 @@
 />
 
 <div class="grid">
-  <article>
+  <article class="card">
-    <div>
-      <h4>ExploreCraft: Legacy</h4>
-      <p>
-        If you'd like to keep playing the legacy version of ExploreCraft, you
-        can download it here. Not recommended as it is not maintained anymore.
-      </p>
-      <button>Download</button>
-    </div>
-  </article>
-  <article>
     <div>
       <h4>ExploreCraft: Marbled</h4>
       <p>
@@ -36,20 +26,74 @@
         so you're better off playing with this rather than the other ones.
       </p>
       <button>Download</button>
+      <a href="#instructions" role="button" class="outline">Instructions</a>
+    </div>
+  </article>
+</div>
+
+<!-- Unstable Versions -->
+<details>
+  <!-- svelte-ignore a11y-no-redundant-roles -->
+  <summary class="secondary" role="button" id="unstable">Unstable Versions</summary>
+  <div class="grid">
+    <article>
+      <div>
+        <h4>ExploreCraft: Legacy</h4>
+        <div class="msg-box"><MsgBox type="error" message="Unmaintained!" prefix="Warning:" /></div>
+        <p>
+          If you'd like to keep playing the legacy version of ExploreCraft, you
+          can download it here. Not recommended as it is not maintained anymore and incompatible with Marbled.
+        </p>
+        <button>Download</button>
       </div>
     </article>
     <article>
       <h4>ExploreCraft: Dev</h4>
+      <div class="msg-box"><MsgBox type="warning" message="Unstable!" /></div>
       <p>
         ExploreCraft's Beta instance. Here be dragons! This is the in-dev version
         of ExploreCraft which may have game-breaking bugs, unfinished features and
         world corruptions.
       </p>
       <button>Download</button>
+      <a href="#instructions" role="button" class="outline">Instructions</a>
     </article>
   </div>
+</details>
+
+<!-- Instructions -->
+<h2 id="instructions">Instructions</h2>
+<p>Need help installing ExploreCraft? No problem! Just follow these few easy steps.</p>
+
+
+<h3>Installation</h3>
+<ul>
+  <li>
+    To install this modpack, you'll either need
+    <a href="https://prismlauncher.org" rel="noopener noreferrer" target="_blank"><b>PrismLauncher</b> (Recommended)</a> or 
+    <a href="https://multimc.org" rel="noopener noreferrer" target="_blank"><b>MultiMC</b></a>.
+    <br>Additionaly, you'll need to download one of the above instances (.zip files).
+  </li>
+  <li>
+    Create a new instance by using Ctrl-N (Or CMD-N on MacOS).
+  </li>
+  <li>
+    Open the "Import from ZIP" tab, and choose the file you just downloaded.
+  </li>
+  <li>
+    You can also give it a catchy name and a snazzy icon while you're at it.
+  </li>
+</ul>
+
 
 <style>
+  .card {
+    width: 50%;
+    margin-left: 25%;
+  }
+  a[role="button"]{
+    width: 100%;
+  }
 	/* button {
 		display: flex;
 		align-items: center;