From c98c6e2fa84e7756cfe7cb22250c99a7eda2223d Mon Sep 17 00:00:00 2001 From: Ross Trottier Date: Fri, 16 Aug 2024 16:45:35 -0600 Subject: [PATCH] big ball link and header bug fix --- assets/js/st-nav.js | 8 ++++ header.php | 7 +-- style.css | 110 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 122 insertions(+), 3 deletions(-) diff --git a/assets/js/st-nav.js b/assets/js/st-nav.js index 4cb4131..f05ab54 100644 --- a/assets/js/st-nav.js +++ b/assets/js/st-nav.js @@ -34,6 +34,10 @@ const siteTitleBall = document.querySelector('.st-site-title__ball'); const header = document.querySelector('.st-header'); const topper = document.querySelector('.st-article-section-topper'); const desktopNavLinks = document.querySelector('.st-desktop-nav-links'); +const mainTitleLink = document.querySelector('.st-site-title-link__main-title'); // cache link, remove href when scrolled +const mainTitleBallLink = document.querySelector('.st-site-title-link__ball'); +const siteTitleGrid = document.querySelector('.st-site-title-grid'); +const hiddenHomeHeaderLink = document.querySelector('.st-hidden-home-header-link'); let lastScrollPosition = 0; const scrollDepthActivationPoint = 80; @@ -51,18 +55,22 @@ function setHeaderClasses() { if(scrollPosition < scrollDepthActivationPoint) { iconBar.classList.remove('st-icon-bar-sticky'); siteTitle.classList.remove('st-title-scrolled'); + siteTitleGrid.classList.remove('st-disable-link', 'st-send-to-back'); header.classList.remove('st-header-scrolled'); siteTitleBall.classList.remove('st-title-scrolled__ball'); topper.classList.remove('st-article-section-topper-scrolled'); desktopNavLinks.classList.remove('st-desktop-nav-links-scrolled'); + hiddenHomeHeaderLink.classList.remove('st-hidden-home-header-link-scrolled'); } else { if(lastScrollPosition < scrollDepthActivationPoint) { iconBar.classList.add('st-icon-bar-sticky'); siteTitle.classList.add('st-title-scrolled'); + siteTitleGrid.classList.add('st-disable-link', 'st-send-to-back'); header.classList.add('st-header-scrolled'); siteTitleBall.classList.add('st-title-scrolled__ball'); topper.classList.add('st-article-section-topper-scrolled'); desktopNavLinks.classList.add('st-desktop-nav-links-scrolled'); + hiddenHomeHeaderLink.classList.add('st-hidden-home-header-link-scrolled'); } } diff --git a/header.php b/header.php index 845d683..0c54704 100644 --- a/header.php +++ b/header.php @@ -21,7 +21,8 @@
- + +
- + Logotype - + Logotype
diff --git a/style.css b/style.css index 3c52e66..8d66739 100644 --- a/style.css +++ b/style.css @@ -1348,4 +1348,114 @@ a.page-numbers, max-width: 850px; margin: 1em auto; } +} + +.st-disable-link { + pointer-events: none; +} + +.st-activate-child-link { + pointer-events: auto; +} + +.st-send-to-back { + z-index: -1000; +} + +.st-shrink { + width: 1; + height: 1; +} + +/* Hidden home header link */ + +.st-hidden-home-header-link { + position: fixed; + width: 0; + height: 0; + top: 0; + left: 0; +} + +.st-hidden-home-header-link-scrolled { + height: 75px; + width: 100px; +} + +@media (min-width: 1327px) { + .st-hidden-home-header-link-scrolled { + left: 10px; + } +} + +@media (min-width: 1449px) { + .st-hidden-home-header-link-scrolled { + left: 20px; + } +} + +@media (min-width: 1483px) { + .st-hidden-home-header-link-scrolled { + left: 40px; + } +} + +@media (min-width: 1523px) { + .st-hidden-home-header-link-scrolled { + left: 60px; + } +} + +@media (min-width: 1550px) { + .st-hidden-home-header-link-scrolled { + left: 80px; + } +} + +@media (min-width: 1600px) { + .st-hidden-home-header-link-scrolled { + left: 100px; + } +} + +@media (min-width: 1640px) { + .st-hidden-home-header-link-scrolled { + left: 120px; + } +} + +@media (min-width: 1675px) { + .st-hidden-home-header-link-scrolled { + left: 140px; + } +} + +@media (min-width: 1700px) { + .st-hidden-home-header-link-scrolled { + left: 160px; + } +} + +@media (min-width: 1750px) { + .st-hidden-home-header-link-scrolled { + left: 180px; + } +} + +@media (min-width: 1800px) { + .st-hidden-home-header-link-scrolled { + left: 200px; + } +} + +@media (min-width: 1850px) { + .st-hidden-home-header-link-scrolled { + left: 220px; + } +} + +@media (min-width: 1900px) { + .st-hidden-home-header-link-scrolled { + left: 250px; + } } \ No newline at end of file