header jumping fix

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

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');
         } 
     }
     

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>

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();
         ?>

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

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()) {

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) {