From 837adb4af36133cf040685fd1f5297c230def15a Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Thu, 13 Apr 2023 16:24:17 -0400 Subject: [PATCH] add about page --- .gitignore | 1 + package.json | 1 + src/lib/style/index.css | 120 ++++++++++++++++++++++++++++++--- src/lib/style/index.js | 13 ++-- src/routes/about/+page.svelte | 88 ++++++++++++++++++++++++ static/global.css | 123 ---------------------------------- 6 files changed, 208 insertions(+), 138 deletions(-) create mode 100644 src/routes/about/+page.svelte delete mode 100644 static/global.css diff --git a/.gitignore b/.gitignore index 4d0258a..b530606 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ node_modules/ dist/yarn-error.log .task/ .histoire/dist +dist diff --git a/package.json b/package.json index 13371ea..1fef999 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/lib/style/index.css b/src/lib/style/index.css index 75866d1..b6ead55 100644 --- a/src/lib/style/index.css +++ b/src/lib/style/index.css @@ -1,17 +1,115 @@ -:root { - --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +@import "/fonts/faktos.css"; +@import "/fonts/dosis/dosis.css"; - --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-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 { + --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 { - 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); } diff --git a/src/lib/style/index.js b/src/lib/style/index.js index 68f9730..c1f59d1 100644 --- a/src/lib/style/index.js +++ b/src/lib/style/index.js @@ -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"; diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..643ceee --- /dev/null +++ b/src/routes/about/+page.svelte @@ -0,0 +1,88 @@ +
+ +
+
+ +

Welcome to the docks!

+ + + +

+ The Docks is a ship builder for the game + Full Thrust, with construction rules following the + + Cross Dimensions rules + + as closely as possible. +

+ +

+ 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. +

+ +

+ Written by + + Yanick Champoux + . Code available on + + Github. +

+
+ + + + diff --git a/static/global.css b/static/global.css deleted file mode 100644 index 2d9a4fb..0000000 --- a/static/global.css +++ /dev/null @@ -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; - }