404, post page

404.php

@@ -0,0 +1,46 @@
+<?php get_header() ?>
+
+<div class="st-main-grid st-four-oh-four">
+    <h1 class="st-four-oh-four__title">Oops, this page doesn't exist.</h1>
+    <p class="st-four-oh-four__subtitle">Check out some of our articles below.</p>
+    <section class="st-article-section-four-oh-four">
+    <?php
+    $post_section_two_args = array(
+        'showposts' => 12,
+        'offset' => 0,
+        'orderby' => 'post_date',
+        'order' => 'DESC',
+        'post_type' => 'post',
+        'post_status' => 'publish'
+    );
+    query_posts($post_section_two_args);
+    if (have_posts()):
+        while (have_posts()):
+            the_post();
+            $category = get_the_category()[0];
+            ?>
+
+            <article class="st-article-section-wide-article">
+                <?php $category = get_the_category()[0]; ?>
+                <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>
+                </div>
+                </a>
+            </article>
+            <?php
+        endwhile;
+        wp_reset_postdata();
+    endif;
+    ?>
+
+    </section>
+</div>
+<?php get_footer() ?>

assets/js/st-nav.js

@@ -32,16 +32,17 @@ const iconBar = document.querySelector('.st-header-icon-bar');
 const siteTitle = document.querySelector('.st-site-title');
 const header = document.querySelector('.st-header');
 let lastScrollPosition = 0;
+const scrollDepthActivationPoint = 100;
 
 window.addEventListener('scroll', function(event) {
     const scrollPosition = window.scrollY;
 
-    if(scrollPosition < 5) {
+    if(scrollPosition < scrollDepthActivationPoint) {
         iconBar.classList.remove('st-icon-bar-sticky');
         siteTitle.classList.remove('st-title-scrolled');
         header.classList.remove('st-header-scrolled');
     } else {
-        if(lastScrollPosition < 5) {
+        if(lastScrollPosition < scrollDepthActivationPoint) {
             iconBar.classList.add('st-icon-bar-sticky');
             siteTitle.classList.add('st-title-scrolled');
             header.classList.add('st-header-scrolled');

footer.php

@@ -29,9 +29,9 @@
         <?php
                 wp_nav_menu(
                     array(
-                        'menu' => 'primary',
+                        'menu' => 'footer',
                         'container' => '',
-                        'theme_location' => 'primary',
+                        'theme_location' => 'footer',
                         'items_wrap' => '<ul class="st-footer-nav-links">%3$s</ul>'
                     )
                 );

functions.php

@@ -48,7 +48,7 @@ function custom_breadcrumbs() {
     $separator          = '>';
     $breadcrums_id      = 'breadcrumbs';
     $breadcrums_class   = 'breadcrumbs';
-    $home_title         = 'Homepage';
+    $home_title         = 'Home';
       
     // If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat)
     $custom_taxonomy    = 'product_cat';

single.php

@@ -0,0 +1,54 @@
+<?php get_header() ?>
+
+<article class="st-main-grid st-article">
+    <?php
+    if (have_posts()) {
+        while (have_posts()) {
+            the_post();
+            $post_id = get_the_ID(); ?>
+
+    
+               
+    <h1 class="st-article__title"> <?php the_title(); ?> </h1>
+    <div class="st-article__author-box">
+        <div class="st-article__author-name">
+            <?php the_author() ?>
+        </div>
+        <div>
+            <?php the_date() ?>
+            
+        </div>
+    </div>
+    <?php the_content(); ?>
+
+</article>
+<?php
+    if(function_exists('get_field')){
+    $related_posts = get_field('related_posts', $post_id);
+    if (isset($related_posts)) :?>
+    <div class="st-main-grid">
+        <h3>Related Articles</h3>
+        <div class="st-article-section-related-articles">
+            <?php foreach ($related_posts as $post) : setup_postdata($post); 
+            $category = get_the_category()[0];?>
+                <article class="st-related-article">
+                    <a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link">
+                        <?php the_post_thumbnail(); ?>
+                    </a>
+                    <div class="st-article-section-sub-article__text-container">
+                        <a href="<?php echo home_url($category->slug); ?>" class="st-article-section-sub-article__category-link"><?php echo $category->name; ?></a>
+                        <a class="st-article-section-sub-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
+                    </div>
+                    </a>
+                </article>
+            <?php endforeach;
+            wp_reset_postdata(); ?>
+        </div>
+    </div>
+
+    <?php
+    endif;
+            }
+        }
+    }?>
+<?php get_footer() ?>

style.css

@@ -123,6 +123,7 @@ SECTIONS
     text-decoration: none;
     cursor: pointer;
     color: black;
+    margin-top: 3px;
 }
 
 .st-icon-bar-sticky a {
@@ -380,6 +381,7 @@ SECTIONS
 
 .st-footer-menu {
     grid-area: menu;
+    align-self: end;
 }
 
 .st-footer-nav-links {
@@ -664,7 +666,8 @@ COMPONENTS
 
 /* sub article card */
 
-.st-article-section-sub-article {
+.st-article-section-sub-article,
+.st-related-article {
     display: flex;
     flex-direction: row;
     margin-top: 1em;
@@ -716,6 +719,11 @@ COMPONENTS
     .st-article-section-sub-article:first-of-type {
         margin-top: 0;
     }
+
+    .st-related-article {
+        flex-direction: column;
+        max-width: 160px;
+    }
 }
 
 @media (min-width: 1200px) {
@@ -799,7 +807,7 @@ COMPONENTS
 
 .st-chip-secondary:hover,
 .st-chip-secondary:active {
-    background: #270BA1;
+    background: #0b4fa0;
     color: #fff;
 }
 
@@ -850,4 +858,100 @@ COMPONENTS
 
 .st-ad-section-classifieds-card__title {
     color: white;
+}
+
+/* breadcrumbs */
+
+.breadcrumbs {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.breadcrumbs li {
+    margin-left: .25em;
+}
+
+.st-article .breadcrumbs li:nth-last-child(2),
+.st-article .breadcrumbs li:nth-last-child(1) {
+    display: none;
+}
+
+.breadcrumbs li:first-child {
+    margin-left: 0;
+}
+
+.breadcrumbs li a {
+    text-decoration: none;
+}
+
+.breadcrumbs li a:visited {
+    color: inherit;
+}
+
+/* article */
+
+.st-article__title {
+    font-size: 2rem;
+    margin-top: 0;
+}
+
+.st-article .img-responsive {
+    width: 100%;
+}
+
+.st-article-section-related-articles {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    margin-bottom: 2em;
+}
+
+@media (min-width: 760px) {
+    .st-article__title{
+        font-size: 2.5rem;
+    }
+}
+
+@media (min-width: 1200px) {
+    .st-article {
+        max-width: 850px;
+        margin: 0 auto;
+    }
+
+    .st-article__title{
+        font-size: 2.75rem;
+    }
+}
+
+
+/* Four oh Four */
+
+.st-four-oh-four__title {
+    font-size: 2rem;
+    margin: 0;
+}
+
+.st-four-oh-four__subtitle {
+    font-size: 1.5rem;
+}
+
+@media (min-width: 760px) {
+    .st-article-section-four-oh-four {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1em;
+    }
+}
+
+@media (min-width: 1200px) {
+    .st-four-oh-four__title {
+        font-size: 4rem;
+    }
+
+    .st-article-section-four-oh-four {
+        grid-template-columns: repeat(4, 1fr);
+    }
 }