Normalizing font sizes

Author: mariana-caldas

CHANGELOG.md

@@ -29,3 +29,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - updated TwoColumn.js component with style props
 - updated favicon icon and add OG
 - normalized container use on components
+- normalized font sizes

components/Footer.js

@@ -23,8 +23,8 @@ export default function Footer() {
           <a className={footerStyles.footer__logo} title="Go to the Homepage">
             <Image
               src="/images/svg/logo.svg"
-              height={326}
-              width={326}
+              height={250}
+              width={250}
               alt="Logo"
               priority
             />

components/mailchimp/NewsletterForm.js

@@ -90,7 +90,7 @@ const NewsletterForm = ({ status, message, onValidated }) => {
               onKeyUp={event => handleInputKeyEvent(event)}
             />
             <button className={newsletterStyles.newsletter__button}>
-              subscribe
+              Subscribe
             </button>
           </form>
           <div className={newsletterStyles.newsletterFormInfo}>

pages/blog/first-post.js

@@ -1,3 +1,9 @@
 export default function FirstPost() {
-  return <h1>First Post</h1>;
+  return (
+    <div class="post">
+      <h1>First Post</h1>
+      <p>We're building this page.</p>
+      <p>Stay tuned!</p>
+    </div>
+  );
 }

styles/Card.module.scss

@@ -33,10 +33,6 @@
   }
 
   .content {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 1.5rem;
-    line-height: 2rem;
     display: flex;
     align-items: center;
   }

styles/Footer.module.scss

@@ -13,7 +13,6 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: unset;
       text-align: left;
     }
   }

styles/Home.module.scss

@@ -2,14 +2,7 @@
 @use './mixins' as *;
 
 .title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 2.5rem;
   text-align: center;
-
-  @include desktop-breakpoint-plus {
-    font-size: 4.5rem;
-  }
 }
 
 .description {

styles/Newsletter.module.scss

@@ -8,7 +8,7 @@
   .newsletterFormError,
   .newsletterFormSuccess,
   .newsletterFormSending {
-    color: black;
+    color: $primary-content-color;
     margin-top: 1rem;
 
     @include tablet {
@@ -38,17 +38,17 @@
   }
 
   &__title {
-    font-size: 1.45rem;
-    color: $black;
+    font-size: 1.75rem;
+    color: $primary-content-color;
     margin: 0;
 
     @include large-desktop {
-      font-size: 2rem;
+      font-size: 2.25rem;
     }
   }
 
   &__form {
-    @include tablet {
+    @include desktop {
       display: flex;
       align-items: center;
       gap: 1rem;
@@ -61,22 +61,19 @@
 
   &__input {
     display: block;
+    font-size: 1.2rem;
     border-radius: 1rem;
     height: 2rem;
     margin: 1rem 0;
     padding: 1rem 1.25rem;
     border: none;
     width: 100%;
-    max-width: 25rem;
-
-    @include tablet {
-      width: 10rem;
-    }
 
     @include large-desktop {
       font-size: 1.5rem;
       height: 3rem;
       border-radius: 3rem;
+      max-width: 25rem;
     }
 
     &::placeholder {
@@ -89,26 +86,27 @@
   }
 
   &__name {
-    @include tablet {
+    @include desktop {
       width: 12.25rem;
     }
   }
 
   &__email {
-    @include tablet {
-      width: 18rem;
+    @include desktop {
+      width: 16rem;
     }
     @include large-desktop {
       width: 26rem;
     }
   }
 
   &__button {
-    border-radius: 1rem;
+    border-radius: 1.2rem;
+    font-size: 1.2rem;
     border: none;
     background-color: $dark-bg-color;
     color: $white;
-    height: 2rem;
+    height: 2.2rem;
     padding: 0 3rem;
     font-weight: 700;
     transition: 0.3s ease;

styles/TwoColumn.module.scss

@@ -33,23 +33,11 @@
       }
 
       .title {
-        font-family: $heading-font;
-        font-style: normal;
         font-weight: bold;
-        font-size: 3.5rem;
         color: $primary-content-color;
         margin: 0;
-
-        @include tablet {
-          font-size: 4.5rem;
-          line-height: 5rem;
-        }
       }
       .content {
-        font-style: normal;
-        font-weight: normal;
-        font-size: 1.5rem;
-        line-height: 2rem;
         display: flex;
         align-items: center;
         margin: 3.875rem 0 2.5rem;

styles/globals.scss

@@ -18,6 +18,36 @@ h6 {
   font-family: $heading-font, sans-serif;
 }
 
+p,
+li {
+  font-size: 1.25rem;
+  line-height: 1.938rem;
+  @include desktop {
+    font-size: 1.5rem;
+  }
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 5rem;
+  @include desktop {
+    font-size: 5.5rem;
+  }
+}
+
+h2 {
+  font-size: 3rem;
+  line-height: 5rem;
+  @include desktop {
+    font-size: 4.5rem;
+  }
+}
+
+h3 {
+  font-size: 1.5rem;
+  line-height: 1.938rem;
+}
+
 ul {
   list-style: none;
 }
@@ -39,19 +69,12 @@ a {
 .not-found,
 .about-us,
 .contact-us,
-.blog {
+.blog,
+.post {
   display: flex;
   flex-direction: column;
   justify-content: center;
   justify-items: center;
   margin-top: 10%;
   align-items: center;
 }
-
-.not-found a {
-  color: $primary-content-color;
-
-  &:hover {
-    opacity: 0.6;
-  }
-}