systemquery/src/static/app.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;
}

.version-label {
	font-weight: bolder;
	font-size: 110%;
}
.version {
	font-family: "Ubuntu Mono", "Source Code Pro", monospace;
}

/*
███    ██  █████  ██    ██
████   ██ ██   ██ ██    ██
██ ██  ██ ███████ ██    ██
██  ██ ██ ██   ██  ██  ██
██   ████ ██   ██   ████
*/
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: flex;
	align-items: center;
	gap: 0 0.5em;
	
	color: inherit;
	text-decoration: none;
}
.nav-items span:last-child { flex: 1; }
.nav-items .fa:not(.fa-stack):not(.fa-stack-1x):not(.fa-stack-2x):not(.fa-stack-3x) {
	font-size: 200%;
	width: 1em;
	height: 1em;
}


/*
███    ███  █████  ██ ███    ██
████  ████ ██   ██ ██ ████   ██
██ ████ ██ ███████ ██ ██ ██  ██
██  ██  ██ ██   ██ ██ ██  ██ ██
██      ██ ██   ██ ██ ██   ████
*/

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