keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-07-01 09:27:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 Subscribe overlay fixes

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/screen.css
View File

@ -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
/* ---------------------------------------------------------- */