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

front page checkpoint

Browse Source
This commit is contained in:
Ross Trottier 2024-06-28 16:40:09 -06:00
parent 7c3bf6cee8
commit 26481a33f8
2 changed files with 224 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
front-page.php
View File

@ -70,10 +70,10 @@
<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">
<a href="https://classified.slowtwitch.com/" class="st-ad-section-shop-card-link">
<div class="st-ad-section-classifieds-card">
<h3 class="st-ad-section-classifieds-card__title">Buy and Sell Gear on Our Classifieds <span>></span></h3>
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-classifieds-card__img">
</div>
</a>
</section>
@ -141,14 +141,177 @@
</article>
<?php
endwhile;
endif; ?>
endif;
wp_reset_postdata();
?>
</div>
</section>
<section class="st-newsletter-signup">
<!-- TODO: Insert flat section for newsletter signup -->
<!-- MORE STUFF HERE -->
</section>
</section>
<!-- FLAT HORIZONTAL SECTION HERE -->
<!-- LATEST SECTION -->
<section class="st-article-section-grid">
<section class="st-article-section st-article-section-highlight">
<h2 class="st-article-section-title">Lifestyle <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
<?php
$section_category = 'Lifestyle';
$post_section_three_featured_args = array(
'showposts' => 1,
'category_name' => $section_category,
'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' => $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 );
?>
<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();
?>
</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">
<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>
<a href="https://classified.slowtwitch.com/" class="st-ad-section-shop-card-link">
<div class="st-ad-section-classifieds-card">
<h3 class="st-ad-section-classifieds-card__title">Buy and Sell Gear on Our Classifieds <span>></span></h3>
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-classifieds-card__img">
</div>
</a>
</section>
<section class="st-article-section st-article-section-bottom">
<h2 class="st-article-section-title">Opinion <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2>
<?php
$section_category = 'Opinion';
$post_section_three_featured_args = array(
'showposts' => 1,
'category_name' => $section_category,
'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' => $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 );
?>
<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();
?>
</div>
</section>
<section class="st-newsletter-signup">
<!-- MORE STUFF HERE -->
</section>
</section>
<!-- REPEAT TOP PATTERN WITH NEW ARTICLES AND ADS -->
</main>

81
style.css
View File

@ -57,6 +57,18 @@ h1 {
}
}
@media (min-width: 1200px) {
.st-site-title {
font-size: 11rem;
}
}
@media (min-width: 1400px) {
.st-site-title {
font-size: 13.3rem;
}
}
/*
============================
LAYOUT
@ -416,34 +428,7 @@ SECTIONS
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 {
@ -635,3 +620,45 @@ COMPONENTS
color: #454545;
}
/* shop card */
.st-ad-section-shop-card,
.st-ad-section-classifieds-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,
.st-ad-section-classifieds-card__title {
display: flex;
justify-content: space-between;
font-size: 1.5rem;
letter-spacing: 1px;
margin-top: 0;
}
.st-ad-section-shop-card-link,
.st-ad-section-classifieds-card-link {
text-decoration: none;
color: #414b4c;
}
.st-ad-section-shop-card__img,
.st-ad-section-classifieds-card__img {
max-width: 100%;
margin-bottom: 0;
}
.st-ad-section-classifieds-card {
background-color: #270BA1;
}
.st-ad-section-classifieds-card__title {
color: white;
}