Siphalor/siphalor.de
1
0
Fork 0
Code Releases Activity

Merge pull request #7 from dansch43/master

Browse Source 
blur content when the menu is open
This commit is contained in:
Mahendrata Harpi
2020-05-22 21:54:39 +07:00
committed by GitHub
parent 5547352ff2 7ed89b8b4f
commit bb0fc34daf
6 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/404.html
View File

@@ -9,7 +9,7 @@ layout: compress
<body>
<main aria-label="Content">
{% include navbar.html %}
<div class="wrapper not-found">
<div class="wrapper not-found" id="wrapper">
<div class="container">
<div class="title">404</div>
<p class="phrase">😕 Hmm... Seems you lost from my journey.</p>

2
_layouts/default.html
View File

@@ -7,7 +7,7 @@ layout: compress
<body data-theme="{{ site.mode }}">
{% include navbar.html %}
<div class="wrapper">
<div class="wrapper" id="wrapper">
{% include author.html %}
<main aria-label="Content">
{{ content }}

2
_layouts/page.html
View File

@@ -9,7 +9,7 @@ layout: compress
<body>
{% include navbar.html %}
<div class="wrapper">
<div class="wrapper" id="wrapper">
<header class="header">
<h1 class="header-title center" itemprop="headline">{{ page.title | escape }}.</h1>
</header>

5
_sass/klise/_base.scss
View File

@@ -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;
}
}
}

13
_sass/klise/_miscellaneous.scss
View File

@@ -5,7 +5,18 @@
}
100% {
opacity: 0.99;
opacity: 0.8;
}
}
// Animation blur
@keyframes blur {
0% {
filter: blur(0px);
}
100% {
filter: blur(4px);
}
}

12
assets/js/main.js
View File

@@ -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");
}
});
})();