Initial CSS!
This commit is contained in:
parent
5ee34ce082
commit
b0fd916eb4
GPG key ID:
1BE5172E637709C2
3 changed files with 138 additions and 3 deletions
|
|
@ -1 +1,130 @@
|
||||||
@import "fork-awesome/css/fork-awesome.min.css";
|
@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,7 +1,6 @@
|
||||||
import make_router from './js/routes_client.mjs';
|
import make_router from './js/routes_client.mjs';
|
||||||
|
|
||||||
window.addEventListener("load", (_event) => {
|
window.addEventListener("load", (_event) => {
|
||||||
globalThis[Symbol("__INDEX__")] = __INDEX__;
|
|
||||||
globalThis.sysquery_router = make_router();
|
globalThis.sysquery_router = make_router();
|
||||||
|
|
||||||
globalThis.sysquery_router.navigate_current_hash();
|
globalThis.sysquery_router.navigate_current_hash();
|
||||||
|
|
|
||||||
|
|
@ -7,16 +7,23 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>systemquery</h1>
|
<h1>systemquery</h1>
|
||||||
<p>Version <span class="systemquery-version"></span></p>
|
<p>Version <span class="systemquery-version">???</span></p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="nav-items">
|
<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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h2>Loading...</h2>
|
||||||
|
</main>
|
||||||
|
|
||||||
<!---------------->
|
<!---------------->
|
||||||
<link rel="stylesheet" href="/static/app.css?hash={CSS_HASH_SHORT}" integrity="{ALGO}-{CSS_HASH}" />
|
<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>
|
<script src="/static/app.js?hash={JS_HASH_SHORT}" integrity="{ALGO}-{JS_HASH}" charset="utf-8"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue