Initial Work on Mod Info Cards

LICENSE

@@ -1,373 +1 @@
-Mozilla Public License Version 2.0
+[CHOOSE A LICENSE]
-==================================
-
-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,38 +1,34 @@
 # 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)" alt="ExploreCraft Website Screenshot">
+    <source srcset="docs/assets/screenshot-dark.png" media="(prefers-color-scheme: dark)">
-    <img src="docs/assets/screenshot-light.png" alt="ExploreCraft Website Screenshot">
+    <img src="docs/assets/screenshot-light.png">
   </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.org/ExploreCraft/website.git
+git clone https://gitpot.dev/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 pyarn install or yarn)
+# install dependencies (you can also use pnpm install or yarn)
-yarn install
+npm install
 
 # start vite development server
-yarn run dev
+npm run dev
 
 # or start the server and also open the website in a new browser tab
-yarn run dev -- --open
+npm run dev -- --open
 
   VITE v4.3.9  ready in 358 ms
 
@@ -40,7 +36,6 @@ yarn 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
@@ -49,15 +44,14 @@ To build a production-ready version of this website:
 
 ```bash
 # run build action
-yarn run build
+npm 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
-yarn run build
+npm run build
 
 # start a preview server
-yarn run preview
+npm run preview
 ```

package.json

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

src/app.html

@@ -6,17 +6,6 @@
 		<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,21 +1,51 @@
