Improve responsiveness and some CSS style

Add scroll bars on pre tags. Use flexbox on header. Add media queries
for reducing font sizes on small screens. Add viewport option to base
HTML layout. Change management of font sizes to em units.

1 files changed, 102 insertions, 30 deletions

diff --git a/css/style.css b/css/style.css
index 87e8635..1498a9c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,49 +1,61 @@
 /* ---------------------- */
 /* General configurations */
 /* ---------------------- */
+html {
+  min-height: 100%;
+  font-size: 62.5%;
+}
+
 body {
   font-family: "Fira Code", monospace;
   background-color: #282c34;
   color: #f3f3f3;
+  font-size: 1.7em;
+  line-height: 1.7em;
 }
 
 nav,
 header,
 main,
 footer {
+  margin: 0 auto;
   max-width: 900px;
-  margin: auto;
 }
 
 h1,
 h2,
 h3,
 h4 {
-  margin-top: 1.6em;
-  margin-bottom: 1em;
+  font-weight: bold;
 }
 
 h1 {
-  font-size: 30pt;
+  font-size: 2.5em;
+  line-height: 1.4em;
   text-align: center;
+  margin-top: 60px;
+  margin-bottom: 30px;
 }
 
 h2 {
-  font-size: 18pt;
+  font-size: 1.8em;
+  line-height: 1.2em;
+  margin-top: 40px;
+  margin-bottom: 20px;
 }
 
 h3 {
-  font-size: 16pt;
-}
-
-h4 {
-  font-size: 14pt;
-  font-weight: 400;
+  font-size: 1.3em;
+  line-height: 1.5em;
+  margin-top: 40px;
+  margin-bottom: 20px;
 }
 
 p {
-  font-size: 12pt;
+  font-size: 0.95em;
   line-height: 1.5em;
+  margin-top: 12px;
+  margin-bottom: 12px;
 }
 
 a {
@@ -62,19 +74,19 @@ li {
 
 pre {
   padding-left: 20px;
-  margin-top: 2em;
-  margin-bottom: 2em;
+  padding-bottom: 5px;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  overflow: auto;
+  line-height: 1.5em;
 }
 
 code {
+  font-family: "Fira Code", monospace;
+  font-size: 0.95em;
   color: #98c379;
 }
 
-pre code {
-  font-size: 12pt;
-  font-weight: 500;
-}
-
 dd {
   display: normal;
 }
@@ -105,7 +117,7 @@ nav ul {
   width: 3em;
   height: 1.5em;
   padding: 5%;
-  font-size: 14pt;
+  font-size: 1.5em;
   font-weight: 500;
 }
 
@@ -122,8 +134,12 @@ nav ul {
 /* ---------------- */
 
 header {
-  margin-top: 80px;
-  margin-bottom: 110px;
+  height: 40vh;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
 }
 
 header h1,
@@ -132,13 +148,14 @@ header h2 {
 }
 
 header h1 {
-  font-size: 54pt;
-  margin-top: 1em;
-  margin-bottom: 0.6em;
+  font-size: 5em;
+  line-height: 1.6em;
+  margin-top: 16px;
+  margin-bottom: 10px;
 }
 
 header h2 {
-  font-size: 20pt;
+  font-size: 1.8em;
   font-weight: 400;
   margin-top: 0px;
   margin-bottom: 0px;
@@ -150,11 +167,22 @@ header h2 {
 
 ul.posts-list {
   list-style: none;
+  padding-left: 0px;
 }
 
 ul.posts-list h2 {
-  margin-top: 1.6em;
-  margin-bottom: 0.7em;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+ul.posts-list li {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+ul.posts-list p {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .date {
@@ -174,7 +202,51 @@ footer {
 }
 
 footer p {
-  font-size: 10pt;
+  font-size: 0.8em;
+  line-height: 1.2em;
   margin-top: 0px;
-  margin-bottom: 0px;
+  margin-bottom: 5px;
+}
+
+/* ------------- */
+/* Media queries */
+/* ------------- */
+
+@media (max-width: 768px) {
+  header {
+    height: 30vh;
+  }
+
+  header h1 {
+    font-size: 3em;
+  }
+
+  header h2 {
+    font-size: 1.3em;
+  }
+
+  .nav-item {
+    font-size: 1.3em;
+  }
+}
+
+@media (max-width: 576px) {
+  header h1 {
+    font-size: 2em;
+  }
+
+  header h2 {
+    font-size: 1em;
+  }
+
+  h1 {
+    font-size: 1.8em;
+  }
+
+  h2 {
+    font-size: 1.2em;
+  }
+  h3 {
+    font-size: 1em;
+  }
 }