From 29accf73d0f6bf5e1003fe469342a2e5fa0a3872 Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Tue, 23 Jul 2024 15:31:45 -0600
Subject: [PATCH] header jumping fix

---
 archive.php         |  2 +-
 assets/js/st-nav.js |  3 +++
 front-page.php      |  1 +
 page-articles.php   | 25 ++++++++++++++++++++++++-
 search.php          |  2 +-
 single.php          |  2 +-
 style.css           | 27 +++++++++++++++++++++++++--
 7 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/archive.php b/archive.php
index 1a8f1c3..a8a2da3 100644
--- a/archive.php
+++ b/archive.php
@@ -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
diff --git a/assets/js/st-nav.js b/assets/js/st-nav.js
index f4844f3..6dcbffe 100644
--- a/assets/js/st-nav.js
+++ b/assets/js/st-nav.js
@@ -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');
         } 
     }
     
diff --git a/front-page.php b/front-page.php
index 777e885..c500dd7 100644
--- a/front-page.php
+++ b/front-page.php
@@ -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>
diff --git a/page-articles.php b/page-articles.php
index 2323b67..c08ff13 100644
--- a/page-articles.php
+++ b/page-articles.php
@@ -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();
         ?>
diff --git a/search.php b/search.php
index 98182c9..672d91d 100644
--- a/search.php
+++ b/search.php
@@ -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
diff --git a/single.php b/single.php
index 211bc5f..c7d1148 100644
--- a/single.php
+++ b/single.php
@@ -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()) {
diff --git a/style.css b/style.css
index 5a82c5c..69840b7 100644
--- a/style.css
+++ b/style.css
@@ -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) {