From 4504f9852a8590fdfdd4fcc407a1b788332034e6 Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Fri, 28 Jun 2024 11:48:19 -0600
Subject: [PATCH] started desktop grid area

---
 front-page.php | 248 +++++++++++++++++++++++++------------------------
 style.css      |  17 ++++
 2 files changed, 142 insertions(+), 123 deletions(-)

diff --git a/front-page.php b/front-page.php
index be8c96a..c4b698f 100644
--- a/front-page.php
+++ b/front-page.php
@@ -2,137 +2,139 @@
 
 <main class="st-main st-main-grid">
     <!-- LATEST SECTION -->
-    <section class="st-article-section st-article-section__top">
-        <h2 class="st-article-section-title">Latest <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
-        <?php
-            query_posts('showposts=1');
-            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,
-            '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; 
-            wp_reset_postdata();
+    <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>
+            <?php
+                query_posts('showposts=1');
+                if (have_posts()) : while (have_posts()) : the_post();
+                    $category = get_the_category()[0];
+                    $author = get_userdata( $post->post_author );
             ?>
-    </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">
-        <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">
-        <h2 class="st-article-section-title">Tech <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2>
-        <?php
-            $post_section_three_featured_args = array(
-                'showposts' => 1,
+            <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,
+                '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; 
+                wp_reset_postdata();
+                ?>
+        </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">
+            <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
+                $post_section_three_featured_args = array(
+                    'showposts' => 1,
+                    'category_name' => 'Tech',
+                    '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' => 3,
+                'offset'      => 1,
                 'category_name' => 'Tech',
                 'orderby'     => 'post_date',
                 'order'       => 'DESC',
                 'post_type'   => 'post',
                 'post_status' => 'publish'
             );
-            query_posts($post_section_three_featured_args);
+            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-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' => 3,
-            'offset'      => 1,
-            'category_name' => 'Tech',
-            '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; ?>
-    </section>
-    <section class="st-newsletter-signup">
-        <!-- TODO: Insert flat section for newsletter signup -->
+                    $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; ?>
+        </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>
diff --git a/style.css b/style.css
index 61be565..59563dc 100644
--- a/style.css
+++ b/style.css
@@ -66,6 +66,23 @@ LAYOUT
     grid-column: 2;
 }
 
+@media (min-width: 550px) {
+    .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;
+    }
+}
+
 /*
 ============================
 SECTIONS