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

front page main section drft 1

Browse Source
This commit is contained in:
Ross Trottier 2024-07-01 08:13:12 -06:00
parent 26481a33f8
commit 527afe8fec
2 changed files with 139 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
front-page.php
View File

@ -152,7 +152,41 @@
</section>
<!-- FLAT HORIZONTAL SECTION HERE -->
<section class="st-article-section st-article-section-wide">
<h2 class="st-article-section-title">Gravel <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
<?php
$section_category = 'Gravel';
$post_section_three_featured_args = array(
'showposts' => 4,
'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-wide-article">
<a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
<?php the_post_thumbnail(); ?>
</a>
<div class="st-article-section-wide-article__text-container">
<a href="<?php echo home_url($category->slug); ?>" class="st-article-section-wide-article__category-link"><?php echo $category->name; ?></a>
<a class="st-article-section-wide-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="st-article-section-wide-article__excerpt"><?php the_excerpt(); ?></p>
</div>
</a>
</article>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</section>
<!-- LATEST SECTION -->
<section class="st-article-section-grid">
<section class="st-article-section st-article-section-highlight">
@ -312,7 +346,42 @@
<!-- MORE STUFF HERE -->
</section>
</section>
<!-- FLAT HORIZONTAL SECTION HERE -->
<section class="st-article-section st-article-section-wide">
<h2 class="st-article-section-title">Race Reports <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
<?php
$section_category = 'race-reports';
$post_section_three_featured_args = array(
'showposts' => 4,
'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-wide-article">
<a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
<?php the_post_thumbnail(); ?>
</a>
<div class="st-article-section-wide-article__text-container">
<a href="<?php echo home_url($category->slug); ?>" class="st-article-section-wide-article__category-link"><?php echo $category->name; ?></a>
<a class="st-article-section-wide-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<p class="st-article-section-wide-article__excerpt"><?php the_excerpt(); ?></p>
</div>
</a>
</article>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</section>
</main>
<?php get_footer() ?>

70
style.css
View File

@ -395,6 +395,16 @@ SECTIONS
.st-article-section-main-article__bottom {
display: none;
}
.st-article-section-wide {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
}
.st-article-section-wide .st-article-section-title {
grid-column: 1 / span 2;
}
}
@media (min-width: 1200px) {
@ -418,6 +428,14 @@ SECTIONS
.st-article-section-bottom {
grid-area: article-secondary;
}
.st-article-section-wide {
grid-template-columns: repeat(4, 1fr);
}
.st-article-section-wide .st-article-section-title {
grid-column: 1 / span 4;
}
}
/* ad section */
@ -436,7 +454,7 @@ SECTIONS
justify-content: flex-start;
border-bottom: none;
padding-left: 1em;
border-left: 1px #cec9c2 solid;
border-left: 1px #0b4fa0 solid;
margin-bottom: 0;
}
}
@ -586,6 +604,56 @@ COMPONENTS
}
}
/* sub article wide card */
.st-article-section-wide-article {
display: flex;
flex-direction: column;
margin-top: 1em;
}
.st-article-section-wide-article__image-link img {
max-width: 100%;
height: auto;
aspect-ratio: 1.5;
object-fit: cover;
object-position: center;
border-radius: 5px;
}
.st-article-section-wide-article__category-link {
text-decoration: none;
color: #fff;
padding: .3em .75em;
background: #0b4fa0;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.st-article-section-wide-article__title {
text-decoration: none;
color: #454545;
font-size: 1.2rem;
line-height: 1.2;
}
.st-article-section-wide-article__title h3 {
margin: .25em 0;
}
.st-article-section-wide-article__excerpt {
font-size: .75em;
margin: 0;
}
.st-article-section-wide-article__author-link {
text-decoration: none;
color: #8b8680;
font-size: .5em;
}
/* chips */
.st-chip {