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

header complete

Browse Source
This commit is contained in:
Ross Trottier 2024-07-24 13:17:49 -06:00
parent f69ed14e5d
commit 12a4b06455
6 changed files with 59 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/logotype-dark-blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
assets/images/slowtwitch-ball-dark-blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

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

@ -33,6 +33,7 @@ const siteTitle = document.querySelector('.st-site-title');
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');
let lastScrollPosition = 0;
const scrollDepthActivationPoint = 80;
@ -45,6 +46,7 @@ window.addEventListener('scroll', function(event) {
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');
} else {
if(lastScrollPosition < scrollDepthActivationPoint) {
iconBar.classList.add('st-icon-bar-sticky');
@ -52,6 +54,7 @@ window.addEventListener('scroll', function(event) {
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');
}
}

3
functions.php
View File

@ -24,7 +24,8 @@ add_action( 'init', 'slowtwitch_menus' );
function slowtwitch_menus() {
$locations = array(
'primary' => 'Primary Menu',
'footer' => 'Footer Menu'
'footer' => 'Footer Menu',
'desktop-nav' => 'Desktop Nav Menu'
);
register_nav_menus($locations);

15
header.php
View File

@ -23,6 +23,17 @@
<header class="st-header st-main-grid">
<div class="st-header-icon-bar">
<?php
wp_nav_menu(
array(
'menu' => 'desktop-nav',
'container' => '',
'theme_location' => 'primary',
'items_wrap' => '<ul class="st-desktop-nav-links">%3$s</ul>'
)
);
?>
<a href="https://forum.slowtwitch.com" class="st-chip st-chip-primary st-header-icon-bar__item">forum</a>
<a href="https://shop.slowtwitch.com" class="st-chip st-chip-secondary st-header-icon-bar__item">shop</a>
@ -32,10 +43,10 @@
<div class="st-site-title-grid">
<a href="<?php echo home_url() ?>" class="st-site-title-link">
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-ball-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 href="<?php echo home_url() ?>" class="st-site-title-link">
<img src="/wp-content/themes/slowtwitch-news/assets/images/logotype-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>
</div>
<nav class="st-nav st-main-grid">

51
style.css
View File

@ -224,10 +224,9 @@ SECTIONS
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
}
@media (min-width: 1200px) {
@media (min-width: 760px) {
.st-header-icon-bar__item {
transition: margin 300ms;
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
margin-left: 2em;
}
}
@ -237,13 +236,6 @@ SECTIONS
transition: margin 300ms;
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
}
@media (min-width: 1200px) {
.st-header-icon-bar__item {
transition: margin 300ms;
margin-left: calc((100% - (4 * 62px)) / (4 - 1));
}
}
}
@ -310,6 +302,45 @@ SECTIONS
}
}
.st-desktop-nav-links {
display: none;
}
@media (min-width: 760px) {
.st-desktop-nav-links {
display: flex;
padding: 0;
list-style: none;
margin: 0;
margin-right: auto;
transition: margin 300ms;
}
.st-desktop-nav-links li {
margin-right: 1em;
}
.st-desktop-nav-links li a {
text-decoration: none;
text-transform: uppercase;
color: #0b4fa0;
}
.st-desktop-nav-links li a:hover {
color: #FFDB12;
}
.st-desktop-nav-links-scrolled {
margin-left: 80px;
}
}
@media (min-width: 1125px) {
.st-desktop-nav-links-scrolled {
margin-left: 100px;
}
}
/* nav */
.st-search-overlay,
.st-nav {