Make entire archive/feature item "clickable" ()

* 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
3 changed files with 56 additions and 1 deletions
CHANGELOG.md
_sass/minimal-mistakes
docs/_docs

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