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 { .article__date-icon {
margin-left: var(--space-xs); vertical-align: middle;
vertical-align: top; }
.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 { .comment__date {
font-size: var(--size-body-extra-small); font-size: var(--size-body-extra-small);
font-style: oblique;
} }
.comment__body { .comment__body {

View File

@@ -39,10 +39,12 @@
.excerpt__icon, .excerpt__icon,
.excerpt__text { .excerpt__text {
font-weight: 100;
vertical-align: top; vertical-align: top;
} }
.excerpt__text { .excerpt__text {
font-style: oblique;
margin: 0 var(--space-sm) 0 var(--space-xxs); margin: 0 var(--space-sm) 0 var(--space-xxs);
} }
@@ -81,3 +83,22 @@
width: 0.1rem; width: 0.1rem;
background-color: var(--color-light-blue); 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 { .metadata__text {
font-style: oblique;
margin-left: var(--space-xs); margin-left: var(--space-xs);
text-transform: capitalize; text-transform: capitalize;
transition: box-shadow var(--transition-md) ease-out; transition: box-shadow var(--transition-md) ease-out;

View File

@@ -31,6 +31,7 @@ global $excerpt;
<span class="excerpt__text"><?php echo $excerpt['date'] ?></span> <span class="excerpt__text"><?php echo $excerpt['date'] ?></span>
</li> </li>
<li class="excerpt__list-item"> <li class="excerpt__list-item">
<a class="excerpt__list-link" href="<?php the_permalink() ?>#comments">
<span class="excerpt__icon"> <span class="excerpt__icon">
<svg class="icon icon--extra-small" aria-hidden="true"> <svg class="icon icon--extra-small" aria-hidden="true">
<use xlink:href="#icon-comments"></use> <use xlink:href="#icon-comments"></use>
@@ -42,6 +43,7 @@ global $excerpt;
echo $number === '1' ? '1 comment' : $number . ' comments'; echo $number === '1' ? '1 comment' : $number . ' comments';
?> ?>
</span> </span>
</a>
</li> </li>
</ul> </ul>
</div> </div>

View File

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

View File

@@ -14,44 +14,23 @@
<?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 $date = get_the_date(get_option('date_format'), $id).' at '.get_the_date(get_option('time_format'), $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(get_option('date_format'), $id) . ' at ' . get_the_date(get_option('time_format'), $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; ?>
</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') ?>
@@ -59,9 +38,7 @@
<?php else: ?> <?php else: ?>
<section class="page__content"> <section class="page__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>
</section> </section>
<?php endif; ?> <?php endif; ?>
<section class="page__banner"> <section class="page__banner">