ross/slowtwitch-news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

big ball link and header bug fix

Browse Source
This commit is contained in:
Ross Trottier 2024-08-16 16:45:35 -06:00
parent 1708916680
commit c98c6e2fa8
3 changed files with 122 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/js/st-nav.js
View File

@ -34,6 +34,10 @@ const siteTitleBall = document.querySelector('.st-site-title__ball');
const header = document.querySelector('.st-header'); const header = document.querySelector('.st-header');
const topper = document.querySelector('.st-article-section-topper'); const topper = document.querySelector('.st-article-section-topper');
const desktopNavLinks = document.querySelector('.st-desktop-nav-links'); 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; let lastScrollPosition = 0;
const scrollDepthActivationPoint = 80; const scrollDepthActivationPoint = 80;
@ -51,18 +55,22 @@ function setHeaderClasses() {
if(scrollPosition < scrollDepthActivationPoint) { if(scrollPosition < scrollDepthActivationPoint) {
iconBar.classList.remove('st-icon-bar-sticky'); iconBar.classList.remove('st-icon-bar-sticky');
siteTitle.classList.remove('st-title-scrolled'); siteTitle.classList.remove('st-title-scrolled');
siteTitleGrid.classList.remove('st-disable-link', 'st-send-to-back');
header.classList.remove('st-header-scrolled'); header.classList.remove('st-header-scrolled');
siteTitleBall.classList.remove('st-title-scrolled__ball'); siteTitleBall.classList.remove('st-title-scrolled__ball');
topper.classList.remove('st-article-section-topper-scrolled'); topper.classList.remove('st-article-section-topper-scrolled');
desktopNavLinks.classList.remove('st-desktop-nav-links-scrolled'); desktopNavLinks.classList.remove('st-desktop-nav-links-scrolled');
hiddenHomeHeaderLink.classList.remove('st-hidden-home-header-link-scrolled');
} else { } else {
if(lastScrollPosition < scrollDepthActivationPoint) { if(lastScrollPosition < scrollDepthActivationPoint) {
iconBar.classList.add('st-icon-bar-sticky'); iconBar.classList.add('st-icon-bar-sticky');
siteTitle.classList.add('st-title-scrolled'); siteTitle.classList.add('st-title-scrolled');
siteTitleGrid.classList.add('st-disable-link', 'st-send-to-back');
header.classList.add('st-header-scrolled'); header.classList.add('st-header-scrolled');
siteTitleBall.classList.add('st-title-scrolled__ball'); siteTitleBall.classList.add('st-title-scrolled__ball');
topper.classList.add('st-article-section-topper-scrolled'); topper.classList.add('st-article-section-topper-scrolled');
desktopNavLinks.classList.add('st-desktop-nav-links-scrolled'); desktopNavLinks.classList.add('st-desktop-nav-links-scrolled');
hiddenHomeHeaderLink.classList.add('st-hidden-home-header-link-scrolled');
} }
} }

7
header.php
View File

@ -21,7 +21,8 @@
<body> <body>
<header class="st-header st-main-grid"> <header class="st-header st-main-grid">
<a href="<?php echo home_url() ?>" class="st-hidden-home-header-link"></a>
<div class="st-header-icon-bar"> <div class="st-header-icon-bar">
<?php <?php
wp_nav_menu( wp_nav_menu(
@ -42,10 +43,10 @@
</div> </div>
<div class="st-site-title-grid"> <div class="st-site-title-grid">
<a href="<?php echo home_url() ?>" class="st-site-title-link"> <a href="<?php echo home_url() ?>" class="st-site-title-link st-site-title-link__ball">
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-ball-dark-blue.png" alt="Logotype" class="st-site-title__ball"> <img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-ball-dark-blue.png" alt="Logotype" class="st-site-title__ball">
</a> </a>
<a href="<?php echo home_url() ?>" class="st-site-title-link"> <a href="<?php echo home_url() ?>" class="st-site-title-link st-site-title-link__main-title">
<img src="/wp-content/themes/slowtwitch-news/assets/images/logotype-dark-blue.png" alt="Logotype" class="st-site-title"> <img src="/wp-content/themes/slowtwitch-news/assets/images/logotype-dark-blue.png" alt="Logotype" class="st-site-title">
</a> </a>
</div> </div>

110
style.css
View File

@ -1348,4 +1348,114 @@ a.page-numbers,
max-width: 850px; max-width: 850px;
margin: 1em auto; 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;
}
} }