From 8f247e847836977446864785a1cb0d35b0173779 Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Tue, 2 Jul 2024 14:45:52 -0600
Subject: [PATCH] 404, post page

---
 404.php             |  46 +++++++++++++++++++
 assets/js/st-nav.js |   5 +-
 footer.php          |   4 +-
 functions.php       |   2 +-
 single.php          |  54 ++++++++++++++++++++++
 style.css           | 108 +++++++++++++++++++++++++++++++++++++++++++-
 6 files changed, 212 insertions(+), 7 deletions(-)
 create mode 100644 404.php
 create mode 100644 single.php

diff --git a/404.php b/404.php
new file mode 100644
index 0000000..0e15ac2
--- /dev/null
+++ b/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() ?>
\ No newline at end of file
diff --git a/assets/js/st-nav.js b/assets/js/st-nav.js
index e99843f..3f7f004 100644
--- a/assets/js/st-nav.js
+++ b/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');
diff --git a/footer.php b/footer.php
index ddeecb0..fcd74c8 100644
--- a/footer.php
+++ b/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>'
                     )
                 );
diff --git a/functions.php b/functions.php
index f3bcffa..804b90e 100644
--- a/functions.php
+++ b/functions.php
@@ -48,7 +48,7 @@ function custom_breadcrumbs() {
     $separator          = '&gt;';
     $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';
diff --git a/single.php b/single.php
new file mode 100644
index 0000000..97f9b07
--- /dev/null
+++ b/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() ?>
\ No newline at end of file
diff --git a/style.css b/style.css
index 8236f75..a246a9b 100644
--- a/style.css
+++ b/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);
+    }
 }
\ No newline at end of file