[a] add a note to the gallery

[c] changed random image chooser to choose optimized images
[a] lossy optimized image previews for faster loading
2024-06-21 09:14:37 +02:00 · 2024-06-21 09:12:31 +02:00 · 2024-06-21 09:10:48 +02:00 · 2024-06-20 09:02:10 +02:00 · 2024-06-13 11:33:15 +02:00 · 2024-06-13 11:06:42 +02:00
112 changed files with 3856 additions and 2029 deletions
--- a/README.md
+++ b/README.md
@ -1,34 +1,38 @@
 # ExploreCraft: Website
-This is the ExploreCraft Website. Created with Svelte, PicoCSS, and dedication by [Sangelo](https://gitpot.dev/sangelo/) & [LogolicusZ](https://gitpot.dev/LogolicusZ/).
+
+This is the ExploreCraft Website. Created with Svelte, PicoCSS, and dedication by [Sangelo](https://gitpot.org/sangelo/) & [LogolicusZ](https://gitpot.org/LogolicusZ/).

 <a href="https://explorecraft.net">
  <picture>
-    <source srcset="docs/assets/screenshot-dark.png" media="(prefers-color-scheme: dark)">
-    <img src="docs/assets/screenshot-light.png">
+    <source srcset="docs/assets/screenshot-dark.png" media="(prefers-color-scheme: dark)" alt="ExploreCraft Website Screenshot">
+    <img src="docs/assets/screenshot-light.png" alt="ExploreCraft Website Screenshot">
  </picture>
 </a>

 ## License
+
 This project is licensed under the MPL v2.0. More info [here](./LICENSE).

 ## Developing
+
 To start developing, clone the repository.
+
 ```bash
 # clone the website
-git clone https://gitpot.dev/ExploreCraft/website.git
+git clone https://gitpot.org/ExploreCraft/website.git
 ```

 Once you've cloned the repository you'll need to install the required dependencies, and then, start a development server:

 ```bash
-# install dependencies (you can also use pnpm install or yarn)
-npm install
+# install dependencies (you can also use pyarn install or yarn)
+yarn install

 # start vite development server
-npm run dev
+yarn run dev

 # or start the server and also open the website in a new browser tab
-npm run dev -- --open
+yarn run dev -- --open

  VITE v4.3.9  ready in 358 ms

@ -36,6 +40,7 @@ npm run dev -- --open
  ➜  Network: use --host to expose
  ➜  press h to show help
 ```
+
 This server will automatically apply changes you do to the code, so just start working and Vite will do the rest. No need to refresh!

 ## Building
@ -44,14 +49,15 @@ To build a production-ready version of this website:

 ```bash
 # run build action
-npm run build
+yarn run build
 ```
+
 You can also preview the production build (You'll need to build the website first if you haven't done so already):

 ```bash
 # build the website
-npm run build
+yarn run build

 # start a preview server
-npm run preview
+yarn run preview
 ```
--- a/docs/assets/screenshot-dark.png
+++ b/docs/assets/screenshot-dark.png
--- a/docs/assets/screenshot-light.png
+++ b/docs/assets/screenshot-light.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,12 +9,16 @@
  "devDependencies": {
    "@fontsource/fira-mono": "^4.5.10",
    "@neoconfetti/svelte": "^1.0.0",
-    "@picocss/pico": "^1.5.10",
+    "@picocss/pico": "^2.0.6",
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/adapter-node": "^1.2.4",
+    "@sveltejs/adapter-static": "^2.0.3",
    "@sveltejs/kit": "^1.20.5",
+    "fuse.js": "^7.0.0",
+    "nprogress": "^0.2.0",
    "sass": "^1.62.0",
    "svelte": "^3.54.0",
+    "svelte-material-icons": "^3.0.5",
    "svelte-preprocess": "^5.0.3",
    "vite": "^4.3.0"
  },
--- a/src/app.html
+++ b/src/app.html
@ -6,6 +6,17 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
+	<noscript>
+		<div class="noscript">This site uses JavaScript extensively. Please consider enabling it.</div>
+		<style>
+			.noscript {
+				background-color: #fd9696;
+				text-align: center;
+				color: black;
+				padding: 0.3em;
+			}
+		</style>
+	</noscript>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
--- a/src/app.scss
+++ b/src/app.scss
@ -1,4 +1,7 @@
-@import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
+// @import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
+@use "@picocss/pico/scss/pico" with (
+  $theme-color: "green"
+);
@import url('/assets/fonts/fonts.css');
 /* @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css'); */

@ -10,50 +13,72 @@ h1, h2, h3, h4, h5, h6, body {
    // color: #000000;
 }

-/* Green Light scheme (Default) */
-/* Can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-  --primary: #43a047;
-  --primary-hover: #388e3c;
-  --primary-focus: rgba(67, 160, 71, 0.125);
-  --primary-inverse: #FFF;
  background-color: #FAF9F6;
 }

-/* Green Dark scheme (Auto) */
-/* Automatically enabled if user has Dark mode enabled */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --primary: #43a047;
-    --primary-hover: #4caf50;
-    --primary-focus: rgba(67, 160, 71, 0.25);
-    --primary-inverse: #FFF;
-  }
-}
- 
-/* Green Dark scheme (Forced) */
-/* Enabled if forced with data-theme="dark" */
-[data-theme="dark"] {
-  --primary: #43a047;
-  --primary-hover: #4caf50;
-  --primary-focus: rgba(67, 160, 71, 0.25);
-  --primary-inverse: #FFF;
-}
-
-/* Green (Common styles) */
-:root {
-  --form-element-active-border-color: var(--primary);
-  --form-element-focus-color: var(--primary-focus);
-  --switch-color: var(--primary-inverse);
-  --switch-checked-background-color: var(--primary);
-}
-
 p, li {
  cursor: text;
 }

 article {
-  border-radius: 10px;
+  border-radius: 0.25rem;
  box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2);
 }
