From e726de5a30cf958ea9f116962edeb14395a1e1c9 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Tue, 10 Jun 2025 16:46:51 +0200
Subject: [PATCH] Mobile site fixup :)

---
 src/index.html            | 24 ++++++++++----------
 src/stylesheets/style.css | 48 +++++++++++++++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/src/index.html b/src/index.html
index 43caaf3..3302447 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,33 +31,33 @@
     <!-- Links -->
     <div id="links-div">
         <a href="/blog" style="grid-column: 1;">
-            <img src="/assets/fluent-mdl2_blog.svg" style="width: 150px; height: 150px;"/>
-            <p style="text-align: center;">Blog</p>
+            <img src="/assets/fluent-mdl2_blog.svg" class="link-image"/>
+            <p class="link-text">Blog</p>
         </a>
         
         <a href="https://github.com/vhaudiquet/" style="grid-column: 2;">
-            <img src="/assets/github-mark.png" style="width: 150px; height: 150px;"/>
-            <p style="text-align: center;">GitHub</p>
+            <img src="/assets/github-mark.png" class="link-image"/>
+            <p class="link-text">GitHub</p>
         </a>
 
         <a href="https://git.vhaudiquet.fr/vhaudiquet/" style="grid-column: 3;">
-            <img src="/assets/logo_black.svg" style="width: 150px; height: 150px;"/>
-            <p style="text-align: center;">Gitea</p>
+            <img src="/assets/logo_black.svg" class="link-image"/>
+            <p class="link-text">Gitea</p>
         </a>
 
         <a href="mailto:valentin.haudiquet@ens-rennes.fr">
-            <img src="/assets/arobase.svg" style="width: 150px; height: 150px;"/>
-            <p style="text-align: center;">Mail</p>
+            <img src="/assets/arobase.svg" class="link-image"/>
+            <p class="link-text">Mail</p>
         </a>
 
         <a href="/cv/">
-            <img src="/assets/icon-park-solid_people.svg" style="width: 150px; height: 150px;"/>
-            <p style="text-align: center;">CV</p>
+            <img src="/assets/icon-park-solid_people.svg" class="link-image"/>
+            <p class="link-text">CV</p>
         </a>
         
         <a href="/about/">
-            <img src="/assets/mdi_about.svg" style="width: 150px; height: 150px;"/>
-            <p style="text-align: center;">About</p>
+            <img src="/assets/mdi_about.svg" class="link-image"/>
+            <p class="link-text">About</p>
         </a>
 
     </div>
diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
index 47f6967..99d348c 100644
--- a/src/stylesheets/style.css
+++ b/src/stylesheets/style.css
@@ -97,6 +97,14 @@ a:active {
     color: grey;
 }
 
+.link-image {
+    width: 150px; 
+    height: 150px;
+}
+.link-text {
+    text-align: center;
+}
+
 strong {
     font-family: 'Inter', sans-serif;
     font-style: normal;
@@ -123,7 +131,7 @@ strong {
 }
 
 @media only screen and (max-width: 1000px) {
-    /* Mobile version */
+    /* Tablet, small screens version */
     #header-img {
         align-self: center;
     }
@@ -155,4 +163,40 @@ strong {
         margin: auto;
         margin-top: 100px;
     }
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 450px) {
+    /* Mobile version */
+    #header-img { 
+        width: 80%;
+        height: auto;
+    }
+    #header-div {
+        margin-top: 30px;
+    }
+
+    h1 {
+        font-size: 50px;
+    }
+    h2 {
+        font-size: 30px;
+    }
+    h4 {
+        font-size: 30px;
+    }
+    p {
+        font-size: 20px;
+    }
+    #header-paragraph {
+        font-size: 26px;
+    }
+
+    #links-div {
+        margin-top: 40px;
+    }
+    
+    .link-image {
+        width: 70px;
+        height: 70px;
+    }
+}