misc responsiveness

ProjectEvergreen · Jul 6, 2024 · e9637c0 · e9637c0
1 parent 0d2f1cd
commit e9637c0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/src/components/hero-banner/hero-banner.js b/src/components/hero-banner/hero-banner.js
@@ -4,7 +4,7 @@ export default class HeroBanner extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
       <div class="${styles.container}">
-        <h1 class="${styles.heading}">The Fullstack web is here</h1>
+        <h1 class="${styles.heading}">The Fullstack web is <em class="${styles.headingEmphasis}">here</em></h1>
 
         <p class="${styles.headingSub}">Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.</p>
 

diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css
@@ -2,19 +2,20 @@
   text-align: left;
   margin: 0;
   padding: 0;
-
-  @media (width >= 1080px) {
-    max-width: 60%;
-  }
 }
 
-.heading {
+.heading,
+.headingEmphasis {
   font-size: var(--font-size-8);
   font-weight: var(--font-weight-9);
   margin-block-start: 0;
   margin-block-end: 0;
 }
 
+.headingEmphasis {
+  text-decoration: underline;
+}
+
 .headingSub {
   font-size: var(--font-size-3);
   letter-spacing: var(--font-letterspacing-2);
@@ -60,9 +61,15 @@
 
 @media (min-width: 768px) {
   .snippet {
-    display: block;
+    display: inline-block;
     letter-spacing: var(--font-letterspacing-3);
     padding: 0 var(--size-4);
     margin: 10px 0;
   }
 }
+
+@media (min-width: 1440px) {
+  .container {
+    max-width: 80%;
+  }
+}
diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css
@@ -6,8 +6,8 @@
 }
 
 .iconContainer {
-  max-width: 80%;
   margin: 0 auto;
+  width: 60%;
 }
 
 .heading {
@@ -74,12 +74,12 @@
   }
 }
 
-@media (min-width: 767px) {
+@media (min-width: 1024px) {
   .iconContainer {
-    max-width: 60%;
+    max-width: 80%;
   }
 
   .subHeading {
-    max-width: 50%;
+    max-width: 70%;
   }
 }
diff --git a/src/components/why-greenwood/why-greenwood.module.css b/src/components/why-greenwood/why-greenwood.module.css
@@ -57,4 +57,8 @@
     margin: 20px 10px 20px 20px;
     width: 29%;
   }
+
+  .subHeading {
+    width: 60%;
+  }
 }