style: Prettier colour style!

This commit is contained in:
Yuki Joou 2023-08-16 15:10:41 +02:00
parent 0a7a85a231
commit e2d340f555

View file

@ -1,17 +1,38 @@
:root {
--color-background: #bad2e0;
--color-background-header: #d4abee;
--color-background-main: #efc2e7;
--color-text: #211237;
--color-link: #162fb6;
--color-shadow: #0f5a87;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #38235e;
--color-background-header: #5c5185;
--color-background-main: #69265c;
--color-text: #e9ddf8;
--color-link: #96a9e2;
--color-shadow: #200256;
}
}
* { * {
font-family: "sans-serif" sans; font-family: "sans-serif" sans;
color: var(--color-text);
} }
a { a {
color: purple; color: var(--color-link);
} }
a:visited { a:visited {
color: purple; color: var(--color-link);
} }
body { body {
background-color: lightblue; background-color: var(--color-background);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -22,14 +43,13 @@ header {
padding: 1rem; padding: 1rem;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
background-color: violet; background-color: var(--color-background-header);
box-shadow: 5px 5px black; box-shadow: 5px 5px var(--color-shadow);
text-align: center; text-align: center;
} }
header h1 { header h1 {
color: black;
font-weight: 100; font-weight: 100;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
} }
@ -43,8 +63,8 @@ main {
max-width: 50rem; max-width: 50rem;
padding: 1rem; padding: 1rem;
background-color: pink; background-color: var(--color-background-main);
box-shadow: 5px 5px black; box-shadow: 5px 5px var(--color-shadow);
} }
footer { footer {