From 3bab3596774a711ac07cfad3d8b183eedf8b5b6f Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Wed, 14 Aug 2024 14:47:52 -0600
Subject: [PATCH] ads on article page

---
 single.php | 128 +++++++++++++++++++++++++++++------------------------
 style.css  |  44 ++++++++++++++++++
 2 files changed, 115 insertions(+), 57 deletions(-)

diff --git a/single.php b/single.php
index 84b3c57..60ea7a7 100644
--- a/single.php
+++ b/single.php
@@ -1,66 +1,80 @@
 <?php get_header() ?>
 <div class="st-article-section-topper"></div>
-<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(); ?>
-
-
-<?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>
+<main class="st-main-grid">
+    <section class="st-article-section-grid st-article-section-grid__article-page">
+        <article class="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>
-                    </a>
-                </article>
-            <?php endforeach;
-            wp_reset_postdata(); ?>
-        </div>
-    </div>
+                    <?php the_content(); ?>
+                    <?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
+                        endif;
+                    }
+                }
+            } ?>
+
+        </article>
+        <section class="st-ad-section st-ad-section__article-page">
+            <?php
+            if (function_exists('the_ad_group')) {
+                the_ad_group(147);
+                the_ad_group(148);
             }
-        }
-    }?>
-    <section class="st-ad-section-long-post-end st-article">
+            ?>
+        </section>
+    </section>
+    <section class="st-article-section-grid st-article-section-grid__article-page">
+    
+        <section class="st-ad-section-long-post-end st-article">
+            <?php
+            if (function_exists('the_ad_group')) {
+                the_ad_group(149);
+            }
+            ?>
+        </section>
         <?php
-            if(function_exists('the_ad_group')){
-                the_ad_group(149); 
-            }
+        comments_template();
         ?>
     </section>
-    </article>
-<?php 
-
-comments_template();
-get_footer(); 
+</main>
+<?php
+get_footer();
 ?>
\ No newline at end of file
diff --git a/style.css b/style.css
index e595899..e5ea9e4 100644
--- a/style.css
+++ b/style.css
@@ -645,6 +645,10 @@ SECTIONS
         gap: 1em;
     }
 
+    .st-article-section-grid__article-page {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
     .st-article-section-highlight,
     .st-article-section-bottom {
         grid-column: 1 / span 3;
@@ -689,6 +693,14 @@ SECTIONS
     .st-article-section-wide .st-article-section-title {
         grid-column: 1 / span 2;
     }
+    
+    .st-ad-section__article-page {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 85px;
+        left: 0;
+        align-self: start;
+    }
 }
 
 @media (min-width: 1200px) {
@@ -750,12 +762,28 @@ SECTIONS
         border-left: 1px #0b4fa0 solid;
         margin-bottom: 0;
     }
+
+    .st-ad-section__article-page {
+        grid-column: 3 / span 2;
+        border: 0;
+        padding-bottom: 3em;
+        justify-content: start;
+        gap: 1em;
+    }
+
+    .st-ad-section-long-post-end {
+        grid-column: 1 / span 4 !important;
+    }
 }
 
 @media (min-width: 1200px) {
     .st-ad-section {
         grid-area: ad;
     }
+
+    .st-ad-section__article-page {
+        grid-column: 4 / span 1;
+    }
 }
 
 .st-ad-section img,
@@ -786,6 +814,11 @@ SECTIONS
     height: auto;
 }
 
+.local-in-content-ad img {
+    max-width: 100%;
+    height: auto;
+}
+
 .local-article-mid-roll a,
 .local-article-mid-roll img {
     width: 100%;
@@ -1132,12 +1165,17 @@ COMPONENTS
     .st-article__title{
         font-size: 2.5rem;
     }
+
+    .st-article {
+        grid-column: 1 / span 2;
+    }
 }
 
 @media (min-width: 1200px) {
     .st-article {
         max-width: 850px;
         margin: 0 auto;
+        grid-column: 1 / span 3;
     }
 
     .st-article__title{
@@ -1272,6 +1310,12 @@ a.page-numbers,
     margin: 1em;
 }
 
+@media (min-width: 760px) {
+    .discourse-comments-area {
+        grid-column: 1 / span 4;
+    }
+}
+
 @media (min-width: 1200px) {
     .discourse-comments-area {
         max-width: 850px;