🐛 Subscribe overlay fixes

refs. https://github.com/TryGhost/Casper/issues/630

- added a dedicated close button element for the subscribe overlay which sits on top of all elements to ensure the modal is always closable
- fixed alignment and spacing of "Subscribe" button for mobile sizes
This commit is contained in:
Peter Zimon 2020-03-04 11:26:27 +01:00
parent 74ae3d5140
commit 9e29e145fc
4 changed files with 33 additions and 21 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -2574,7 +2574,7 @@ Usage (In Ghost editor):
transform: translateY(-175%); transform: translateY(-175%);
} }
.subscribe-close { .subscribe-close-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -2583,33 +2583,44 @@ Usage (In Ghost editor):
display: block; display: block;
} }
.subscribe-close:before { .subscribe-close-button {
position: absolute;
top: 16px;
right: 20px;
width: 40px;
height: 40px;
display: block;
z-index: 2000;
}
.subscribe-close-button:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 32px; top: 20px;
right: 25px; right: 4px;
display: block; display: block;
width: 20px; width: 32px;
height: 1px; height: 1px;
background: #fff; background: #fff;
opacity: 0.8; opacity: 0.8;
transform: rotate(45deg); transform: rotate(45deg);
} }
.subscribe-close:after { .subscribe-close-button:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 32px; top: 20px;
right: 25px; right: 4px;
display: block; display: block;
width: 20px; width: 32px;
height: 1px; height: 1px;
background: #fff; background: #fff;
opacity: 0.8; opacity: 0.8;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.subscribe-close:hover { .subscribe-close-overlay:hover,
.subscribe-close-button:hover {
cursor: default; cursor: default;
} }
@ -2619,7 +2630,7 @@ Usage (In Ghost editor):
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 9000; z-index: 2000;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -2629,20 +2640,14 @@ Usage (In Ghost editor):
pointer-events: none; pointer-events: none;
} }
.subscribe-overlay .subscribe-close:before,
.subscribe-overlay .subscribe-close:after {
top: 36px;
width: 30px;
}
.subscribe-overlay:target { .subscribe-overlay:target {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
z-index: 2001;
} }
.subscribe-overlay-content { .subscribe-overlay-content {
position: relative; position: relative;
z-index: 9999;
margin: 0 0 5vw 0; margin: 0 0 5vw 0;
padding: 4vw; padding: 4vw;
color: #fff; color: #fff;
@ -2745,6 +2750,12 @@ Usage (In Ghost editor):
top: 5px; top: 5px;
} }
@media (max-width: 500px) {
.subscribe-overlay button {
margin: 12px 0 0;
}
}
/* 11. Site Footer /* 11. Site Footer
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View File

@ -48,7 +48,8 @@
</div> </div>
<div id="subscribe" class="subscribe-overlay"> <div id="subscribe" class="subscribe-overlay">
<a class="subscribe-close" href="#"></a> <a class="subscribe-close-overlay" href="#"></a>
<a class="subscribe-close-button" href="#"></a>
<div class="subscribe-overlay-content"> <div class="subscribe-overlay-content">
{{#if @site.logo}} {{#if @site.logo}}
<img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" /> <img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />