Merge dev into main (#2)

Reviewed-on: https://gitpot.dev/sangelo/explorecraft-testing/pulls/2

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

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 */
 
-body {
+h1, h2, h3, h4, h5, h6, body {
     font-family: 'IBM Plex Mono', monospace;
     // background-color: #ffffff;
     // color: #000000;
@@ -48,6 +48,11 @@ 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/lib/modules/Modal.svelte

@@ -0,0 +1 @@
+<!-- WIP -->

src/lib/modules/MsgBox.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { onMount } from 'svelte';
+
+  export let type, message, prefix;
+
+  const colors = {
+    info: ['rgba(0, 123, 255, 0.2)', '#004690', '#007bff', '#b7d7ff'],
+    warning: ['rgba(255, 193, 7, 0.2)', '#644c03', '#ffc107', '#ffd067'],
+    error: ['rgba(220, 53, 69, 0.2)', '#691a22', '#dc3545', '#ff818d'],
+    default: ['rgba(0, 0, 0, 0.1)', '#333', '#929292', '#d3d3d3']
+  };
+
+  let [backgroundColor, fontColor, borderColor, darkFontColor] = colors[type] || colors.default;
+  prefix = prefix || (type === 'info' ? 'Info:' : type === 'warning' ? 'Warning:' : type === 'error' ? 'Error:' : '');
+
+  let bgStyle = `background-color: ${backgroundColor}; color: ${fontColor}; border-color: ${borderColor}`;
+
+  const changeColorScheme = (event) => {
+    fontColor = event.matches ? darkFontColor : colors[type][1];
+    bgStyle = `background-color: ${backgroundColor}; color: ${fontColor}; border-color: ${borderColor}`;
+  };
+
+  onMount(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', changeColorScheme);
+    changeColorScheme(mediaQuery);
+  });
+
+</script>
+
+<div class="msg-box {type}" style="{bgStyle}">
+  <p>
+    {#if prefix}<b>{prefix}</b>{/if}
+    {@html message}
+  </p>
+</div>
+
+<style>
+  .msg-box {
+    display: inline-block;
+    padding: 1em;
+    margin-bottom: 1em;
+    border-radius: 5px;
+    font-weight: normal;
+    border-width: 1px;
+    border-style: solid;
+    text-align: center;
+    align-self: center;
+  }
+
+  .msg-box p {
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .msg-box.bright {
+    background-color: var(--backgroundColor);
+    color: var(--fontColor);
+    border-color: var(--borderColor);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .msg-box.bright {
+      color: var(--darkFontColor);
+    }
+  }
+</style>

src/routes/+error.svelte

@@ -0,0 +1,16 @@
+<script>
+    import { page } from '$app/stores';
+</script>
+
+<h1>
+    {$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/+layout.svelte

@@ -1,8 +1,6 @@
 <script>
   import "../app.scss";
   import Header from "./Header.svelte";
-  // import gitpot from "$lib/assets/logo/gitpot_icon.svg"
-  import "./styles.css";
 </script>
 
 <div class="app">

src/routes/+page.svelte

@@ -1,7 +1,15 @@
 <script>
-	import Counter from './Counter.svelte';
+  	import { onMount } from 'svelte';
-	import welcome from '$lib/images/svelte-welcome.webp';
+
-	import welcome_fallback from '$lib/images/svelte-welcome.png';
+	function rand(min, max) {
+    	return Math.floor(Math.random() * (max - min + 1) + min)
+	}
+	
+	onMount(() => {
+		document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,14)}`);
+		console.log(document.getElementById('banner').src);
+	})
+
 </script>
 
 <svelte:head>
@@ -11,54 +19,33 @@
 
 <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" class="banner" data-tooltip="See more..."><img src="assets/images/gallery/pic0.png" id="banner" alt="Random picture from the gallery."></a>
 
-<!-- <section>
+<style>
-	<h1>
+	a.banner img {
-		<span class="welcome">
+		border-radius: 1em;
-			<picture>
+	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-				<source srcset={welcome} type="image/webp" />
+	  	align-self: center;
-				<img src={welcome_fallback} alt="Welcome" />
-			</picture>
-		</span>
-
-		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;
 	}
-
+	a.banner img:hover {
-	h1 {
+	  	transform: scale(1.005);
-		width: 100%;
+	  	box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
+	  	cursor: pointer;
 	}
-
+	.buttons {
-	.welcome {
+		margin-left: 25%;
-		display: block;
+		margin-right: 25%;
-		position: relative;
+		margin-bottom: 2em;
-		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/Counter.svelte

@@ -1,102 +0,0 @@
-<script>
-	import { spring } from 'svelte/motion';
-
-	let count = 0;
-
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
-
-	function modulo(n, m) {
-		// handle negative numbers
-		return ((n % m) + m) % m;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
-	</button>
-
-	<div class="counter-viewport">
-		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
-		</div>
-	</div>
-
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
-	</button>
-</div>
-
-<style>
-	.counter {
-		display: flex;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		margin: 1rem 0;
-	}
-
-	.counter button {
-		width: 2em;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background-color: transparent;
-		touch-action: manipulation;
-		font-size: 2rem;
-	}
-
-	.counter button:hover {
-		background-color: var(--color-bg-1);
-	}
-
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: #444;
-	}
-
-	.counter-viewport {
-		width: 8em;
-		height: 4em;
-		overflow: hidden;
-		text-align: center;
-		position: relative;
-	}
-
-	.counter-viewport strong {
-		position: absolute;
-		display: flex;
-		width: 100%;
-		height: 100%;
-		font-weight: 400;
-		color: var(--color-theme-1);
-		font-size: 4rem;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.counter-digits {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-
-	.hidden {
-		top: -100%;
-		user-select: none;
-	}
-</style>

src/routes/Header.svelte

@@ -1,27 +1,25 @@
 <script>
 	import { page } from '$app/stores';
-	import logo from '$lib/assets/logo/explorecraft.svg';
-	import github from '$lib/images/github.svg';
 	import Switcher from './Switcher.svelte';
 </script>
 
 <div class="header-container">
     <a class="link contrast" href="/">
         <div class="header">
-        <img class="logo" src="{logo}" alt="ExploreCraft Logo" />
+          <img class="logo" src="/assets/logo/explorecraft.svg" alt="ExploreCraft Logo" />
-        <div>ExploreCraft</div>
+          <div>ExploreCraft</div>
         </div>
     </a>
-	<nav id="navigation-bar">
+	<nav class="navigation-bar">
 		<ul>
-			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+			<li>
-				<a href="/" class="contrast">Home</a>
+				<a href="/" class="contrast {$page.url.pathname === '/' ? 'current-page' : undefined}">Home</a>
 			</li>
-			<li aria-current={$page.url.pathname === '/download' ? 'page' : undefined}>
+			<li>
-				<a href="/download" class="contrast">Download</a>
+				<a href="/downloads" class="contrast {$page.url.pathname === '/downloads' ? 'current-page' : undefined}">Download</a>
 			</li>
-			<li aria-current={$page.url.pathname.startsWith('/gallery') ? 'page' : undefined}>
+			<li>
-				<a href="/gallery" class="contrast">Gallery</a>
+				<a href="/gallery" class="contrast {$page.url.pathname === '/gallery' ? 'current-page' : undefined}">Gallery</a>
 			</li>
 			<li>
 				<Switcher/>
@@ -63,53 +61,69 @@
 .header {
   display: flex;
   align-items: center;
-  justify-content: space-between; /* Add this to align the logo and navigation on opposite sides */
+  justify-content: space-between;
-  padding: 0.5em;
+  padding-top: 0.5em;
-  padding-right: 1.5em; /* Change padding-left to padding-right */
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
   font-weight: 500;
   font-size: 1.5em;
 }
 
-#navigation-bar {
+.navigation-bar {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   list-style: none;
   margin: 0;
   margin-left: auto;
-  margin-right: 2em;
+  margin-right: 2.5%;
   padding: 0;
 }
 
-#navigation-bar li {
+.navigation-bar li {
   margin-left: 1em;
 }
 
-#navigation-bar a {
+.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 {
+.navigation-bar a.current-page {
+  font-weight: 600;
+}
+
+[data-theme="dark"] .navigation-bar a.current-page {
+  font-weight: 500;
+}
+
+.navigation-bar a:hover {
   font-style: italic;
+  font-weight: 300;
+}
+
+[data-theme="dark"] .navigation-bar a:hover {
+  font-style: italic;
+  font-weight: 200;
 }
 
 .link {
-  /* color: #000000; */
   text-decoration: none;
-  transition: font-style;
+  /* transition: font-style; */
+  margin-left: 2.5%;
 }
 
-.link:hover {
-  font-style: italic;
-}
 </style>

src/routes/Switcher.svelte

@@ -1,8 +1,6 @@
 <!-- Switcher.svelte -->
 <script>
   import { onMount } from "svelte";
-  import sun from "$lib/assets/icons/sun.svg";
-  import moon from "$lib/assets/icons/moon.svg";
 
   let isDarkMode = false;
 
@@ -25,9 +23,9 @@
 
 <button class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
   {#if isDarkMode}
-    <img src={sun} class="icon" alt="Light Mode" />
+    <img src="/assets/icons/sun.svg" class="icon" alt="Light Mode" />
   {:else}
-    <img src={moon} class="icon" alt="Dark Mode" />
+    <img src="/assets/icons/moon.svg" class="icon" alt="Dark Mode" />
   {/if}
 </button>
 

src/routes/celebrate/+page.svelte

@@ -5,7 +5,6 @@
 
 <script>
 	import { onMount } from 'svelte';
-	import celebrate from '$lib/assets/audio/8bit-win.mp3';
 
 	let characters = ['🥳', '🎉', '✨'];
 
@@ -51,7 +50,7 @@
 <div class="text-column">
 	<h1>Yahoo!</h1>
     <h2>Celebrate good times COME ON!</h2>
-	<audio loop="true" autoplay="true" src="{celebrate}" />
+	<audio loop="true" autoplay="true" src="assets/audio/8bit-win.mp3" />
 </div>
 
 <style>

src/routes/download/+page.js

@@ -1,9 +0,0 @@
-import { dev } from '$app/environment';
-
-// we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement
-export const csr = dev;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
-export const prerender = true;

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,141 @@
+<script>
+  import MsgBox from "$lib/modules/MsgBox.svelte";
+</script>
+
+<svelte:head>
+  <title>Downloads</title>
+  <meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="text-column">
+  <h1>Downloads</h1>
+  <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"
+  message="<br>Currently WIP. You'll find downloads on this page,<br>but they may not work properly."
+  prefix="ℹ️ Note ℹ️"
+/>
+
+<div class="grid">
+  <article class="main-card">
+    <div>
+      <h4>ExploreCraft: Marbled</h4>
+      <p>
+        The main way to play ExploreCraft. This is also the most stable version,
+        so you're better off playing with this rather than the other ones.
+      </p>
+      <a role="button" href="https://gitpot.dev/attachments/7a690df1-d78f-41fd-a9f7-610eacb369a9">Download</a>
+      <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 Releases
+  </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>
+        <a role="button" href="https://gitpot.dev/attachments/f249e088-14f3-4372-8aff-97f45810a763">Download</a>
+        <a href="#instructions" role="button" class="outline">Instructions</a>
+      </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>
+      <a href="https://gitpot.dev/ExploreCraft/modpack" role="button">Download</a>
+      <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).<br>
+    Open the "Import from ZIP" tab, and choose the file you just downloaded.<br>
+    You can also give it a catchy name and a snazzy icon while you're at it.
+    <img class="guide" alt="instance creation" src="assets/images/guide/instance-creation.png">
+  </li>
+  <li>
+    Once the import is complete, you can configure your instance however you like by pressing Ctrl-I (or CMD-I on a Mac.)
+  </li>
+  <li>
+    It is time to launch!<br>
+    You should see a "packwiz" window appear which will download all the mods you need.<br>
+    This tool is also responsible for keeping the modpack up to date.
+    <ul>
+      <li class="indented">
+        A window will appear asking you which optional mods you'd like to download. As it implies, none of them are necessary but recommended.
+      </li>
+      <li class="indented">
+        Mods downloading:
+      </li>
+      <li class="indented">
+        If a screen similar to this one appears, don't fret!
+        Just follow the guide
+        <a href="https://gitpot.dev/ExploreCraft/modpack/src/branch/marbled/manual-download.md" rel="noopener noreferrer" target="_blank">here</a>
+        to continue:
+      </li>
+    </ul>
+  </li>
+  <li>
+    The game will now boot up, and you'll be ready to rock! Have fun :D
+  </li>
+</ul>
+
+
+<style>
+  .main-card {
+    width: 50%;
+    justify-self: center;
+  }
+  a[role="button"]{
+    width: 100%;
+    margin-bottom: 1em;
+  }
+  li {
+    list-style: decimal;
+  }
+  li .indented {
+    list-style: disc;
+  }
+  img.guide {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    justify-self: center;
+    align-self: center;
+    border-radius: 1em;
+    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  }
+  img.guide:hover {
+    transform: scale(1.005);
+    box-shadow: 0px 0px 1em rgba(32, 32, 32, 0.6);
+    cursor: pointer;
+  }
+</style>

src/routes/examples/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Modal from "$lib/modules/Modal.svelte";
+    let showModal = false;
+    const openModal = () => {
+      showModal = true;
+    };
+  </script>
+  
+  <button on:click={openModal}>Open Modal</button>
+  {#if showModal}
+    <Modal title="Modal Title" msg="Modal Message" submit="https://example.com" bind:isOpen={showModal} />
+  {/if}
+  

src/routes/gallery/+page.js

@@ -1,9 +0,0 @@
-import { dev } from '$app/environment';
-
-// we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement
-export const csr = dev;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
-export const prerender = true;

src/routes/gallery/+page.svelte

@@ -1,9 +1,65 @@
 <svelte:head>
 	<title>Gallery</title>
-	<meta name="description" content="About this app" />
+	<meta name="description" content="Some sweet screenshots from ExploreCraft!" />
 </svelte:head>
 
 <div class="text-column">
 	<h1>Gallery</h1>
 	<p>Here you'll find the sweet screenshots 😉.</p>
 </div>
+
+<div class="grid">
+	<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="3"></div>
+</div>
+<div class="grid">
+	<div><img class="gallery-image" src="assets/images/gallery/pic9.png" alt="1"></div>
+</div>
+<div class="grid">
+	<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="3"></div>
+</div>
+<div class="grid">
+	<div><img class="gallery-image" src="assets/images/gallery/pic7.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="2"></div>
+</div>
+<div class="grid">
+	<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="3"></div>
+</div>
+<div class="grid">
+	<div><img class="gallery-image" src="assets/images/gallery/pic13.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic15.png" alt="3"></div>
+</div>
+<div class="grid">
+	<div><img class="gallery-image" src="assets/images/gallery/pic16.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="3"></div>
+</div>
+
+
+<style>
+	img.gallery-image {
+		border-radius: 1em;
+	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+	  	align-self: center;
+	}
+	img.gallery-image:hover {
+	  	transform: scale(1.005);
+	  	box-shadow: 0px 0px 1em rgba(32, 32, 32, 0.6);
+	  	cursor: pointer;
+	}
+	.gallery-image {
+		border-radius: 10px;
+		object-fit: fill;
+		width: 100%;
+		height: 100%;
+	}
+	.grid {
+		margin-bottom: 1em;
+	}
+</style>

src/routes/modlist/+page.svelte

@@ -0,0 +1,185 @@
+<h1>Modlist</h1>
+<div class="container">
+    <div class="column">
+      <ul>
+        <ul>
+            <li>Accurate Maps</li>
+            <li>Ad Astra!</li>
+            <li>Ada Paxels</li>
+            <li>Adorn</li>
+            <li>Advancement Plaques</li>
+            <li>AdventureZ</li>
+            <li>Alloy Forgery</li>
+            <li>Amethyst Tools</li>
+            <li>Angling Mod</li>
+            <li>Another Furniture</li>
+            <li>AntiGhost</li>
+            <li>Applied Energistics 2</li>
+            <li>Architectury</li>
+            <li>Auditory</li>
+            <li>Balm</li>
+            <li>Biome Makeover</li>
+            <li>Blocks</li>
+            <li>Boat Item View Fabric</li>
+            <li>Botarium</li>
+            <li>Chisel Refabricated</li>
+            <li>Chunky</li>
+            <li>Cloth Config v8</li>
+            <li>Continuity</li>
+            <li>Controlling For Fabric</li>
+            <li>Crafting Tweaks</li>
+            <li>Create Crafts and Additions</li>
+            <li>Croptopia</li>
+            <li>Detail Armor Bar</li>
+            <li>Eating Animaton</li>
+            <li>EldritchMobs</li>
+            <li>Enchanted Vertical Slabs</li>
+            <li>Enchanting Infuser</li>
+            <li>EntityCulling-Fabric</li>
+            <li>Extractinator</li>
+            <li>ExtrasSounds</li>
+            <li>Fabric language Kotlin</li>
+            <li>Fabric Waystones</li>
+            <li>Factory Blocks Mod</li>
+            <li>Falling Leaves</li>
+            <li>Fastback</li>
+            <li>FerriteCore</li>
+            <li>Frame</li>
+            <li>Global Packs</li>
+            <li>Hold That Chunk</li>
+            <li>Icarus</li>
+            <li>Iceberg</li>
+            <li>Indium</li>
+            <li>Interactic</li>
+            <li>Jade Addons</li>
+            <li>Konkrete</li>
+            <li>Ksyxis</li>
+            <li>Labels</li>
+            <li>Language Reload</li>
+            
+          </ul>
+          
+      </ul>
+    </div>
+    <div class="column">
+      <ul>
+        <li>Legendary Tooltips</li>
+        <li>Limits' Grapple</li>
+        <li>Ma Enchants</li>
+        <li>Macaw's Bridges</li>
+        <li>Macaw's Bridges BYG</li>
+        <li>Macaw's Doors</li>
+        <li>Macaw's Fences and Walls</li>
+        <li>Macaw's Furniture</li>
+        <li>Macaw's Paintings</li>
+        <li>Macaw's Paths and Pavings</li>
+        <li>Macaw's Roofs BYG</li>
+        <li>Macaw's Trapdoors</li>
+        <li>Macaw's Trapdoors</li>
+        <li>Macaw's Windows</li>
+        <li>Main Menu Credits</li>
+        <li>Mimic</li>
+        <li>Missing Wilds</li>
+        <li>MixinTrace</li>
+        <li>Mod Menu</li>
+        <li>Moonlight</li>
+        <li>More Chat History</li>
+        <li>MoreCreativeTabs</li>
+        <li>Mythic Metals</li>
+        <li>Mythic Upgrades</li>
+        <li>Naturalist</li>
+        <li>Nature's Compass</li>
+        <li>NiceLoad</li>
+        <li>No chat Reports</li>
+        <li>No Mob Farm</li>
+        <li>NotEnoughAnimations</li>
+        <li>Numismatic Overhaul</li>
+        <li>OPAC Create Mod Support</li>
+        <li>Open parties and claims</li>
+        <li>Pehkui</li>
+        <li>Polymorph</li>
+        <li>Powah!</li>
+        <li>Prism</li>
+        <li>Puzzle</li>
+        <li>Quartz Elevator</li>
+        <li>Quilt Loading Screen</li>
+        <li>Quiltgoslightyfasterlol</li>
+        <li>Recipe Book Is Pain</li>
+        <li>Reesse's Sodium Options</li>
+        <li>Resourcefulconfig</li>
+        <li>Roughly Enough Items</li>
+        <li>Satin</li>
+        <li>ServerCore</li>
+        <li>Sky Villages</li>
+        <li>Smooth boot</li>
+        <li>Sodium</li>
+        <li>Sodium Extra</li>
+        <li>Sound physics Remastered</li>
+        <li>Starlight</li>
+        <li>TerraBlender</li>
+        <li>Travaler's Backpack</li>
+        <li>Twigs</li>
+        <li>Villager Hats</li>
+        <li>Xareo's Minimap</li>
+        <li>Xareo's World Map</li>
+        <li>Your'e in Grave Danger</li>
+        <li>Your Reputation</li>
+        <li>YUNG's Better Desert Temples</li>
+        <li>YUNG's Better Dungeons</li>
+        <li>YUNG's Better Mineshaft</li>
+        <li>YUNG's Better Ocean Monuments</li>
+        <li>YUNG's Better Strongholds</li>
+      </ul>
+    </div>
+  </div>
+<details>
+    <summary role="button" class="secondary">Optional Mods</summary>
+    <div class="container">
+        <div class="column">
+          <ul>
+            <li>3D Skin Layers</li>
+            <li>Animatica</li>
+            <li>AppleSkin</li>
+            <li>Better F3</li>
+            <li>CapeTweaks</li>
+            <li>Chat Heads</li>
+            <li>Chunks fade in</li>
+            <li>CIT Resewn</li>
+            <li>ClickTrough</li>
+            <li>DashLoader</li>
+            <li>Draggable Resource Packs</li>
+            <li>Dynamic FPS</li>
+          </ul>
+        </div>
+        <div class="column">
+          <ul>
+            <li>Effective 💦</li>
+            <li>EmuNO</li>
+            <li>Iris shaders</li>
+            <li>Jade 🔍</li>
+            <li>Kappa</li>
+            <li>LambdaBetterGrass</li>
+            <li>LambDynamicLights</li>
+            <li>Mouse Wheelie</li>
+            <li>Ok Zoomer</li>
+            <li>Presence Footsteps</li>
+            <li>Reese’s Sodium Options</li>
+            <li>Too many Binds</li>
+          </ul>
+        </div>
+      </div>
+      
+  </details>
+
+  <style>
+
+.container {
+  overflow: auto;
+}
+
+.column {
+  width: 50%;
+  float: left;
+}
+
+  </style>

src/routes/styles.css

@@ -1,107 +0,0 @@
-/* @import '@fontsource/fira-mono';
-
-:root {
-	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	--font-mono: 'Fira Mono', monospace;
-	--color-bg-0: rgb(202, 216, 228);
-	--color-bg-1: hsl(209, 36%, 86%);
-	--color-bg-2: hsl(224, 44%, 95%);
-	--color-theme-1: #ff3e00;
-	--color-theme-2: #4075a6;
-	--color-text: rgba(0, 0, 0, 0.7);
-	--column-width: 42rem;
-	--column-margin-top: 4rem;
-	font-family: var(--font-body);
-	color: var(--color-text);
-}
-
-body {
-	min-height: 100vh;
-	margin: 0;
-	background-attachment: fixed;
-	background-color: var(--color-bg-1);
-	background-size: 100vw 100vh;
-	background-image: radial-gradient(
-			50% 50% at 50% 50%,
-			rgba(255, 255, 255, 0.75) 0%,
-			rgba(255, 255, 255, 0) 100%
-		),
-		linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
-}
-
-h1,
-h2,
-p {
-	font-weight: 400;
-}
-
-p {
-	line-height: 1.5;
-}
-
-a {
-	color: var(--color-theme-1);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-h1 {
-	font-size: 2rem;
-	text-align: center;
-}
-
-h2 {
-	font-size: 1rem;
-}
-
-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(--color-text);
-}
-
-.text-column {
-	display: flex;
-	max-width: 48rem;
-	flex: 0.6;
-	flex-direction: column;
-	justify-content: center;
-	margin: 0 auto;
-}
-
-input,
-button {
-	font-size: inherit;
-	font-family: inherit;
-}
-
-button:focus:not(:focus-visible) {
-	outline: none;
-}
-
-@media (min-width: 720px) {
-	h1 {
-		font-size: 2.4rem;
-	}
-}
-
-.visually-hidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: auto;
-	margin: 0;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	white-space: nowrap;
-} */