diff --git a/assets/js/main.js b/assets/js/main.js index d18cbaa..d8be84f 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,21 +1,3 @@ -/** - * Utils - */ - -// Throttle -// -const throttle = (callback, limit) => { - let timeoutHandler = null; - return () => { - if (timeoutHandler == null) { - timeoutHandler = setTimeout(() => { - callback(); - timeoutHandler = null; - }, limit); - } - }; -}; - // addEventListener Helper // const listen = (ele, e, callback) => { @@ -24,26 +6,7 @@ const listen = (ele, e, callback) => { } } -/** - * Functions - */ - -// Auto Hide Header -// let header = document.getElementById('site-header'); -let lastScrollPosition = window.pageYOffset; - -const autoHideHeader = () => { - let currentScrollPosition = Math.max(window.pageYOffset, 0); - if (currentScrollPosition > lastScrollPosition) { - header.classList.remove('slideInUp'); - header.classList.add('slideOutDown'); - } else { - header.classList.remove('slideOutDown'); - header.classList.add('slideInUp'); - } - lastScrollPosition = currentScrollPosition; -} // Mobile Menu Toggle // @@ -91,12 +54,4 @@ if (header !== null) { window.location.hash = '#' + ele.id; }); }); - - window.addEventListener('scroll', throttle(() => { - autoHideHeader(); - - if (mobileMenuVisible == true) { - toggleMobileMenu(); - } - }, 250)); } diff --git a/assets/scss/_animate.scss b/assets/scss/_animate.scss index 0b2c7e8..40e9854 100644 --- a/assets/scss/_animate.scss +++ b/assets/scss/_animate.scss @@ -8,4 +8,4 @@ * Copyright (c) 2019 Daniel Eden */ -@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion),(print){.animated{-webkit-animation:unset!important;animation:unset!important;-webkit-transition:none!important;transition:none!important}} \ No newline at end of file +@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:translateZ(0)}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.fast{animation-duration:.8s}.animated.faster{animation-duration:.5s}.animated.slow{animation-duration:2s}@media (prefers-reduced-motion),(print){.animated{animation:unset!important;transition:none!important}} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 09ee3bb..3872590 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -225,7 +225,7 @@ table { #site-header { position: fixed; z-index: 1; - bottom: 0; + top: 0; width: 100%; box-sizing: border-box; box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45); @@ -294,7 +294,7 @@ table { #mobile-menu { position: fixed; - bottom: 4.8em; + top: 5em; right: 1.5em; display: none; padding: .6em 1.8em; @@ -749,14 +749,13 @@ hr.post-end { } } +.site-main { + margin-top: 5em; +} // Media Queries // @media (min-width: 800px) { - .site-main { - margin-top: 3em; - } - hr.post-end { width: 40%; } diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 5ad91f6..1127615 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,4 @@ -