Make entire archive/feature item "clickable" (#1864)

* Make entire feature item "clickable"

Use a pseudo element on the call to action button to cover the entire feature item and make it "clickable".

* Make entire archive item "clickable"

Use a pseudo element on the `<a>` element to cover the entire archive item and make it "clickable".

* Update CHANGELOG and history

* Reference issue

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Enhancements
 
+- Make entire feature and archive items "clickable". [#1864](https://github.com/mmistakes/minimal-mistakes/pull/1864)
 - Allow custom Staticman endpoints. [#1842](https://github.com/mmistakes/minimal-mistakes/issues/1842)
 - Remove `type="text/css"` from Algolia script includes. [#1836](https://github.com/mmistakes/minimal-mistakes/pull/1836)
 - Remove unneeded `HandheldFriendly` and `MobileOptimized` meta tags. [#1837](https://github.com/mmistakes/minimal-mistakes/pull/1837)

_sass/minimal-mistakes/_archive.scss

@@ -18,6 +18,19 @@
   }
 }
 
+.archive__item {
+  position: relative;
+
+  a::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
 .archive__subtitle {
   margin: 1.414em 0 0;
   padding-bottom: 0.5em;
@@ -215,6 +228,7 @@
 }
 
 .feature__item {
+  position: relative;
   margin-bottom: 2em;
   font-size: 1.125em;
 
@@ -249,7 +263,17 @@
     padding-right: gutter(1 of 12);
   }
 
+  a.btn::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
   &--left {
+    position: relative;
     float: left;
     margin-left: 0;
     margin-right: 0;
@@ -261,6 +285,15 @@
       margin-bottom: 2em;
     }
 
+    a.btn::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+
     @include breakpoint($small) {
       .archive__item-teaser {
         float: left;
@@ -277,6 +310,7 @@
   }
 
   &--right {
+    position: relative;
     float: left;
     margin-left: 0;
     margin-right: 0;
@@ -288,6 +322,15 @@
       margin-bottom: 2em;
     }
 
+    a.btn::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+
     @include breakpoint($small) {
       text-align: right;
 
@@ -306,6 +349,7 @@
   }
 
   &--center {
+    position: relative;
     float: left;
     margin-left: 0;
     margin-right: 0;
@@ -317,6 +361,15 @@
       margin-bottom: 2em;
     }
 
+    a.btn::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+
     @include breakpoint($small) {
       text-align: center;
 

docs/_docs/18-history.md

@@ -4,7 +4,7 @@ permalink: /docs/history/
 excerpt: "Change log of enhancements and bug fixes made to the theme."
 sidebar:
   nav: docs
-last_modified_at: 2018-09-16T18:19:55-04:00
+last_modified_at: 2018-10-02T11:03:51-04:00
 toc: true
 ---
 
@@ -12,6 +12,7 @@ toc: true
 
 ### Enhancements
 
+- Make entire feature and archive items "clickable". [#1864](https://github.com/mmistakes/minimal-mistakes/pull/1864)
 - Allow custom Staticman endpoints. [#1842](https://github.com/mmistakes/minimal-mistakes/issues/1842)
 - Remove `type="text/css"` from Algolia script includes. [#1836](https://github.com/mmistakes/minimal-mistakes/pull/1836)
 - Remove unneeded `HandheldFriendly` and `MobileOptimized` meta tags. [#1837](https://github.com/mmistakes/minimal-mistakes/pull/1837)