-// @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 (
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap');
-  $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'); */
 
 /* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
 
 h1, h2, h3, h4, h5, h6, body {
-    font-family: 'Space Grotesk', sans-serif;
+    font-family: 'IBM Plex Mono', monospace;
     // background-color: #ffffff;
     // color: #000000;
 }
 
+/* Green Light scheme (Default) */
+/* Can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-  background-color: #FAF9F6;
+  --primary: #43a047;
+  --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 {
@@ -23,62 +53,6 @@ p, li {
 }
 
 article {
-  border-radius: 0.25rem;
+  border-radius: 10px;
   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

@@ -1,15 +0,0 @@
-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

@@ -1,250 +0,0 @@
-<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/lib/modules/ModInfo.svelte

@@ -0,0 +1,61 @@
+<script>
+  export let mods = [];
+</script>
+
+<div class="container">
+  <div class="row">
+    {#each mods as mod, index (mod.name)}
+      <details>
+        <summary>{mod.name}</summary>
+        <article class="main-card">
+          <div>
+            <h4>{mod.name} | by {mod.author}</h4>
+            <p>
+              {#if mod.description}
+                {@html mod.description}
+              {/if}
+            </p>
+            <p>
+              Platforms:
+              {#each mod.platforms as platform}
+                {#if platform.url}
+                  <a role="button" class="card-item" href={platform.url}>
+                    <img
+                      src={`/assets/icons/platforms/${platform.id}-white.svg`}
+                      alt={platform.name}
+                      class="logo"
+                    /> {platform.name}
+                  </a>
+                {:else if platform.name}
+                  <span role="button" class="card-item">
+                    <img
+                      src={`/assets/icons/platforms/${platform.id}-white.svg`}
+                      alt={platform.name}
+                      class="logo"
+                    /> {platform.name}
+                  </span>
+                {/if}
+              {/each}
+            </p>
+            <p>
+              {mod.loaders} | {mod.version}
+            </p>
+          </div>
+        </article>
+      </details>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .card-item {
+    margin-right: 0.5em;
+    justify-content: center;
+    align-content: center;
+    position: inherit;
+  }
+  .logo {
+    height: 1em;
+    justify-self: center;
+  }
+</style>

src/routes/+layout.js

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

src/routes/+layout.svelte

@@ -1,82 +1,23 @@
 <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 />
 
-  {#key data.pathname}
+  <main>
-    <main
+    <slot />
-      in:fly={{ x: -10, duration: 250, delay: 250 }}
+  </main>
-      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-2024 | <a
+      &copy; Sangelo & LogolicusZ, 2023 | <a href="https://gitpot.dev/ExploreCraft/website"> Source Code</a>
-        href="https://gitpot.org/ExploreCraft/website"
-      >
-        Source Code</a
-      >
     </p>
   </footer>
 </div>
 
-<style lang="scss">
+<style>
   .app {
     display: flex;
     flex-direction: column;
@@ -106,23 +47,6 @@
     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,71 +1,54 @@
 <script>
-  import { onMount } from "svelte";
+  	import { onMount } from 'svelte';
 
-  let modpack = "marbled"
+	function rand(min, max) {
+    	return Math.floor(Math.random() * (max - min + 1) + min)
+	}
 	
-  function rand(min, max) {
+	onMount(() => {
-    return Math.floor(Math.random() * (max - min + 1) + min);
+		document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,14)}`);
-  }
+		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
+	<meta name="description" content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft 1.19.2" />
-    name="description"
-    content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft"
-  />
 </svelte:head>
 
 <div class="text-column">
-  <h1 class="main-title">ExploreCraft</h1>
+	<h1>ExploreCraft</h1>
-  <p>
+	<p>
-    This is ExploreCraft! A modpack for Minecraft designed to keep you moving.<br
+		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
-    You may never know what you'll find, after all
+	</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>
-  <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...">
+<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>
-  <img
-    src="assets/images/gallery/pic0.png"
-    id="banner"
-    alt="Random picture from the gallery."/>
-</a>
 
 <style>
-  .main-title {
+	a.banner img {
-    margin-bottom: 2em;
+		border-radius: 1em;
-  }
+	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-  a.banner img {
+	  	align-self: center;
-    border-radius: 0.25rem;
+	}
-    transition:
+	a.banner img:hover {
-      all 0.3s ease-in-out,
+	  	transform: scale(1.005);
-      box-shadow 0.3s ease-in-out;
+	  	box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
-    align-self: center;
+	  	cursor: pointer;
-  }
+	}
-  a.banner img:hover {
+	.buttons {
-    transform: scale(1.005);
+		margin-left: 25%;
-    box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
+		margin-right: 25%;
-    cursor: pointer;
+		margin-bottom: 1em;
-  }
+	}
-  .buttons {
+	.buttons [role="button"] {
-    margin-left: 25%;
+		margin-bottom: 1em;
-    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" id="header">
+<div class="header-container">
     <a class="link contrast" href="/">
         <div class="header">
           <img class="logo" src="/assets/logo/explorecraft.svg" alt="ExploreCraft Logo" />
@@ -15,18 +15,12 @@
 			<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>
@@ -35,7 +29,6 @@
 </div>
 <hr class="separator" />
 
-
 <style>
 .header {
   display: flex;
@@ -89,63 +82,43 @@
 
 .navigation-bar li {
   margin-left: 1em;
-  cursor: default;
 }
 
 .navigation-bar a {
-  font-family: 'Space Grotesk', sans-serif;
+  font-family: 'IBM Plex Mono', monospace;
   font-style: normal;
   font-weight: 400;
   font-size: 1em;
   text-decoration: none;
-  cursor: pointer;
+  transition: font-style;
-  user-select: none;
 }
 
 [data-theme="dark"] .navigation-bar a {
-  font-family: 'Space Grotesk', sans-serif;
+  font-family: 'IBM Plex Mono', monospace;
   font-style: normal;
   font-weight: 300;
   font-size: 1em;
   text-decoration: none;
+  transition: font-style;
 }
 
 .navigation-bar a.current-page {
   font-weight: 600;
 }
 
-.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;
 }
 
-[data-theme="dark"] .navigation-bar a.current-page::after {
+.navigation-bar a:hover {
-  background-color: #fff;
-}
-
-
-
-/* .navigation-bar a:hover {
   font-style: italic;
   font-weight: 300;
-} */
+}
 
-/* [data-theme="dark"] .navigation-bar a:hover {
+[data-theme="dark"] .navigation-bar a:hover {
   font-style: italic;
   font-weight: 200;
-} */
+}
 
 .link {
   text-decoration: none;

src/routes/Switcher.svelte

@@ -21,59 +21,36 @@
   });
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<button class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
-<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}
-</label>
+</button>
 
 <style>
   .switcher {
-    --bg-color: #ffffff00;
+    padding: 0.5rem;
-    --main-color: #0b0d0c;
+    background-color: transparent;
-    position: relative;
+    border: none;
-    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);
-  }
-
-  :global(.dark) {
-    filter: invert(100%);
-  }
-
-  .input {
     cursor: pointer;
-    position: absolute;
+    color: var(--text-color); /* Set the color for the button icon */
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-    opacity: 0;
   }
 
   .icon {
-    position: absolute;
+    width: 1.5em;
-    top: calc(50% -13px);
+    height: 1.5em;
-    left: calc(50% -13px);
-    width: 24px;
-    height: 24px;
   }
 
