From 1696faf6546a1ba1512db4fb57b92421c3ea6fb8 Mon Sep 17 00:00:00 2001
From: Lyanis Souidi <lyanis@souidi.fr>
Date: Tue, 17 Jan 2023 12:05:18 +0100
Subject: [PATCH] Modification de styles

- Ajout d'un dark mode adaptatif
- Optimisation du CSS
---
 assets/css/footer.css | 42 +++++-------------------------------------
 assets/css/header.css | 10 +++-------
 assets/css/style.css  | 26 ++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 44 deletions(-)

diff --git a/assets/css/footer.css b/assets/css/footer.css
index eab314d..3bddcdb 100644
--- a/assets/css/footer.css
+++ b/assets/css/footer.css
@@ -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;
-    }
 }
\ No newline at end of file
diff --git a/assets/css/header.css b/assets/css/header.css
index 0957648..8f611d7 100644
--- a/assets/css/header.css
+++ b/assets/css/header.css
@@ -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;
     }
diff --git a/assets/css/style.css b/assets/css/style.css
index 742d57d..fbf0227 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -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);
 }
 
 * {