ross/slowtwitch-news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started desktop grid area

Browse Source
This commit is contained in:
Ross Trottier 2024-06-28 11:48:19 -06:00
parent d50a7cae3e
commit 4504f9852a
2 changed files with 142 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
front-page.php
View File

@ -2,137 +2,139 @@
<main class="st-main st-main-grid"> <main class="st-main st-main-grid">
<!-- LATEST SECTION --> <!-- LATEST SECTION -->
<section class="st-article-section st-article-section__top"> <section class="st-article-section-grid">
<h2 class="st-article-section-title">Latest <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2> <section class="st-article-section st-article-section-highlight">
<?php <h2 class="st-article-section-title">Latest <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
query_posts('showposts=1'); <?php
if (have_posts()) : while (have_posts()) : the_post(); query_posts('showposts=1');
$category = get_the_category()[0]; if (have_posts()) : while (have_posts()) : the_post();
$author = get_userdata( $post->post_author ); $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> <article class="st-article-section-main-article">
<section class="st-ad-section st-ad-section__top"> <a href="<?php the_permalink(); ?>" class="st-article-section-main-article__image-link">
<img src="/wp-content/themes/slowtwitch-news/assets/images/vertical-ad-mock.jpg" alt="Ad Mock" class="st-ad-section-vertical-ad"> <?php the_post_thumbnail(); ?>
<a href="https://shop.slowtwitch.com/" class="st-ad-section-shop-card-link"> </a>
<div class="st-ad-section-shop-card"> <a href="<?php echo home_url($category->slug); ?>" class="st-article-section-main-article__category-link"><?php echo $category->name; ?></a>
<h3 class="st-ad-section-shop-card__title">Save Big On Gear at the Slowtwitch Shop <span>></span></h3> <a class="st-article-section-main-article__title" href="<?php the_permalink(); ?>">
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-shop-card__img"> <h3><?php the_title(); ?></h3>
</div> </a>
</a>
</section> <p class="st-article-section-main-article__excerpt"><?php echo get_the_excerpt(); ?></p>
<!-- TECH SECTION --> <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>
<section class="st-article-section"> </article>
<h2 class="st-article-section-title">Tech <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2>
<?php <?php
$post_section_three_featured_args = array( endwhile;
'showposts' => 1, 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', 'category_name' => 'Tech',
'orderby' => 'post_date', 'orderby' => 'post_date',
'order' => 'DESC', 'order' => 'DESC',
'post_type' => 'post', 'post_type' => 'post',
'post_status' => 'publish' 'post_status' => 'publish'
); );
query_posts($post_section_three_featured_args); query_posts($post_section_two_args);
if (have_posts()) : while (have_posts()) : the_post(); if (have_posts()) : while (have_posts()) : the_post();
$category = get_the_category()[0]; $category = get_the_category()[0];
$author = get_userdata( $post->post_author ); $author = get_userdata( $post->post_author );
?> ?>
<article class="st-article-section-main-article"> <article class="st-article-section-sub-article">
<a href="<?php the_permalink(); ?>" class="st-article-section-main-article__image-link"> <a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link">
<?php the_post_thumbnail(); ?> <?php the_post_thumbnail(); ?>
</a> </a>
<a href="<?php echo home_url($category->slug); ?>" class="st-article-section-main-article__category-link"><?php echo $category->name; ?></a> <div class="st-article-section-sub-article__text-container">
<a class="st-article-section-main-article__title" href="<?php the_permalink(); ?>"> <a href="<?php echo home_url($category->slug); ?>" class="st-article-section-sub-article__category-link"><?php echo $category->name; ?></a>
<h3><?php the_title(); ?></h3> <a class="st-article-section-sub-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
</a> </div>
</a>
<p class="st-article-section-main-article__excerpt"><?php echo get_the_excerpt(); ?></p> </article>
<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> <?php
</article> endwhile;
endif; ?>
<?php </section>
endwhile; <section class="st-newsletter-signup">
endif; <!-- TODO: Insert flat section for newsletter signup -->
</section>
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 -->
</section> </section>
<section class="st-article-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> <h2 class="st-article-section-title">Products <a href="<?php echo home_url() . '/products'; ?>" class="st-article-section-category-link">></a></h2>

17
style.css
View File

@ -66,6 +66,23 @@ LAYOUT
grid-column: 2; 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 SECTIONS