-  .switcher:active {
+  /* Dark mode styles */
-    box-shadow: 0px 0px var(--main-color);
+  :global(.dark) .icon {
-    transform: translate(4px, 4px);
+    filter: invert(100%);
   }
 
-  .switcher {
+  /* Dark theme styles */
-  transition: ease-in-out 0.05s;
+  :global(.dark) {
-}
+    --bg-color: #111;
+    --text-color: #fff;
+  }
 </style>

src/routes/celebrate/+page.js

@@ -0,0 +1,9 @@
+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,24 +4,28 @@
 
 <svelte:head>
   <title>Downloads</title>
-  <meta name="description" content="Download the ExploreCraft modpack here!" />
+  <meta name="description" content="About this app" />
 </svelte:head>
 
 <div class="text-column">
   <h1>Downloads</h1>
   <p>You've decided to download ExploreCraft?<br>Here you'll find all the download links and instructions to install ExploreCraft!</p>
 </div>
+<MsgBox
+  type="warning"
+  message="<br>Currently WIP. You'll find downloads on this page,<br>but they may not work properly."
+  prefix="ℹ️ Note ℹ️"
+/>
 
 <div class="grid">
   <article class="main-card">
     <div>
       <h4>ExploreCraft: Marbled</h4>
       <p>
-        The main way to play ExploreCraft. If you don't know what you're doing,
+        The main way to play ExploreCraft. This is also the most stable version,
-        download this version. It is the most stable.
+        so you're better off playing with this rather than the other ones.
-        For more versions, open the "Unstable Releases" section down below.
       </p>
-      <a role="button" href="https://gitpot.org/ExploreCraft/modpack/releases/tag/v2.0">Download</a>
+      <a role="button" href="https://gitpot.dev/attachments/7a690df1-d78f-41fd-a9f7-610eacb369a9">Download</a>
       <a href="#instructions" role="button" class="outline">Instructions</a>
     </div>
   </article>
@@ -41,7 +45,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.org/ExploreCraft/modpack/releases/tag/v1.0">Download</a>
+        <a role="button" href="https://gitpot.dev/attachments/f249e088-14f3-4372-8aff-97f45810a763">Download</a>
         <a href="#instructions" role="button" class="outline">Instructions</a>
       </div>
     </article>
@@ -51,9 +55,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 at the cost of new features.
+        world corruptions.
       </p>
-      <a href="https://gitpot.org/ExploreCraft/modpack/src/branch/dev-marbled" role="button">Download</a>
+      <a href="https://gitpot.dev/ExploreCraft/modpack" role="button">Download</a>
       <a href="#instructions" role="button" class="outline">Instructions</a>
     </article>
   </div>
@@ -75,7 +79,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.<br>
+    You can also give it a catchy name and a snazzy icon while you're at it.
     <img class="guide" alt="instance creation" src="assets/images/guide/instance-creation.png">
   </li>
   <li>
@@ -87,18 +91,15 @@
     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.<br>
+        A window will appear asking you which optional mods you'd like to download. As it implies, none of them are necessary but recommended.
-        <img class="guide" src="assets/images/guide/optional-mods.png" alt="Manual Download error in packwiz">
       </li>
       <li class="indented">
-        Mods downloading:<br>
+        Mods downloading:
-        <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!<br>
+        If a screen similar to this one appears, don't fret!
-        <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.org/ExploreCraft/modpack/src/branch/marbled/manual-download.md" rel="noopener noreferrer" target="_blank">here</a>
+        <a href="https://gitpot.dev/ExploreCraft/modpack/src/branch/marbled/manual-download.md" rel="noopener noreferrer" target="_blank">here</a>
         to continue:
       </li>
     </ul>
@@ -110,10 +111,6 @@
 
 
 <style>
-  .msg-box {
-    display: flex;
-    justify-content: center;
-  }
   .main-card {
     width: 50%;
     justify-self: center;
@@ -133,7 +130,7 @@
     margin-bottom: 1em;
     justify-self: center;
     align-self: center;
-    border-radius: 0.25rem;
+    border-radius: 1em;
     transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   }
   img.guide:hover {

src/routes/examples/+page.svelte

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

src/routes/gallery/+page.svelte

@@ -5,76 +5,46 @@
 
 <div class="text-column">
 	<h1>Gallery</h1>
-	<p>
+	<p>Here you'll find the sweet screenshots 😉.</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">
-	<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/pic1.png" alt="1"></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/pic2.png" alt="2"></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><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="3"></div>
 </div>
 <div class="grid">
-	<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><img class="gallery-image" src="assets/images/gallery/pic9.png" alt="1"></div>
 </div>
 <div class="grid">
-	<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/pic4.png" alt="1"></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/pic5.png" alt="2"></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><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="3"></div>
 </div>
 <div class="grid">
-	<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/pic7.png" alt="1"></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><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="2"></div>
 </div>
 <div class="grid">
-	<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/pic10.png" alt="1"></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/pic11.png" alt="2"></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><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="3"></div>
 </div>
 <div class="grid">
-	<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/pic13.png" alt="1"></div>
-
+	<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="2"></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><img class="gallery-image" src="assets/images/gallery/pic15.png" alt="3"></div>
 </div>
 <div class="grid">
-	<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/pic16.png" alt="1"></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/pic17.png" alt="2"></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><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="3"></div>
 </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: 0.25rem;
+		border-radius: 1em;
 	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 	  	align-self: center;
 	}

src/routes/modlist/+page.svelte

@@ -1,21 +1,202 @@
 <script>
-  import ModCards from "../../lib/modules/ModCards.svelte";
+  import { onMount } from "svelte";
+  import ModInfo from "$lib/modules/ModInfo.svelte";
 
+  let mods = [];
+
+  async function loadMods() {
+    const response = await fetch("/assets/modlist/list.json");
+    mods = await response.json();
+  }
+
+  onMount(() => {
+    loadMods();
+  });
 </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>
-<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>
 
-<ModCards />
+<div>
+  <ModInfo {mods} />
+</div>
+
+<div class="container">
+  <div class="column">
+    <ul>
+      <ul>
+        <li></li>
+        <li>Ad Astra!</li>
+        <li>Ada Paxels</li>
+        <li>Adorn</li>
+        <li>Advancement Plaques</li>
+        <li>AdventureZ</li>
+        <li>Alloy Forgery</li>
+        <li>Amethyst Tools</li>
+        <li>Angling Mod</li>
+        <li>Another Furniture</li>
+        <li>AntiGhost</li>
+        <li>Applied Energistics 2</li>
+        <li>Architectury</li>
+        <li>Auditory</li>
+        <li>Balm</li>
+        <li>Biome Makeover</li>
+        <li>Blocks</li>
+        <li>Boat Item View Fabric</li>
+        <li>Botarium</li>
+        <li>Chisel Refabricated</li>
+        <li>Chunky</li>
+        <li>Cloth Config v8</li>
+        <li>Continuity</li>
+        <li>Controlling For Fabric</li>
+        <li>Crafting Tweaks</li>
+        <li>Create Crafts and Additions</li>
+        <li>Croptopia</li>
+        <li>Detail Armor Bar</li>
+        <li>Eating Animaton</li>
+        <li>EldritchMobs</li>
+        <li>Enchanted Vertical Slabs</li>
+        <li>Enchanting Infuser</li>
+        <li>EntityCulling-Fabric</li>
+        <li>Extractinator</li>
+        <li>ExtrasSounds</li>
+        <li>Fabric language Kotlin</li>
+        <li>Fabric Waystones</li>
+        <li>Factory Blocks Mod</li>
+        <li>Falling Leaves</li>
+        <li>Fastback</li>
+        <li>FerriteCore</li>
+        <li>Frame</li>
+        <li>Global Packs</li>
+        <li>Hold That Chunk</li>
+        <li>Icarus</li>
+        <li>Iceberg</li>
+        <li>Indium</li>
+        <li>Interactic</li>
+        <li>Jade Addons</li>
+        <li>Konkrete</li>
+        <li>Ksyxis</li>
+        <li>Labels</li>
+        <li>Language Reload</li>
+      </ul>
+    </ul>
+  </div>
+  <div class="column">
+    <ul>
+      <li>Legendary Tooltips</li>
+      <li>Limits' Grapple</li>
+      <li>Ma Enchants</li>
+      <li>Macaw's Bridges</li>
+      <li>Macaw's Bridges BYG</li>
+      <li>Macaw's Doors</li>
+      <li>Macaw's Fences and Walls</li>
+      <li>Macaw's Furniture</li>
+      <li>Macaw's Paintings</li>
+      <li>Macaw's Paths and Pavings</li>
+      <li>Macaw's Roofs BYG</li>
+      <li>Macaw's Trapdoors</li>
+      <li>Macaw's Trapdoors</li>
+      <li>Macaw's Windows</li>
+      <li>Main Menu Credits</li>
+      <li>Mimic</li>
+      <li>Missing Wilds</li>
+      <li>MixinTrace</li>
+      <li>Mod Menu</li>
+      <li>Moonlight</li>
+      <li>More Chat History</li>
+      <li>MoreCreativeTabs</li>
+      <li>Mythic Metals</li>
+      <li>Mythic Upgrades</li>
+      <li>Naturalist</li>
+      <li>Nature's Compass</li>
+      <li>NiceLoad</li>
+      <li>No chat Reports</li>
+      <li>No Mob Farm</li>
+      <li>NotEnoughAnimations</li>
+      <li>Numismatic Overhaul</li>
+      <li>OPAC Create Mod Support</li>
+      <li>Open parties and claims</li>
+      <li>Pehkui</li>
+      <li>Polymorph</li>
+      <li>Powah!</li>
+      <li>Prism</li>
+      <li>Puzzle</li>
+      <li>Quartz Elevator</li>
+      <li>Quilt Loading Screen</li>
+      <li>Quiltgoslightyfasterlol</li>
+      <li>Recipe Book Is Pain</li>
+      <li>Reesse's Sodium Options</li>
+      <li>Resourcefulconfig</li>
+      <li>Roughly Enough Items</li>
+      <li>Satin</li>
+      <li>ServerCore</li>
+      <li>Sky Villages</li>
+      <li>Smooth boot</li>
+      <li>Sodium</li>
+      <li>Sodium Extra</li>
+      <li>Sound physics Remastered</li>
+      <li>Starlight</li>
+      <li>TerraBlender</li>
+      <li>Travaler's Backpack</li>
+      <li>Twigs</li>
+      <li>Villager Hats</li>
+      <li>Xareo's Minimap</li>
+      <li>Xareo's World Map</li>
+      <li>Your'e in Grave Danger</li>
+      <li>Your Reputation</li>
+      <li>YUNG's Better Desert Temples</li>
+      <li>YUNG's Better Dungeons</li>
+      <li>YUNG's Better Mineshaft</li>
+      <li>YUNG's Better Ocean Monuments</li>
+      <li>YUNG's Better Strongholds</li>
+    </ul>
+  </div>
+</div>
+<details>
+  <!-- svelte-ignore a11y-no-redundant-roles -->
+  <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,9 +1,2 @@
 /* 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/fonts.css

@@ -1,41 +0,0 @@
-/* fonts.css */
-/* space-grotesk-300 - latin */
-@font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-    font-family: 'Space Grotesk';
-    font-style: normal;
-    font-weight: 300;
-    src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-  }
-  /* space-grotesk-regular - latin */
-  @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-    font-family: 'Space Grotesk';
-    font-style: normal;
-    font-weight: 400;
-    src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-  }
-  /* space-grotesk-500 - latin */
-  @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-    font-family: 'Space Grotesk';
-    font-style: normal;
-    font-weight: 500;
-    src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-  }
-  /* space-grotesk-600 - latin */
-  @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-    font-family: 'Space Grotesk';
-    font-style: normal;
-    font-weight: 600;
-    src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-  }
-  /* space-grotesk-700 - latin */
-  @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-    font-family: 'Space Grotesk';
-    font-style: normal;
-    font-weight: 700;
-    src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-  }

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

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

