style: make site responsive for smaller screens

Author: akhileshthite

public/styles.css

@@ -107,3 +107,47 @@ td:nth-child(6) {
 .expand:hover {
   text-decoration: underline;
 }
+
+@media (max-width: 768px) {
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  th, td {
+    padding: 8px;
+    font-size: 12px;
+  }
+
+  .container {
+    padding: 15px;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  p {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  th, td {
+    padding: 6px;
+    font-size: 11px;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  p {
+    font-size: 12px;
+  }
+
+  .expand {
+    font-size: 10px;
+  }
+}