enhancement/issue 30 apply bold font family to key home page headings (#85)

Author: thescientist13

src/components/build-with-friends/build-with-friends.module.css

@@ -4,8 +4,8 @@
 }
 
 .heading {
+  font-family: var(--font-primary-bold);
   font-size: var(--font-size-6);
-  font-weight: var(--font-weight-9);
 }
 
 .subHeading {
@@ -32,7 +32,6 @@
 
 .icon span {
   vertical-align: middle;
-  font-weight: var(--font-weight-9);
   display: inline-block;
 }
 

src/components/capabilities/capabilities.css

@@ -9,6 +9,7 @@
 }
 
 .heading {
+  font-family: var(--font-primary-bold);
   font-size: var(--font-size-6);
 }
 
@@ -40,8 +41,8 @@
 
 .section:hover strong,
 .active strong {
+  font-family: var(--font-primary-bold);
   color: var(--color-white);
-  font-weight: bold;
 }
 
 .active {
@@ -67,13 +68,13 @@
 
 .heading {
   font-size: var(--font-size-fluid-3);
-  font-weight: bold;
+  font-family: var(--font-primary-bold);
   margin: 0;
 }
 
 .capability-heading {
   font-size: var(--font-size-fluid-1);
-  font-weight: bold;
+  font-family: var(--font-primary-bold);
   margin: var(--size-px-1) 0;
   display: inline-block;
 }

src/components/get-started/get-started.module.css

@@ -6,8 +6,8 @@
 }
 
 .heading {
+  font-family: var(--font-primary-bold);
   font-size: var(--font-size-5);
-  font-weight: var(--font-weight-9);
 }
 
 .snippet {

src/components/header/header.module.css

@@ -48,10 +48,6 @@
   text-decoration: underline;
 }
 
-.navBarMenuItem:hover {
-  font-weight: bold;
-}
-
 .socialTray {
   display: flex;
   gap: var(--size-3);

src/components/hero-banner/hero-banner.module.css

@@ -5,15 +5,15 @@
 }
 
 .heading {
-  font-size: var(--font-size-7);
-  font-weight: var(--font-weight-7);
+  font-family: var(--font-primary-bold);
+  font-size: var(--font-size-6);
   margin-block-start: 0;
   margin-block-end: 0;
 }
 
 .headingEmphasis {
-  font-size: var(--font-size-7);
-  font-weight: var(--font-weight-7);
+  font-size: var(--font-size-6);
+  font-family: var(--font-primary-bold);
   font-style: italic;
 }
 
@@ -104,6 +104,11 @@
 }
 
 @media (min-width: 768px) {
+  .heading,
+  .headingEmphasis {
+    font-size: var(--font-size-7);
+  }
+
   .buttonBlitz,
   .buttonStarted {
     width: 45%;
@@ -119,7 +124,8 @@
   }
 }
 
-@media (min-width: 1024px) {
+/* use 1025 as a quick tweak for iPad Pro breakpoint */
+@media (min-width: 1025px) {
   .ctaContainer {
     margin: 0 auto;
     text-align: left;

src/components/run-anywhere/run-anywhere.module.css

@@ -5,8 +5,8 @@
 }
 
 .heading {
+  font-family: var(--font-primary-bold);
   font-size: var(--font-size-5);
-  font-weight: var(--font-weight-9);
   margin: 0;
   padding: var(--size-fluid-1) 0;
   text-align: center;

src/components/why-greenwood/why-greenwood.module.css

@@ -7,8 +7,8 @@
 }
 
 .heading {
+  font-family: var(--font-primary-bold);
   font-size: var(--font-size-6);
-  font-weight: var(--font-weight-9);
   font-style: italic;
 }
 

src/styles/home.css

@@ -16,6 +16,13 @@ app-hero-banner {
 }
 
 @media (min-width: 1024px) {
+  app-hero-banner,
+  app-latest-post {
+    width: 80%;
+  }
+}
+
+@media (min-width: 1440px) {
   app-hero-banner,
   app-latest-post {
     width: 70%;