static/assets/icons/platforms/curse-white.svg

@@ -0,0 +1,10 @@
+<svg width="100" height="54" viewBox="0 0 100 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_2)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.9082L27.9532 6.9838L26.269 0H100.014L99.9975 8.1433C87.5 10.6348 78.6726 16.775 74.825 36.34H72.046L70.4645 40.699H72.7724L76.763 53.5077H37.961L41.8794 40.6991H44.2044L42.5577 36.3401H39.7935L34.6419 22.5866C13.5203 21.3437 2.6748 16.9042 0 6.9082ZM58.6772 39.062C55.5952 33.4404 53.5714 37.865 47.2318 32.1124C44.7591 29.8688 43.773 23.2925 49.3288 21.2823C46.8033 26.8572 53.3585 29.1381 54.9186 25.9508C55.6276 24.5022 56.5225 21.8304 53.9388 19.999C52.5468 19.0123 52.0107 16.0865 53.2024 14.4602C53.5861 15.6695 54.7962 16.9615 57.1184 16.0013C52.1992 7.8609 60.0524 5.0556 63.8288 5.4196C59.8602 5.8606 57.8038 9.3966 59.6092 13.2465C60.7592 15.6985 62.5098 16.9054 63.0189 18.9122C61.3237 19.0385 60.8337 19.8187 60.8694 21.2742C60.8962 22.3637 63.419 23.9388 63.8188 20.8286C64.9938 23.2531 63.5781 24.6782 62.8059 25.827C61.0235 28.4785 62.7023 31.2377 64.9156 29.1337C65.8703 28.2263 66.5311 26.5525 65.3204 23.8157C67.5494 25.5917 69.8261 30.3604 66.2283 34.4927C64.4723 36.5097 59.2768 35.8837 58.6772 39.062Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="100" height="53.5" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/assets/icons/platforms/curse.svg

