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

blur content when the menu is open

Browse Source
This commit is contained in:
Daniel Schön
2020-05-22 13:28:30 +02:00
parent 5547352ff2
commit 7ed89b8b4f
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> <body>
<main aria-label="Content"> <main aria-label="Content">
{% include navbar.html %} {% include navbar.html %}
<div class="wrapper not-found"> <div class="wrapper not-found" id="wrapper">
<div class="container"> <div class="container">
<div class="title">404</div> <div class="title">404</div>
<p class="phrase">😕 Hmm... Seems you lost from my journey.</p> <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 }}"> <body data-theme="{{ site.mode }}">
{% include navbar.html %} {% include navbar.html %}
<div class="wrapper"> <div class="wrapper" id="wrapper">
{% include author.html %} {% include author.html %}
<main aria-label="Content"> <main aria-label="Content">
{{ content }} {{ content }}

2
_layouts/page.html
View File

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

5
_sass/klise/_base.scss
View File

@@ -271,6 +271,11 @@ blockquote {
max-width: calc(#{$narrow-size} - (#{$spacing-full})); max-width: calc(#{$narrow-size} - (#{$spacing-full}));
padding-right: $spacing-full - 10; padding-right: $spacing-full - 10;
padding-left: $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% { 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");
}
});
})(); })();