Added media queries to css for better mobile experience

src/components/page.css

@@ -124,31 +124,31 @@ div.image img {
 }
 
 table {
-    border: solid #999999 1px;
-    border-collapse: collapse;
-    margin: 3ex 0;
+  border: solid #999999 1px;
+  border-collapse: collapse;
+  margin: 3ex 0;
 }
 
 td, th {
-    border: solid #999999 1px;
-    padding: 4px 8px;
-    text-align: left;
-    vertical-align: top;
+  border: solid #999999 1px;
+  padding: 4px 8px;
+  text-align: left;
+  vertical-align: top;
 }
 
 th {
-    color: white;
-    background-color: #999999;
-    border: solid #cccccc 1px;
-    border-top-style: inherit;
+  color: white;
+  background-color: #999999;
+  border: solid #cccccc 1px;
+  border-top-style: inherit;
 }
 
 th:first-child {
-    border-left-style: inherit;
+  border-left-style: inherit;
 }
 
 th:last-child {
-    border-right-style: inherit;
+  border-right-style: inherit;
 }
 
 th:empty {
@@ -324,3 +324,12 @@ div.summary {
     color: black !important;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  div.main-content {
+    margin: 0 auto;
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+    min-width: auto;
+  }
+}

src/components/pagenavi.css

@@ -38,3 +38,9 @@ div.page-navi > ul > li {
     display: none;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  div.page-navi {
+    display: none;
+  }
+}

src/components/sidebar.css

@@ -63,3 +63,9 @@ nav.sidebar div.sidebar-title a:hover {
     display: none;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  nav.sidebar {
+    display: none;
+  }
+}