fix newsletter styling

snehamoybag · Dec 2, 2022 · ec7dd39 · ec7dd39
1 parent e763e8d
commit ec7dd39
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "huddle-landing-page-with-curved-sections-master",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "![Header/intro section for the Huddle landing page with curved sections](./design/desktop-preview.jpg)",
   "main": "src/js/index.js",
   "scripts": {

diff --git a/src/index.html b/src/index.html
@@ -78,12 +78,13 @@ <h2 class="title title--small title--ff-secondary">Newsletter</h2>
           To recieve tips on how to grow your community, sign up to our weekly newsletter. We'll never send you spam or pass on your email address
         </p>
         <form class="newsletter__form" id="newsletter-form" action="/" method="GET">
+          <label class="newsletter__label" for="newsletter-email">
             <input class="newsletter__input-email" type="email" id="newsletter-email" name="newsletter-email">
-            <label for="newsletter-email">
-              <span class="newsletter__email-error" id="error-email-msg">Check your email please</span>
-            </label>
-            <button class="btn btn--cut-corners" type="submit">Subscribe</button>
-          </form>
+
+            <span class="newsletter__email-error" id="error-email-msg">Check your email please</span>
+          </label>
+          <button class="newsletter__button | btn btn--cut-corners" type="submit">Subscribe</button>
+        </form>
       </section>
       <section class="site-info">
         <a href="#">
@@ -104,7 +105,7 @@ <h2 class="title title--small title--ff-secondary">Newsletter</h2>
       </section>
       <section class="attribution">
         <p class="attribution__info">
-          Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://www.frontendmentor.io/profile/snehamoybag" target="_blank">Snehamoy Bag</a>.
+          Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://localhost:5173/">Snehamoy Bag</a>.
         </p>
       </section>
     </footer>

diff --git a/src/scss/components/_btn.scss b/src/scss/components/_btn.scss
@@ -3,7 +3,6 @@
 .btn {
   --pill-primary-padding: 0.75em 2.5em;
   --pill-transparent-padding: 0.5em 1.75em;
-  --cut-corners-padding: 0.5em 1.75em;
   --dark-shadow: 0 0.35em 5px hsla(0, 0%, 0%, 0.1);
   --adaptive-shadow: 0 0 10px -5px currentColor;
   display: inline-block;
@@ -61,7 +60,6 @@
   }
 
   &--cut-corners {
-    padding: var(--cut-corners-padding);
     border-radius: 0.25rem;
   }
 }
diff --git a/src/scss/components/_newsletter.scss b/src/scss/components/_newsletter.scss
@@ -5,12 +5,17 @@
   --desc-margin-bottom: 2rem;
   --desc-max-width: 45ch;
   --email-input-padding: 1em;
-  --btn-margin: 1rem 0 0 auto;
+  --btn-padding: 0.75em 1.75em;
+  --form-flex-direction: column;
+  --form-gap: 1rem;
+  --btn-align-self: end;
 
   @include brk.minWidth(medium) {
-    --email-input-padding: 0.75em 1em;
-    --btn-margin: 0;
     --title-margin-bottom: 1.5rem;
+    --email-input-padding: 0.75em 1em;
+    --form-flex-direction: row;
+    --form-gap: 2.5rem;
+    --btn-align-self: start;
   }
 
   .title {
@@ -26,31 +31,27 @@
   }
 
   &__form {
+    display: flex;
+    flex-direction: var(--form-flex-direction);
+    gap: var(--form-gap);
 
     @include brk.minWidth(medium) {
-
-      display: grid;
-      grid-template-columns: 3fr 1fr;
-      grid-template-areas: 
-        'input btn'
-        'err err';
-      grid-column-gap: 2rem;
+      flex-direction: row;
     }
   }
 
+  &__label {
+    width: 100%;
+  }
+
   &__input-email {
-    display: block;
     width: 100%;
     padding: var(--email-input-padding);
     border: none;
     border-radius: 0.25em;
     font-weight: var(--fw-regular);
     color: var(--clr-neutral-900);
 
-    @include brk.minWidth(medium) {
-      grid-area: input;
-    }
-
     &:focus {
       outline: 2px solid var(--clr-primary-400);
     }
@@ -61,20 +62,12 @@
     color: var(--clr-secondary-400);
     font-style: italic;
     display: none;
-
-    @include brk.minWidth(medium) {
-      grid-area: err;
-    }
   }
 
-  .btn {
-    display: block;
-    margin: var(--btn-margin);
+  &__button {
+    padding: var(--btn-padding);
     font-weight: var(--fw-bold);
-
-    @include brk.minWidth(medium) {
-      grid-area: btn;
-    }
+    align-self: var(--btn-align-self);
   }
 }