diff --git a/config.toml b/config.toml index c97f0a7..6e3a1c7 100644 --- a/config.toml +++ b/config.toml @@ -62,7 +62,7 @@ socials = [ # Default config, allows for https remote images and embedding YouTube and Vimeo content. # This configuration (along with the right webserver settings) gets an A+ in Mozilla's Observatory: https://observatory.mozilla.org allowed_domains = [ - { directive = "img-src", domains = ["'self'", "https://*"] }, + { directive = "img-src", domains = ["'self'", "https://*", "data:"] }, { directive = "script-src", domains = ["'self'"] }, { directive = "style-src", domains = ["'self'"] }, { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] }, diff --git a/content/blog/almost-no-js.md b/content/blog/almost-no-js.md index a2bed1b..8e27596 100644 --- a/content/blog/almost-no-js.md +++ b/content/blog/almost-no-js.md @@ -1,7 +1,7 @@ +++ title = "Almost no JavaScript" date = 2023-01-06 -updated = 2023-04-15 +updated = 2023-04-28 description = "JavaScript is only used when HTML and CSS aren't enough." [taxonomies] @@ -10,8 +10,8 @@ tags = ["showcase"] # JavaScript? -This theme has almost no JavaScript. It includes a ~950 byte `.js` file with the logic for the light/dark mode switch which can be disabled by setting `theme_switcher = false` in the `config.toml` file. +This theme has almost no JavaScript. It includes ~900 bytes of `.js` with the logic for the light/dark mode switch, which can be disabled by setting `theme_switcher = false` in the `config.toml` file. -KaTex support, which requires JavaScript, can be activated for specific posts. +KaTex support, which requires loading a 274 KB JavaScript file, can be activated for specific posts. Other than that, it's a fast site with HTML and CSS. Just the way (most of) the web should be :-) diff --git a/sass/main.scss b/sass/main.scss index 692a55b..a8b4b65 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -62,6 +62,8 @@ --quote-color: #355f62; --border-color: #727272; --meta-color: #5b5b65; + + --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3E%3C/svg%3E%0A"); } [data-theme='dark'] { @@ -78,6 +80,8 @@ --border-color: black; --meta-color: #B0B0B0; + --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960' %3E%3Cpath d='M480 776q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Z'/%3E%3C/svg%3E"); + .invertible-image { filter: invert(.88); } diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index 2235ecb..87cc771 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -13,7 +13,6 @@ footer section { footer nav { display: flex; - gap: 0rem; margin: 0 0rem; } @@ -23,6 +22,10 @@ footer nav { display: flex; flex-wrap: wrap; align-items: flex-end; + + ul { + gap: 5px; + } } .social { diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 353365a..18ec4a7 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -43,10 +43,16 @@ header { .nav-navs { display: flex; - gap: 5px; + flex-wrap: wrap; - img { - border: none; + ul { + display: flex; + align-items: center; + gap: 1px; + flex-wrap: wrap; + list-style: none; + padding: 0; + margin: 0; } } @@ -57,6 +63,7 @@ header { justify-content: right; color: var(--text-color); padding: 0.66rem; + line-height: 2.5; } .home-title { @@ -114,6 +121,7 @@ header { margin-top: 0.8rem; width: 100%; justify-content: center; + flex-wrap: wrap; } .navbar { diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss index 3388e62..d1188d9 100644 --- a/sass/parts/_theme-switch.scss +++ b/sass/parts/_theme-switch.scss @@ -5,43 +5,6 @@ height: 1rem; position: relative; cursor: pointer; - - .switch { - width: 1rem; - height: 1rem; - position: absolute; - left: 0px; - display: flex; - justify-content: center; - align-items: center; - - img { - width: 100%; - height: auto; - position: absolute; - border: none; - } - - .sun { - opacity: 0; - } - - .moon { - opacity: 1; - } - } - - input { - display: none; - - &:checked + .switch { - .sun { - opacity: 1; - } - - .moon { - opacity: 0; - } - } - } + -webkit-mask: var(--theme-switcher-svg); + background: var(--text-color); } diff --git a/static/js/initialize_theme.js b/static/js/initialize_theme.js new file mode 100644 index 0000000..688b0ff --- /dev/null +++ b/static/js/initialize_theme.js @@ -0,0 +1,9 @@ +(function () { + let currentTheme = localStorage.getItem('theme'); + if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + } else { + const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + document.documentElement.setAttribute('data-theme', isSystemDark ? 'dark' : 'light'); + } +})(); diff --git a/static/js/initialize_theme_min.js b/static/js/initialize_theme_min.js new file mode 100644 index 0000000..9463f4b --- /dev/null +++ b/static/js/initialize_theme_min.js @@ -0,0 +1 @@ +!function(){let e=localStorage.getItem("theme");if(e)document.documentElement.setAttribute("data-theme",e);else{let t=window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.setAttribute("data-theme",t?"dark":"light")}}(); diff --git a/static/js/main.js b/static/js/main.js index 3a1af20..474a886 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,28 +1,20 @@ -const themeSwitcher = document.querySelector('.theme-switcher input'); +const themeSwitcher = document.querySelector('.theme-switcher'); let currentTheme = localStorage.getItem('theme'); let userHasManuallyChangedTheme = currentTheme !== null; function setTheme(theme) { document.documentElement.setAttribute('data-theme', theme); - themeSwitcher.checked = theme === 'dark'; localStorage.setItem('theme', theme); currentTheme = theme; } -if (currentTheme) { - setTheme(currentTheme); -} else { - const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - setTheme(isSystemDark ? 'dark' : 'light'); -} - -function switchTheme(e) { - const newTheme = e.target.checked ? 'dark' : 'light'; +function switchTheme() { + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; setTheme(newTheme); userHasManuallyChangedTheme = true; } -themeSwitcher.addEventListener('change', switchTheme, false); +themeSwitcher.addEventListener('click', switchTheme, false); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (!userHasManuallyChangedTheme) { diff --git a/static/js/main_min.js b/static/js/main_min.js new file mode 100644 index 0000000..e8ee444 --- /dev/null +++ b/static/js/main_min.js @@ -0,0 +1 @@ +const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme"),userHasManuallyChangedTheme=null!==currentTheme;function setTheme(e){document.documentElement.setAttribute("data-theme",e),localStorage.setItem("theme",e),currentTheme=e}function switchTheme(){let e="dark"===currentTheme?"light":"dark";setTheme(e),userHasManuallyChangedTheme=!0}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{userHasManuallyChangedTheme||setTheme(e.matches?"dark":"light")}); diff --git a/static/menu_icon/moon.svg b/static/menu_icon/moon.svg deleted file mode 100644 index 47aedd3..0000000 --- a/static/menu_icon/moon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/menu_icon/sun.svg b/static/menu_icon/sun.svg deleted file mode 100644 index d7ee03d..0000000 --- a/static/menu_icon/sun.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/partials/footer.html b/templates/partials/footer.html index 6ee74dc..4e4f069 100644 --- a/templates/partials/footer.html +++ b/templates/partials/footer.html @@ -2,18 +2,19 @@
Powered by Zola & tabi
- {%- if config.extra.theme_switcher == true -%} - - {%- endif -%} diff --git a/templates/partials/header.html b/templates/partials/header.html index 68e73d9..5a0d843 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -55,4 +55,9 @@ {%- endfor -%} {%- endif -%}"> + {%- if config.extra.theme_switcher == true -%} + + + {%- endif -%} + diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 33418bb..5d28cfb 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -6,23 +6,19 @@ {%- if config.extra.menu %}
-
+
- {%- if config.extra.theme_switcher == true -%} - + {%- if config.extra.theme_switcher == true -%} +
  • +
    +
    • + {%- endif -%} +
    {% endif %} -