Browse Source

add about component

main
Yanick Champoux 11 months ago
parent
commit
c8e32a9a14
  1. 35
      src/lib/components/About.svelte
  2. 12
      src/lib/components/App.svelte
  3. 29
      src/lib/components/Header.svelte
  4. 9
      src/lib/style/index.css
  5. 7
      static/global.css

35
src/lib/components/Notes.svelte → src/lib/components/About.svelte

@ -1,13 +1,5 @@ @@ -1,13 +1,5 @@
<aside transition:fly={{ x: -800, opacity: 1 }}>
<div>
<input
type="button"
class="button small red"
value="close"
on:click={close}
/>
</div>
<h3>welcome to the docks</h3>
<Card>
<h2 slot="header">Welcome to the docks</h2>
<p>
This app is a ship builder for the game
@ -16,7 +8,7 @@ @@ -16,7 +8,7 @@
</p>
<p>
The app, beside any exception mentioned here, is trying to follow the
The contruction rules are following the
<a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
Cross Dimensions rules
</a>
@ -35,17 +27,22 @@ @@ -35,17 +27,22 @@
. Code available on
<a href="https://github.com/aotds/aotds-shipyard">Github</a>
</p>
</aside>
<div slot="footer" />
</Card>
<script>
import { fly } from "svelte/transition";
import { createEventDispatcher } from "svelte";
import {
Modal, Card
} from 'svelte-chota';
const dispatch = createEventDispatcher();
const close = () => dispatch("close");
</script>
<style>
h2 {
margin-bottom: 1em;
font-size: var(--font-scale-14);
font-family: Faktos;
}
aside {
background-color: rgb(254, 218, 184);
position: absolute;
@ -68,7 +65,7 @@ @@ -68,7 +65,7 @@
text-align: center;
margin: 0px;
}
div {
text-align: right;
}
p {
margin-left: 2em;
}
</style>

12
src/lib/components/App.svelte

@ -1,13 +1,25 @@ @@ -1,13 +1,25 @@
<Ribbon />
<Header />
<ShipEdit />
<script>
import {
Modal, Card, Nav
} from 'svelte-chota';
import Ribbon from "./Ribbon.svelte";
import Header from "./Header.svelte";
import ShipEdit from './ShipEdit/index.svelte';
import About from './About.svelte';
</script>
<style>
.nav {
width: var(--main-width);
margin-left: auto;
margin-right: auto;
}
</style>

29
src/lib/components/Header.svelte

@ -4,8 +4,22 @@ @@ -4,8 +4,22 @@
a <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a> ship
builder
</h2>
<a on:click|preventDefault={() => showAbout = true}>about the app</a>
</header>
<Modal bind:open={showAbout}>
<About/>
</Modal>
<script>
import {
Modal, Card, Nav
} from 'svelte-chota';
import About from './About.svelte';
let showAbout = false;
</script>
<style>
header {
display: flex;
@ -13,18 +27,27 @@ @@ -13,18 +27,27 @@
width: var(--main-width);
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
}
h1,
h2 {
text-align: left;
font-family: Faktos;
padding: 0px;
margin: 0px;
}
h1 {
font-size: var(--font-scale-15);
}
h2 {
text-align: right;
flex: 1;
padding-left: 2em;
font-size: var(--font-scale-12);
padding-left: 1em;
font-size: var(--font-scale-13);
}
header > a {
margin: 0px 2em;
font-size: var(--font-scale-10);
}
</style>

9
src/lib/style/index.css

@ -1,8 +1,17 @@ @@ -1,8 +1,17 @@
:root {
--main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--font-scale-9: 0.75rem;
--font-scale-10: 1em;
--font-scale-11: 1.333rem;
--font-scale-12: 1.777rem;
--font-scale-13: 2.369rem;
--font-scale-14: 3.157rem;
--font-scale-15: 4.209rem;
}
input.short {
width: 5em !important;
}

7
static/global.css

@ -1,11 +1,4 @@ @@ -1,11 +1,4 @@
:root {
--font-scale-9: 0.75rem;
--font-scale-10: 1em;
--font-scale-11: 1.333rem;
--font-scale-12: 1.777rem;
--font-scale-13: 2.369rem;
--font-scale-14: 3.157rem;
--font-scale-15: 4.209rem;
--oxford-blue: hsla(226, 60%, 10%, 1);
--royal-blue-dark: hsla(218, 100%, 16%, 1);

Loading…
Cancel
Save