From b0fd916eb40571c6cfb20267948b0c2d3a3b2059 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Thu, 24 Feb 2022 00:39:27 +0000 Subject: [PATCH] Initial CSS! --- src/static/app.css | 129 ++++++++++++++++++++++++++++++++++++++++++ src/static/app.mjs | 1 - src/static/index.html | 11 +++- 3 files changed, 138 insertions(+), 3 deletions(-) diff --git a/src/static/app.css b/src/static/app.css index 9de6160..bd34054 100644 --- a/src/static/app.css +++ b/src/static/app.css @@ -1 +1,130 @@ @import "fork-awesome/css/fork-awesome.min.css"; +/* When polishing later, take some inspiration from https://h5bp.org/Effeckt.css/ + We want this UI to look snazzy and polished :D */ + +:root { + --bg: hsl(0, 0%, 10%); + --text: white; + + --tech-a1: hsla(230, 100%, 77%, 0.75); + --tech-a2: hsla(265, 100%, 77%, 0.75); + --tech-b: #0381e2; + --tech-c: #f0e9ad; + --tech-d: hsla(178, 61%, 59%, 0.75); +} + + +/* +██████ ██████ ███████ █████ ███ ███ ██████ ██ ███████ +██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ██ +██████ ██████ █████ ███████ ██ ████ ██ ██████ ██ █████ +██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ +██ ██ ██ ███████ ██ ██ ██ ██ ██████ ███████ ███████ +*/ + +html, body { font-size: 100%; } +body { + font-family: "Ubuntu", sans-serif; + + margin: 0; padding: 0; + min-height: 100vh; + + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: "header content" + "nav content" + "nav footer"; + + background: var(--bg); + color: var(--text); +} + +header { + grid-area: header; + background: hsla(0, 0%, 40%, 0.3); + padding: 1em; + text-shadow: 0 0 0.25em var(--text); +} + +h1 { + margin: 0; +} + + +/* +███ ██ █████ ██ ██ +████ ██ ██ ██ ██ ██ +██ ██ ██ ███████ ██ ██ +██ ██ ██ ██ ██ ██ ██ +██ ████ ██ ██ ████ +*/ +nav { + grid-area: nav; + background: hsla(0, 0%, 50%, 0.75); + margin: 0 0.5em; + text-shadow: 0 0 0.25em var(--text); +} +.nav-items { + list-style-type: none; + margin: 0; + padding: 0; + + display: flex; + flex-direction: column; + font-size: 125%; + font-weight: bolder; +} +.nav-items > li { + --border: 0.1em solid hsla(0, 0%, 60%, 0.8); + border-top: var(--border); + border-bottom: var(--border); + padding: 0.5em 0.75em; +} +.nav-items a { + display: block; + color: inherit; + text-decoration: none; +} +.nav-items .fa { + margin: 0.1em 0.25em 0.1em 0.1em; + font-size: 200%; + vertical-align: middle; +} + + +/* +███ ███ █████ ██ ███ ██ +████ ████ ██ ██ ██ ████ ██ +██ ████ ██ ███████ ██ ██ ██ ██ +██ ██ ██ ██ ██ ██ ██ ██ ██ +██ ██ ██ ██ ██ ██ ████ +*/ + +main { + grid-area: content; +} + +h2 { + margin: 0 2em; + padding: 0.7em 0; + + text-align: center; + font-size: 200%; + + background: var(--tech-d); + text-shadow: 0 0 0.25em var(--text); +} + + +/* +███████ ██████ ██████ ████████ ███████ ██████ +██ ██ ██ ██ ██ ██ ██ ██ ██ +█████ ██ ██ ██ ██ ██ █████ ██████ +██ ██ ██ ██ ██ ██ ██ ██ ██ +██ ██████ ██████ ██ ███████ ██ ██ +*/ + +footer { + grid-area: footer; +} diff --git a/src/static/app.mjs b/src/static/app.mjs index e09f407..c53b2b2 100644 --- a/src/static/app.mjs +++ b/src/static/app.mjs @@ -1,7 +1,6 @@ import make_router from './js/routes_client.mjs'; window.addEventListener("load", (_event) => { - globalThis[Symbol("__INDEX__")] = __INDEX__; globalThis.sysquery_router = make_router(); globalThis.sysquery_router.navigate_current_hash(); diff --git a/src/static/index.html b/src/static/index.html index cfd0afa..36494a2 100644 --- a/src/static/index.html +++ b/src/static/index.html @@ -7,16 +7,23 @@

systemquery

-

Version

+

Version ???

+
+

Loading...

+
+