Improve responsiveness with media queries

Also improve some styling

1 files changed, 40 insertions, 4 deletions

diff --git a/css/style.css b/css/style.css
index 1dd549f..9a866b8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -18,8 +18,8 @@ nav,
 header,
 main,
 footer {
+  margin: 0 auto;
   max-width: 900px;
-  margin: auto;
 }
 
 h1,
@@ -41,7 +41,7 @@ h1 {
 
 h2 {
   font-size: 1.8em;
-  line-height: 1.5em;
+  line-height: 1.2em;
   margin-top: 40px;
   margin-bottom: 20px;
 }
@@ -167,6 +167,7 @@ header h2 {
 
 ul.posts-list {
   list-style: none;
+  padding-left: 0px;
 }
 
 ul.posts-list h2 {
@@ -202,7 +203,42 @@ footer {
 
 footer p {
   font-size: 0.8em;
-  line-height: 1.5em;
+  line-height: 1.2em;
   margin-top: 0px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
+}
+
+/* ------------- */
+/* Media queries */
+/* ------------- */
+
+@media (max-width: 768px) {
+  header h1 {
+    font-size: 3em;
+  }
+
+  header h2 {
+    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;
+  }
 }