From 7326b6dd86353efeba625f5d1f517398f8cb397a Mon Sep 17 00:00:00 2001
From: quentin <quentin.leblanc@hesge.ch>
Date: Mon, 3 Mar 2025 16:49:14 +0100
Subject: [PATCH] finished footer

---
 index.html    |  28 +++++++-------
 src/index.css | 103 ++++++++++++++++++++++++++++++++++----------------
 2 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index 0dffef3..d4d9331 100644
--- a/index.html
+++ b/index.html
@@ -17,20 +17,22 @@
           <p>If these projects or my profile interests you feel free to contact me through any of the social links on the right.</p>
         </div>
         <div class="right">
-          <table>
-            <tbody>
-            <tr>
-              <td>Email: </td>
-              <td><a href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></td>
-            </tr>
-            </tbody>
-          </table>
-          <div class="socials">
-            <a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank">LinkedIn</a>
-            <a href="https://git.quentin-leblanc.ch/quentin" target="_blank">Gitea</a>
-            <a href="https://www.instagram.com/th3wh1t3q/" target="_blank">Instagram</a>
+          <div class="mail-to">
+            <p><b>Mail: </b><a class="link" href="mailto:pro@quentin-leblanc.ch">pro@quentin-leblanc.ch</a></p>
+          </div>
+          <div></div>
+          <div class="socials">
+            <a href="https://www.linkedin.com/in/quentin-leblanc-7b6043176/" target="_blank"><img class="social" src="src/assets/icons/linkedin.svg" alt="Quentin's LinkedIN"/></a>
+          </div>
+          <div></div>
+          <div class="socials">
+            <a href="https://git.quentin-leblanc.ch/quentin" target="_blank"><img class="social" src="src/assets/icons/git-alt.svg" alt="Quentin's Git"/></a>
+          </div>
+          <div></div>
+          <div class="socials">
+            <a href="https://www.instagram.com/th3wh1t3q/" target="_blank"><img class="social" src="src/assets/icons/square-instagram.svg" alt="Quentin's Instagram"/></a>
+          </div>
           </div>
-        </div>
       </div>
     </footer>
   </body>
diff --git a/src/index.css b/src/index.css
index 1c6171d..b6876ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,6 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #7E99A3;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,15 +14,6 @@
   --color-lightred: #FF7F7F;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
   margin: 0;
   padding: 0;
@@ -45,53 +35,102 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
 footer {
   position: absolute;
   bottom: 0;
   display: flex;
   flex-direction: row;
   width: 100%;
-  background-color: #4C585B;
 }
 
 .footer-grid {
-  display: inline-grid;
+  display: grid;
   grid-template-columns: 1fr 2fr 1fr;
 }
 
+.footer-grid .middle h2,p {
+  text-align: center;
+}
+
 .footer-grid .right {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: 1fr 1fr;
+  justify-items: center;
   justify-content: center;
   align-items: center;
 }
 
-.footer-grid .right .socials {
+.footer-grid .right .mail-to {
+  grid-column-end: span 7;
   display: flex;
+  flex-direction: row;
 }
 
+.mail-to p {
+  margin: 0;
+}
+.footer-grid .right .socials {
+
+  width: 32px;
+  height: 32px;
+  align-self: start;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #213547;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: white;
+    background-color: #7E99A3;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #1a1a1a;;
+  }
+  footer {
+    background-color: #4C585B;
+  }
+  .social {
+    filter: invert(1);
+  }
+  a {
+    color: white;
+  }
+
+  a:hover {
+    color: white;
+  }
+}
+
+