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
This commit is contained in:
Michael Rose 2018-10-02 11:04:28 -04:00 committed by GitHub
parent 71df5e0112
commit c801107754
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 1 deletions

View file

@ -2,6 +2,7 @@
### Enhancements ### 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) - 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 `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) - Remove unneeded `HandheldFriendly` and `MobileOptimized` meta tags. [#1837](https://github.com/mmistakes/minimal-mistakes/pull/1837)

View file

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

View file

@ -4,7 +4,7 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme." excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar: sidebar:
nav: docs nav: docs
last_modified_at: 2018-09-16T18:19:55-04:00 last_modified_at: 2018-10-02T11:03:51-04:00
toc: true toc: true
--- ---
@ -12,6 +12,7 @@ toc: true
### Enhancements ### 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) - 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 `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) - Remove unneeded `HandheldFriendly` and `MobileOptimized` meta tags. [#1837](https://github.com/mmistakes/minimal-mistakes/pull/1837)