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