diff --git a/_layouts/404.html b/_layouts/404.html index e84d7cb..7ed74c1 100644 --- a/_layouts/404.html +++ b/_layouts/404.html @@ -4,12 +4,12 @@ layout: compress - + {% include header.html %}
{% include navbar.html %} -
+
404

😕 Hmm... Seems you lost from my journey.

@@ -20,4 +20,4 @@ layout: compress
- \ No newline at end of file + diff --git a/_layouts/default.html b/_layouts/default.html index ffa3bfa..b912da2 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -7,7 +7,7 @@ layout: compress {% include navbar.html %} -
+
{% include author.html %}
{{ content }} @@ -15,4 +15,4 @@ layout: compress {% include footer.html %}
- \ No newline at end of file + diff --git a/_layouts/page.html b/_layouts/page.html index 3534ec0..0da9b3b 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -9,7 +9,7 @@ layout: compress {% include navbar.html %} -
+

{{ page.title | escape }}.

@@ -20,4 +20,4 @@ layout: compress
- \ No newline at end of file + diff --git a/_sass/klise/_base.scss b/_sass/klise/_base.scss index cbdc492..7b4e09b 100644 --- a/_sass/klise/_base.scss +++ b/_sass/klise/_base.scss @@ -271,6 +271,11 @@ blockquote { max-width: calc(#{$narrow-size} - (#{$spacing-full})); padding-right: $spacing-full - 10; padding-left: $spacing-full - 10; + + &.trigger-wrapper { + animation: 0.2s ease-in forwards blur; + -webkit-animation: 0.2s ease-in forwards blur; + } } } diff --git a/_sass/klise/_miscellaneous.scss b/_sass/klise/_miscellaneous.scss index 5536e6a..0c96da6 100644 --- a/_sass/klise/_miscellaneous.scss +++ b/_sass/klise/_miscellaneous.scss @@ -5,7 +5,18 @@ } 100% { - opacity: 0.99; + opacity: 0.8; + } +} + +// Animation blur +@keyframes blur { + 0% { + filter: blur(0px); + } + + 100% { + filter: blur(4px); } } diff --git a/assets/js/main.js b/assets/js/main.js index dbf1cfc..bc912c9 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -32,4 +32,16 @@ } } } + + // Blur content when the menu is open + const checkbox = document.getElementById("menu-trigger"); + const wrapper = document.getElementById("wrapper"); + + checkbox.addEventListener("change", function() { + if (this.checked) { + wrapper.classList.add("trigger-wrapper"); + } else { + wrapper.classList.remove("trigger-wrapper"); + } + }); })();