@@ -0,0 +1,10 @@
+<svg width="100" height="54" viewBox="0 0 100 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_7)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.9082L27.9532 6.9838L26.269 0H100.014L99.9975 8.1433C87.5 10.6348 78.6726 16.775 74.825 36.34H72.046L70.4645 40.699H72.7724L76.763 53.5077H37.961L41.8794 40.6991H44.2044L42.5577 36.3401H39.7935L34.6419 22.5866C13.5203 21.3437 2.6748 16.9042 0 6.9082ZM58.6772 39.062C55.5952 33.4404 53.5714 37.865 47.2318 32.1124C44.7591 29.8688 43.773 23.2925 49.3288 21.2823C46.8033 26.8572 53.3585 29.1381 54.9186 25.9508C55.6276 24.5022 56.5225 21.8304 53.9388 19.999C52.5468 19.0123 52.0107 16.0865 53.2024 14.4602C53.5861 15.6695 54.7962 16.9615 57.1184 16.0013C52.1992 7.8609 60.0524 5.0556 63.8288 5.4196C59.8602 5.8606 57.8038 9.3966 59.6092 13.2465C60.7592 15.6985 62.5098 16.9054 63.0189 18.9122C61.3237 19.0385 60.8337 19.8187 60.8694 21.2742C60.8962 22.3637 63.419 23.9388 63.8188 20.8286C64.9938 23.2531 63.5781 24.6782 62.8059 25.827C61.0235 28.4785 62.7023 31.2377 64.9156 29.1337C65.8703 28.2263 66.5311 26.5525 65.3204 23.8157C67.5494 25.5917 69.8261 30.3604 66.2283 34.4927C64.4723 36.5097 59.2768 35.8837 58.6772 39.062Z" fill="#F16436"/>
+</g>
+<defs>
+<clipPath id="clip0_1_7">
+<rect width="100" height="53.5" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/assets/icons/platforms/modrinth-white.svg

@@ -0,0 +1,11 @@
+<svg width="512" height="514" viewBox="0 0 512 514" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_4)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="white"/>
+<path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_4">
+<rect width="512" height="514" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/assets/icons/platforms/modrinth.svg

@@ -0,0 +1,11 @@
+<svg width="512" height="514" viewBox="0 0 512 514" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_9)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="#1BD96A"/>
+<path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="#1BD96A"/>
+</g>
+<defs>
+<clipPath id="clip0_1_9">
+<rect width="512" height="514" fill="white"/>
+</clipPath>
+</defs>
+</svg>