Compare commits
No commits in common. "77d866f3c9e854f196b72c8b5bb854de2a18de69" and "7faed5af20097c3ae94d5656e142a74a2f84db62" have entirely different histories.
77d866f3c9
...
7faed5af20
9 changed files with 62 additions and 179 deletions
|
@ -16,7 +16,6 @@
|
||||||
"@sveltejs/kit": "^1.20.5",
|
"@sveltejs/kit": "^1.20.5",
|
||||||
"sass": "^1.62.0",
|
"sass": "^1.62.0",
|
||||||
"svelte": "^3.54.0",
|
"svelte": "^3.54.0",
|
||||||
"svelte-material-icons": "^3.0.5",
|
|
||||||
"svelte-preprocess": "^5.0.3",
|
"svelte-preprocess": "^5.0.3",
|
||||||
"vite": "^4.3.0"
|
"vite": "^4.3.0"
|
||||||
},
|
},
|
||||||
|
|
68
src/app.scss
68
src/app.scss
|
@ -13,11 +13,45 @@ h1, h2, h3, h4, h5, h6, body {
|
||||||
// color: #000000;
|
// color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Green Light scheme (Default) */
|
||||||
|
/* Can be forced with data-theme="light" */
|
||||||
[data-theme="light"],
|
[data-theme="light"],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
|
--primary: #43a047;
|
||||||
|
--primary-hover: #388e3c;
|
||||||
|
--primary-focus: rgba(67, 160, 71, 0.125);
|
||||||
|
--primary-inverse: #FFF;
|
||||||
background-color: #FAF9F6;
|
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 {
|
p, li {
|
||||||
cursor: text;
|
cursor: text;
|
||||||
}
|
}
|
||||||
|
@ -26,37 +60,3 @@ article {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2);
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,34 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
|
|
||||||
import IconClose from 'svelte-material-icons/Close.svelte';
|
|
||||||
|
|
||||||
let mods = { mods: [], optional_mods: [] };
|
let mods = { mods: [], optional_mods: [] };
|
||||||
let timeout;
|
|
||||||
let searchQuery = "";
|
let searchQuery = "";
|
||||||
let selectedFile = "modlist-rekindled.json";
|
let selectedFile = "modlist-rekindled.json";
|
||||||
let fileList = [];
|
let fileList = [];
|
||||||
|
|
||||||
let searchQueryInput = (event) => {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
timeout = setTimeout(checkOverflow, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
function checkOverflow() {
|
|
||||||
const modCards = document.querySelectorAll('.mod-card');
|
|
||||||
modCards.forEach((modCard) => {
|
|
||||||
modCard.addEventListener('mouseover', () => {
|
|
||||||
if (modCard.scrollHeight > modCard.offsetHeight) {
|
|
||||||
modCard.style.backgroundColor = 'red';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
modCard.addEventListener('mouseout', () => {
|
|
||||||
modCard.style.backgroundColor = '';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchData(file) {
|
async function fetchData(file) {
|
||||||
const response = await fetch(`/assets/json/${file}`);
|
const response = await fetch(`/assets/json/${file}`);
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
@ -40,7 +16,6 @@
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
fileList = data;
|
fileList = data;
|
||||||
await fetchData(selectedFile);
|
await fetchData(selectedFile);
|
||||||
checkOverflow(); // Run checkOverflow once the component has mounted
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function fuzzySearch(query, mods) {
|
function fuzzySearch(query, mods) {
|
||||||
|
@ -50,12 +25,6 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearInput() {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
timeout = setTimeout(checkOverflow, 0);
|
|
||||||
searchQuery = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFileChange(event) {
|
function handleFileChange(event) {
|
||||||
selectedFile = event.target.value;
|
selectedFile = event.target.value;
|
||||||
fetchData(selectedFile);
|
fetchData(selectedFile);
|
||||||
|
@ -63,17 +32,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="search-container" role="group">
|
<div class="search-container" role="group">
|
||||||
<input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} on:input={searchQueryInput} />
|
<input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} />
|
||||||
<button class="close transparent" on:click={() => clearInput()}><IconClose size="1em" /></button>
|
|
||||||
<select bind:value={selectedFile} on:change={handleFileChange}>
|
<select bind:value={selectedFile} on:change={handleFileChange}>
|
||||||
{#each fileList as file}
|
{#each fileList as file}
|
||||||
<option value={file.file}>{file.name}</option>
|
<option value={file.file}>{file.name}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="scroll-to-optional">
|
|
||||||
<a href="#optional-mods"><IconChevronDown size="1.2em" /> View Optional Mods</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
|
@ -85,7 +50,7 @@
|
||||||
{#each fuzzySearch(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod}
|
{#each fuzzySearch(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod}
|
||||||
<a
|
<a
|
||||||
role="button"
|
role="button"
|
||||||
class="mod-card card contrast"
|
class="mod-card contrast invert"
|
||||||
href={mod.link}
|
href={mod.link}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
@ -108,7 +73,7 @@
|
||||||
{#each fuzzySearch(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
|
{#each fuzzySearch(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
|
||||||
<a
|
<a
|
||||||
role="button"
|
role="button"
|
||||||
class="mod-card card contrast"
|
class="mod-card contrast"
|
||||||
href={mod.link}
|
href={mod.link}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
@ -133,6 +98,13 @@
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
@ -140,30 +112,13 @@
|
||||||
width: 40%;
|
width: 40%;
|
||||||
border-radius: 0px 1000px 1000px 0px;
|
border-radius: 0px 1000px 1000px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.close {
|
|
||||||
padding: 0 1em 0 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-to-optional {
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mod-card {
|
.mod-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
padding: 0.5em 1em 0.5em 1em;
|
padding: 0.5em 1em 0.5em 1em;
|
||||||
height: 6em;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img.mod-card-logo {
|
img.mod-card-logo {
|
||||||
height: 4em;
|
height: 4em;
|
||||||
|
@ -171,7 +126,6 @@
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-self: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mod-card-text-ct {
|
.mod-card-text-ct {
|
||||||
|
@ -188,5 +142,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,36 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import "../app.scss";
|
import "../app.scss";
|
||||||
import Header from "./Header.svelte";
|
import Header from "./Header.svelte";
|
||||||
import { smoothScrollTo, handleKeydown } from "$lib/common";
|
|
||||||
|
|
||||||
import { fly } from "svelte/transition";
|
import { fly } from 'svelte/transition'
|
||||||
import { onMount } from "svelte";
|
export let data
|
||||||
export let data;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
function smoothScrollTo(elementId) {
|
|
||||||
document.getElementById(elementId).scrollIntoView({
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleKeydown(elementId, event) {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
smoothScrollTo(elementId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<div class="app">
|
<div class="app">
|
||||||
|
@ -45,29 +18,14 @@
|
||||||
</main>
|
</main>
|
||||||
{/key}
|
{/key}
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-missing-attribute -->
|
|
||||||
<a
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
class="top-button"
|
|
||||||
on:click={() => smoothScrollTo("header")}
|
|
||||||
on:keydown={(event) => handleKeydown("header", event)}
|
|
||||||
>
|
|
||||||
Top
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
© Sangelo & LogolicusZ, 2023-2024 | <a
|
© Sangelo & LogolicusZ, 2023-2024 | <a href="https://gitpot.org/ExploreCraft/website"> Source Code</a>
|
||||||
href="https://gitpot.org/ExploreCraft/website"
|
|
||||||
>
|
|
||||||
Source Code</a
|
|
||||||
>
|
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.app {
|
.app {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -97,17 +55,6 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-button {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 1em;
|
|
||||||
right: 1em;
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 480px) {
|
@media (min-width: 480px) {
|
||||||
footer {
|
footer {
|
||||||
padding: 0.1em 0;
|
padding: 0.1em 0;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
import Switcher from './Switcher.svelte';
|
import Switcher from './Switcher.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="header-container" id="header">
|
<div class="header-container">
|
||||||
<a class="link contrast" href="/">
|
<a class="link contrast" href="/">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<img class="logo" src="/assets/logo/explorecraft.svg" alt="ExploreCraft Logo" />
|
<img class="logo" src="/assets/logo/explorecraft.svg" alt="ExploreCraft Logo" />
|
||||||
|
|
|
@ -19,3 +19,14 @@
|
||||||
<p>Please report any missing mods on our <a href="https://discord.gg/Z2YehhEUVr" target="_blank" rel="noopener noreferrer">Discord</a>.</p>
|
<p>Please report any missing mods on our <a href="https://discord.gg/Z2YehhEUVr" target="_blank" rel="noopener noreferrer">Discord</a>.</p>
|
||||||
|
|
||||||
<ModCards />
|
<ModCards />
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.grid {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
width: 50%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,9 +1,2 @@
|
||||||
/* Variables and mixins declared here will be available in all other SCSS files */ /* https://github.com/picocss/pico/issues/201 */
|
/* 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";
|
$semantic-root-element: "body div:first-child";
|
||||||
|
|
||||||
// colors
|
|
||||||
$zinc-50: #F0F1F3;
|
|
||||||
$zinc-100: #E0E3E7;
|
|
||||||
|
|
||||||
$slate-800: #2A3140;
|
|
||||||
$slate-750: #333C4E;
|
|
||||||
|
|
|
@ -773,11 +773,6 @@ svelte-hmr@^0.15.3:
|
||||||
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6"
|
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6"
|
||||||
integrity sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==
|
integrity sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==
|
||||||
|
|
||||||
svelte-material-icons@^3.0.5:
|
|
||||||
version "3.0.5"
|
|
||||||
resolved "https://registry.yarnpkg.com/svelte-material-icons/-/svelte-material-icons-3.0.5.tgz#37bed05ceadd981b0da8630bd43b6d7cd6345376"
|
|
||||||
integrity sha512-UbhAa+Btd5y6e6DMljVccP+cbJ8lvesltMippiCOvfIUtYe2TsQqM+P6osfrVsZHV47b1tY6AmqCuSpMKnwMOQ==
|
|
||||||
|
|
||||||
svelte-preprocess@^5.0.3:
|
svelte-preprocess@^5.0.3:
|
||||||
version "5.1.4"
|
version "5.1.4"
|
||||||
resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz#14ada075c94bbd2b71c5ec70ff72f8ebe1c95b91"
|
resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz#14ada075c94bbd2b71c5ec70ff72f8ebe1c95b91"
|
||||||
|
|
Loading…
Reference in a new issue