Update file style.css

This commit is contained in:
Jan BELLON 2024-03-08 20:27:04 +00:00
parent 9f02c04985
commit 20bbdac5c4

View File

@ -7,10 +7,8 @@
.body { .body {
--text: hsl(var(--hue), var(--saturation), 80%); --text: hsl(var(--hue), var(--saturation), 80%);
--background: hsl(var(--hue), var(--saturation), 15%); --background: hsl(var(--hue), var(--saturation), 15%);
--dark-background: hsl(var(--hue), var(--saturation), 10%); --banner-background: hsl(var(--hue), var(--saturation), 10%);
--darker-background: hsl(var(--hue), var(--saturation), 5%); --buttons: hsl(var(--hue), var(--saturation), 5%);
--article-background: hsl(var(--hue), var(--saturation), 15%);
--article-text: hsl(var(--hue), var(--saturation), 100%);
} }
} }
@ -18,10 +16,8 @@
.body { .body {
--text: hsl(var(--hue), var(--saturation), 20%); --text: hsl(var(--hue), var(--saturation), 20%);
--background: hsl(var(--hue), var(--saturation), 100%); --background: hsl(var(--hue), var(--saturation), 100%);
--dark-background: hsl(var(--hue), var(--saturation), 100%); --banner-background: hsl(var(--hue), var(--saturation), 100%);
--darker-background: hsl(var(--hue), var(--saturation), 100%); --buttons: hsl(var(--hue), var(--saturation), 100%);
--article-background: hsl(var(--hue), var(--saturation), 100%);
--article-text: hsl(var(--hue), var(--saturation), 0%);
} }
} }
@ -50,7 +46,7 @@ main {
header, footer, nav { header, footer, nav {
width: 100%; width: 100%;
margin: 0; margin: 0;
background: var(--dark-background); background: var(--banner-background);
display: flex; display: flex;
} }
@ -69,7 +65,7 @@ input, textarea {
} }
input[type='submit'], button { input[type='submit'], button {
background-color: var(--darker-background); background-color: var(--buttons);
color: var(--text); color: var(--text);
border: 1px solid var(--text); border: 1px solid var(--text);
border-radius: 10px; border-radius: 10px;
@ -81,7 +77,7 @@ input[type='submit']:hover, button:hover {
.navitem { .navitem {
padding: 0.5em; padding: 0.5em;
background-color: var(--darker-background); background-color: var(--buttons);
margin-right: 1em; margin-right: 1em;
} }
@ -165,19 +161,13 @@ a {
} }
.article {
background-color: var(--article-background);
color: var(--article-text);
border-radius: 10px;
}
.article-content { .article-content {
padding: 2em; padding: 2em;
} }
.row { .row {
display: inline-block; display: inline-block;
background-color: var(--dark-background); background-color: var(--banner-background);
border-radius: 10px; border-radius: 10px;
padding: 2em; padding: 2em;
margin: 2em; margin: 2em;
@ -188,7 +178,7 @@ a {
} }
.button { .button {
background-color: var(--darker-background); background-color: var(--buttons);
color: var(--text); color: var(--text);
border-radius: 10px; border-radius: 10px;
color: var(--text); color: var(--text);