started desktop grid area
This commit is contained in:
parent
d50a7cae3e
commit
4504f9852a
248
front-page.php
248
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>
|
||||
|
||||
17
style.css
17
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user