made website responsive

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';
+    }
+}