Initial CSS!

2022-02-24 00:39:27 +00:00 · 2022-02-24 00:39:27 +00:00 · b0fd916eb4
parent 5ee34ce082
commit b0fd916eb4
3 changed files with 138 additions and 3 deletions
--- 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;
+}
--- 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();
--- a/src/static/index.html
+++ b/src/static/index.html
@ -7,16 +7,23 @@
 	<body>
 		<header>
 			<h1>systemquery</h1>
-			<p>Version <span class="systemquery-version"></span></p>
+			<p>Version <span class="systemquery-version">???</span></p>
 		</header>
 		
 		<nav>
 			<ul class="nav-items">
 				
-				<li><a href="#settings">Settings</a></li>
+				<li><a href="#settings">
+					<span class="fa fa-cog" aria-hidden="true"></span>
+					Settings
+				</a></li>
 			</ul>
 		</nav>
 		
+		<main>
+			<h2>Loading...</h2>
+		</main>
+		
 		<!---------------->
 		<link rel="stylesheet" href="/static/app.css?hash={CSS_HASH_SHORT}" integrity="{ALGO}-{CSS_HASH}" />
 		<script src="/static/app.js?hash={JS_HASH_SHORT}" integrity="{ALGO}-{JS_HASH}" charset="utf-8"></script>