progress
This commit is contained in:
parent
27e79c6dcb
commit
8b63920c21
7 changed files with 96 additions and 53 deletions
4
.prettierrc
Normal file
4
.prettierrc
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false
|
||||||
|
}
|
0
src/lib/assets/pictures/pic0.png
Normal file
0
src/lib/assets/pictures/pic0.png
Normal 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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
|
|
@ -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>
|
|
@ -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;
|
|
Loading…
Reference in a new issue