[a] add a note to the gallery

Reviewed-on: https://gitpot.dev/ExploreCraft/website/pulls/8

LICENSE

@@ -1 +1,373 @@
-[CHOOSE A LICENSE]
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+    means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+    means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+    means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+    means a work that combines Covered Software with other material, in
+    a separate file or files, that is not Covered Software.
+
+1.8. "License"
+    means this document.
+
+1.9. "Licensable"
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+1.10. "Modifications"
+    means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+1.12. "Secondary License"
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+1.13. "Source Code Form"
+    means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, "You" includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, "control" means (a) the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or (b) ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+    or
+
+(b) for infringements caused by: (i) Your and any other third party's
+    modifications of Covered Software, or (ii) the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+*                                                                      *
+*  6. Disclaimer of Warranty                                           *
+*  -------------------------                                           *
+*                                                                      *
+*  Covered Software is provided under this License on an "as is"       *
+*  basis, without warranty of any kind, either expressed, implied, or  *
+*  statutory, including, without limitation, warranties that the       *
+*  Covered Software is free of defects, merchantable, fit for a        *
+*  particular purpose or non-infringing. The entire risk as to the     *
+*  quality and performance of the Covered Software is with You.        *
+*  Should any Covered Software prove defective in any respect, You     *
+*  (not any Contributor) assume the cost of any necessary servicing,   *
+*  repair, or correction. This disclaimer of warranty constitutes an   *
+*  essential part of this License. No use of any Covered Software is   *
+*  authorized under this License except under this disclaimer.         *
+*                                                                      *
+************************************************************************
+
+************************************************************************
+*                                                                      *
+*  7. Limitation of Liability                                          *
+*  --------------------------                                          *
+*                                                                      *
+*  Under no circumstances and under no legal theory, whether tort      *
+*  (including negligence), contract, or otherwise, shall any           *
+*  Contributor, or anyone who distributes Covered Software as          *
+*  permitted above, be liable to You for any direct, indirect,         *
+*  special, incidental, or consequential damages of any character      *
+*  including, without limitation, damages for lost profits, loss of    *
+*  goodwill, work stoppage, computer failure or malfunction, or any    *
+*  and all other commercial damages or losses, even if such party      *
+*  shall have been informed of the possibility of such damages. This   *
+*  limitation of liability shall not apply to liability for death or   *
+*  personal injury resulting from such party's negligence to the       *
+*  extent applicable law prohibits such limitation. Some               *
+*  jurisdictions do not allow the exclusion or limitation of           *
+*  incidental or consequential damages, so this exclusion and          *
+*  limitation may not apply to You.                                    *
+*                                                                      *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+  This Source Code Form is "Incompatible With Secondary Licenses", as
+  defined by the Mozilla Public License, v. 2.0.

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)">
+    <source srcset="docs/assets/screenshot-dark.png" media="(prefers-color-scheme: dark)" alt="ExploreCraft Website Screenshot">
-    <img src="docs/assets/screenshot-light.png">
+    <img src="docs/assets/screenshot-light.png" alt="ExploreCraft Website Screenshot">
   </picture>
 </a>
 
 ## License
