~xdavidwu/xdavidwu.link: Make entire archive/feature item "clickable" (#1864)

c4f56f9c1aa2f5a5e4bf9dd1e904ab16e4d954ed — Michael Rose 5 years ago e49ed22

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

patch browse .tar.gz

2 files changed, 54 insertions(+), 0 deletions(-)

M CHANGELOG.md
M _sass/minimal-mistakes/_archive.scss

M CHANGELOG.md => CHANGELOG.md +1 -0

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

M _sass/minimal-mistakes/_archive.scss => _sass/minimal-mistakes/_archive.scss +53 -0

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