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:title" content="Lucien Cartier-Tilet" />
-    <meta property="og:description" content="Collection de documents et pages webs de linguistique et de langues construites de P’undrak" />
+    <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>

style/main.css

@@ -6,6 +6,7 @@ body {
     grid-template-areas:
         'ribbon ribbon'
         'sidebar content';
+    grid-template-columns: 300px auto;
     background-color: #3498db;
     margin: 0;
     padding: 0;
@@ -92,33 +93,42 @@ h2 {
     transition: background-color 0.3s;
 }
 
-/* .ribbon li::before { */
-/*     top: 0; */
-/*     left: 0; */
-/*     width: 100%; */
-/*     height: 0%; */
-/*     content: ""; */
-/*     position: absolute; */
-/*     background: #000; */
-/*     transition: height 0.5s; */
-/* } */
-
-/* .ribbon li:hover::before { */
-/*     height: 100%; */
-/* } */
-
 /* sidebar *******************************************************************/
 
 .sidebar {
+    display: grid;
+    grid-template-areas:
+        'side-picture'
+        'side-contact'
+        'side-situation'
+        'side-bio'
+        'side-links';
     grid-area: sidebar;
     margin: 10px 5px 10px 10px;
-    width: 300px;
+    grid-auto-rows: min-content;
 }
 
 .side-picture {
+    grid-area: side-picture;
     margin: 10px auto;
 }
 
+.side-contact {
+    grid-area: side-contact;
+}
+
+.side-situation {
+    grid-area: side-situation;
+}
+
+.side-bio {
+    grid-area: side-bio;
+}
+
+.side-liens {
+    grid-area: side-links;
+}
+
 .side-card {
     margin: 10px;
     background-color: #ecf0f1;
@@ -225,6 +235,7 @@ h5 {
     width: 120%;
     max-width: 90vw;
     z-index: 10;
+    width: auto !important;
 }
 
 .highlight-h1 {
@@ -271,3 +282,46 @@ h5 {
 .list-no-style {
     list-style: none;
 }
+
+/* smaller displays **********************************************************/
+@media only screen and (max-width: 1200px) {
+    .two-col-ul {
+        collumns: 1;
+        -webkit-columns: 1;
+        -moz-columns: 1;
+    }
+}
+
+@media only screen and (max-width: 1050px) {
+    body {
+        grid-template-areas:
+            'ribbon'
+            'sidebar'
+            'content';
+        grid-template-columns: auto;
+        grid-template-rows: auto auto auto;
+    }
+
+    .sidebar {
+        grid-template-areas:
+            'side-picture side-links'
+            'side-contact side-situation'
+            'side-bio side-bio';
+        margin: 10px;
+    }
+
+    .content {
+        margin: 10px;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .sidebar {
+        grid-template-areas:
+            'side-picture'
+            'side-contact'
+            'side-situation'
+            'side-bio'
+            'side-links';
+    }
+}