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

_includes/archive-single.html

@@ -6,12 +6,13 @@
   {% capture teaser %}{{ site.teaser }}{% endcapture %}
 {% endif %}
 
+{% if post.id %}
+  {% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
+{% else %}
+  {% assign title = post.title %}
+{% endif %}
+
 <div class="{{ include.type | default: "list" }}__item">
-  {% if post.link %}
-    <a href="{{ post.link }}" target="_blank">
-  {% else %}
-    <a href="{{ base_path }}{{ post.url }}">
-  {% endif %}
   <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>

assets/_scss/_archive.scss

@@ -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);
   }