aotds-docks/src/lib/components/About.svelte

93 lines
1.9 KiB
Svelte

{#if showChangelog}
<Card>
<h2 slot="header">Changelog for the Docks</h2>
<div class="changelog">
<Changelog />
</div>
</Card>
{:else}
<Card>
<div slot="header" class="header">
<h2>Welcome to the docks</h2>
<div class="version">
<div>version {import.meta.env.PACKAGE_VERSION}</div>
<a on:click={() => (showChangelog = true)}>changelog</a>
</div>
</div>
<p>
This app is a ship builder for the game
<a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a>
.
</p>
<p>
The contruction rules are following the
<a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
Cross Dimensions rules
</a>
as closely as possible.
</p>
<p>
The app is mostly developed for Firefox. I also check as much as I can
that I don't mess things too badly on Chrome. For the other browsers...
caveat emptor.
</p>
<p>
Written by
<a href="https://twitter.com/yenzie">Yanick Champoux</a>
. Code available on
<a href="https://github.com/aotds/aotds-shipyard">Github</a>.
</p>
</Card>
{/if}
<script>
import { Modal, Card } from "svelte-chota";
import Changelog from "./Changelog.svelte";
let showChangelog = false;
</script>
<style>
h2 {
font-size: var(--font-scale-14);
font-family: Faktos;
margin-bottom: 0px;
}
.header {
margin-bottom: 1em;
display: flex;
align-items: center;
}
p {
margin-left: 2em;
}
.version {
flex: 1;
text-align: right;
}
.changelog :global(h1),
:global(h1 + p) {
display: none;
}
.changelog :global(h2) {
font-size: var(--font-scale-12);
font-family: Faktos;
}
.changelog :global(h3) {
font-size: var(--font-scale-12);
font-family: Faktos;
}
.version a {
display: inline-block;
}
</style>