Compare commits

..

No commits in common. "main" and "dev" have entirely different histories.
main ... dev

112 changed files with 2027 additions and 3854 deletions

View file

@ -1,38 +1,34 @@
# ExploreCraft: Website
This is the ExploreCraft Website. Created with Svelte, PicoCSS, and dedication by [Sangelo](https://gitpot.org/sangelo/) & [LogolicusZ](https://gitpot.org/LogolicusZ/).
This is the ExploreCraft Website. Created with Svelte, PicoCSS, and dedication by [Sangelo](https://gitpot.dev/sangelo/) & [LogolicusZ](https://gitpot.dev/LogolicusZ/).
<a href="https://explorecraft.net">
<picture>
<source srcset="docs/assets/screenshot-dark.png" media="(prefers-color-scheme: dark)" alt="ExploreCraft Website Screenshot">
<img src="docs/assets/screenshot-light.png" alt="ExploreCraft Website Screenshot">
<source srcset="docs/assets/screenshot-dark.png" media="(prefers-color-scheme: dark)">
<img src="docs/assets/screenshot-light.png">
</picture>
</a>
## License
This project is licensed under the MPL v2.0. More info [here](./LICENSE).
## Developing
To start developing, clone the repository.
```bash
# clone the website
git clone https://gitpot.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)
yarn install
# install dependencies (you can also use pnpm install or yarn)
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
```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 856 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 871 KiB

1669
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -9,16 +9,12 @@
"devDependencies": {
"@fontsource/fira-mono": "^4.5.10",
"@neoconfetti/svelte": "^1.0.0",
"@picocss/pico": "^2.0.6",
"@picocss/pico": "^1.5.10",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-node": "^1.2.4",
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.20.5",
"fuse.js": "^7.0.0",
"nprogress": "^0.2.0",
"sass": "^1.62.0",
"svelte": "^3.54.0",
"svelte-material-icons": "^3.0.5",
"svelte-preprocess": "^5.0.3",
"vite": "^4.3.0"
},

View file

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

View file

@ -1,7 +1,4 @@
// @import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
@use "@picocss/pico/scss/pico" with (
$theme-color: "green"
);
@import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
@import url('/assets/fonts/fonts.css');
/* @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css'); */
@ -13,72 +10,50 @@ h1, h2, h3, h4, h5, h6, body {
// color: #000000;
}
/* Green Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #43a047;
--primary-hover: #388e3c;
--primary-focus: rgba(67, 160, 71, 0.125);
--primary-inverse: #FFF;
background-color: #FAF9F6;
}
/* Green Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #43a047;
--primary-hover: #4caf50;
--primary-focus: rgba(67, 160, 71, 0.25);
--primary-inverse: #FFF;
}
}
/* Green Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #43a047;
--primary-hover: #4caf50;
--primary-focus: rgba(67, 160, 71, 0.25);
--primary-inverse: #FFF;
}
/* Green (Common styles) */
:root {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
}
p, li {
cursor: text;
}
article {
border-radius: 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;
}

View file

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

View file

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

View file

@ -5,5 +5,3 @@ export const load = ({ url }) => {
pathname
}
}
export const prerender = true

View file

@ -1,45 +1,9 @@
<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);
});
import { fly } from 'svelte/transition'
export let data
</script>
<div class="app">
@ -54,29 +18,14 @@
</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
href="https://gitpot.org/ExploreCraft/website"
>
Source Code</a
>
&copy; Sangelo & LogolicusZ, 2023 | <a href="https://gitpot.dev/ExploreCraft/website"> Source Code</a>
</p>
</footer>
</div>
<style lang="scss">
<style>
.app {
display: flex;
flex-direction: column;
@ -106,23 +55,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;

View file

@ -1,61 +1,41 @@
<script>
import { onMount } from "svelte";
let modpack = "marbled"
import { onMount } from 'svelte';
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
return Math.floor(Math.random() * (max - min + 1) + min)
}
onMount(() => {
document.getElementById("banner").src = document
.getElementById("banner")
.src.replace("pic0", `${modpack}/optimized/pic${rand(1, 30)}`);
console.log(document.getElementById("banner").src);
});
document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,14)}`);
console.log(document.getElementById('banner').src);
})
</script>
<svelte:head>
<title>ExploreCraft</title>
<meta
name="description"
content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft"
/>
<meta name="description" content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft 1.19.2" />
</svelte:head>
<div class="text-column">
<h1 class="main-title">ExploreCraft</h1>
<h1>ExploreCraft</h1>
<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
</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="/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>
.main-title {
margin-bottom: 2em;
}
a.banner img {
border-radius: 0.25rem;
transition:
all 0.3s ease-in-out,
box-shadow 0.3s ease-in-out;
border-radius: 1em;
transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
align-self: center;
}
a.banner img:hover {

View file

@ -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" />
@ -24,9 +24,6 @@
<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>
@ -89,7 +86,6 @@
.navigation-bar li {
margin-left: 1em;
cursor: default;
}
.navigation-bar a {
@ -98,8 +94,7 @@
font-weight: 400;
font-size: 1em;
text-decoration: none;
cursor: pointer;
user-select: none;
transition: font-style;
}
[data-theme="dark"] .navigation-bar a {
@ -108,6 +103,7 @@
font-weight: 300;
font-size: 1em;
text-decoration: none;
transition: font-style;
}
.navigation-bar a.current-page {
@ -119,12 +115,11 @@
display: block;
width: 20px;
height: 4px;
background-color: #1b2832;
background-color: #000;
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 {
@ -132,7 +127,15 @@
}
[data-theme="dark"] .navigation-bar a.current-page::after {
content: "";
display: block;
width: 20px;
height: 4px;
background-color: #fff;
border-radius: 2px;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}

View file

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

View file

@ -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;

View file

@ -4,13 +4,18 @@
<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>though some links aren't currently ready."
prefix=" Note "
/>
<div class="grid">
<article class="main-card">
@ -21,7 +26,7 @@
download this version. It is the most stable.
For more versions, open the "Unstable Releases" section down below.
</p>
<a role="button" href="https://gitpot.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 +46,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>
@ -53,7 +58,7 @@
of ExploreCraft which may have game-breaking bugs, unfinished features and
world corruptions at the cost of new features.
</p>
<a href="https://gitpot.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>
@ -98,7 +103,7 @@
If a screen similar to this one appears, don't fret!<br>
<img class="guide" src="assets/images/guide/manual-download.png" alt="Manual Download error in packwiz"><br>
Just follow the guide
<a href="https://gitpot.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 +115,6 @@
<style>
.msg-box {
display: flex;
justify-content: center;
}
.main-card {
width: 50%;
justify-self: center;
@ -133,7 +134,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 {

View file

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

View file

@ -5,76 +5,46 @@
<div class="text-column">
<h1>Gallery</h1>
<p>
Have a sneak-peek into the modpack with some screenshots!<br>
Click on an image to see the full quality.
</p>
<p>Have a sneak-peek into the modpack with some screenshots!</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>
<a href="assets/images/gallery/marbled/pic2.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic2.png" alt="pic2"></a>
<a href="assets/images/gallery/marbled/pic3.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic3.png" alt="pic3"></a>
<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="pic1"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="pic2"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="pic3"></div>
</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="pic4"></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>
<a href="assets/images/gallery/marbled/pic5.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic5.png" alt="pic6"></a>
<a href="assets/images/gallery/marbled/pic6.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic6.png" alt="pic7"></a>
<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="pic5"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="pic6"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="pic7"></div>
</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>
<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/pic7.png" alt="pic8"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="pic9"></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>
<a href="assets/images/gallery/marbled/pic11.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic11.png" alt="pic11"></a>
<a href="assets/images/gallery/marbled/pic12.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic12.png" alt="pic12"></a>
<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="pic10"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="pic11"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="pic12"></div>
</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>
<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/pic13.png" alt="pic13"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="pic14"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic15.png" alt="pic15"></div>
</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>
<a href="assets/images/gallery/marbled/pic17.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic17.png" alt="pic17"></a>
<a href="assets/images/gallery/marbled/pic18.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic18.png" alt="pic18"></a>
<div><img class="gallery-image" src="assets/images/gallery/pic16.png" alt="pic16"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="pic17"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="pic18"></div>
</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;
}

View file

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

View file

@ -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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 316 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 510 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 480 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 561 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 648 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 357 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 309 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 332 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 876 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 338 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 860 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 611 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 547 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 560 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 572 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 570 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 526 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 780 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 817 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 606 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 426 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 781 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 351 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 472 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

View file

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

View file

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 990 KiB

Some files were not shown because too many files have changed in this diff Show more