Make Responsive (#33)

* Responsive home page

* Make post page responsive

* Fix coloring in dark theme

* Visibility toggle in a better way

* Fixes

* Remove newlines

* Minor fixes

Co-authored-by: Yash Mehrotra <yashmehrotra95@gmail.com>

themes/gokarna/static/css/main.css

@@ -42,13 +42,12 @@ img {
 
 /* HEADER */
 .header {
-  background-color: var(--light-header-bg-color);
+  background-color: rgba(240, 240, 240, 0.95);
   box-shadow: rgba(170, 170, 170, 0.5) 0px 1px 2px 0px;
   color: inherit;
   font-size: 1.05rem;
   height: 50px;
   left: 0;
-  opacity: 0.95;
   position: fixed;
   top: 0;
   width: 100%;
@@ -117,6 +116,31 @@ img {
   stroke-linejoin: round;
   width: 24px;
 }
+#hamburger-menu-toggle {
+  display: none;
+}
+#hamburger-menu-toggle .feather {
+  height: 24px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  width: 24px;
+}
+.nav-hamburger-list {
+  background: var(--light-header-bg-color);
+  border-bottom: solid 1.5px var(--light-header-divider-color);
+  border-top: solid 1.5px var(--light-header-divider-color);
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  width: 100%;
+  z-index: 5;
+}
+.nav-hamburger-list a:hover {
+  text-decoration: underline;
+}
 
 /* FOOTER */
 .footer {
@@ -143,6 +167,16 @@ img {
 
 /** COMMON **/
 
+.flex-break {
+  flex-basis: 100%;
+  height: 0;
+  display: none;
+}
+
+.visibility-hidden {
+  visibility: hidden;
+}
+
 /* ICONS */
 .feather {
   height: 20px;
@@ -185,6 +219,7 @@ pre {
 
 pre {
   font-size: 0.95rem;
+  overflow: scroll;
   padding: 20px;
 }
 
@@ -205,6 +240,8 @@ table {
   font-size: 1.05rem;
   margin: 30px 0;
   text-align: left;
+  display: block;
+  overflow-x: auto;
 }
 
 table thead {
@@ -316,3 +353,52 @@ main#content .post {
   opacity: 0.8;
   padding: 6px;
 }
+
+@media only screen and (max-width: 820px) {
+  body {
+    font-size: 0.95rem;
+  }
+
+  .flex-break {
+    display: block;
+  }
+
+  .home-about .avatar img {
+    border-radius: 50%;
+    height: 7rem;
+    width: 7rem;
+  }
+
+  .nav-links .nav-link,
+  .nav-icons-divider {
+    display: none;
+  }
+
+  #hamburger-menu-toggle {
+    display: inline-block;
+  }
+
+  main#content {
+    box-sizing: border-box;
+    padding: 0 1.5rem;
+    width: auto;
+  }
+
+  main#content .post {
+    font-size: 1.05rem;
+  }
+
+  .home-about {
+    margin: 0 auto;
+  }
+
+  .list-posts {
+    flex: 1;
+  }
+}
+
+@media only screen and (min-width: 820px) {
+  .nav-hamburger-list {
+    visibility: hidden !important;
+  }
+}