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/layouts/index.html

@@ -9,6 +9,8 @@
     <h3>{{ .Site.Params.Description }}</h3>
 </section>
 
+<div class="flex-break"></div>
+
 {{ if isset .Site.Params "showpostsonhomepage" }}
 
     <div class="home-posts list-posts">

themes/gokarna/layouts/partials/header.html

@@ -29,6 +29,28 @@
                 </a>
             </div>
 
+            <div class="nav-link" id="hamburger-menu-toggle">
+                <a>
+                    <span data-feather="menu"></span>
+                </a>
+            </div>
+
+            <!-- For mobile -->
+            <ul class="nav-hamburger-list visibility-hidden">
+                {{ range .Site.Menus.main }}
+                <li class="nav-item">
+                    <a href="{{ .URL }}">
+                        {{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
+                    </a>
+                </li>
+                {{ end }}
+                <li class="nav-item">
+                    <a id="dark-theme-toggle">
+                        <span id="theme-toggle-icon" data-feather="moon"></span>
+                    </a>
+                </li>
+            </ul>
+
         </div>
     </nav>
 </header>

themes/gokarna/layouts/partials/list-posts.html

@@ -1,4 +1,5 @@
 <article class="post-title">
     <a href="{{ .RelPermalink }}" class="post-link">{{ .Title }}</a>
+    <div class="flex-break"></div>
     <span class="post-date">{{ dateFormat "January 2, 2006" .Date }}</span>
 </article>

themes/gokarna/layouts/partials/list.html

@@ -2,7 +2,7 @@
 
     <h1 class="list-title">{{ .Name }}</h2>
 
-    {{ range (where .Site.Pages "Params.type" "post" ).GroupByDate "2006" }}
+    {{ range (where .Pages "Params.type" "post" ).GroupByDate "2006" }}
 
     <h2 class="posts-year">{{ .Key }}</h2>
 

themes/gokarna/static/css/dark.css

@@ -16,6 +16,10 @@ html {
   background-color: var(--dark-header-bg-color);
 }
 
+.nav-hamburger-list {
+  background: var(--dark-header-bg-color);
+}
+
 .nav-links .nav-icons-divider {
   color: var(--dark-header-divider-color);
 }

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;
+  }
+}

themes/gokarna/static/js/main.js

@@ -23,6 +23,15 @@ function ready() {
             setTheme('dark');
         }
     });
+
+    document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
+        const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
+        if (hamburgerMenu.classList.contains('visibility-hidden')) {
+            hamburgerMenu.classList.remove('visibility-hidden');
+        } else {
+            hamburgerMenu.classList.add('visibility-hidden');
+        }
+    })
 }
 
 function setTheme(themeToSet) {