Improved email input mobile styles

Author: minimaluminium

assets/built/screen.css

@@ -231,7 +231,7 @@ a:hover {
     align-items: center;
     position: relative;
     overflow: hidden;
-    max-width: 640px;
+    max-width: 560px;
     width: 100%;
     height: 56px;
     font-size: 1.7rem;
@@ -352,6 +352,28 @@ button.gh-form-input {
     display: block;
 }
 
+@media (max-width: 576px) {
+    .gh-form {
+        font-size: 1.6rem;
+    }
+    
+    .gh-form .gh-button {
+        padding-inline: 12px;
+    }
+
+    .gh-form .gh-button span span {
+        display: none;
+    }
+
+    .gh-form .gh-button span svg {
+        display: inline;
+        position: static;
+        margin-top: 2px;
+        width: 20px;
+        height: 20px;
+    }
+}
+
 /* 5. Layout
 /* ---------------------------------------------------------- */
 
@@ -1403,7 +1425,7 @@ Search                         LOGO                    Login Subscribe
     flex-direction: column;
     align-items: center;
     gap: 36px;
-    padding: 80px 64px 72px;
+    padding: clamp(48px, 3.64vw + 33.45px, 80px) clamp(40px, 2.73vw + 29.09px, 64px) clamp(40px, 3.64vw + 25.45px, 72px);
     text-align: center;
     background-color: var(--color-lighter-gray);
 }
@@ -1426,10 +1448,6 @@ Search                         LOGO                    Login Subscribe
     letter-spacing: -0.015em;
 }
 
-.gh-cta .gh-form {
-    max-width: 560px;
-}
-
 /* 10. Featured posts
 /* ---------------------------------------------------------- */
 
@@ -2665,16 +2683,8 @@ figcaption a {
 
 .gh-footer-signup .gh-form {
     margin-top: 40px;
-    max-width: 560px;
 }
 
-/* .gh-footer-signup .gh-button {
-    margin-top: 32px;
-    padding: 16px 32px;
-    font-size: 1.9rem;
-    letter-spacing: -0.01em;
-} */
-
 @media (max-width: 991px) {
     .gh-footer-bar {
         display: flex;

assets/built/screen.css.map

@@ -1,7 +1,7 @@
 <form class="gh-form" data-members-form>
     <input class="gh-form-input" type="email" placeholder="[email protected]" required data-members-email>
     <button class="gh-button" type="submit">
-        <span>Subscribe</span>
+        <span><span>Subscribe</span> {{> "icons/arrow"}}</span>
         {{> "icons/loader"}}
         {{> "icons/checkmark"}}
     </button>