From 7c3bf6cee88c6d403aa086e5918cc3f01f39f834 Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Fri, 28 Jun 2024 16:06:55 -0600
Subject: [PATCH] first run at top main grid area

---
 front-page.php |  85 ++++--------------
 style.css      | 237 +++++++++++++++++++++++++++++++++++++------------
 2 files changed, 197 insertions(+), 125 deletions(-)

diff --git a/front-page.php b/front-page.php
index c4b698f..3e648d6 100644
--- a/front-page.php
+++ b/front-page.php
@@ -39,10 +39,12 @@
                 'post_status' => 'publish'
             );
             query_posts($post_section_two_args);
+            ?><div class="st-article-section-sub-article-stack"><?php
             if (have_posts()) : while (have_posts()) : the_post();
                     $category = get_the_category()[0];
                     $author = get_userdata( $post->post_author );
             ?>
+            
             <article class="st-article-section-sub-article">
                 <a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link">
                     <?php the_post_thumbnail(); ?>
@@ -58,6 +60,7 @@
                 endif; 
                 wp_reset_postdata();
                 ?>
+            </div>
         </section>
         <section class="st-ad-section st-ad-section__top">
             <img src="/wp-content/themes/slowtwitch-news/assets/images/vertical-ad-mock.jpg" alt="Ad Mock" class="st-ad-section-vertical-ad">
@@ -67,14 +70,21 @@
                     <img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-shop-card__img">
                 </div>
             </a>
+            <a href="https://shop.slowtwitch.com/" class="st-ad-section-shop-card-link">
+                <div class="st-ad-section-shop-card">
+                    <h3 class="st-ad-section-shop-card__title">Save Big On Gear at the Slowtwitch Shop <span>></span></h3>
+                    <img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-shop-card__img">
+                </div>
+            </a>
         </section>
         <!-- TECH SECTION -->
         <section class="st-article-section st-article-section-bottom">
             <h2 class="st-article-section-title">Tech <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2>
             <?php
