first run at top main grid area
This commit is contained in:
parent
4504f9852a
commit
7c3bf6cee8
@ -39,10 +39,12 @@
|
|||||||
'post_status' => 'publish'
|
'post_status' => 'publish'
|
||||||
);
|
);
|
||||||
query_posts($post_section_two_args);
|
query_posts($post_section_two_args);
|
||||||
|
?><div class="st-article-section-sub-article-stack"><?php
|
||||||
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-sub-article">
|
<article class="st-article-section-sub-article">
|
||||||
<a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link">
|
<a href="<?php the_permalink(); ?>" class="st-article-section-sub-article__image-link">
|
||||||
<?php the_post_thumbnail(); ?>
|
<?php the_post_thumbnail(); ?>
|
||||||
@ -58,6 +60,7 @@
|
|||||||
endif;
|
endif;
|
||||||
wp_reset_postdata();
|
wp_reset_postdata();
|
||||||
?>
|
?>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="st-ad-section st-ad-section__top">
|
<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">
|
<img src="/wp-content/themes/slowtwitch-news/assets/images/vertical-ad-mock.jpg" alt="Ad Mock" class="st-ad-section-vertical-ad">
|
||||||
@ -67,81 +70,21 @@
|
|||||||
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-shop-card__img">
|
<img src="/wp-content/themes/slowtwitch-news/assets/images/slowtwitch-shop.png" alt="" class="st-ad-section-shop-card__img">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</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>
|
</section>
|
||||||
<!-- TECH SECTION -->
|
<!-- TECH SECTION -->
|
||||||
<section class="st-article-section st-article-section-bottom">
|
<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>
|
<h2 class="st-article-section-title">Tech <a href="<?php echo home_url() . '/tech'; ?>" class="st-article-section-category-link">></a></h2>
|
||||||
<?php
|
<?php
|
||||||
|
$section_category = 'Tech';
|
||||||
$post_section_three_featured_args = array(
|
$post_section_three_featured_args = array(
|
||||||
'showposts' => 1,
|
'showposts' => 1,
|
||||||
'category_name' => 'Tech',
|
'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' => 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">
|
|
||||||
<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',
|
'orderby' => 'post_date',
|
||||||
'order' => 'DESC',
|
'order' => 'DESC',
|
||||||
'post_type' => 'post',
|
'post_type' => 'post',
|
||||||
@ -174,13 +117,14 @@
|
|||||||
$post_section_two_args = array(
|
$post_section_two_args = array(
|
||||||
'showposts' => 5,
|
'showposts' => 5,
|
||||||
'offset' => 1,
|
'offset' => 1,
|
||||||
'category_name' => 'Products',
|
'category_name' => $section_category,
|
||||||
'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_two_args);
|
query_posts($post_section_two_args);
|
||||||
|
?><div class="st-article-section-sub-article-stack"><?php
|
||||||
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 );
|
||||||
@ -198,9 +142,14 @@
|
|||||||
<?php
|
<?php
|
||||||
endwhile;
|
endwhile;
|
||||||
endif; ?>
|
endif; ?>
|
||||||
<!-- TODO: Insert section sidebar here -->
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- TODO: Insert flat section for shop links -->
|
<section class="st-newsletter-signup">
|
||||||
|
<!-- TODO: Insert flat section for newsletter signup -->
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<!-- REPEAT TOP PATTERN WITH NEW ARTICLES AND ADS -->
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<?php get_footer() ?>
|
<?php get_footer() ?>
|
||||||
237
style.css
237
style.css
@ -51,6 +51,12 @@ h1 {
|
|||||||
transform: scale(0,0);
|
transform: scale(0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 760px) {
|
||||||
|
.st-site-title {
|
||||||
|
font-size: 6.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
============================
|
============================
|
||||||
LAYOUT
|
LAYOUT
|
||||||
@ -59,27 +65,16 @@ LAYOUT
|
|||||||
|
|
||||||
.st-main-grid {
|
.st-main-grid {
|
||||||
display: 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 > * {
|
.st-main-grid > * {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 550px) {
|
@media (min-width: 760px) {
|
||||||
.st-main-grid {
|
.st-main-grid {
|
||||||
grid-template-columns: minmax(1em, 1fr) minmax(500px, 1280px) minmax(1em, 1fr);
|
grid-template-columns: minmax(1em, 1fr) minmax(500px, 1400px) 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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -318,12 +313,7 @@ SECTIONS
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/* article section */
|
||||||
============================
|
|
||||||
COMPONENTS
|
|
||||||
============================
|
|
||||||
*/
|
|
||||||
/* main article card */
|
|
||||||
|
|
||||||
.st-article-section,
|
.st-article-section,
|
||||||
.st-ad-section {
|
.st-ad-section {
|
||||||
@ -352,10 +342,137 @@ COMPONENTS
|
|||||||
color: black;
|
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 {
|
.st-article-section-main-article__image-link img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 10px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.st-article-section-main-article__category-link {
|
.st-article-section-main-article__category-link {
|
||||||
@ -396,6 +513,31 @@ COMPONENTS
|
|||||||
font-size: .5em;
|
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 */
|
/* sub article card */
|
||||||
|
|
||||||
.st-article-section-sub-article {
|
.st-article-section-sub-article {
|
||||||
@ -442,6 +584,23 @@ COMPONENTS
|
|||||||
margin-top: .2em;
|
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 */
|
/* chips */
|
||||||
|
|
||||||
.st-chip {
|
.st-chip {
|
||||||
@ -476,39 +635,3 @@ COMPONENTS
|
|||||||
color: #454545;
|
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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user