🐛 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

assets/css/screen.css

@@ -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;
+    top: 20px;
-    right: 25px;
+    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;
+    top: 20px;
-    right: 25px;
+    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
 /* ---------------------------------------------------------- */

default.hbs

@@ -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}}" />