Fixes after running on mobile
This commit is contained in:
@@ -2,6 +2,9 @@
|
||||
<html>
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
setThemeByUserPref();
|
||||
</script>
|
||||
{{- partial "header.html" . -}}
|
||||
<main id="content">
|
||||
{{- block "main" . }}{{- end }}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user