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
|
||||
.task/
|
||||
.histoire/dist
|
||||
dist
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
"@reduxjs/toolkit": "^1.9.3",
|
||||
"@sveltejs/adapter-node": "^1.0.0-next.0",
|
||||
"@yanick/updeep-remeda": "^2.1.1",
|
||||
"beercss": "^3.1.0",
|
||||
"chota": "^0.8.0",
|
||||
"effector": "^22.5.2",
|
||||
"histoire": "^0.15.9",
|
||||
|
||||
@ -1,17 +1,115 @@
|
||||
@import "/fonts/faktos.css";
|
||||
@import "/fonts/dosis/dosis.css";
|
||||
|
||||
@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: "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: 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;
|
||||
--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 {
|
||||
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 "../../../static/fonts/dosis/dosis.css";
|
||||
import "../../../static/global.css";
|
||||
import "@picocss/pico/css/pico.css";
|
||||
import "beercss/dist/cdn/beer.min.css";
|
||||
import "beercss/dist/cdn/material-symbols-outlined.woff2";
|
||||
import "beercss/dist/cdn/roboto-flex-cyrillic-ext.woff2";
|
||||
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";
|
||||
|
||||
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