finished footer

index.html

@@ -10,30 +10,28 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
     <footer>
-      <div class="footer-grid">
+      <div class="middle">
-        <div class="left"></div>
+        <h2>Let's keep in touch !</h2>
-        <div class="middle">
+        <p>If these projects or my profile interests you feel free to contact me through any of the social links on the right.</p>
-          <h2>Let's keep in touch !</h2>
-          <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">
-          <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 class="right">
+        <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></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 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 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>
 </html>

src/index.css

@@ -2,6 +2,7 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
+  font-size: 1rem;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
@@ -12,15 +13,23 @@
   -moz-osx-font-smoothing: grayscale;
   --color-lightgreen: lightgreen;
   --color-lightred: #FF7F7F;
+  padding: 0;
+  margin: 0;
+}
+
+:before, :after {
+  padding: 0;
+  margin: 0;
 }
 
 body {
+  width: 100vw;
+  height: 100vh;
   margin: 0;
   padding: 0;
   display: flex;
+  flex-direction: column;
   place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
 h1 {
@@ -45,45 +54,20 @@ button:focus-visible {
 }
 
 footer {
-  position: absolute;
+  flex-grow: 0;
+  flex-shrink: 0;
   bottom: 0;
-  display: flex;
-  flex-direction: row;
   width: 100%;
-}
+  display: flex;
-
-.footer-grid {
-  display: grid;
   grid-template-columns: 1fr 2fr 1fr;
 }
 
-.footer-grid .middle h2,p {
+footer .middle {
-  text-align: center;
+  margin-left: 50px;
 }
 
-.footer-grid .right {
+footer .middle h2,p {
-  display: grid;
+  text-align: left;
-  grid-template-columns: repeat(7, 1fr);
-  grid-template-rows: 1fr 1fr;
-  justify-items: center;
-  justify-content: center;
-  align-items: center;
-}
-
-.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 {
@@ -94,6 +78,35 @@ a:hover {
   text-decoration: underline;
 }
 
+.mail-to p {
+  margin: 0;
+}
+
+footer .right {
+  width: 100%;
+  display: grid;
+  margin-right: 50px;
+  grid-column-gap: 0;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: 1fr 1fr;
+  justify-items: center;
+  justify-content: center;
+  align-items: center;
+}
+
+footer .right .mail-to {
+  grid-column-end: span 7;
+  display: flex;
+  flex-direction: row;
+}
+
+footer .right .socials {
+  width: 32px;
+  height: 32px;
+  align-self: start;
+}
+
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
@@ -133,4 +146,35 @@ a:hover {
   }
 }
 
+@media (max-width: 720px) {
+  :root {
+    font-size: clamp(0.75rem, -0.61rem + 0.86vw , 1rem);
+  }
+
+  footer .right {
+    margin-left: 2%;
+    display: grid;
+    padding: 0;
+    overflow: scroll;
+    grid-column-gap: 0;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: 1fr 1fr;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+  }
+
+  footer .right .socials {
+    width: clamp(16px, 0.6rem + 0.86vw, 32px);
+    height: clamp(16px, 0.6rem + 0.86vw, 32px);
+    align-self: start;
+  }
+}
+
+@media (max-width: 256px) {
+  :root {
+    font-size: 0.75rem;
+  }
+}
+