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>