diff --git a/themes/gokarna/layouts/index.html b/themes/gokarna/layouts/index.html
index 8135599..020a0cd 100644
--- a/themes/gokarna/layouts/index.html
+++ b/themes/gokarna/layouts/index.html
@@ -9,6 +9,8 @@
{{ .Site.Params.Description }}
+
+
{{ if isset .Site.Params "showpostsonhomepage" }}
diff --git a/themes/gokarna/layouts/partials/header.html b/themes/gokarna/layouts/partials/header.html
index 980db30..574440d 100644
--- a/themes/gokarna/layouts/partials/header.html
+++ b/themes/gokarna/layouts/partials/header.html
@@ -29,6 +29,28 @@
+
+
+
+
+
diff --git a/themes/gokarna/layouts/partials/list-posts.html b/themes/gokarna/layouts/partials/list-posts.html
index 33fd5ec..8b4b091 100644
--- a/themes/gokarna/layouts/partials/list-posts.html
+++ b/themes/gokarna/layouts/partials/list-posts.html
@@ -1,4 +1,5 @@
{{ .Title }}
+
{{ dateFormat "January 2, 2006" .Date }}
diff --git a/themes/gokarna/layouts/partials/list.html b/themes/gokarna/layouts/partials/list.html
index fc3a719..c726160 100644
--- a/themes/gokarna/layouts/partials/list.html
+++ b/themes/gokarna/layouts/partials/list.html
@@ -2,7 +2,7 @@
{{ .Name }}
- {{ range (where .Site.Pages "Params.type" "post" ).GroupByDate "2006" }}
+ {{ range (where .Pages "Params.type" "post" ).GroupByDate "2006" }}
{{ .Key }}
diff --git a/themes/gokarna/static/css/dark.css b/themes/gokarna/static/css/dark.css
index c23e5ac..384d003 100644
--- a/themes/gokarna/static/css/dark.css
+++ b/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);
}
diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css
index 4a1e285..7fd500e 100644
--- a/themes/gokarna/static/css/main.css
+++ b/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;
+ }
+}
diff --git a/themes/gokarna/static/js/main.js b/themes/gokarna/static/js/main.js
index 645d860..4abb2de 100644
--- a/themes/gokarna/static/js/main.js
+++ b/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) {