Inital layout of home page

This commit is contained in:
2019-01-06 13:29:25 +00:00
parent 7769bf9f16
commit e8f563b196
12 changed files with 167 additions and 88 deletions

View File

@@ -1,10 +1,13 @@
.excerpt { .excerpt {
border-bottom: 1px solid var(--color-light-grey);
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
padding-bottom: var(--space-sm);
} }
@media (--viewport-md) { @media (--viewport-md) {
.excerpt { .excerpt {
margin-bottom: var(--space-md); margin-bottom: var(--space-md);
padding-bottom: var(--space-md);
} }
} }
@@ -14,6 +17,14 @@
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
} }
@media (--viewport-md) {
.excerpt__head,
.excerpt__body,
.excerpt__title {
margin-bottom: var(--space-sm);
}
}
.excerpt__metadata { .excerpt__metadata {
color: var(--color-grey); color: var(--color-grey);
font-size: 12px; font-size: 12px;

View File

@@ -83,7 +83,21 @@
@media (--viewport-xl) { @media (--viewport-xl) {
.page { .page {
grid-template-columns: 224px 1fr 1fr; grid-template-columns: 224px 1fr;
grid-template-rows: 32px 162px 1fr; grid-template-rows: 32px 162px 1fr;
} }
.page__content--2col {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--space-md);
}
.page__content-item {
display: flex;
}
.page__content-item--full-width {
grid-column: 1 / -1;
}
} }

View File

@@ -1,11 +1,13 @@
.title { .title {
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
font-size: 1.8rem;
color: var(--color-dark-blue); color: var(--color-dark-blue);
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
} }
@media (--viewport-md) { @media (--viewport-md) {
.title { .title {
font-size: 2.4rem;
margin-bottom: var(--space-md); margin-bottom: var(--space-md);
} }
} }

View File

@@ -4,10 +4,8 @@
<?php get_template_part('partials/logo') ?> <?php get_template_part('partials/logo') ?>
</section> </section>
<section class="page__content"> <section class="page__content">
<div class="content">
<h1 class="title">404 - Page not found</h1> <h1 class="title">404 - Page not found</h1>
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a> <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
</div>
</section> </section>
<section class="page__banner"> <section class="page__banner">
<?php get_template_part('partials/banner') ?> <?php get_template_part('partials/banner') ?>

42
theme/front-page.php Normal file
View File

@@ -0,0 +1,42 @@
<?php get_header() ?>
<main class="page">
<section class="page__logo">
<?php get_template_part('partials/logo') ?>
</section>
<section class="page__content page__content--2col">
<div class="page__content-item page__content-item--full-width">
<h2 class="title">Latest articles</h2>
</div>
<?php
$posts = get_posts(array(
numberposts => 4,
));
foreach ($posts as $post) {
$date = strtotime($post->post_date);
$year = date('Y', $date);
$month = date('F', $date);
$day = date('jS', $date);
$date = get_the_date('jS F, Y', $post->ID).' at '.get_the_date('H:i', $post->ID);
$excerpt = array(
title => $post->post_title,
url => get_permalink($post->ID),
content => $post->post_excerpt,
author => get_the_author_meta('nickname', $post->post_author),
comments => $post->comment_count,
date => $date,
);
echo '<div class="page__content-item">';
get_template_part('partials/excerpt');
echo '</div>';
}
?>
</section>
<section class="page__banner">
<?php get_template_part('partials/banner') ?>
</section>
<section class="page__footer">
<?php get_template_part('partials/footer') ?>
</section>
</main>
<?php get_template_part('partials/navigation') ?>
<?php get_footer() ?>

View File

@@ -4,7 +4,6 @@
<?php get_template_part('partials/logo') ?> <?php get_template_part('partials/logo') ?>
</section> </section>
<section class="page__content"> <section class="page__content">
<div class="content">
<h1 class="title"> <h1 class="title">
<a href="<?php the_permalink(); ?>"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?> <?php the_title(); ?>
@@ -14,7 +13,6 @@
<?php the_content(); ?> <?php the_content(); ?>
</div> </div>
<?php get_template_part('partials/archive') ?> <?php get_template_part('partials/archive') ?>
</div>
</section> </section>
<section class="page__banner"> <section class="page__banner">
<?php get_template_part('partials/banner') ?> <?php get_template_part('partials/banner') ?>

View File

@@ -5,21 +5,18 @@
</section> </section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?> <?php if (have_posts()): while (have_posts()) : the_post(); ?>
<section class="page__content"> <section class="page__content">
<div class="content">
<h1 class="title"> <h1 class="title">
<?php the_title(); ?> <?php the_title(); ?>
</h1> </h1>
<div class="content">
<?php the_content(); ?> <?php the_content(); ?>
</div> </div>
</div>
</section> </section>
<?php endwhile; ?> <?php endwhile; ?>
<?php else: ?> <?php else: ?>
<section class="page__content"> <section class="page__content">
<div class="content">
<h1 class="title">Sorry, there is no article to display</h1> <h1 class="title">Sorry, there is no article to display</h1>
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a> <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
</div>
</section> </section>
<?php endif; ?> <?php endif; ?>
<section class="page__banner"> <section class="page__banner">

View File

@@ -0,0 +1,42 @@
<?php
global $excerpt;
?>
<div class="excerpt">
<div class="excerpt__head">
<div class="excerpt__title">
<a class="link" href="<?php echo $excerpt['url'] ?>">
<?php echo $excerpt['title'] ?>
</a>
</div>
</div>
<div class="excerpt__body">
<?php echo $excerpt['content'] ?>
</div>
<div class="excerpt__foot">
<p class="excerpt__metadata">
<span class="excerpt__icon">
<svg class="icon icon--extra-small" aria-hidden="true">
<use xlink:href="#icon-profile"></use>
</svg>
</span>
<span class="excerpt__text"><?php echo $excerpt['author'] ?></span>
<span class="excerpt__icon">
<svg class="icon icon--extra-small" aria-hidden="true">
<use xlink:href="#icon-calendar"></use>
</svg>
</span>
<span class="excerpt__text"><?php echo $excerpt['date'] ?></span>
<span class="excerpt__icon">
<svg class="icon icon--extra-small" aria-hidden="true">
<use xlink:href="#icon-comments"></use>
</svg>
</span>
<span class="excerpt__text">
<?php
$number = $excerpt['comments'];
echo $number === '1' ? '1 comment' : $number . ' comments';
?>
</span>
</p>
</div>
</div>

View File

@@ -40,6 +40,7 @@ function format_link($link) {
return $link; return $link;
} }
if (count($links) > 1) :
?> ?>
<div class="pagination"> <div class="pagination">
<?php if ($current > 1) : ?> <?php if ($current > 1) : ?>
@@ -71,3 +72,4 @@ function format_link($link) {
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php endif; ?>

View File

@@ -1,68 +1,45 @@
<?php <?php
global $wp_query; global $wp_query;
get_header(); get_header();
$query = $_GET['s'];
$results = $wp_query->found_posts;
?> ?>
<main class="page"> <main class="page">
<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"> <section class="page__content">
<div class="content"> <?php if ($results === 0) : ?>
<h1 class="title">Sorry, no results found.</h1>
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
<?php else : ?>
<h1 class="title"> <h1 class="title">
<?php <?php
$query = $_GET['s']; echo $results.' result'.($results !== '1' ? 's' : '').' matching "' . $query . '" found.';
echo $wp_query->found_posts.' results matching "' . $query . '" found.';
?> ?>
</h1> </h1>
<?php endif; ?>
<ol> <ol>
<?php if (have_posts()): while (have_posts()) : the_post(); ?> <?php if (have_posts()): while (have_posts()) : the_post(); ?>
<?php $username = get_the_author_meta('nickname') ?>
<?php $date = get_the_date('jS F, Y', $id).' at '.get_the_date('H:i', $id) ?>
<li> <li>
<div class="excerpt"> <?php
<div class="excerpt__head"> $excerpt = array(
<div class="excerpt__title"> title => get_the_title(),
<a class="link" href="<?php the_permalink(); ?>"> url => get_the_permalink(),
<?php the_title(); ?> content => get_the_excerpt(),
</a> author => get_the_author_meta('nickname'),
</div> comments => get_comments_number(),
</div> date => get_the_date('jS F, Y', $id) . ' at ' . get_the_date('H:i', $id),
<div class="excerpt__body"> );
<?php echo the_excerpt() ?> get_template_part('partials/excerpt')
</div> ?>
<div class="excerpt__foot">
<p class="excerpt__metadata">
<span class="excerpt__icon">
<svg class="icon icon--extra-small" aria-hidden="true">
<use xlink:href="#icon-profile"></use>
</svg>
</span>
<span class="excerpt__text"><?php echo $username ?></span>
<span class="excerpt__icon">
<svg class="icon icon--extra-small" aria-hidden="true">
<use xlink:href="#icon-calendar"></use>
</svg>
</span>
<span class="excerpt__text"><?php echo $date ?></span>
</p>
</div>
</div>
</li> </li>
<?php endwhile; ?> <?php endwhile; endif; ?>
</ol> </ol>
</div>
</section> </section>
<section class="page__pagination"> <section class="page__pagination">
<?php get_template_part('partials/pagination') ?> <?php get_template_part('partials/pagination') ?>
</section> </section>
<?php else: ?>
<section class="page__content">
<div class="content">
<h1 class="title">Sorry, no results found.</h1>
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
</div>
</section>
<?php endif; ?>
<section class="page__banner"> <section class="page__banner">
<?php get_template_part('partials/banner') ?> <?php get_template_part('partials/banner') ?>
</section> </section>

View File

@@ -32,13 +32,9 @@
</section> </section>
<?php endwhile; ?> <?php endwhile; ?>
<?php else: ?> <?php else: ?>
<section class="page__article is-first"> <section class="page__content">
<article class="article">
<h1 class="title">Sorry, there is no article to display</h1> <h1 class="title">Sorry, there is no article to display</h1>
<div class="article__content"> <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
<a class="link" href="<?php get_site_url() ?>/">Go back home</a>
</div>
</article>
</section> </section>
<?php endif; ?> <?php endif; ?>
<section class="page__banner"> <section class="page__banner">

View File

@@ -4,7 +4,6 @@
<?php get_template_part('partials/logo') ?> <?php get_template_part('partials/logo') ?>
</section> </section>
<section class="page__content"> <section class="page__content">
<div class="content">
<h1 class="title"> <h1 class="title">
<span class="title__icon"> <span class="title__icon">
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
@@ -15,6 +14,7 @@
<?php echo single_tag_title() ?> <?php echo single_tag_title() ?>
</span> </span>
</h1> </h1>
<div class="content">
<ol> <ol>
<?php if (have_posts()): while (have_posts()) : the_post(); ?> <?php if (have_posts()): while (have_posts()) : the_post(); ?>
<?php $username = get_the_author_meta('nickname') ?> <?php $username = get_the_author_meta('nickname') ?>
@@ -58,8 +58,8 @@
</section> </section>
<?php else: ?> <?php else: ?>
<section class="page__content"> <section class="page__content">
<div class="content">
<h1 class="title">Sorry, no results found.</h1> <h1 class="title">Sorry, no results found.</h1>
<div class="content">
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a> <a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
</div> </div>
</section> </section>