[C] upgrade to picocss-v2 and rework modlist massively
This commit is contained in:
parent
1b2e90e1f3
commit
7faed5af20
13 changed files with 2391 additions and 103 deletions
|
|
@ -9,7 +9,7 @@
|
|||
"devDependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.10",
|
||||
"@neoconfetti/svelte": "^1.0.0",
|
||||
"@picocss/pico": "^1.5.10",
|
||||
"@picocss/pico": "^2.0.6",
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/adapter-node": "^1.2.4",
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
|
|
|
|||
11
src/app.html
11
src/app.html
|
|
@ -6,6 +6,17 @@
|
|||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<noscript>
|
||||
<div class="noscript">This site uses JavaScript extensively. Please consider enabling it.</div>
|
||||
<style>
|
||||
.noscript {
|
||||
background-color: #fd9696;
|
||||
text-align: center;
|
||||
color: black;
|
||||
padding: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</noscript>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
@import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
|
||||
// @import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
|
||||
@use "@picocss/pico/scss/pico" with (
|
||||
$theme-color: "green"
|
||||
);
|
||||
@import url('/assets/fonts/fonts.css');
|
||||
/* @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css'); */
|
||||
|
||||
|
|
@ -56,4 +59,4 @@ p, li {
|
|||
article {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="search-container">
|
||||
<div class="search-container" role="group">
|
||||
<input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} />
|
||||
<select bind:value={selectedFile} on:change={handleFileChange}>
|
||||
{#each fileList as file}
|
||||
|
|
@ -42,35 +42,15 @@
|
|||
|
||||
<hr />
|
||||
|
||||
<div class="grid">
|
||||
{#each Array(Math.ceil(fuzzySearch(searchQuery, mods.mods).length / 3)) as _, index}
|
||||
{#each fuzzySearch(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod}
|
||||
<a
|
||||
role="button"
|
||||
class="mod-card contrast"
|
||||
href={mod.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
|
||||
<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">
|
||||
{#each Array(Math.ceil(fuzzySearch(searchQuery, mods.optional_mods).length / 3)) as _, index}
|
||||
{#each fuzzySearch(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
|
||||
{#if fuzzySearch(searchQuery, mods.mods).length === 0 && fuzzySearch(searchQuery, mods.optional_mods).length === 0}
|
||||
<p>⚠️ No results found.</p>
|
||||
{:else}
|
||||
<div class="grid" id="mods">
|
||||
{#each Array(Math.ceil(fuzzySearch(searchQuery, mods.mods).length / 3)) as _, index}
|
||||
{#each fuzzySearch(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod}
|
||||
<a
|
||||
role="button"
|
||||
class="mod-card contrast"
|
||||
class="mod-card contrast invert"
|
||||
href={mod.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
|
@ -84,7 +64,31 @@
|
|||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<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(fuzzySearch(searchQuery, mods.optional_mods).length / 3)) as _, index}
|
||||
{#each fuzzySearch(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
|
||||
<a
|
||||
role="button"
|
||||
class="mod-card contrast"
|
||||
href={mod.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
|
||||
<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 {
|
||||
|
|
@ -103,10 +107,10 @@
|
|||
|
||||
.search-container {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
|
||||
select {
|
||||
width: 40%;
|
||||
border-radius: 0px 1000px 1000px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,6 +129,7 @@
|
|||
}
|
||||
|
||||
.mod-card-text-ct {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
p {
|
||||
padding: 0;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<footer>
|
||||
<p>
|
||||
© Sangelo & LogolicusZ, 2023 | <a href="https://gitpot.org/ExploreCraft/website"> Source Code</a>
|
||||
© Sangelo & LogolicusZ, 2023-2024 | <a href="https://gitpot.org/ExploreCraft/website"> Source Code</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,69 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount } from "svelte";
|
||||
|
||||
function rand(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,30)}`);
|
||||
console.log(document.getElementById('banner').src);
|
||||
})
|
||||
function rand(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
document.getElementById("banner").src = document
|
||||
.getElementById("banner")
|
||||
.src.replace("pic0", `pic${rand(1, 30)}`);
|
||||
console.log(document.getElementById("banner").src);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>ExploreCraft</title>
|
||||
<meta name="description" content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft 1.19.2" />
|
||||
<title>ExploreCraft</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<div class="text-column">
|
||||
<h1>ExploreCraft</h1>
|
||||
<p>
|
||||
This is ExploreCraft! A modpack for Minecraft 1.19.2 (Quilt) designed to keep you moving.<br>
|
||||
You may never know what you'll find, after all
|
||||
</p>
|
||||
<p>Have a look around. You can download the modpack and play, have a look in our gallery, or take a look at our modlist.</p>
|
||||
<h1 class="main-title">ExploreCraft</h1>
|
||||
<p>
|
||||
This is ExploreCraft! A modpack for Minecraft designed to keep you moving.<br
|
||||
/>
|
||||
You may never know what you'll find, after all
|
||||
</p>
|
||||
<p>
|
||||
Have a look around. You can download the modpack and play, have a look in
|
||||
our gallery, or take a look at our modlist.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid buttons">
|
||||
<a href="/downloads" role="button">Download</a>
|
||||
<a href="/modlist" role="button" class="secondary outline">Modlist</a>
|
||||
<a href="/downloads" role="button">Download</a>
|
||||
<a href="/modlist" role="button" class="secondary outline">Modlist</a>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-img-redundant-alt -->
|
||||
<a href="/gallery" class="banner" data-tooltip="See more..."><img src="assets/images/gallery/pic0.png" id="banner" alt="Random picture from the gallery."></a>
|
||||
<a href="/gallery" class="banner" data-tooltip="See more...">
|
||||
<img
|
||||
src="assets/images/gallery/pic0.png"
|
||||
id="banner"
|
||||
alt="Random picture from the gallery."/>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a.banner img {
|
||||
border-radius: 1em;
|
||||
transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
||||
align-self: center;
|
||||
}
|
||||
a.banner img:hover {
|
||||
transform: scale(1.005);
|
||||
box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttons {
|
||||
margin-left: 25%;
|
||||
margin-right: 25%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
</style>
|
||||
.main-title {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
a.banner img {
|
||||
border-radius: 1em;
|
||||
transition:
|
||||
all 0.3s ease-in-out,
|
||||
box-shadow 0.3s ease-in-out;
|
||||
align-self: center;
|
||||
}
|
||||
a.banner img:hover {
|
||||
transform: scale(1.005);
|
||||
box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttons {
|
||||
margin-left: 25%;
|
||||
margin-right: 25%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<svelte:head>
|
||||
<title>Downloads</title>
|
||||
<meta name="description" content="About this app" />
|
||||
<meta name="description" content="Download the ExploreCraft modpack here!" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="text-column">
|
||||
|
|
@ -110,6 +110,10 @@
|
|||
|
||||
|
||||
<style>
|
||||
.msg-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.main-card {
|
||||
width: 50%;
|
||||
justify-self: center;
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<script>
|
||||
import Modal from "$lib/modules/Modal.svelte";
|
||||
let showModal = false;
|
||||
const openModal = () => {
|
||||
showModal = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<button on:click={openModal}>Open Modal</button>
|
||||
{#if showModal}
|
||||
<Modal title="Modal Title" msg="Modal Message" submit="https://example.com" bind:isOpen={showModal} />
|
||||
{/if}
|
||||
|
||||
|
|
@ -1,14 +1,24 @@
|
|||
<script>
|
||||
import ModCard from "../../lib/modules/ModCard.svelte";
|
||||
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 as up-to-date as possible.<br>
|
||||
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>
|
||||
|
||||
<ModCard />
|
||||
<ModCards />
|
||||
|
||||
<style lang="scss">
|
||||
.grid {
|
||||
|
|
|
|||
BIN
static/assets/images/modlist/no-mod-logo.png
Normal file
BIN
static/assets/images/modlist/no-mod-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -132,10 +132,10 @@
|
|||
resolved "https://registry.yarnpkg.com/@neoconfetti/svelte/-/svelte-1.0.0.tgz#84a7f98981ad546d959d8c99460da8cebdf70301"
|
||||
integrity sha512-SmksyaJAdSlMa9cTidVSIqYo1qti+WTsviNDwgjNVm+KQ3DRP2Df9umDIzC4vCcpEYY+chQe0i2IKnLw03AT8Q==
|
||||
|
||||
"@picocss/pico@^1.5.10":
|
||||
version "1.5.13"
|
||||
resolved "https://registry.yarnpkg.com/@picocss/pico/-/pico-1.5.13.tgz#2a2f2f5fcdd4e3f4ceedce7f95889faf39025362"
|
||||
integrity sha512-BPTeE4JC95+7/vsG9r+6hDR1qUkV4YZ1blI/TI6peOmM94XubjmUDE3jUi4f6DBV6WmCL76ueTct/NerJ33E8A==
|
||||
"@picocss/pico@^2.0.6":
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@picocss/pico/-/pico-2.0.6.tgz#16e6d253366ab245e67bac6faa95a45edcac4124"
|
||||
integrity sha512-/d8qsykowelD6g8k8JYgmCagOIulCPHMEc2NC4u7OjmpQLmtSetLhEbt0j1n3fPNJVcrT84dRp0RfJBn3wJROA==
|
||||
|
||||
"@polka/url@^1.0.0-next.24":
|
||||
version "1.0.0-next.25"
|
||||
|
|
|
|||
Loading…
Reference in a new issue