add about page
This commit is contained in:
parent
b9fbcf8c30
commit
837adb4af3
1
.gitignore
vendored
1
.gitignore
vendored
@ -15,3 +15,4 @@ node_modules/
|
|||||||
dist/yarn-error.log
|
dist/yarn-error.log
|
||||||
.task/
|
.task/
|
||||||
.histoire/dist
|
.histoire/dist
|
||||||
|
dist
|
||||||
|
|||||||
@ -38,6 +38,7 @@
|
|||||||
"@reduxjs/toolkit": "^1.9.3",
|
"@reduxjs/toolkit": "^1.9.3",
|
||||||
"@sveltejs/adapter-node": "^1.0.0-next.0",
|
"@sveltejs/adapter-node": "^1.0.0-next.0",
|
||||||
"@yanick/updeep-remeda": "^2.1.1",
|
"@yanick/updeep-remeda": "^2.1.1",
|
||||||
|
"beercss": "^3.1.0",
|
||||||
"chota": "^0.8.0",
|
"chota": "^0.8.0",
|
||||||
"effector": "^22.5.2",
|
"effector": "^22.5.2",
|
||||||
"histoire": "^0.15.9",
|
"histoire": "^0.15.9",
|
||||||
|
|||||||
@ -1,17 +1,115 @@
|
|||||||
:root {
|
@import "/fonts/faktos.css";
|
||||||
--main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
@import "/fonts/dosis/dosis.css";
|
||||||
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
||||||
|
|
||||||
--font-scale-9: 0.75rem;
|
@font-face {
|
||||||
--font-scale-10: 1em;
|
font-family: "Faktos";
|
||||||
--font-scale-11: 1.333rem;
|
font-style: normal;
|
||||||
--font-scale-12: 1.777rem;
|
src: url(/fonts/Faktos.ttf) format("truetype");
|
||||||
--font-scale-13: 2.369rem;
|
}
|
||||||
--font-scale-14: 3.157rem;
|
@font-face {
|
||||||
--font-scale-15: 4.209rem;
|
font-family: "Dosis";
|
||||||
|
src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
|
--main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
|
--font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||||
|
|
||||||
|
--font-scale-9: 0.75rem;
|
||||||
|
--font-scale-10: 1rem;
|
||||||
|
--font-scale-11: 1.25rem;
|
||||||
|
--font-scale-12: 1.5rem;
|
||||||
|
--font-scale-13: 1.75rem;
|
||||||
|
--font-scale-14: 2.3125rem;
|
||||||
|
--font-scale-15: 3.0625rem;
|
||||||
|
|
||||||
|
--oxford-blue: hsla(226, 60%, 10%, 1);
|
||||||
|
--royal-blue-dark: hsla(218, 100%, 16%, 1);
|
||||||
|
--indigo-dye: hsla(209, 95%, 24%, 1);
|
||||||
|
--cg-blue: hsla(193, 80%, 35%, 1);
|
||||||
|
--white: hsla(20, 60%, 99%, 1);
|
||||||
|
|
||||||
|
--main-width: 60em;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.short {
|
input.short {
|
||||||
width: 5em !important;
|
width: 5em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--white);
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(0, 100, 200);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(0, 80, 160);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 0.4em;
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* input, */
|
||||||
|
/* select { */
|
||||||
|
/* border: 0px; */
|
||||||
|
/* border-bottom: 1px solid var(--indigo-dye); */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
select:focus {
|
||||||
|
border: 1px solid var(--indigo-dye);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type="checkbox"]):not([type="radio"]) {
|
||||||
|
border: 0px;
|
||||||
|
border-bottom: 1px solid var(--indigo-dye);
|
||||||
|
border-radius: 0px;
|
||||||
|
height: calc(
|
||||||
|
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
|
||||||
|
);
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: var(--font-scale-15); }
|
||||||
|
h2 { font-size: var(--font-scale-14); }
|
||||||
|
h3 { font-size: var(--font-scale-13); }
|
||||||
|
h4 { font-size: var(--font-scale-12); }
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
import "../../../static/fonts/faktos.css";
|
import "beercss/dist/cdn/beer.min.css";
|
||||||
import "../../../static/fonts/dosis/dosis.css";
|
import "beercss/dist/cdn/material-symbols-outlined.woff2";
|
||||||
import "../../../static/global.css";
|
import "beercss/dist/cdn/roboto-flex-cyrillic-ext.woff2";
|
||||||
import "@picocss/pico/css/pico.css";
|
import "beercss/dist/cdn/roboto-flex-cyrillic.woff2";
|
||||||
|
import "beercss/dist/cdn/roboto-flex-greek.woff2";
|
||||||
|
import "beercss/dist/cdn/roboto-flex-latin-ext.woff2";
|
||||||
|
import "beercss/dist/cdn/roboto-flex-latin.woff2";
|
||||||
|
import "beercss/dist/cdn/roboto-flex-vietnamese.woff2";
|
||||||
|
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|||||||
88
src/routes/about/+page.svelte
Normal file
88
src/routes/about/+page.svelte
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<h1>
|
||||||
|
<a>The Docks</a>
|
||||||
|
</h1>
|
||||||
|
<h3 class="max">a Full Thrust ship builder</h3>
|
||||||
|
<a>About</a>
|
||||||
|
<span> </span>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="responsive">
|
||||||
|
<nav class="m l left">
|
||||||
|
<a>
|
||||||
|
<i>Question_Mark</i>
|
||||||
|
<span>About</span>
|
||||||
|
</a>
|
||||||
|
<!-- TODO
|
||||||
|
<a>
|
||||||
|
<i>Quiz</i>
|
||||||
|
<span>See also</span>
|
||||||
|
</a>
|
||||||
|
<a>
|
||||||
|
<i>Format_List_Bulleted</i>
|
||||||
|
<span>Changelog</span>
|
||||||
|
</a>
|
||||||
|
-->
|
||||||
|
</nav>
|
||||||
|
<h2>Welcome to the docks!</h2>
|
||||||
|
|
||||||
|
<!-- TODO
|
||||||
|
<p class="version">
|
||||||
|
<span>version {import.meta.env.PACKAGE_VERSION}</span>
|
||||||
|
<a>changelog</a>
|
||||||
|
</p>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The Docks is a ship builder for the game
|
||||||
|
<a href="https://shop.groundzerogames.co.uk/rules.html" class="helper"
|
||||||
|
>Full Thrust</a
|
||||||
|
>, with construction rules 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
|
||||||
|
<!-- TODO change link -->
|
||||||
|
<a href="https://techblog.babyl.ca">Yanick Champoux</a>
|
||||||
|
. Code available on
|
||||||
|
<!-- TODO read the url from package.json -->
|
||||||
|
<a href="https://github.com/aotds/aotds-shipyard">Github</a>.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import "$lib/style/index.js";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header nav {
|
||||||
|
align-items: baseline;
|
||||||
|
font-family: "Faktos";
|
||||||
|
}
|
||||||
|
main nav {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: var(--font-scale-12);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: var(--font-scale-11);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,123 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "Faktos";
|
|
||||||
font-style: normal;
|
|
||||||
src: url(/fonts/Faktos.ttf) format("truetype");
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: "Dosis";
|
|
||||||
src: url(/fonts/dosis/Dosis-VariableFont_wght.ttf) format("truetype");
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
||||||
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
||||||
--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;
|
|
||||||
|
|
||||||
--oxford-blue: hsla(226, 60%, 10%, 1);
|
|
||||||
--royal-blue-dark: hsla(218, 100%, 16%, 1);
|
|
||||||
--indigo-dye: hsla(209, 95%, 24%, 1);
|
|
||||||
--cg-blue: hsla(193, 80%, 35%, 1);
|
|
||||||
--white: hsla(20, 60%, 99%, 1);
|
|
||||||
|
|
||||||
--main-width: 60em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.short {
|
|
||||||
width: 5em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: var(--font-scale-9);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
font-size: var(--font-scale-14);
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: var(--font-scale-12);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--white);
|
|
||||||
color: #333;
|
|
||||||
margin: 0;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
||||||
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: rgb(0, 100, 200);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: rgb(0, 80, 160);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
padding: 0.4em;
|
|
||||||
margin: 0 0 0.5em 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* input, */
|
|
||||||
/* select { */
|
|
||||||
/* border: 0px; */
|
|
||||||
/* border-bottom: 1px solid var(--indigo-dye); */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
input:focus,
|
|
||||||
select:focus {
|
|
||||||
border: 1px solid var(--indigo-dye);
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]) {
|
|
||||||
border: 0px;
|
|
||||||
border-bottom: 1px solid var(--indigo-dye);
|
|
||||||
border-radius: 0px;
|
|
||||||
height: calc(
|
|
||||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 1
|
|
||||||
);
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user