🐛 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:
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
|
@ -2574,7 +2574,7 @@ Usage (In Ghost editor):
|
|||
transform: translateY(-175%);
|
||||
}
|
||||
|
||||
.subscribe-close {
|
||||
.subscribe-close-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
@ -2583,33 +2583,44 @@ Usage (In Ghost editor):
|
|||
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: "";
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 25px;
|
||||
top: 20px;
|
||||
right: 4px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
opacity: 0.8;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.subscribe-close:after {
|
||||
.subscribe-close-button:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 25px;
|
||||
top: 20px;
|
||||
right: 4px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
opacity: 0.8;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.subscribe-close:hover {
|
||||
.subscribe-close-overlay:hover,
|
||||
.subscribe-close-button:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
@ -2619,7 +2630,7 @@ Usage (In Ghost editor):
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9000;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -2629,20 +2640,14 @@ Usage (In Ghost editor):
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.subscribe-overlay .subscribe-close:before,
|
||||
.subscribe-overlay .subscribe-close:after {
|
||||
top: 36px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.subscribe-overlay:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.subscribe-overlay-content {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
margin: 0 0 5vw 0;
|
||||
padding: 4vw;
|
||||
color: #fff;
|
||||
|
@ -2745,6 +2750,12 @@ Usage (In Ghost editor):
|
|||
top: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.subscribe-overlay button {
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 11. Site Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
@ -48,7 +48,8 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
{{#if @site.logo}}
|
||||
<img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />
|
||||
|
|
Loading…
Reference in a new issue