sbrl/systemquery
1
0
Fork 0
Code Issues Pull requests Releases Activity

Initial CSS!

Browse source
This commit is contained in:
Starbeamrainbowlabs 2022-02-24 00:39:27 +00:00
parent 5ee34ce082
commit b0fd916eb4
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 138 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/static/app.css
View file

@ -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;
}

1
src/static/app.mjs
View file

@ -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();

11
src/static/index.html
View file

@ -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>