+
+[role="button"].card {
+  background-color: $zinc-100;
+  border-color: $zinc-50;
+  p {
+    color: black;
+  }
+}
+
+button.transparent,
+[role="button"].transparent {
+  --pico-background-color: var(--pico-form-element-background-color);
+  --pico-border-color: var(--pico-form-element-border-color);
+  border-left: none;
+  border-right: none;
+  color: black;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+[data-theme="dark"] button.transparent,
+[data-theme="dark"] [role="button"].transparent {
+  color: white;
+}
+
+[data-theme="dark"] [role="button"].card {
+  background-color: $slate-800;
+  border-color: $slate-750;
+  p {
+    color: white;
+  }
+}
+
+.overflowing::after {
+  background: linear-gradient(to top, $zinc-100, #00000000);
+}
+
+[data-theme="dark"] .overflowing::after {
+  background: linear-gradient(to top, $slate-800, #00000000);
+}
+
+.top-button.show {
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+#nprogress .bar {
+  background: #398711 !important;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  box-shadow: 0 0 10px #398711, 0 0 6px #398711 !important;
+}
--- a/src/lib/common.ts
+++ b/src/lib/common.ts
@ -0,0 +1,15 @@
+export function smoothScrollTo(elementId: string) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
+}
+
+export function handleKeydown(elementId: string, event: KeyboardEvent) {
+    // Trigger redirection on Enter key or Space bar
+    if (event.key === 'Enter' || event.key === ' ') {
+        smoothScrollTo(elementId);
+    }
+}
--- a/src/lib/modules/ModCards.svelte
+++ b/src/lib/modules/ModCards.svelte
@ -0,0 +1,250 @@
+<script>
+  import { afterUpdate, onMount } from "svelte";
+  import Fuse from "fuse.js"; // Import Fuse.js
+  import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+  import IconClose from 'svelte-material-icons/Close.svelte';
+
+  let mods = { mods: [], optional_mods: [] };
+  let timeout;
+  let searchQuery = "";
+  let selectedFile = "modlist-marbled.json";
+  let fileList = [];
+  let loading = true;
+
+  let searchQueryInput = (event) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(checkOverflow, 300); // Debounced input handling
+  };
+
+  function checkOverflow() {
+    const modCards = document.querySelectorAll('.mod-card');
+    modCards.forEach((modCard) => {
+      if (modCard.scrollHeight > modCard.offsetHeight) {
+        modCard.classList.add('overflowing');
+      }
+    });
+  }
+
+  function removeOverflow() {
+    const modCards = document.querySelectorAll('.mod-card');
+    modCards.forEach(
+      (modCard) => modCard.classList.remove('overflowing')
+    );
+  }
+
+  async function fetchData(file) {
+    const response = await fetch(`/assets/json/${file}`);
+    const data = await response.json();
+    mods = data;
+    // Create Fuse instances for fuzzy search
+    fuseMods = new Fuse(mods.mods, {
+      keys: ["name", "description"],
+      threshold: 0.4
+    });
+    fuseOptionalMods = new Fuse(mods.optional_mods, {
+      keys: ["name", "description"],
+      threshold: 0.4
+    });
+  }
+
+  onMount(async () => {
+    loading = true;
+    const response = await fetch("/assets/json/modlist-items.json");
+    const data = await response.json();
+    fileList = data;
+    await fetchData(selectedFile);
+    checkOverflow();
+    loading = false;
+  });
+
+  let fuseMods, fuseOptionalMods;
+
+  function search(query, mods, fuse) {
+    if (!query) return mods;
+    const results = fuse.search(query);
+    return results.map(result => result.item);
+  }
+
+  function clearInput() {
+    clearTimeout(timeout);
+    searchQuery = "";
+    setTimeout(checkOverflow, 300); // Debounced overflow check
+  }
+
+  function handleFileChange(event) {
+    selectedFile = event.target.value;
+    fetchData(selectedFile).then(() => checkOverflow());
+  }
+
+  afterUpdate(() => {
+    loading = true;
+    removeOverflow();
+    checkOverflow();
+    loading = false;
+  });
+</script>
+
+<div class="search-container" role="group">
+  <input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} on:input={searchQueryInput} />
+  <button class="close transparent" on:click={() => clearInput()}><IconClose size="1em" /></button>
+  <select bind:value={selectedFile} on:change={handleFileChange}>
+    {#each fileList as file}
+      <option value={file.file}>{file.name}</option>
+    {/each}
+  </select>
+</div>
+<div class="results-bar">
+  <p>Results: {search(searchQuery, mods.mods, fuseMods).length + search(searchQuery, mods.optional_mods, fuseOptionalMods).length}</p>
+  <a href="#optional-mods"><IconChevronDown size="1.2em" /> View Optional Mods</a>
+</div>
+
+<hr />
+
+{#if loading}
+  <p>Loading...</p>
+{:else if search(searchQuery, mods.mods, fuseMods).length === 0 && search(searchQuery, mods.optional_mods, fuseOptionalMods).length === 0}
+  <p>⚠️ No results found.</p>
+{:else}
+  <div class="grid" id="mods">
+    {#each Array(Math.ceil(search(searchQuery, mods.mods, fuseMods).length / 3)) as _, index}
+      {#each search(searchQuery, mods.mods, fuseMods).slice(index * 3, (index + 1) * 3) as mod}
+        <a
+          role="button"
+          class="mod-card card contrast"
+          href={mod.link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
+          <div class="mod-card-text-ct">
+            <p class="mod-card-name">{mod.name}</p>
+            <p class="mod-card-desc">{mod.description}</p>
+          </div>
+        </a>
+      {/each}
+    {/each}
+  </div>
+
+  <details open>
+    <!-- svelte-ignore a11y-no-redundant-roles -->
+    <summary role="button" class="secondary">Optional Mods</summary>
+    <div class="grid" id="optional-mods">
+      {#each Array(Math.ceil(search(searchQuery, mods.optional_mods, fuseOptionalMods).length / 3)) as _, index}
+        {#each search(searchQuery, mods.optional_mods, fuseOptionalMods).slice(index * 3, (index + 1) * 3) as mod}
+          <a
+            role="button"
+            class="mod-card card contrast"
+            href={mod.link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
+            <div class="mod-card-text-ct">
+              <p class="mod-card-name">{mod.name}</p>
+              <p class="mod-card-desc">{mod.description}</p>
+            </div>
+          </a>
+        {/each}
+      {/each}
+    </div>
+  </details>
+{/if}
+
+<style lang="scss">
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    margin-bottom: 1em;
+    gap: 1em;
+  }
+
+  .search-container {
+    display: flex;
+
+    select {
+      width: 40%;
+      border-radius: 0px 0.25rem 0.25rem 0px;
+    }
+
+    input {
+      border-radius: 0.25rem 0 0 0.25rem;
+    }
+
+    button.close {
+      padding: 0 1em 0 1em;
+    }
+  }
+
+  .results-bar {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    p {
+      margin: 0;
+    }
+    a {
+      margin-left: auto;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .mod-card {
+    display: flex;
+    justify-content: center;
+    padding: 0.5em 1em;
+    max-height: 6em;
+    overflow: hidden;
+    transition: max-height 0.3s ease-in-out; // Smooth transition
+
+    img.mod-card-logo {
+      height: 4em;
+      width: 4em;
+      margin-right: 1em;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      align-self: flex-start;
+      margin: 0.5em 1em 0.5em 0;
+      z-index: 2;
+    }
+
+    .mod-card-text-ct {
+      width: 100%;
+      text-align: left;
+      p {
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+      }
+      p.mod-card-name {
+        font-weight: 700;
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  :global(.overflowing) {
+    position: relative;
+    
+    &::after {
+      content: '';
+      opacity: 1;
+      position: absolute;
+      width: 100%;
+      height: 3em;
+      bottom: 0em;
+      right: 0em;
+      z-index: 1;
+      transition: opacity 0.25s ease-in-out;
+    }
+
+    &:hover {
+      max-height: 100em !important;
+      &::after {
+        opacity: 0;
+      }
+    }
+  }
+</style>
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@ -5,3 +5,5 @@ export const load = ({ url }) => {
    pathname
  }
 }
+
+export const prerender = true
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,9 +1,45 @@
 <script>
  import "../app.scss";
  import Header from "./Header.svelte";
+  import NProgress from "nprogress";
+  import { navigating } from "$app/stores";
+  import { page } from '$app/stores';
+  import "nprogress/nprogress.css";
+  import { smoothScrollTo, handleKeydown } from "$lib/common";
+  import IconChevronUp from 'svelte-material-icons/ChevronUp.svelte';

-  import { fly } from 'svelte/transition'
-  export let data
+  import { fly } from "svelte/transition";
+  import { onMount } from "svelte";
+  export let data;
+  let cached = $page.scrollRestoration === 'manual';
+
+  NProgress.configure({
+    // Full list: https://github.com/rstacruz/nprogress#configuration
+    minimum: 0.16,
+    showSpinner: false
+  });
+
+  $: {
+    if ($navigating && !cached) {
+      NProgress.start();
+    }
+    if (!$navigating && !cached) {
+      NProgress.done();
+    }
+  }
+
+  onMount(() => {
+    function toggleTopButton() {
+      const topButton = document.querySelector(".top-button");
+      if (window.scrollY >= window.innerHeight) {
+        topButton.classList.add("show");
+      } else {
+        topButton.classList.remove("show");
+      }
+    }
+
+    window.addEventListener("scroll", toggleTopButton);
+  });
 </script>

 <div class="app">
@ -18,14 +54,29 @@
    </main>
  {/key}

+  <!-- svelte-ignore a11y-missing-attribute -->
+  <a
+    role="button"
+    tabindex="0"
+    class="top-button"
+    on:click={() => smoothScrollTo("header")}
+    on:keydown={(event) => handleKeydown("header", event)}
+  >
+    <IconChevronUp size="1.5em" />
+  </a>
+
  <footer>
    <p>
-      &copy; Sangelo & LogolicusZ, 2023 | <a href="https://gitpot.dev/ExploreCraft/website"> Source Code</a>
+      &copy; Sangelo & LogolicusZ, 2023-2024 | <a
+        href="https://gitpot.org/ExploreCraft/website"
+      >
+        Source Code</a
+      >
    </p>
  </footer>
 </div>

-<style>
+<style lang="scss">
  .app {
    display: flex;
    flex-direction: column;
@ -55,6 +106,23 @@
    font-weight: normal;
  }

+  .top-button {
+    display: flex;
+    visibility: hidden;
+    position: fixed;
+    width: 2.5em;
+    height: 2.5em;
+    bottom: 1em;
+    right: 1em;
+    z-index: 999;
+    opacity: 0;
+    padding: 0;
+    transition: 0.2s ease-in-out;
+    border-radius: 1000px;
+    align-items: center;
+    justify-content: center;
+  }
+
  @media (min-width: 480px) {
    footer {
      padding: 0.1em 0;
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,51 +1,71 @@
 <script>
-  	import { onMount } from 'svelte';
+  import { onMount } from "svelte";

-	function rand(min, max) {
-    	return Math.floor(Math.random() * (max - min + 1) + min)
-	}
+  let modpack = "marbled"

-	onMount(() => {
-		document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,14)}`);
-		console.log(document.getElementById('banner').src);
-	})
+  function rand(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }

+  onMount(() => {
+    document.getElementById("banner").src = document
+      .getElementById("banner")
+      .src.replace("pic0", `${modpack}/optimized/pic${rand(1, 30)}`);
+    console.log(document.getElementById("banner").src);
+  });
 </script>

 <svelte:head>
-	<title>ExploreCraft</title>
-	<meta name="description" content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft 1.19.2" />
+  <title>ExploreCraft</title>
+  <meta
+    name="description"
+    content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft"
+  />
 </svelte:head>

 <div class="text-column">
-	<h1>ExploreCraft</h1>
-	<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>
+  <h1 class="main-title">ExploreCraft</h1>
+  <p>
+    This is ExploreCraft! A modpack for Minecraft 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>
+  <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>
+<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>

 <style>
-	a.banner img {
-		border-radius: 1em;
-	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-	  	align-self: center;
-	}
-	a.banner img:hover {
-	  	transform: scale(1.005);
-	  	box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
-	  	cursor: pointer;
-	}
-	.buttons {
-		margin-left: 25%;
-		margin-right: 25%;
-		margin-bottom: 2em;
-	}
+  .main-title {
+    margin-bottom: 2em;
+  }
+  a.banner img {
+    border-radius: 0.25rem;
+    transition:
+      all 0.3s ease-in-out,
+      box-shadow 0.3s ease-in-out;
+    align-self: center;
+  }
+  a.banner img:hover {
+    transform: scale(1.005);
+    box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
+    cursor: pointer;
+  }
+  .buttons {
+    margin-left: 25%;
+    margin-right: 25%;
+    margin-bottom: 2em;
+  }
 </style>
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@ -3,7 +3,7 @@
 	import Switcher from './Switcher.svelte';
 </script>

-<div class="header-container">
+<div class="header-container" id="header">
    <a class="link contrast" href="/">
        <div class="header">
          <img class="logo" src="/assets/logo/explorecraft.svg" alt="ExploreCraft Logo" />
@ -24,6 +24,9 @@
 			<li>
 				<a href="/gallery" class="contrast {$page.url.pathname === '/gallery' ? 'current-page' : undefined}">Gallery</a>
 			</li>
+      <li>
+        <a href="https://discord.gg/Z2YehhEUVr" target="_blank" rel="noopener noreferrer" class="contrast">Discord</a>
+      </li>
 			<li>
 				<Switcher/>
 			</li>
@ -86,6 +89,7 @@

 .navigation-bar li {
  margin-left: 1em;
+  cursor: default;
 }

 .navigation-bar a {
@ -94,7 +98,8 @@
  font-weight: 400;
  font-size: 1em;
  text-decoration: none;
-  transition: font-style;
+  cursor: pointer;
+  user-select: none;
 }

 [data-theme="dark"] .navigation-bar a {
@ -103,7 +108,6 @@
  font-weight: 300;
  font-size: 1em;
  text-decoration: none;
-  transition: font-style;
 }

 .navigation-bar a.current-page {
@ -115,11 +119,12 @@
  display: block;
  width: 20px;
  height: 4px;
-  background-color: #000;
+  background-color: #1b2832;
  border-radius: 2px;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
+  transition: ease-in-out 0.05s;
 }

 [data-theme="dark"] .navigation-bar a.current-page {
@ -127,15 +132,7 @@
 }

 [data-theme="dark"] .navigation-bar a.current-page::after {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 4px;
  background-color: #fff;
-  border-radius: 2px;
-  margin-top: 4px;
-  margin-left: auto;
-  margin-right: auto;
 }


--- a/src/routes/Switcher.svelte
+++ b/src/routes/Switcher.svelte
@ -21,36 +21,59 @@
  });
 </script>

-<button class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<label class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
+  <input class="input" checked="checked" type="button">
  {#if isDarkMode}
    <img src="/assets/icons/sun.svg" class="icon" alt="Light Mode" />
  {:else}
    <img src="/assets/icons/moon.svg" class="icon" alt="Dark Mode" />
  {/if}
-</button>
+</label>

 <style>
  .switcher {
-    padding: 0.5rem;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    color: var(--text-color); /* Set the color for the button icon */
+    --bg-color: #ffffff00;
+    --main-color: #0b0d0c;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: var(--bg-color);
+    border-radius: 100%;
+    border: 2px solid var(--main-color);
+    box-shadow: 4px 4px var(--main-color);
  }

-  .icon {
-    width: 1.5em;
-    height: 1.5em;
-  }
-
-  /* Dark mode styles */
-  :global(.dark) .icon {
+  :global(.dark) {
    filter: invert(100%);
  }

-  /* Dark theme styles */
-  :global(.dark) {
-    --bg-color: #111;
-    --text-color: #fff;
+  .input {
+    cursor: pointer;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    opacity: 0;
  }
+
+  .icon {
+    position: absolute;
+    top: calc(50% -13px);
+    left: calc(50% -13px);
+    width: 24px;
+    height: 24px;
+  }
+
+  .switcher:active {
+    box-shadow: 0px 0px var(--main-color);
+    transform: translate(4px, 4px);
+  }
+
+  .switcher {
+  transition: ease-in-out 0.05s;
+}
 </style>
--- a/src/routes/celebrate/+page.js
+++ b/src/routes/celebrate/+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;
--- a/src/routes/downloads/+page.svelte
+++ b/src/routes/downloads/+page.svelte
@ -4,18 +4,13 @@

 <svelte:head>
  <title>Downloads</title>
-  <meta name="description" content="About this app" />
+  <meta name="description" content="Download the ExploreCraft modpack here!" />
 </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>though some links aren't currently ready."
-  prefix="ℹ️ Note ℹ️"
-/>

 <div class="grid">
  <article class="main-card">
@ -26,7 +21,7 @@
        download this version. It is the most stable.
        For more versions, open the "Unstable Releases" section down below.
      </p>
-      <a role="button" href="https://gitpot.dev/attachments/7a690df1-d78f-41fd-a9f7-610eacb369a9">Download</a>
+      <a role="button" href="https://gitpot.org/ExploreCraft/modpack/releases/tag/v2.0">Download</a>
      <a href="#instructions" role="button" class="outline">Instructions</a>
    </div>
  </article>
@ -46,7 +41,7 @@
          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 role="button" href="https://gitpot.org/ExploreCraft/modpack/releases/tag/v1.0">Download</a>
        <a href="#instructions" role="button" class="outline">Instructions</a>
      </div>
    </article>
@ -58,7 +53,7 @@
        of ExploreCraft which may have game-breaking bugs, unfinished features and
        world corruptions at the cost of new features.
      </p>
-      <a href="https://gitpot.dev/ExploreCraft/modpack" role="button">Download</a>
+      <a href="https://gitpot.org/ExploreCraft/modpack/src/branch/dev-marbled" role="button">Download</a>
      <a href="#instructions" role="button" class="outline">Instructions</a>
    </article>
  </div>
@ -103,7 +98,7 @@
        If a screen similar to this one appears, don't fret!<br>
        <img class="guide" src="assets/images/guide/manual-download.png" alt="Manual Download error in packwiz"><br>
        Just follow the guide
-        <a href="https://gitpot.dev/ExploreCraft/modpack/src/branch/marbled/manual-download.md" rel="noopener noreferrer" target="_blank">here</a>
+        <a href="https://gitpot.org/ExploreCraft/modpack/src/branch/marbled/manual-download.md" rel="noopener noreferrer" target="_blank">here</a>
        to continue:
      </li>
    </ul>
@ -115,6 +110,10 @@


 <style>
+  .msg-box {
+    display: flex;
+    justify-content: center;
+  }
  .main-card {
    width: 50%;
    justify-self: center;
@ -134,7 +133,7 @@
    margin-bottom: 1em;
    justify-self: center;
    align-self: center;
-    border-radius: 1em;
+    border-radius: 0.25rem;
    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  img.guide:hover {
--- a/src/routes/examples/+page.svelte
+++ b/src/routes/examples/+page.svelte
@ -1,13 +0,0 @@
-<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}
-  
--- a/src/routes/gallery/+page.svelte
+++ b/src/routes/gallery/+page.svelte
@ -5,46 +5,76 @@

 <div class="text-column">
 	<h1>Gallery</h1>
-	<p>Have a sneak-peek into the modpack with some screenshots!</p>
+	<p>
+		Have a sneak-peek into the modpack with some screenshots!<br>
+		Click on an image to see the full quality.
+	</p>
 </div>

 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="pic1"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="pic2"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="pic3"></div>
+	<a href="assets/images/gallery/marbled/pic1.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic1.png" alt="pic1"></a>
+	<a href="assets/images/gallery/marbled/pic2.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic2.png" alt="pic2"></a>
+	<a href="assets/images/gallery/marbled/pic3.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic3.png" alt="pic3"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic9.png" alt="pic4"></div>
+	<a href="assets/images/gallery/marbled/pic9.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic9.png" alt="pic4"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="pic5"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="pic6"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="pic7"></div>
+	<a href="assets/images/gallery/marbled/pic4.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic4.png" alt="pic5"></a>
+	<a href="assets/images/gallery/marbled/pic5.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic5.png" alt="pic6"></a>
+	<a href="assets/images/gallery/marbled/pic6.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic6.png" alt="pic7"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic7.png" alt="pic8"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="pic9"></div>
+	<a href="assets/images/gallery/marbled/pic7.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic7.png" alt="pic8"></a>
+	<a href="assets/images/gallery/marbled/pic8.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic8.png" alt="pic9"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="pic10"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="pic11"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="pic12"></div>
+	<a href="assets/images/gallery/marbled/pic10.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic10.png" alt="pic10"></a>
+	<a href="assets/images/gallery/marbled/pic11.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic11.png" alt="pic11"></a>
+	<a href="assets/images/gallery/marbled/pic12.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic12.png" alt="pic12"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic13.png" alt="pic13"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="pic14"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic15.png" alt="pic15"></div>
+	<a href="assets/images/gallery/marbled/pic13.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic13.png" alt="pic13"></a>
+
+	<a href="assets/images/gallery/marbled/pic15.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic15.png" alt="pic15"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic16.png" alt="pic16"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="pic17"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="pic18"></div>
+	<a href="assets/images/gallery/marbled/pic16.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic16.png" alt="pic16"></a>
+	<a href="assets/images/gallery/marbled/pic17.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic17.png" alt="pic17"></a>
+	<a href="assets/images/gallery/marbled/pic18.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic18.png" alt="pic18"></a>
 </div>

+<div class="grid">
+	<a href="assets/images/gallery/marbled/pic19.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic19.png" alt="pic19"></a>
+	<a href="assets/images/gallery/marbled/pic20.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic20.png" alt="pic20"></a>
+	<a href="assets/images/gallery/marbled/pic21.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic21.png" alt="pic21"></a>
+</div>
+<div class="grid">
+	<a href="assets/images/gallery/marbled/pic22.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic22.png" alt="pic22"></a>
+	<a href="assets/images/gallery/marbled/pic23.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic23.png" alt="pic23"></a>
+	<a href="assets/images/gallery/marbled/pic24.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic24.png" alt="pic24"></a>
+</div>

+<div class="grid">
+	<a href="assets/images/gallery/marbled/pic25.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic25.png" alt="pic25"></a>
+	<a href="assets/images/gallery/marbled/pic14.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic14.png" alt="pic14"></a>
+	<a href="assets/images/gallery/marbled/pic26.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic26.png" alt="pic26"></a>
+</div>
+
+<div class="grid">
+<a href="assets/images/gallery/marbled/pic27.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic27.png" alt="pic27"></a>
+</div>
+<div class="grid">
+	<a href="assets/images/gallery/marbled/pic28.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic28.png" alt="pic28"></a>
+
+	<a href="assets/images/gallery/marbled/pic29.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic29.png" alt="pic29"></a>
+</div>
+<div class="grid">
+	<a href="assets/images/gallery/marbled/pic30.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic30.png" alt="pic30"></a>
+</div>
 <style>
 	img.gallery-image {
-		border-radius: 1em;
+		border-radius: 0.25rem;
 	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 	  	align-self: center;
 	}
--- a/src/routes/modlist/+page.svelte
+++ b/src/routes/modlist/+page.svelte
@ -1,185 +1,21 @@
+<script>
+  import ModCards from "../../lib/modules/ModCards.svelte";
+
+</script>
+
+<svelte:head>
+  <title>ExploreCraft</title>
+  <meta
+    name="description"
+    content="All the mods used in the ExploreCraft modpack. This list will be kept up-to-date as much as possible."
+  />
+</svelte:head>
+
 <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>
+<p>
+  Here's ExploreCraft's modlist! We will keep this list up-to-date as much as possible.<br>
+  Choose an ExploreCraft version in the dropdown next to the search field.
+</p>
+<p>Please report any missing mods on our <a href="https://discord.gg/Z2YehhEUVr" target="_blank" rel="noopener noreferrer">Discord</a>.</p>

-          </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>
+<ModCards />
--- a/src/variables.scss
+++ b/src/variables.scss
@ -1,2 +1,9 @@
 /* Variables and mixins declared here will be available in all other SCSS files */ /* https://github.com/picocss/pico/issues/201 */
 $semantic-root-element: "body div:first-child";
+
+// colors
+$zinc-50: #F0F1F3;
+$zinc-100: #E0E3E7;
+
+$slate-800: #2A3140;
+$slate-750: #333C4E;
--- a/static/assets/images/gallery/2023-06-12_18.51.51.png
+++ b/static/assets/images/gallery/2023-06-12_18.51.51.png
--- a/static/assets/images/gallery/2023-06-12_18.54.15.png
+++ b/static/assets/images/gallery/2023-06-12_18.54.15.png
--- a/static/assets/images/gallery/2023-06-12_18.54.28.png
+++ b/static/assets/images/gallery/2023-06-12_18.54.28.png
--- a/static/assets/images/gallery/2023-06-12_18.54.50.png
+++ b/static/assets/images/gallery/2023-06-12_18.54.50.png
--- a/static/assets/images/gallery/2023-06-12_18.55.06.png
+++ b/static/assets/images/gallery/2023-06-12_18.55.06.png
--- a/static/assets/images/gallery/2023-06-12_18.55.27.png
+++ b/static/assets/images/gallery/2023-06-12_18.55.27.png
--- a/static/assets/images/gallery/2023-06-12_18.55.41.png
+++ b/static/assets/images/gallery/2023-06-12_18.55.41.png
--- a/static/assets/images/gallery/2023-06-12_18.57.06.png
+++ b/static/assets/images/gallery/2023-06-12_18.57.06.png
--- a/static/assets/images/gallery/2023-06-12_18.58.53.png
+++ b/static/assets/images/gallery/2023-06-12_18.58.53.png
--- a/static/assets/images/gallery/marbled/optimized/pic1.png
+++ b/static/assets/images/gallery/marbled/optimized/pic1.png
--- a/static/assets/images/gallery/marbled/optimized/pic10.png
+++ b/static/assets/images/gallery/marbled/optimized/pic10.png
--- a/static/assets/images/gallery/marbled/optimized/pic11.png
+++ b/static/assets/images/gallery/marbled/optimized/pic11.png
--- a/static/assets/images/gallery/marbled/optimized/pic12.png
+++ b/static/assets/images/gallery/marbled/optimized/pic12.png
--- a/static/assets/images/gallery/marbled/optimized/pic13.png
+++ b/static/assets/images/gallery/marbled/optimized/pic13.png
--- a/static/assets/images/gallery/marbled/optimized/pic14.png
+++ b/static/assets/images/gallery/marbled/optimized/pic14.png
--- a/static/assets/images/gallery/marbled/optimized/pic15.png
+++ b/static/assets/images/gallery/marbled/optimized/pic15.png
--- a/static/assets/images/gallery/marbled/optimized/pic16.png
+++ b/static/assets/images/gallery/marbled/optimized/pic16.png
--- a/static/assets/images/gallery/marbled/optimized/pic17.png
+++ b/static/assets/images/gallery/marbled/optimized/pic17.png
--- a/static/assets/images/gallery/marbled/optimized/pic18.png
+++ b/static/assets/images/gallery/marbled/optimized/pic18.png
--- a/static/assets/images/gallery/marbled/optimized/pic19.png
+++ b/static/assets/images/gallery/marbled/optimized/pic19.png
--- a/static/assets/images/gallery/marbled/optimized/pic2.png
+++ b/static/assets/images/gallery/marbled/optimized/pic2.png
--- a/static/assets/images/gallery/marbled/optimized/pic20.png
+++ b/static/assets/images/gallery/marbled/optimized/pic20.png
--- a/static/assets/images/gallery/marbled/optimized/pic21.png
+++ b/static/assets/images/gallery/marbled/optimized/pic21.png
--- a/static/assets/images/gallery/marbled/optimized/pic22.png
+++ b/static/assets/images/gallery/marbled/optimized/pic22.png
--- a/static/assets/images/gallery/marbled/optimized/pic23.png
+++ b/static/assets/images/gallery/marbled/optimized/pic23.png
--- a/static/assets/images/gallery/marbled/optimized/pic24.png
+++ b/static/assets/images/gallery/marbled/optimized/pic24.png
--- a/static/assets/images/gallery/marbled/optimized/pic25.png
+++ b/static/assets/images/gallery/marbled/optimized/pic25.png
--- a/static/assets/images/gallery/marbled/optimized/pic26.png
+++ b/static/assets/images/gallery/marbled/optimized/pic26.png
--- a/static/assets/images/gallery/marbled/optimized/pic27.png
+++ b/static/assets/images/gallery/marbled/optimized/pic27.png
--- a/static/assets/images/gallery/marbled/optimized/pic28.png
+++ b/static/assets/images/gallery/marbled/optimized/pic28.png
--- a/static/assets/images/gallery/marbled/optimized/pic29.png
+++ b/static/assets/images/gallery/marbled/optimized/pic29.png
--- a/static/assets/images/gallery/marbled/optimized/pic3.png
+++ b/static/assets/images/gallery/marbled/optimized/pic3.png
--- a/static/assets/images/gallery/marbled/optimized/pic30.png
+++ b/static/assets/images/gallery/marbled/optimized/pic30.png
--- a/static/assets/images/gallery/marbled/optimized/pic4.png
+++ b/static/assets/images/gallery/marbled/optimized/pic4.png
--- a/static/assets/images/gallery/marbled/optimized/pic5.png
+++ b/static/assets/images/gallery/marbled/optimized/pic5.png
--- a/static/assets/images/gallery/marbled/optimized/pic6.png
+++ b/static/assets/images/gallery/marbled/optimized/pic6.png
--- a/static/assets/images/gallery/marbled/optimized/pic7.png
+++ b/static/assets/images/gallery/marbled/optimized/pic7.png
--- a/static/assets/images/gallery/marbled/optimized/pic8.png
+++ b/static/assets/images/gallery/marbled/optimized/pic8.png
--- a/static/assets/images/gallery/marbled/optimized/pic9.png
+++ b/static/assets/images/gallery/marbled/optimized/pic9.png
--- a/static/assets/images/gallery/marbled/pic1.png
+++ b/static/assets/images/gallery/marbled/pic1.png
--- a/static/assets/images/gallery/marbled/pic10.png
+++ b/static/assets/images/gallery/marbled/pic10.png
--- a/static/assets/images/gallery/marbled/pic11.png
+++ b/static/assets/images/gallery/marbled/pic11.png
--- a/static/assets/images/gallery/marbled/pic12.png
+++ b/static/assets/images/gallery/marbled/pic12.png
--- a/static/assets/images/gallery/marbled/pic13.png
+++ b/static/assets/images/gallery/marbled/pic13.png
--- a/static/assets/images/gallery/marbled/pic14.png
+++ b/static/assets/images/gallery/marbled/pic14.png
--- a/static/assets/images/gallery/marbled/pic15.png
+++ b/static/assets/images/gallery/marbled/pic15.png
--- a/static/assets/images/gallery/marbled/pic16.png
+++ b/static/assets/images/gallery/marbled/pic16.png
--- a/static/assets/images/gallery/marbled/pic17.png
+++ b/static/assets/images/gallery/marbled/pic17.png
--- a/static/assets/images/gallery/marbled/pic18.png
+++ b/static/assets/images/gallery/marbled/pic18.png
--- a/static/assets/images/gallery/marbled/pic19.png
+++ b/static/assets/images/gallery/marbled/pic19.png
--- a/static/assets/images/gallery/marbled/pic2.png
+++ b/static/assets/images/gallery/marbled/pic2.png
--- a/static/assets/images/gallery/marbled/pic20.png
+++ b/static/assets/images/gallery/marbled/pic20.png
--- a/static/assets/images/gallery/marbled/pic21.png
+++ b/static/assets/images/gallery/marbled/pic21.png
--- a/static/assets/images/gallery/marbled/pic22.png
+++ b/static/assets/images/gallery/marbled/pic22.png
--- a/static/assets/images/gallery/marbled/pic23.png
+++ b/static/assets/images/gallery/marbled/pic23.png
--- a/static/assets/images/gallery/marbled/pic24.png
+++ b/static/assets/images/gallery/marbled/pic24.png
--- a/static/assets/images/gallery/marbled/pic25.png
+++ b/static/assets/images/gallery/marbled/pic25.png
--- a/static/assets/images/gallery/marbled/pic26.png
+++ b/static/assets/images/gallery/marbled/pic26.png
--- a/static/assets/images/gallery/marbled/pic27.png
+++ b/static/assets/images/gallery/marbled/pic27.png
--- a/static/assets/images/gallery/marbled/pic28.png
+++ b/static/assets/images/gallery/marbled/pic28.png
--- a/static/assets/images/gallery/marbled/pic29.png
+++ b/static/assets/images/gallery/marbled/pic29.png
--- a/static/assets/images/gallery/marbled/pic3.png
+++ b/static/assets/images/gallery/marbled/pic3.png
--- a/static/assets/images/gallery/marbled/pic30.png
+++ b/static/assets/images/gallery/marbled/pic30.png
--- a/static/assets/images/gallery/marbled/pic4.png
+++ b/static/assets/images/gallery/marbled/pic4.png
--- a/static/assets/images/gallery/marbled/pic5.png
+++ b/static/assets/images/gallery/marbled/pic5.png
--- a/static/assets/images/gallery/marbled/pic6.png
+++ b/static/assets/images/gallery/marbled/pic6.png
--- a/static/assets/images/gallery/marbled/pic7.png
+++ b/static/assets/images/gallery/marbled/pic7.png
--- a/static/assets/images/gallery/marbled/pic8.png
+++ b/static/assets/images/gallery/marbled/pic8.png
--- a/static/assets/images/gallery/marbled/pic9.png
+++ b/static/assets/images/gallery/marbled/pic9.png
--- a/static/assets/images/gallery/pic1.png
+++ b/static/assets/images/gallery/pic1.png
--- a/static/assets/images/gallery/pic10.png
+++ b/static/assets/images/gallery/pic10.png
--- a/static/assets/images/gallery/pic11.png
+++ b/static/assets/images/gallery/pic11.png
--- a/static/assets/images/gallery/pic14.png
+++ b/static/assets/images/gallery/pic14.png
--- a/static/assets/images/gallery/pic15.png
+++ b/static/assets/images/gallery/pic15.png
--- a/static/assets/images/gallery/pic16.png
+++ b/static/assets/images/gallery/pic16.png
--- a/static/assets/images/gallery/pic17.png
+++ b/static/assets/images/gallery/pic17.png
--- a/static/assets/images/gallery/pic18.png
+++ b/static/assets/images/gallery/pic18.png
--- a/static/assets/images/gallery/pic2.png
+++ b/static/assets/images/gallery/pic2.png
--- a/static/assets/images/gallery/pic3.png
+++ b/static/assets/images/gallery/pic3.png
--- a/static/assets/images/gallery/pic4.png
+++ b/static/assets/images/gallery/pic4.png
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Sangelo	e427ac4420	[a] add a note to the gallery	2024-06-21 09:14:37 +02:00
Sangelo	521be14975	[c] changed random image chooser to choose optimized images	2024-06-21 09:12:31 +02:00
Sangelo	6fc6fbaa45	[a] lossy optimized image previews for faster loading	2024-06-21 09:10:48 +02:00
Sangelo	63db3f5b6a	[a] optimized images	2024-06-20 09:02:10 +02:00
Sangelo	b6181aadce	[c] singular border radius	2024-06-13 11:33:15 +02:00
Sangelo	0cc0f3a5fb	[c] css tweaks in modlist (border radius)	2024-06-13 11:06:42 +02:00
Sangelo	fafc300879	[c] fix top-button	2024-06-12 14:28:53 +02:00
Sangelo	fd7eca8e27	[c] ignore redundant role=button	2024-06-12 14:07:59 +02:00
Sangelo	517b7d33a2	[d] remove some comments	2024-06-12 14:07:31 +02:00
Sangelo	23a583b0bd	[d] remove css line	2024-06-12 14:06:59 +02:00
Sangelo	54070518ac	[a] fuse.js for fuzzy search	2024-06-12 14:05:32 +02:00
Sangelo	fa190f9b7d	[a] results count in modlist	2024-06-12 13:36:30 +02:00
Sangelo	64b6d16e3a	[c] update default file	2024-06-12 13:24:35 +02:00
Sangelo	2349d92b5f	[a+d] add missing mods to marbled, remove rekindled in preparation for site update	2024-06-12 13:22:21 +02:00
Sangelo	05af058963	[c] formatting	2024-06-12 11:03:14 +02:00
Sangelo	0656ad38b9	[c] replace npm occurances with yarn	2024-06-12 10:59:40 +02:00
Sangelo	d740a8005b	[c] add loading indicators	2024-06-12 10:58:26 +02:00
Sangelo	2ecb95bb94	[c] finish initial modcards	2024-06-12 10:12:23 +02:00
Sangelo	77d866f3c9	[c] debug change to red on hover and not always	2024-06-11 23:37:17 +02:00
Sangelo	77ff08f737	[c] progress on modlist page	2024-06-11 23:12:19 +02:00
Sangelo	7faed5af20	[C] upgrade to picocss-v2 and rework modlist massively	2024-06-11 15:56:15 +02:00
Sangelo	1b2e90e1f3	[a] initial work on improved modlist	2024-06-11 13:51:21 +02:00
sangelo	dbfb10e3b4	[a] re-import MsgBox	2024-05-21 08:15:42 +00:00
sangelo	5307f0a6e8	[c] update download page	2024-05-21 08:14:20 +00:00
Sangelo	fc2b4baa4b	[a] add discord invite link to website	2024-04-08 15:38:31 +02:00
Sangelo	adb489e406	[c] upgrade dependencies and fix download links	2024-04-08 15:31:20 +02:00
Sangelo	0eaa6d5987	delete error log	2024-03-14 13:33:45 +01:00
Sangelo	182de3e59d	change to static site building	2024-03-14 11:52:21 +01:00
Sangelo	a60e4d231f	Remove pre-render for dynamic page	2023-07-19 15:25:26 +03:00
Sangelo	cb9872c007	Fix image names and add remaining images to home	2023-07-12 12:42:39 +02:00
Sangelo	787f2a252b	Tweak CSS	2023-07-12 11:35:40 +02:00
Sangelo	dc37408a82	Add a transition for the Switcher Button	2023-07-12 11:17:21 +02:00
Sangelo	a7ee63cb36	Redesigned the Switcher	2023-07-12 11:13:52 +02:00
Sangelo	d6a643b9c0	Optimised Images Further	2023-07-05 19:59:53 +02:00
LogolicusYZ	e32f38853d	New Gallery orientation	2023-07-05 10:35:31 +02:00
LogolicusYZ	346905c737	new photos	2023-07-05 07:00:07 +02:00
LogolicusYZ	ff7c977f7f	new photos for Gallery	2023-07-04 14:50:16 +02:00
Sangelo	88b9ded5e1	Update Screenshots in README	2023-06-30 16:21:43 +02:00
Sangelo	dad2e0b84c	Merge pull request 'Merge dev into main' (#8 ) from dev into main Reviewed-on: https://gitpot.dev/ExploreCraft/website/pulls/8	2023-06-30 15:34:30 +02:00