Add responsive behavior to newsletter subscription form

prestonso · Mar 26, 2020 · 0e5f418 · 0e5f418
1 parent 54417dd
commit 0e5f418
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -13,7 +13,7 @@ const Footer = () => (
       title="preston.soapbox"
       body={
         <>
-          <p><strong>Before you go, subscribe to my monthly newsletter.</strong> No spam. Just musings about headless CMS, voice design, digital experiences, the JAMstack, and more.</p>
+          <p><strong>Before you go, subscribe to my monthly newsletter.</strong> No spam. Just musings and exclusive subscriber-only content about headless CMS, voice design, digital experiences, the JAMstack, and more.</p>
           <form
             name="newsletter"
             method="post"
@@ -28,7 +28,7 @@ const Footer = () => (
               <input type="text" name="firstname" id="firstname-newsletter" />
             </div>
             <div className="card__field">
-              <label htmlFor="email">Email</label>
+              <label htmlFor="email">E-mail</label>
               <input type="text" name="email" id="email" />
             </div>
             <input type="submit" value="Subscribe" className="card__field--special" />

diff --git a/src/components/layout.css b/src/components/layout.css
@@ -102,7 +102,7 @@ form label[for="newsletter"] {
 
 form input[type="submit"],
 form input[type="reset"] {
-  font-size: 0.75em;
+  font-size: 0.7em;
   margin-right: 0.5rem;
   padding: 0.5rem 1rem;
   font-weight: bold;
@@ -384,7 +384,7 @@ nav ul li a:hover,  nav ul li a:active {
 
 .card--outro .card__field label {
   text-transform: uppercase;
-  font: bold 0.85em 'basic-sans', 'Droid Sans', sans-serif;
+  font: 0.85em 'basic-sans', 'Droid Sans', sans-serif;
   color: #232323;
 }
 
@@ -714,6 +714,16 @@ footer h3 {
     margin: 0 auto;
   }
 
+  .card--outro form .card__field {
+    width: 41%;
+    float: left;
+    padding-right: 1rem;
+  }
+
+  .card--outro form input[type="submit"] {
+    margin-top: 2.5rem;
+  }
+
   .card--main {
     font-size: 1.15em;
     line-height: 1.65em;

diff --git a/src/pages/contact.js b/src/pages/contact.js
@@ -38,7 +38,7 @@ const ContactPage = () => (
             <input type="text" name="lastname" id="lastname" />
           </div>
           <div className="card__field">
-            <label htmlFor="email">Email</label>
+            <label htmlFor="email">E-mail</label>
             <input type="text" name="email" id="email" />
           </div>
           <div className="card__field">