Oblique metadata text
Make excerpt comments a link
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
|
||||
.comment__date {
|
||||
font-size: var(--size-body-extra-small);
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
.comment__body {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user