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

header jumping fix

Browse Source
This commit is contained in:
Ross Trottier 2024-07-23 15:31:45 -06:00
parent 3b373e72e3
commit 29accf73d0
7 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
archive.php
View File

@ -1,5 +1,5 @@
<?php get_header() ?>
<div class="st-article-section-topper"></div>
<div class="st-main-grid">
<div class="st-article-archives">
<?php

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

@ -32,6 +32,7 @@ const iconBar = document.querySelector('.st-header-icon-bar');
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');
let lastScrollPosition = 0;
const scrollDepthActivationPoint = 80;
@ -43,12 +44,14 @@ window.addEventListener('scroll', function(event) {
siteTitle.classList.remove('st-title-scrolled');
header.classList.remove('st-header-scrolled');
siteTitleBall.classList.remove('st-title-scrolled__ball');
topper.classList.remove('st-article-section-topper-scrolled');
} else {
if(lastScrollPosition < scrollDepthActivationPoint) {
iconBar.classList.add('st-icon-bar-sticky');
siteTitle.classList.add('st-title-scrolled');
header.classList.add('st-header-scrolled');
siteTitleBall.classList.add('st-title-scrolled__ball');
topper.classList.add('st-article-section-topper-scrolled');
}
}

1
front-page.php
View File

@ -2,6 +2,7 @@
<main class="st-main st-main-grid">
<!-- LATEST SECTION -->
<div class="st-article-section-topper"></div>
<section class="st-article-section-grid">
<section class="st-article-section st-article-section-highlight">
<h2 class="st-article-section-title">Latest <a href="<?php echo home_url() . '/articles/'; ?>" class="st-article-section-category-link">></a></h2>

25
page-articles.php
View File

@ -1,15 +1,37 @@
<?php get_header() ?>
<div class="st-article-section-topper"></div>
<div class="st-main-grid">
<div class="st-article-archives">
<?php
query_posts( array( 'posts_per_page' => 25, 'post_status' => 'publish' ) );
$count = $wp_the_query->post_count;
$article_number = 0;
if (have_posts()) {
while (have_posts()) {
the_post();
$category = get_the_category()[0];
$count++;
$article_number++;
if ($article_number == 1) {
$author = get_userdata( $post->post_author );
?>
<article class="st-article-archive-article st-article-archive-article-featured__articles-page">
<a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
<?php the_post_thumbnail(); ?>
</a>
<div class="st-article-section-wide-article__text-container">
<a href="<?php echo home_url($category->slug); ?>"
class="st-article-section-wide-article__category-link"><?php echo $category->name; ?></a>
<a class="st-article-section-wide-article__title" href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
<p class="st-article-section-wide-article__excerpt"><?php the_excerpt(); ?></p>
<a href="<?php echo get_author_posts_url( $post->post_author ); ?>" class="st-article-section-main-article__author-link">by <?php echo $author->display_name; ?>, <?php the_time('F j, Y'); ?></a>
</div>
</a>
</article>
<?php
} else {
?>
<article class="st-article-archive-article">
<a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
@ -28,6 +50,7 @@
<?php
}
}
}
wp_reset_postdata();
?>

2
search.php
View File

@ -1,5 +1,5 @@
<?php get_header() ?>
<div class="st-article-section-topper"></div>
<div class="st-main-grid">
<div class="st-article-archives">
<?php

2
single.php
View File

@ -1,5 +1,5 @@
<?php get_header() ?>
<div class="st-article-section-topper"></div>
<article class="st-main-grid st-article">
<?php
if (have_posts()) {

27
style.css
View File

@ -20,6 +20,7 @@ body {
font-size: 1.25rem;
font-family: "Rubik", sans-serif;
line-height: 1.6;
overflow-anchor: none;
}
input, button, textarea, select {
@ -188,7 +189,6 @@ SECTIONS
}
.st-header-scrolled {
/* pointer-events: none; */
max-height: 80px;
background-color: rgba(255, 255, 255, 0.95);
}
@ -577,6 +577,15 @@ SECTIONS
color: black;
}
.st-article-section-topper {
margin-bottom: 10px;
transition: margin 300ms;
}
.st-article-section-topper-scrolled {
margin-bottom: 125px;
}
@media (min-width: 760px) {
.st-article-section-grid {
display: grid;
@ -1049,7 +1058,8 @@ COMPONENTS
font-size: 1.5rem;
}
.st-article-archive-article-featured .st-article-section-main-article__author-link {
.st-article-archive-article-featured .st-article-section-main-article__author-link,
.st-article-archive-article-featured__articles-page .st-article-section-main-article__author-link {
display: none;
}
@ -1078,6 +1088,19 @@ COMPONENTS
.st-article-archive-article-featured .st-article-section-main-article__author-link {
display: initial;
}
.st-article-archive-article-featured__articles-page {
grid-column: 1/span 2;
grid-row: 1/span 2;
}
.st-article-archive-article-featured__articles-page img {
width: 100%;
}
.st-article-archive-article-featured__articles-page .st-article-section-main-article__author-link {
display: initial;
}
}
@media (min-width: 1200px) {