responsive styles

1 files changed, 32 insertions, 6 deletions

diff --git a/docs/style.css b/docs/style.css
index fd7e37f..bdda208 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -30,10 +30,6 @@ html {
   font-size: 20px;
 }
 
-.posts {
-  width: 40%;
-}
-
 table {
   width: 100%;
   border-collapse: collapse;
@@ -52,8 +48,11 @@ td {
   padding: 0.5rem 0;
 }
 
-/* mobile devices */
-@media only screen and (max-width: 70em) {
+.posts {
+  width: 100%;
+}
+
+@media only screen and (min-width: 600px) {
   .posts {
     width: 100%;
   }
@@ -62,6 +61,33 @@ td {
   }
 }
 
+@media only screen and (min-width: 768px) {
+  .posts {
+    width: 80%;
+  }
+  html {
+    font-size: 18px;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .posts {
+    width: 70%;
+  }
+  html {
+    font-size: 20px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .posts {
+    width: 50%;
+  }
+  html {
+    font-size: 20px;
+  }
+}
+
 .posts {
   text-align: left;
   display: inline-block;