Modification de styles

- Ajout d'un dark mode adaptatif
- Optimisation du CSS
This commit is contained in:
Lyanis SOUIDI 2023-01-17 12:05:18 +01:00
parent f9ee7ed182
commit 1696faf654
3 changed files with 34 additions and 44 deletions

View File

@ -1,6 +1,6 @@
footer {
background: #616A6B;
color: white;
background: var(--c-bg-footer);
color: var(--c-footer-text);
display: grid;
align-items: center;
}
@ -23,7 +23,7 @@ footer div p {
padding-top: 25px;
padding-bottom: 25px;
height: 100%;
background-color: #45a1ff;
background-color: #21262d;
margin: 0;
}
@ -31,8 +31,8 @@ footer div p {
height: max-content;
}
#contact a, #sitemap a {
color: white;
footer a {
color: var(--c-footer-text);
text-decoration: none;
}
@ -86,18 +86,6 @@ footer ul {
grid-row: 1;
}
#social {
grid-column: 1;
}
#sitemap {
grid-column: 2;
}
#contact {
grid-column: 3;
}
#copyright {
grid-column: 1/4;
grid-row: 2;
@ -109,24 +97,4 @@ footer ul {
grid-template-columns: 100%;
grid-auto-rows: auto;
}
#social, #sitemap, #contact, #copyright {
grid-column: 1;
}
#social {
grid-row: 1;
}
#sitemap {
grid-row: 2;
}
#contact {
grid-row: 3;
}
#copyright {
grid-row: 4;
}
}

View File

@ -1,6 +1,5 @@
header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
height: max-content;
}
@ -21,12 +20,11 @@ header h1 {
}
#menu li a:hover {
background-color: #ddd;
color: black;
background-color: var(--c-menu-hover);
}
#menu li a {
color: black;
color: var(--c-title);
padding: 12px;
text-decoration: none;
font-size: 18px;
@ -47,7 +45,6 @@ header h1 {
}
#menu {
float: right;
/*display: block;*/
}
#burger-menu {
@ -58,7 +55,7 @@ header h1 {
@media screen and (max-width: 700px) {
.invisible {
display : none;
display : none;
}
#menu li a {
@ -69,7 +66,6 @@ display : none;
#menu {
float: none;
/*display: none;*/
margin-top: 80px;
padding: 0;
}

View File

@ -1,3 +1,23 @@
:root {
--c-bg: #0d1117;
--c-title: white;
--c-text: #8b949e;
--c-menu-hover: #1c2431;
--c-bg-footer: var(--c-bg);
--c-footer-text: var(--c-text);
}
@media (prefers-color-scheme: light) {
:root {
--c-bg: white;
--c-title: black;
--c-text: black;
--c-menu-hover: #ddd;
--c-bg-footer: #616A6B;
--c-footer-text: white;
}
}
html {
height: 100%;
box-sizing: border-box;
@ -10,6 +30,12 @@ body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
background-color: var(--c-bg);
color: var(--c-text);
}
h1, h2, h3, h4, h5, h6, .title {
color: var(--c-title);
}
* {