made website responsive

index.html

@@ -7,13 +7,14 @@
     <meta name="author" content="Lucien Cartier-Tilet" />
     <link rel="sortcut icon" href="https://cdn.phundrak.fr/img/mahakala-128x128.png" type="img/png" media="screen" />
     <meta property="og:image" content="https://cdn.phundrak.fr/img/rich_preview.png" />
-    <meta property="og:title" content="Langues construites de P’undrak" />
-    <meta property="og:description" content="Collection de documents et pages webs de linguistique et de langues construites de P’undrak" />
+    <meta property="og:title" content="Lucien Cartier-Tilet" />
+    <meta property="og:description" content="Site web personnel de Lucien Cartier-Tilet" />
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@phundrak" />
     <meta name="twitter:creator" content="@phundrak" />
     <meta name="description" content="Site web personnel de Lucien Cartier-Tilet" />
     <meta name="keywords" content="Lucien, Cartier, Tilet, Cartier-Tilet, université, informatique, étudiant, university, college, student, computer, computer science, science, ALYS, LEORA, VoxWave, voice, vocal synthesis, French, English, Japanese, AlterEgo, VOCALOID, UTAU, CeVIO, Chipspeech, Plogue, linguistique, langue, hjelp, hjalpi, conlang, conlangs" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style/main.css" type="text/css" media="screen" />
 </head>
 
@@ -41,7 +42,7 @@
     </div>
     <div class="sidebar">
         <img class="side-picture center" src="https://cdn.phundrak.fr/img/photo.jpg" />
-        <div class="side-card">
+        <div class="side-card side-contact">
             <div>
                 <div class="header-container">
                     <h4>Contact</h4>
@@ -53,7 +54,7 @@
                 <p>+33.(0)6.83.90.56.89</p>
             </div>
         </div>
-        <div class="side-card">
+        <div class="side-card side-situation">
             <div>
                 <div class="header-container">
                     <h4>Situation Pro</h4>
@@ -66,7 +67,7 @@
             </div>
 
         </div>
-        <div class="side-card">
+        <div class="side-card side-bio">
             <div>
                 <div class="header-container">
                     <h4>Présentation</h4>
@@ -79,7 +80,7 @@
             </div>
 
         </div>
-        <div class="side-card">
+        <div class="side-card side-liens">
             <div>
                 <div class="header-container">
                     <h4>Mes liens</h4>