Progress on Downloads Page

- Moved Pictures to different directory
- Modifications on Header and Menu Items
- Progress on Downloads Page
This commit is contained in:
Sangelo 2023-06-08 23:19:09 +02:00
parent 8b63920c21
commit 965f0d3561
19 changed files with 94 additions and 35 deletions

View file

@ -4,7 +4,7 @@
/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
h1, h2, body {
h1, h2, h3, h4, h5, h6, body {
font-family: 'IBM Plex Mono', monospace;
// background-color: #ffffff;
// color: #000000;
@ -48,6 +48,11 @@ h1, h2, body {
--switch-checked-background-color: var(--primary);
}
p {
p, li {
cursor: text;
}
article {
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2);
}

View file

Before

Width:  |  Height:  |  Size: 3.4 MiB

After

Width:  |  Height:  |  Size: 3.4 MiB

View file

Before

Width:  |  Height:  |  Size: 4.3 MiB

After

Width:  |  Height:  |  Size: 4.3 MiB

View file

Before

Width:  |  Height:  |  Size: 4.1 MiB

After

Width:  |  Height:  |  Size: 4.1 MiB

View file

Before

Width:  |  Height:  |  Size: 259 KiB

After

Width:  |  Height:  |  Size: 259 KiB

View file

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 167 KiB

View file

Before

Width:  |  Height:  |  Size: 4.6 MiB

After

Width:  |  Height:  |  Size: 4.6 MiB

View file

Before

Width:  |  Height:  |  Size: 582 KiB

After

Width:  |  Height:  |  Size: 582 KiB

View file

Before

Width:  |  Height:  |  Size: 5.3 MiB

After

Width:  |  Height:  |  Size: 5.3 MiB

View file

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

View file

Before

Width:  |  Height:  |  Size: 4.4 MiB

After

Width:  |  Height:  |  Size: 4.4 MiB

View file

Before

Width:  |  Height:  |  Size: 4.4 MiB

After

Width:  |  Height:  |  Size: 4.4 MiB

View file

Before

Width:  |  Height:  |  Size: 4.7 MiB

After

Width:  |  Height:  |  Size: 4.7 MiB

View file

Before

Width:  |  Height:  |  Size: 4.3 MiB

After

Width:  |  Height:  |  Size: 4.3 MiB

View file

Before

Width:  |  Height:  |  Size: 4.4 MiB

After

Width:  |  Height:  |  Size: 4.4 MiB

View file

@ -1,6 +1,6 @@
<script>
import { onMount } from 'svelte';
import demoImage from '$lib/assets/pictures/pic0.png'
import demoImage from '$lib/assets/images/gallery/pic0.png'
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
@ -31,17 +31,15 @@
<a href="/modlist" role="button" class="secondary outline">Modlist</a>
</div>
<!-- svelte-ignore a11y-img-redundant-alt -->
<a href="/gallery" data-tooltip="See more..."><img src="{demoImage}" class="banner" id="banner" alt="Random picture from the gallery."></a>
<a href="/gallery" class="banner" data-tooltip="See more..."><img src="{demoImage}" id="banner" alt="Random picture from the gallery."></a>
<style>
img.banner {
margin: 1em;
transform: scale(1);
a.banner img {
border-radius: 1em;
transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
align-self: center;
}
img.banner:hover {
a.banner img:hover {
transform: scale(1.005);
box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.4);
cursor: pointer;
@ -49,6 +47,6 @@
.buttons {
margin-left: 25%;
margin-right: 25%;
margin-bottom: 1em;
margin-bottom: 2em;
}
</style>

View file

@ -88,19 +88,31 @@
.navigation-bar a {
font-family: 'IBM Plex Mono', monospace;
font-style: normal;
font-weight: 500;
font-weight: 400;
font-size: 1em;
/* color: #000000; */
text-decoration: none;
transition: font-style;
}
.navigation-bar a:hover {
font-style: italic;
[data-theme="dark"] .navigation-bar a {
font-family: 'IBM Plex Mono', monospace;
font-style: normal;
font-weight: 300;
font-size: 1em;
text-decoration: none;
transition: font-style;
}
.navigation-bar a.current-page {
font-weight: 600;
font-weight: 700;
}
[data-theme="dark"] .navigation-bar a.current-page {
font-weight: 500;
}
.navigation-bar a:hover {
font-style: italic;
}
.link {

View file

@ -9,7 +9,7 @@
<div class="text-column">
<h1>Downloads</h1>
<p>Here you'll find all downloads.</p>
<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"
@ -18,17 +18,7 @@
/>
<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>
<article class="card">
<div>
<h4>ExploreCraft: Marbled</h4>
<p>
@ -36,20 +26,74 @@
so you're better off playing with this rather than the other ones.
</p>
<button>Download</button>
<a href="#instructions" role="button" class="outline">Instructions</a>
</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>
<!-- Unstable Versions -->
<details>
<!-- svelte-ignore a11y-no-redundant-roles -->
<summary class="secondary" role="button" id="unstable">Unstable Versions</summary>
<div class="grid">
<article>
<div>
<h4>ExploreCraft: Legacy</h4>
<div class="msg-box"><MsgBox type="error" message="Unmaintained!" prefix="Warning:" /></div>
<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 and incompatible with Marbled.
</p>
<button>Download</button>
</div>
</article>
<article>
<h4>ExploreCraft: Dev</h4>
<div class="msg-box"><MsgBox type="warning" message="Unstable!" /></div>
<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>
<a href="#instructions" role="button" class="outline">Instructions</a>
</article>
</div>
</details>
<!-- Instructions -->
<h2 id="instructions">Instructions</h2>
<p>Need help installing ExploreCraft? No problem! Just follow these few easy steps.</p>
<h3>Installation</h3>
<ul>
<li>
To install this modpack, you'll either need
<a href="https://prismlauncher.org" rel="noopener noreferrer" target="_blank"><b>PrismLauncher</b> (Recommended)</a> or
<a href="https://multimc.org" rel="noopener noreferrer" target="_blank"><b>MultiMC</b></a>.
<br>Additionaly, you'll need to download one of the above instances (.zip files).
</li>
<li>
Create a new instance by using Ctrl-N (Or CMD-N on MacOS).
</li>
<li>
Open the "Import from ZIP" tab, and choose the file you just downloaded.
</li>
<li>
You can also give it a catchy name and a snazzy icon while you're at it.
</li>
</ul>
<style>
.card {
width: 50%;
margin-left: 25%;
}
a[role="button"]{
width: 100%;
}
/* button {
display: flex;
align-items: center;