Added a mobile responsive layout

Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>

assets/css/main.css

@@ -43,8 +43,6 @@ h6 {
     color: black;
     font-size: 1em;
     border-radius: 8px;
-    margin-bottom: 10px;
-    margin-right: 13px;
     background-color: white;
     transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
 }
@@ -111,11 +109,16 @@ footer > div > p {
     text-align: justify;
 }
 
+#additional-links {
+    flex-basis: 55%;
+}
+
 .flex-sb {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     flex-wrap: wrap;
+    gap: 10px;
 }
 
 #additional-information > img {
@@ -143,7 +146,6 @@ footer > div > p {
 
 #skills-logos > img {
     height: 65px;
-    margin: 5px 20px;
 }
 
 #call-to-action {
@@ -176,3 +178,56 @@ footer > div > p {
     width: 70px;
     margin: 10px;
 }
+
+@media only screen and (max-width: 768px) {
+    #profile-picture {
+        height: 2.6rem;
+        width: 2.6rem;
+    }
+
+    .icon {
+        height: 1.4rem;
+    }
+
+    h1 {
+        font-size: 2.2rem;
+    }
+
+    h3 {
+        font-size: 1.6rem;
+    }
+
+    h4 {
+        font-size: 1.4rem;
+    }
+
+    h5 {
+        font-size: 1.2rem;
+    }
+
+    h6 {
+        font-size: 1.1rem;
+    }
+
+    #additional-information > h6 {
+        margin-right: 2%;
+    }
+
+    .button-style {
+        padding: 10px 10px;
+    }
+
+    #skills-logos > img {
+        height: 45px;
+    }
+
+    footer > div > p {
+        flex-basis: 100%;
+    }
+
+    #subtitle {
+        letter-spacing: 1px;
+        line-height: 1.1em;
+        word-break: break-word;
+    }
+}

index.html

@@ -35,7 +35,7 @@ PAGE CODED BY :
                 <img src="/assets/images/work.svg" alt="Logo travail valise"/><h6>Étudiant ingénieur en informatique</h6>
                 <img src="/assets/images/location.svg" alt="Logo localisation"/><h6>Bordeaux &mdash; France</h6>
             </div>
-            <div id="call-to-action" class="center-align-inline">
+            <div id="call-to-action">
                 <a class="button-style" href="mailto:contact@louis-vallat.xyz">Me contacter</a>
                 <a class="button-style" href="#about">En savoir plus</a>
             </div>
@@ -65,7 +65,7 @@ PAGE CODED BY :
             <p class="grey">
             Véritable factotum du développement, j'aime mettre les mains dans le cambouis.</br>Je gère ma propre infrastructure, qui ne cesse d'évoluer au fil des ans, qui héberge nombre de mes projets informatiques. J'aime aussi régler des problèmes avec du code, l'automatisation me fascine et le devops me passionne.</br>Je suis aussi passionné de 👨‍💻, 📸, 🚄 et de 👨‍🔧.
             </p>
-            <div class="flex-sb">
+            <div class="flex-sb" id="additional-links">
                 <a class="button-style" href="mailto:contact@louis-vallat.xyz" target="_blank"><img src="/assets/images/send.svg" alt="Logo envoi"/>Me contacter</a>
                 <a class="button-style" href="/key.gpg"><img src="/assets/images/key.svg" alt="Logo de clef"/>Ma clef GPG</a>
                 <a class="button-style" href="https://gallery.louis-vallat.xyz" target="_blank"><img src="/assets/images/camera.svg" alt="Logo d'appareil photo"/>Gallerie photo</a>