-This project is licensed under the [choose license]. More info [here](./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)
+# install dependencies (you can also use pyarn install or yarn)
-npm install
+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
 ```

package.json

@@ -9,13 +9,18 @@
   "devDependencies": {
     "@fontsource/fira-mono": "^4.5.10",
     "@neoconfetti/svelte": "^1.0.0",
+    "@picocss/pico": "^2.0.6",
     "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/adapter-node": "^1.2.4",
-    "svelte": "^3.54.0",
+    "@sveltejs/adapter-static": "^2.0.3",
-    "vite": "^4.3.0",
+    "@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",
-    "@picocss/pico": "^1.5.10"
+    "vite": "^4.3.0"
   },
   "type": "module"
 }

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>

src/app.scss

@@ -1,5 +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) */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap');
+@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'); */
 
@@ -11,53 +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;
+  background-color: #FAF9F6;
-  --primary-hover: #388e3c;
-  --primary-focus: rgba(67, 160, 71, 0.125);
-  --primary-inverse: #FFF;
-}
-
-/* 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;
-  // font-weight: 300;
-}
-b {
-  font-weight: 600;
 }
 
 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;
+}

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);
+    }
+}

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>

src/routes/+layout.js

@@ -0,0 +1,9 @@
+export const load = ({ url }) => {
+  const { pathname } = url
+
+  return {
+    pathname
+  }
+}
+
+export const prerender = true

src/routes/+layout.svelte

@@ -1,23 +1,82 @@
 <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";
+  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">
   <Header />
 
-  <main>
+  {#key data.pathname}
-    <slot />
+    <main
-  </main>
+      in:fly={{ x: -10, duration: 250, delay: 250 }}
+      out:fly={{ x: 5, duration: 250 }}
+    >
+      <slot />
+    </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;
@@ -47,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;

src/routes/+page.svelte

@@ -1,54 +1,71 @@
 <script>
-  	import { onMount } from 'svelte';
+  import { onMount } from "svelte";
 
-	function rand(min, max) {
+  let modpack = "marbled"
-    	return Math.floor(Math.random() * (max - min + 1) + min)
-	}
 
-	onMount(() => {
+  function rand(min, max) {
-		document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,14)}`);
+    return Math.floor(Math.random() * (max - min + 1) + min);
-		console.log(document.getElementById('banner').src);
+  }
-	})
 
+  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>
+  <title>ExploreCraft</title>
-	<meta name="description" content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft 1.19.2" />
+  <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>
+  <h1 class="main-title">ExploreCraft</h1>
-	<p>
+  <p>
-		This is ExploreCraft! A modpack for Minecraft 1.19.2 (Quilt) designed to keep you moving.<br>
+    This is ExploreCraft! A modpack for Minecraft designed to keep you moving.<br
-		You may never know what you'll find, after all
+    />
-	</p>
+    You may never know what you'll find, after all
-	<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>
+  </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="/downloads" role="button">Download</a>
-	<a href="/modlist" role="button" class="secondary outline">Modlist</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 {
+  .main-title {
-		border-radius: 1em;
+    margin-bottom: 2em;
-	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  }
-	  	align-self: center;
+  a.banner img {
-	}
+    border-radius: 0.25rem;
-	a.banner img:hover {
+    transition:
-	  	transform: scale(1.005);
+      all 0.3s ease-in-out,
-	  	box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
+      box-shadow 0.3s ease-in-out;
-	  	cursor: pointer;
+    align-self: center;
-	}
+  }
-	.buttons {
+  a.banner img:hover {
-		margin-left: 25%;
+    transform: scale(1.005);
-		margin-right: 25%;
+    box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
-		margin-bottom: 1em;
+    cursor: pointer;
-	}
+  }
-	.buttons [role="button"] {
+  .buttons {
-		margin-bottom: 1em;
+    margin-left: 25%;
-	}
+    margin-right: 25%;
+    margin-bottom: 2em;
+  }
 </style>

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" />
@@ -15,12 +15,18 @@
 			<li>
 				<a href="/" class="contrast {$page.url.pathname === '/' ? 'current-page' : undefined}">Home</a>
 			</li>
+      <li>
+				<a href="/modlist" class="contrast {$page.url.pathname === '/modlist' ? 'current-page' : undefined}">Modlist</a>
+			</li>
 			<li>
 				<a href="/downloads" class="contrast {$page.url.pathname === '/downloads' ? 'current-page' : undefined}">Download</a>
 			</li>
 			<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>
@@ -29,6 +35,7 @@
 </div>
 <hr class="separator" />
 
