dan/windycoys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Flexbox for excerpt layout

Browse Source
This commit is contained in:
Dan Head
2019-01-06 17:05:13 +00:00
parent e8f563b196
commit 5f7c0758ca
3 changed files with 22 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/excerpt.css
View File

@@ -1,4 +1,7 @@
.excerpt { .excerpt {
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
border-bottom: 1px solid var(--color-light-grey); border-bottom: 1px solid var(--color-light-grey);
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
padding-bottom: var(--space-sm); padding-bottom: var(--space-sm);
@@ -17,6 +20,10 @@
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
} }
.excerpt__body {
flex-grow: 1;
}
@media (--viewport-md) { @media (--viewport-md) {
.excerpt__head, .excerpt__head,
.excerpt__body, .excerpt__body,

15
css/page.css
View File

@@ -87,17 +87,14 @@
grid-template-rows: 32px 162px 1fr; grid-template-rows: 32px 162px 1fr;
} }
.page__content--2col { .page__columns {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--space-md);
}
.page__content-item {
display: flex; display: flex;
flex-flow: row wrap;
} }
.page__content-item--full-width { .page__cell {
grid-column: 1 / -1; display: flex;
flex-flow: column nowrap;
flex: 1 0 50%;
} }
} }

13
theme/front-page.php
View File

@@ -3,10 +3,9 @@
<section class="page__logo"> <section class="page__logo">
<?php get_template_part('partials/logo') ?> <?php get_template_part('partials/logo') ?>
</section> </section>
<section class="page__content page__content--2col"> <section class="page__content">
<div class="page__content-item page__content-item--full-width">
<h2 class="title">Latest articles</h2> <h2 class="title">Latest articles</h2>
</div> <div class="page__columns">
<?php <?php
$posts = get_posts(array( $posts = get_posts(array(
numberposts => 4, numberposts => 4,
@@ -17,19 +16,23 @@
$month = date('F', $date); $month = date('F', $date);
$day = date('jS', $date); $day = date('jS', $date);
$date = get_the_date('jS F, Y', $post->ID).' at '.get_the_date('H:i', $post->ID); $date = get_the_date('jS F, Y', $post->ID).' at '.get_the_date('H:i', $post->ID);
$content = (strlen($post->post_excerpt) === 0) ?
strip_tags(substr($post->post_content, 0, 200)).'...' :
$post->post_excerpt;
$excerpt = array( $excerpt = array(
title => $post->post_title, title => $post->post_title,
url => get_permalink($post->ID), url => get_permalink($post->ID),
content => $post->post_excerpt, content => $content,
author => get_the_author_meta('nickname', $post->post_author), author => get_the_author_meta('nickname', $post->post_author),
comments => $post->comment_count, comments => $post->comment_count,
date => $date, date => $date,
); );
echo '<div class="page__content-item">'; echo '<div class="page__cell">';
get_template_part('partials/excerpt'); get_template_part('partials/excerpt');
echo '</div>'; echo '</div>';
} }
?> ?>
</div>
</section> </section>
<section class="page__banner"> <section class="page__banner">
<?php get_template_part('partials/banner') ?> <?php get_template_part('partials/banner') ?>