142 lines
3.7 KiB
CSS
142 lines
3.7 KiB
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;
|
|
}
|