Improve link posts in archive listings

- Remove `target="_blank"` anti-pattern
- If link post point title to source article
- Switch star icon to a link to indicate "permalink" and markup semantically with `rel="permalink"`
- Reduce opacity of permalink icon
- Adjust hover styles due to shuffling around <a> element
- Close #276
This commit is contained in:
Michael Rose 2016-07-11 13:02:59 -04:00
parent 6d31ffe4ab
commit 89a44dc057
3 changed files with 35 additions and 25 deletions

View file

@ -6,12 +6,13 @@
{% capture teaser %}{{ site.teaser }}{% endcapture %}
{% endif %}
<div class="{{ include.type | default: "list" }}__item">
{% if post.link %}
<a href="{{ post.link }}" target="_blank">
{% if post.id %}
{% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
{% else %}
<a href="{{ base_path }}{{ post.url }}">
{% assign title = post.title %}
{% endif %}
<div class="{{ include.type | default: "list" }}__item">
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
{% if include.type == "grid" and teaser != blank %}
<div class="archive__item-teaser">
@ -24,11 +25,16 @@
alt="">
</div>
{% endif %}
<h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}{% if post.link %}<i class="fa fa-star" aria-hidden="true"></i>{% endif %}</h2>
<h2 class="archive__item-title" itemprop="headline">
{% if post.link %}
<a href="{{ post.link }}">{{ title }}</a> <a href="{{ base_path }}{{ post.url }}" rel="permalink"><i class="fa fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
{% else %}
<a href="{{ base_path }}{{ post.url }}" rel="permalink">{{ title }}</a>
{% endif %}
</h2>
{% if post.read_time %}
<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
{% endif %}
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
</article>
</a>
</div>

View file

@ -35,6 +35,10 @@
.archive__item-title {
margin-bottom: 0.25em;
font-family: $sans-serif-narrow;
a + a {
opacity: 0.5;
}
}
// remove border
@ -63,7 +67,7 @@
}
}
a:hover {
.archive__item:hover {
.archive__item-teaser {
box-shadow: 0 0 10px rgba(#000, 0.25);
}

File diff suppressed because one or more lines are too long