Inital layout of home page
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
16
css/page.css
16
css/page.css
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
42
theme/front-page.php
Normal 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() ?>
|
||||||
@@ -4,17 +4,15 @@
|
|||||||
<?php get_template_part('partials/logo') ?>
|
<?php get_template_part('partials/logo') ?>
|
||||||
</section>
|
</section>
|
||||||
<section class="page__content">
|
<section class="page__content">
|
||||||
|
<h1 class="title">
|
||||||
|
<a href="<?php the_permalink(); ?>">
|
||||||
|
<?php the_title(); ?>
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1 class="title">
|
<?php the_content(); ?>
|
||||||
<a href="<?php the_permalink(); ?>">
|
|
||||||
<?php the_title(); ?>
|
|
||||||
</a>
|
|
||||||
</h1>
|
|
||||||
<div class="content">
|
|
||||||
<?php the_content(); ?>
|
|
||||||
</div>
|
|
||||||
<?php get_template_part('partials/archive') ?>
|
|
||||||
</div>
|
</div>
|
||||||
|
<?php get_template_part('partials/archive') ?>
|
||||||
</section>
|
</section>
|
||||||
<section class="page__banner">
|
<section class="page__banner">
|
||||||
<?php get_template_part('partials/banner') ?>
|
<?php get_template_part('partials/banner') ?>
|
||||||
|
|||||||
@@ -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">
|
||||||
|
<h1 class="title">
|
||||||
|
<?php the_title(); ?>
|
||||||
|
</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1 class="title">
|
|
||||||
<?php the_title(); ?>
|
|
||||||
</h1>
|
|
||||||
<?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">
|
||||||
|
|||||||
42
theme/partials/excerpt.php
Normal file
42
theme/partials/excerpt.php
Normal 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>
|
||||||
@@ -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; ?>
|
||||||
|
|||||||
@@ -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>
|
||||||
<ol>
|
<?php endif; ?>
|
||||||
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
|
<ol>
|
||||||
<?php $username = get_the_author_meta('nickname') ?>
|
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
|
||||||
<?php $date = get_the_date('jS F, Y', $id).' at '.get_the_date('H:i', $id) ?>
|
<li>
|
||||||
<li>
|
<?php
|
||||||
<div class="excerpt">
|
$excerpt = array(
|
||||||
<div class="excerpt__head">
|
title => get_the_title(),
|
||||||
<div class="excerpt__title">
|
url => get_the_permalink(),
|
||||||
<a class="link" href="<?php the_permalink(); ?>">
|
content => get_the_excerpt(),
|
||||||
<?php the_title(); ?>
|
author => get_the_author_meta('nickname'),
|
||||||
</a>
|
comments => get_comments_number(),
|
||||||
</div>
|
date => get_the_date('jS F, Y', $id) . ' at ' . get_the_date('H:i', $id),
|
||||||
</div>
|
);
|
||||||
<div class="excerpt__body">
|
get_template_part('partials/excerpt')
|
||||||
<?php echo the_excerpt() ?>
|
?>
|
||||||
</div>
|
</li>
|
||||||
<div class="excerpt__foot">
|
<?php endwhile; endif; ?>
|
||||||
<p class="excerpt__metadata">
|
</ol>
|
||||||
<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>
|
|
||||||
<?php endwhile; ?>
|
|
||||||
</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>
|
||||||
|
|||||||
@@ -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>
|
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
||||||
<div class="article__content">
|
|
||||||
<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">
|
||||||
|
|||||||
@@ -4,17 +4,17 @@
|
|||||||
<?php get_template_part('partials/logo') ?>
|
<?php get_template_part('partials/logo') ?>
|
||||||
</section>
|
</section>
|
||||||
<section class="page__content">
|
<section class="page__content">
|
||||||
|
<h1 class="title">
|
||||||
|
<span class="title__icon">
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-tag"></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="title__text">
|
||||||
|
<?php echo single_tag_title() ?>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1 class="title">
|
|
||||||
<span class="title__icon">
|
|
||||||
<svg class="icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-tag"></use>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span class="title__text">
|
|
||||||
<?php echo single_tag_title() ?>
|
|
||||||
</span>
|
|
||||||
</h1>
|
|
||||||
<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">
|
||||||
|
<h1 class="title">Sorry, no results found.</h1>
|
||||||
<div class="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>
|
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user