Oblique metadata text

Make excerpt comments a link
This commit is contained in:
2019-01-19 15:03:39 +00:00
parent e83f7c4eb8
commit 84882ce8c0
7 changed files with 68 additions and 58 deletions

View File

@@ -15,7 +15,13 @@
}
}
.article__date-text {
margin-left: var(--space-xs);
vertical-align: top;
.article__date-icon {
vertical-align: middle;
}
.article__date-text {
margin-left: var(--space-xxs);
vertical-align: middle;
font-style: oblique;
font-size: var(--size-body-small);
}

View File

@@ -22,6 +22,7 @@
.comment__date {
font-size: var(--size-body-extra-small);
font-style: oblique;
}
.comment__body {

View File

@@ -39,10 +39,12 @@
.excerpt__icon,
.excerpt__text {
font-weight: 100;
vertical-align: top;
}
.excerpt__text {
font-style: oblique;
margin: 0 var(--space-sm) 0 var(--space-xxs);
}
@@ -81,3 +83,22 @@
width: 0.1rem;
background-color: var(--color-light-blue);
}
.excerpt__list-link {
color: inherit;
transition: color var(--transition-md) ease-out;
}
.excerpt__list-link:visited {
color: inherit;
}
.excerpt__list-link:hover,
.excerpt__list-link:focus {
color: var(--color-light-blue);
}
.excerpt__list-link:hover .excerpt__text,
.excerpt__list-link:focus .excerpt__text {
box-shadow: var(--link-focus);
}

View File

@@ -56,6 +56,7 @@
}
.metadata__text {
font-style: oblique;
margin-left: var(--space-xs);
text-transform: capitalize;
transition: box-shadow var(--transition-md) ease-out;

View File

@@ -31,17 +31,19 @@ global $excerpt;
<span class="excerpt__text"><?php echo $excerpt['date'] ?></span>
</li>
<li class="excerpt__list-item">
<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>
<a class="excerpt__list-link" href="<?php the_permalink() ?>#comments">
<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>
</a>
</li>
</ul>
</div>

View File

@@ -7,9 +7,11 @@
<section class="page__article is-first">
<article class="article">
<div class="article__date">
<svg class="icon icon--small">
<use xlink:href="#icon-calendar"></use>
</svg>
<span class="article__date-icon">
<svg class="icon icon--extra-small">
<use xlink:href="#icon-calendar"></use>
</svg>
</span>
<span class="article__date-text">
<?php the_time(get_option('date_format')) ?>
</span>

View File

@@ -14,44 +14,23 @@
<?php echo single_tag_title() ?>
</span>
</h1>
<div class="content">
<ol>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<?php $username = get_the_author_meta('nickname') ?>
<?php $date = get_the_date(get_option('date_format'), $id).' at '.get_the_date(get_option('time_format'), $id) ?>
<li>
<div class="excerpt">
<div class="excerpt__head">
<div class="excerpt__title">
<a class="link" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
</div>
<div class="excerpt__body">
<?php echo the_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>
<?php endwhile; ?>
</ol>
</div>
<ol>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<li>
<?php
$excerpt = array(
title => get_the_title(),
url => get_the_permalink(),
content => get_the_excerpt(),
author => get_the_author_meta('nickname'),
comments => get_comments_number(),
date => get_the_date(get_option('date_format'), $id) . ' at ' . get_the_date(get_option('time_format'), $id),
);
get_template_part('partials/excerpt');
?>
</li>
<?php endwhile; ?>
</ol>
</section>
<section class="page__pagination">
<?php get_template_part('partials/pagination') ?>
@@ -59,9 +38,7 @@
<?php else: ?>
<section class="page__content">
<h1 class="title">Sorry, no results found.</h1>
<div class="content">
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
</div>
<a class="link" href="<?php echo get_site_url() ?>/">Go back home</a>
</section>
<?php endif; ?>
<section class="page__banner">