+
 <style>
 .header {
   display: flex;
@@ -82,43 +89,63 @@
 
 .navigation-bar li {
   margin-left: 1em;
+  cursor: default;
 }
 
 .navigation-bar a {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Space Grotesk', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 1em;
   text-decoration: none;
-  transition: font-style;
+  cursor: pointer;
+  user-select: none;
 }
 
 [data-theme="dark"] .navigation-bar a {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'Space Grotesk', sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 1em;
   text-decoration: none;
-  transition: font-style;
 }
 
 .navigation-bar a.current-page {
   font-weight: 600;
 }
 
+.navigation-bar a.current-page::after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 4px;
+  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 {
   font-weight: 500;
 }
 
-.navigation-bar a:hover {
+[data-theme="dark"] .navigation-bar a.current-page::after {
-  font-style: italic;
+  background-color: #fff;
-  font-weight: 300;
 }
 
-[data-theme="dark"] .navigation-bar a:hover {
+
+
+/* .navigation-bar a:hover {
+  font-style: italic;
+  font-weight: 300; 
+} */
+
+/* [data-theme="dark"] .navigation-bar a:hover {
   font-style: italic;
   font-weight: 200;
-}
+} */
 
 .link {
   text-decoration: none;

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;
+    --bg-color: #ffffff00;
-    background-color: transparent;
+    --main-color: #0b0d0c;
-    border: none;
+    position: relative;
-    cursor: pointer;
+    display: flex;
-    color: var(--text-color); /* Set the color for the button icon */
+    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 {
+  :global(.dark) {
-    width: 1.5em;
-    height: 1.5em;
-  }
-
-  /* Dark mode styles */
-  :global(.dark) .icon {
     filter: invert(100%);
   }
 
-  /* Dark theme styles */
+  .input {
-  :global(.dark) {
+    cursor: pointer;
-    --bg-color: #111;
+    position: absolute;
-    --text-color: #fff;
+    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>

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;

src/routes/downloads/+page.svelte

@@ -4,28 +4,24 @@
 
 <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>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,
+        The main way to play ExploreCraft. If you don't know what you're doing,
-        so you're better off playing with this rather than the other ones.
+        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>
@@ -45,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>
@@ -55,9 +51,9 @@
       <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.
+        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>
@@ -79,7 +75,7 @@
   <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.
+    You can also give it a catchy name and a snazzy icon while you're at it.<br>
     <img class="guide" alt="instance creation" src="assets/images/guide/instance-creation.png">
   </li>
   <li>
@@ -91,15 +87,18 @@
     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.
+        A window will appear asking you which optional mods you'd like to download. As it implies, none of them are necessary but recommended.<br>
+        <img class="guide" src="assets/images/guide/optional-mods.png" alt="Manual Download error in packwiz">
       </li>
       <li class="indented">
-        Mods downloading:
+        Mods downloading:<br>
+        <img class="guide" src="assets/images/guide/loading.png" alt="Manual Download error in packwiz">
       </li>
       <li class="indented">
-        If a screen similar to this one appears, don't fret!
+        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>
@@ -111,6 +110,10 @@
 
 
 <style>
+  .msg-box {
+    display: flex;
+    justify-content: center;
+  }
   .main-card {
     width: 50%;
     justify-self: center;
@@ -130,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 {

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}
-  

src/routes/gallery/+page.svelte

@@ -5,46 +5,76 @@
 
 <div class="text-column">
 	<h1>Gallery</h1>
-	<p>Here you'll find the sweet 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="1"></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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="2"></div>
+	<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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="3"></div>
+	<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="1"></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="1"></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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="2"></div>
+	<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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="3"></div>
+	<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="1"></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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="2"></div>
+	<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="1"></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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="2"></div>
+	<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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="3"></div>
+	<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="1"></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>
-	<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>
+	<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="1"></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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="2"></div>
+	<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>
-	<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="3"></div>
+	<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;
 	}

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">
+<p>
-    <div class="column">
+  Here's ExploreCraft's modlist! We will keep this list up-to-date as much as possible.<br>
-      <ul>
+  Choose an ExploreCraft version in the dropdown next to the search field.
-        <ul>
+</p>
-            <li>Accurate Maps</li>
+<p>Please report any missing mods on our <a href="https://discord.gg/Z2YehhEUVr" target="_blank" rel="noopener noreferrer">Discord</a>.</p>
-            <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>
+<ModCards />
-          
-      </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/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;

static/assets/fonts/space-grotesk-v15-latin/README.md

@@ -0,0 +1,3 @@
+Space Grotesk font by Florian Karsten
+
+https://fonts.floriankarsten.com/space-grotesk