Refactor glitch header SCSS, modify animation logic w/ sessionStorage

Also fix Sass plugin configuration, re-enable CSS compression
This commit is contained in:
Xevion
2022-09-20 23:48:10 -05:00
parent 31bda0f788
commit 43104a3d0e
3 changed files with 57 additions and 31 deletions

View File

@@ -53,6 +53,24 @@ layout: compress
{% endif %}
</head>
<body class="{% if page.wide or layout.wide %}wide{% endif %}">
{{ content }}
</body>
<script type="text/javascript">
// Is all of this too much effort to make the animation play in just the right way?
window.onbeforeunload = function(){
// Remember the origin so it can be checked for page reloadss
sessionStorage.setItem("origin", window.location.href);
}
window.onload = function() {
// Display the glitch effect on new page loads or reloads.
let glitch_seen = sessionStorage.getItem('glitch')
if (glitch_seen !== 'true' || window.location.href === sessionStorage.getItem("origin")) {
sessionStorage.setItem('glitch', 'true')
document.getElementById('header').firstElementChild.classList.add('glitch')
}
}
</script>
</html>