🐛 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%);
|
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
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
|
@ -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}}" />
|
||||||
|
|
Loading…
Reference in a new issue