format css and variablize colors

This commit is contained in:
metamuffin 2024-11-03 22:52:18 +01:00
parent 9f453051c7
commit 8f1b230e63
No known key found for this signature in database
GPG key ID: 718F9749DCDBD654

View file

@ -1,5 +1,14 @@
:root {
--hue: 280;
--b0: hsl(var(--hue), 27%, 15%);
--b1: hsl(var(--hue), 26%, 20%);
--b2: hsl(var(--hue), 25%, 24%);
--t0: hsl(var(--hue), 00%, 89%);
--t1: hsl(var(--hue), 13%, 51%);
}
body {
background-color: #25333f;
background-color: var(--b1);
}
body>* {
@ -28,13 +37,14 @@ h1 {
}
/* nav bar */
*, .logo {
color: #e2e2e2;
*,
.logo {
color: var(--t0);
font-family: "Roboto", sans-serif;
}
nav {
background-color: #1d2832;
background-color: var(--b0);
margin: 0;
padding: 1em;
font-size: 1.2em;
@ -43,7 +53,7 @@ nav {
nav a {
padding-right: 1em;
text-decoration: none;
color: rgb(65, 89, 110);
color: var(--t1);
}
nav h2 {
@ -58,7 +68,7 @@ nav > :last-child {
/* notification stuff */
.notif {
padding: 0.5em;
background-color: #1d2832;
background-color: var(--b0);
}
.notif.error {
@ -71,7 +81,7 @@ nav > :last-child {
/* landing page */
form.creation {
background-color: #2e3d4d;
background-color: var(--b2);
padding: 1em;
margin-top: 2em;
}
@ -82,7 +92,7 @@ form.creation > h3 {
}
input {
color: #2e3d4d;
color: var(--b2);
}
input[type="text"] {
@ -111,7 +121,7 @@ ul {
}
li {
background-color: #2e3d4d;
background-color: var(--b2);
width: 6em;
height: 3.5em;
padding: 1em;
@ -160,6 +170,7 @@ h1 {
grid-template-columns: repeat(6, 6em);
list-style-type: none;
}
input.button {
place-content: center;
padding: 0.8em 0.5em;
@ -208,7 +219,7 @@ h3 {
.backgroundbox {
width: fit-content;
background-color: #1d2832;
background-color: var(--b0);
padding: 1em;
}
@ -225,7 +236,8 @@ h3 {
grid-template-columns: auto 10em;
}
form.box > :first-child, form.box > :last-child {
form.box> :first-child,
form.box> :last-child {
grid-column: 1 / -1;
}
@ -247,7 +259,7 @@ td {
}
tr:nth-child(2n) {
background-color: #1d2832;
background-color: var(--b0);
}
input {
@ -257,11 +269,14 @@ input {
input:not([type=submit]) {
border: none;
border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid var(--t0);
}
@media print {
nav, .container, h1 {
nav,
.container,
h1 {
display: none;
}
@ -285,7 +300,8 @@ input:not([type=submit]) {
border-bottom: 1px solid black;
}
*, body {
*,
body {
background-color: white;
color: black;
}