diff --git a/themes/gokarna/layouts/_default/baseof.html b/themes/gokarna/layouts/_default/baseof.html
index d663ad3..09429b3 100644
--- a/themes/gokarna/layouts/_default/baseof.html
+++ b/themes/gokarna/layouts/_default/baseof.html
@@ -2,6 +2,9 @@
{{- partial "head.html" . -}}
+
{{- partial "header.html" . -}}
{{- block "main" . }}{{- end }}
diff --git a/themes/gokarna/static/css/main.css b/themes/gokarna/static/css/main.css
index 528f69a..88e5dba 100644
--- a/themes/gokarna/static/css/main.css
+++ b/themes/gokarna/static/css/main.css
@@ -370,6 +370,8 @@ main#content .post {
border-radius: inherit;
opacity: 0.8;
padding: 6px;
+ position: relative;
+ z-index: -1;
}
@media only screen and (max-width: 820px) {
diff --git a/themes/gokarna/static/js/main.js b/themes/gokarna/static/js/main.js
index 7cb5478..5ebe3ee 100644
--- a/themes/gokarna/static/js/main.js
+++ b/themes/gokarna/static/js/main.js
@@ -10,20 +10,7 @@ let darkThemeCss = '';
function ready() {
feather.replace({ 'stroke-width': 1, width: 20, height: 20 });
- darkThemeCss = document.getElementById("dark-theme");
-
- const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) ||
- (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
- const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
- setTheme(savedTheme, darkThemeToggles);
- darkThemeToggles.forEach(el => el.addEventListener('click', (event) => {
- toggleIcon = event.currentTarget.querySelector("a svg.feather");
- if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) {
- setTheme('light', [event.currentTarget]);
- } else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
- setTheme('dark', [event.currentTarget]);
- }
- }));
+ setThemeByUserPref();
document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
@@ -47,6 +34,21 @@ window.addEventListener('scroll', () => {
}
});
+function setThemeByUserPref() {
+ darkThemeCss = document.getElementById("dark-theme");
+ const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) ||
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
+ const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
+ setTheme(savedTheme, darkThemeToggles);
+ darkThemeToggles.forEach(el => el.addEventListener('click', (event) => {
+ toggleIcon = event.currentTarget.querySelector("a svg.feather");
+ if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) {
+ setTheme('light', [event.currentTarget]);
+ } else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
+ setTheme('dark', [event.currentTarget]);
+ }
+ }));
+}
function setTheme(themeToSet, targets) {
localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);