This commit is contained in:
Sangelo 2023-06-08 21:36:35 +02:00
parent 27e79c6dcb
commit 8b63920c21
7 changed files with 96 additions and 53 deletions

4
.prettierrc Normal file
View file

@ -0,0 +1,4 @@
{
"tabWidth": 2,
"useTabs": false
}

View file

View file

@ -1,5 +1,16 @@
<script> <script>
import demoImage from '$lib/assets/pictures/pic10.png'; import { onMount } from 'svelte';
import demoImage from '$lib/assets/pictures/pic0.png'
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,14)}`);
console.log(document.getElementById('banner').src);
})
</script> </script>
<svelte:head> <svelte:head>
@ -20,15 +31,14 @@
<a href="/modlist" role="button" class="secondary outline">Modlist</a> <a href="/modlist" role="button" class="secondary outline">Modlist</a>
</div> </div>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
<a href="/gallery" data-tooltip="See more..."><img class="banner" src="{demoImage}" alt="Random picture from the gallery."></a> <a href="/gallery" data-tooltip="See more..."><img src="{demoImage}" class="banner" id="banner" alt="Random picture from the gallery."></a>
<style> <style>
img.banner { img.banner {
margin: 1em; margin: 1em;
border-radius: 1em;
transform: scale(1); transform: scale(1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); border-radius: 1em;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
align-self: center; align-self: center;
} }
img.banner:hover { img.banner:hover {

View file

@ -1,7 +1,6 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import logo from '$lib/assets/logo/explorecraft.svg'; import logo from '$lib/assets/logo/explorecraft.svg';
import github from '$lib/images/github.svg';
import Switcher from './Switcher.svelte'; import Switcher from './Switcher.svelte';
</script> </script>
@ -12,16 +11,16 @@
<div>ExploreCraft</div> <div>ExploreCraft</div>
</div> </div>
</a> </a>
<nav id="navigation-bar"> <nav class="navigation-bar">
<ul> <ul>
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}> <li>
<a href="/" class="contrast">Home</a> <a href="/" class="contrast {$page.url.pathname === '/' ? 'current-page' : undefined}">Home</a>
</li> </li>
<li aria-current={$page.url.pathname === '/download' ? 'page' : undefined}> <li>
<a href="/downloadsgit push ori" class="contrast">Download</a> <a href="/downloads" class="contrast {$page.url.pathname === '/downloads' ? 'current-page' : undefined}">Download</a>
</li> </li>
<li aria-current={$page.url.pathname.startsWith('/gallery') ? 'page' : undefined}> <li>
<a href="/gallery" class="contrast">Gallery</a> <a href="/gallery" class="contrast {$page.url.pathname === '/gallery' ? 'current-page' : undefined}">Gallery</a>
</li> </li>
<li> <li>
<Switcher/> <Switcher/>
@ -63,29 +62,30 @@
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; /* Add this to align the logo and navigation on opposite sides */ justify-content: space-between;
padding: 0.5em; padding-top: 0.5em;
padding-right: 1.5em; /* Change padding-left to padding-right */ padding-bottom: 0.5em;
padding-right: 0.5em;
font-weight: 500; font-weight: 500;
font-size: 1.5em; font-size: 1.5em;
} }
#navigation-bar { .navigation-bar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
list-style: none; list-style: none;
margin: 0; margin: 0;
margin-left: auto; margin-left: auto;
margin-right: 2em; margin-right: 2.5%;
padding: 0; padding: 0;
} }
#navigation-bar li { .navigation-bar li {
margin-left: 1em; margin-left: 1em;
} }
#navigation-bar a { .navigation-bar a {
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
@ -95,18 +95,18 @@
transition: font-style; transition: font-style;
} }
#navigation-bar a:hover { .navigation-bar a:hover {
font-style: italic; font-style: italic;
} }
#navigation-bar a.current-page { .navigation-bar a.current-page {
font-style: italic; font-weight: 600;
} }
.link { .link {
/* color: #000000; */
text-decoration: none; text-decoration: none;
transition: font-style; transition: font-style;
margin-left: 2.5%;
} }
.link:hover { .link:hover {

View file

@ -1,9 +0,0 @@
import { dev } from '$app/environment';
// we don't need any JS on this page, though we'll load
// it in dev so that we get hot module replacement
export const csr = dev;
// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in production
export const prerender = true;

View file

@ -1,14 +1,61 @@
<script>
import MsgBox from "$lib/modules/MsgBox.svelte";
</script>
<svelte:head> <svelte:head>
<title>Downloads</title> <title>Downloads</title>
<meta name="description" content="About this app" /> <meta name="description" content="About this app" />
</svelte:head> </svelte:head>
<script>
import MsgBox from "$lib/modules/MsgBox.svelte";
</script>
<div class="text-column"> <div class="text-column">
<h1>Downloads</h1> <h1>Downloads</h1>
<p>Here you'll find all downloads.</p> <p>Here you'll find all downloads.</p>
</div> </div>
<MsgBox type="warning" message="<br>Currently WIP. You'll find downloads on this page,<br>but they may not work properly." prefix=" Note " /> <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>
<div>
<h4>ExploreCraft: Legacy</h4>
<p>
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.
</p>
<button>Download</button>
</div>
</article>
<article>
<div>
<h4>ExploreCraft: Marbled</h4>
<p>
The main way to play ExploreCraft. This is also the most stable version,
so you're better off playing with this rather than the other ones.
</p>
<button>Download</button>
</div>
</article>
<article>
<h4>ExploreCraft: Dev</h4>
<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.
</p>
<button>Download</button>
</article>
</div>
<style>
/* button {
display: flex;
align-items: center;
justify-content: center;
top: auto;
bottom: 1em;
position: static;
} */
</style>

View file

@ -1,9 +0,0 @@
import { dev } from '$app/environment';
// we don't need any JS on this page, though we'll load
// it in dev so that we get hot module replacement
export const csr = dev;
// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in production
export const prerender = true;