+                $section_category = 'Tech';
                 $post_section_three_featured_args = array(
                     'showposts' => 1,
-                    'category_name' => 'Tech',
+                    'category_name' => $section_category,
                     'orderby'     => 'post_date',
                     'order'       => 'DESC',
                     'post_type'   => 'post',
@@ -105,15 +115,16 @@
             wp_reset_postdata();
 
             $post_section_two_args = array(
-                'showposts' => 3,
+                'showposts' => 5,
                 'offset'      => 1,
-                'category_name' => 'Tech',
+                'category_name' => $section_category,
                 'orderby'     => 'post_date',
                 'order'       => 'DESC',
                 'post_type'   => 'post',
                 'post_status' => 'publish'
             );
             query_posts($post_section_two_args);
+            ?><div class="st-article-section-sub-article-stack"><?php
             if (have_posts()) : while (have_posts()) : the_post();
                     $category = get_the_category()[0];
                     $author = get_userdata( $post->post_author );
@@ -131,76 +142,14 @@
             <?php
                 endwhile;
                 endif; ?>
+            </div>
         </section>
         <section class="st-newsletter-signup">
             <!-- TODO: Insert flat section for newsletter signup -->
         </section>
     </section>
-    <section class="st-article-section">
-    <h2 class="st-article-section-title">Products <a href="<?php echo home_url() . '/products'; ?>" class="st-article-section-category-link">></a></h2>
-    <?php
-        $post_section_three_featured_args = array(
-            'showposts' => 1,
-            'category_name' => 'Products',
-            'orderby'     => 'post_date',
-            'order'       => 'DESC',
-            'post_type'   => 'post',
-            'post_status' => 'publish'
-        );
-        query_posts($post_section_three_featured_args);
-        if (have_posts()) : while (have_posts()) : the_post();
-            $category = get_the_category()[0];
-            $author = get_userdata( $post->post_author );
-    ?>
-    <article class="st-article-section-main-article">
-        <a href="<?php the_permalink(); ?>" class="st-article-section-main-article__image-link">
-            <?php the_post_thumbnail(); ?>
-        </a>
-        <a href="<?php echo home_url($category->slug); ?>" class="st-article-section-main-article__category-link"><?php echo $category->name; ?></a>
-        <a class="st-article-section-main-article__title" href="<?php the_permalink(); ?>">
-        <h3><?php the_title(); ?></h3>
-        </a>
-
-        <p class="st-article-section-main-article__excerpt"><?php echo get_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>
-    </article>
-
-    <?php
-    endwhile;
-    endif;
-
-    wp_reset_postdata();
-
-    $post_section_two_args = array(
-        'showposts' => 5,
-        'offset'      => 1,
-        'category_name' => 'Products',
-        '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];
-            $author = get_userdata( $post->post_author );
-    ?>
-    <article class="st-article-section-sub-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
-        endwhile;
-        endif; ?>
-        <!-- TODO: Insert section sidebar here -->
-    </section>
-    <!-- TODO: Insert flat section for shop links -->
+    <!-- REPEAT TOP PATTERN WITH NEW ARTICLES AND ADS -->
+    
 </main>
 
 <?php get_footer() ?>
\ No newline at end of file
diff --git a/style.css b/style.css
index 59563dc..e910f02 100644
--- a/style.css
+++ b/style.css
@@ -51,6 +51,12 @@ h1 {
     transform: scale(0,0);
 }
 
+@media (min-width: 760px) {
+    .st-site-title {
+        font-size: 6.9rem;
+    }
+}
+
 /*
 ============================
 LAYOUT
@@ -59,27 +65,16 @@ LAYOUT
 
 .st-main-grid {
     display: grid;
-    grid-template-columns: minmax(1em, 1fr) minmax(260px, 500px) minmax(1em, 1fr);
+    grid-template-columns: minmax(1em, 1fr) minmax(260px, 725px) minmax(1em, 1fr);
 }
 
 .st-main-grid > * {
     grid-column: 2;
 }
 
-@media (min-width: 550px) {
+@media (min-width: 760px) {
     .st-main-grid {
-        grid-template-columns: minmax(1em, 1fr) minmax(500px, 1280px) minmax(1em, 1fr);
-    }
-
-    .st-article-section-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 1em;
-    }
-
-    .st-article-section-highlight,
-    .st-article-section-bottom {
-        grid-column: 1 / span 3;
+        grid-template-columns: minmax(1em, 1fr) minmax(500px, 1400px) minmax(1em, 1fr);
     }
 }
 
@@ -318,12 +313,7 @@ SECTIONS
     padding: 0;
 }
 
-/*
-============================
-COMPONENTS
-============================
-*/
-/* main article card */
+/* article section */
 
 .st-article-section,
 .st-ad-section {
@@ -352,10 +342,137 @@ COMPONENTS
     color: black;
 }
 
+@media (min-width: 760px) {
+    .st-article-section-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 1em;
+    }
+
+    .st-article-section-highlight,
+    .st-article-section-bottom {
+        grid-column: 1 / span 3;
+    }
+
+    .st-article-section-highlight {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 1em;
+        justify-self: flex-start;
+        align-content: flex-start;
+    }
+
+    .st-article-section-title {
+        width: 100%;
+        margin-bottom: 0;
+    }
+
+    .st-article-section {
+        border: none;
+        margin-bottom: 0;
+    }
+
+    .st-article-section-bottom  {
+        grid-column: 1 / span 4;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
+    }
+
+    .st-article-section-main-article__bottom {
+        display: none;
+    }
+}
+
+@media (min-width: 1200px) {
+    .st-article-section-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-areas: 
+            "article-main article-main article-main ad"
+            "article-main article-main article-main ad"
+            "article-secondary article-secondary article-secondary ad"
+            "article-secondary article-secondary article-secondary ad";
+        gap: 1em;
+    }
+    
+    .st-article-section-highlight{
+        flex-direction: row;
+        grid-area: article-main;
+        padding-bottom: 0;
+    }
+
+    .st-article-section-bottom {
+        grid-area: article-secondary;
+    }
+}
+
+/* ad section */
+
+.st-ad-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.st-ad-section-shop-card {
+    background-color: #FFDB12;
+    margin-top: 1em;
+    border-radius: 5px;
+    padding: .3em .5em;
+    padding-bottom: 0;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+}
+
+.st-ad-section-shop-card__title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.5rem;
+    letter-spacing: 1px;
+    margin-top: 0;
+}
+
+.st-ad-section-shop-card-link {
+    text-decoration: none;
+    color: #414b4c;
+}
+
+.st-ad-section-shop-card__img {
+    max-width: 100%;
+    margin-bottom: 0;
+}
+
+@media (min-width: 760px) {
+    .st-ad-section {
+        margin-top: 3.2em;
+        justify-content: flex-start;
+        border-bottom: none;
+        padding-left: 1em;
+        border-left: 1px #cec9c2 solid;
+        margin-bottom: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .st-ad-section {
+        grid-area: ad;
+    }
+}
+
+/*
+============================
+COMPONENTS
+============================
+*/
+/* main article card */
+
 .st-article-section-main-article__image-link img {
     width: 100%;
     object-fit: cover;
-    border-radius: 10px;
+    border-radius: 5px;
 }
 
 .st-article-section-main-article__category-link {
@@ -396,6 +513,31 @@ COMPONENTS
     font-size: .5em;
 }
 
+@media (min-width: 760px) {
+    .st-article-section-main-article {
+        width: 100%;
+    }
+
+    .st-article-section-main-article__image-link img {
+        height: 500px;
+    }
+
+    .st-article-section-bottom .st-article-section-main-article {
+        width: 45%;
+    }
+
+    .st-article-section-bottom .st-article-section-sub-article-stack {
+        width: 50%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .st-article-section-main-article,
+    .st-article-section-bottom .st-article-section-main-article {
+        width: 55%;
+    }
+}
+
 /* sub article card */
 
 .st-article-section-sub-article {
@@ -442,6 +584,23 @@ COMPONENTS
     margin-top: .2em;
 }
 
+@media (min-width: 760px) {
+    .st-article-section-sub-article-stack {
+        margin-top: 0;
+    }
+
+    .st-article-section-sub-article:first-of-type {
+        margin-top: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .st-article-section-sub-article-stack,
+    .st-article-section-bottom .st-article-section-sub-article-stack {
+        width: 40%;
+    }
+}
+
 /* chips */
 
 .st-chip {
@@ -476,39 +635,3 @@ COMPONENTS
     color: #454545;
 }
 
-/* ad section */
-
-.st-ad-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.st-ad-section-shop-card {
-    background-color: #FFDB12;
-    margin-top: 1em;
-    border-radius: 5px;
-    padding: .3em .5em;
-    padding-bottom: 0;
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-}
-
-.st-ad-section-shop-card__title {
-    display: flex;
-    justify-content: space-between;
-    font-size: 1.5rem;
-    letter-spacing: 1px;
-    margin-top: 0;
-}
-
-.st-ad-section-shop-card-link {
-    text-decoration: none;
-    color: #414b4c;
-}
-
-.st-ad-section-shop-card__img {
-    max-width: 100%;
-    margin-bottom: 0;
-}
\ No newline at end of file