enhancement/issue 30 above the fold home page feedback (#124)

ProjectEvergreen · Nov 7, 2024 · e16415a · e16415a
1 parent 5415d00
commit e16415a
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 51 deletions.
diff --git a/src/components/build-with-friends/build-with-friends.module.css b/src/components/build-with-friends/build-with-friends.module.css
@@ -49,12 +49,19 @@
   }
 }
 
-@media (min-width: 1440px) {
-  .icons {
-    max-width: 90%;
+@media (min-width: 1024px) {
+  .container {
+    padding: var(--size-4) var(--size-8);
+    margin: 0 auto;
   }
+}
 
+@media (min-width: 1440px) {
   .container {
-    padding: var(--size-px-10) var(--size-px-13);
+    padding: var(--size-9) var(--size-11);
+  }
+
+  .icons {
+    max-width: 90%;
   }
 }
diff --git a/src/components/capabilities/capabilities.css b/src/components/capabilities/capabilities.css
@@ -3,16 +3,17 @@
   background-color: var(--color-secondary);
 }
 
-.capabilities em,
-.capabilities strong,
-.capabilities code {
-  font-size: var(--font-size-1);
-}
-
 .container {
   padding: var(--size-fluid-2);
 }
 
+.content,
+.content strong,
+.content em,
+.content code {
+  font-size: var(--font-size-2);
+}
+
 .section {
   display: inline-block;
   border-radius: var(--radius-5);
@@ -94,19 +95,13 @@
   margin: 0;
 }
 
-.content {
-  margin: 0;
-  text-align: left;
-  font-size: var(--font-size-1);
-}
-
 pre {
   margin: 0;
 }
 
 @media (min-width: 768px) {
   .container {
-    padding: var(--size-fluid-4);
+    padding: var(--size-fluid-2);
     margin: 0 auto;
   }
 
@@ -125,18 +120,18 @@ pre {
   }
 }
 
-@media (min-width: 1025px) {
+@media (min-width: 1024px) {
   .container {
-    width: 80%;
     display: block;
     margin: 0 auto;
+    padding: var(--size-4) var(--size-8);
   }
 
   .content,
   .content strong,
   .content em,
   .content code {
-    font-size: var(--font-size-fluid-1) !important;
+    font-size: var(--font-size-3);
   }
 
   .snippet pre {
@@ -155,3 +150,16 @@ pre {
     transform: translate(0px, 0px);
   }
 }
+
+@media (min-width: 1440px) {
+  .container {
+    padding: var(--size-9) var(--size-11);
+  }
+
+  .content,
+  .content strong,
+  .content em,
+  .content code {
+    font-size: var(--font-size-4);
+  }
+}
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
@@ -79,7 +79,7 @@
   width: fit-content;
   border: var(--border-size-1) solid #4d4d4d45;
   border-radius: var(--radius-6);
-  padding: var(--size-1);
+  padding: 0 var(--size-1);
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -128,12 +128,6 @@
   }
 }
 
-@media screen and (min-width: 600px) {
-  .logoLink svg.greenwood-logo-full {
-    width: 100%;
-  }
-}
-
 @media (max-width: 600px) {
   .navBar {
     display: flex;
@@ -162,15 +156,16 @@
   }
 
   .socialTray {
-    padding: var(--size-1) var(--size-2);
+    padding: 0 var(--size-2);
   }
+
   .logoLink svg.greenwood-logo-full {
     width: 70%;
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1440px) {
   .logoLink svg.greenwood-logo-full {
-    width: 100%;
+    width: 80%;
   }
 }
diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css
@@ -7,7 +7,7 @@
 .heading {
   font-family: var(--font-primary-bold);
   font-size: var(--font-size-6);
-  padding: 0 var(--size-4);
+  padding: 0;
   margin-block-start: 0;
   margin-block-end: 0;
 }
@@ -22,7 +22,7 @@
   font-size: var(--font-size-4);
   letter-spacing: var(--font-letterspacing-2);
   margin: var(--size-px-2) 0;
-  padding: var(--size-3);
+  padding: var(--size-3) 0;
 }
 
 .ctaContainer {
@@ -80,7 +80,7 @@
   box-shadow: var(--shadow-4);
   margin: var(--size-px-2) 0;
   text-align: center;
-  padding: var(--size-2);
+  padding: var(--size-1);
   display: block;
 }
 
@@ -133,6 +133,7 @@
 
   .snippet pre {
     padding: 0 10px;
+    vertical-align: text-top;
   }
 
   .snippet app-ctc {
@@ -171,7 +172,7 @@
   }
 }
 
-@media (min-width: 1100px) {
+@media (min-width: 1200px) {
   .emphasisCorner {
     display: inline-block;
   }
@@ -184,8 +185,12 @@
     margin: 0;
   }
 
+  .heading {
+    margin: var(--size-3) 0;
+  }
+
   .headingSub {
-    width: 80%;
+    width: 75%;
   }
 
   .snippet {

diff --git a/src/components/latest-post/latest-post.module.css b/src/components/latest-post/latest-post.module.css
@@ -1,7 +1,7 @@
 .pill {
   display: inline-block;
   border-radius: var(--radius-4);
-  padding: var(--size-fluid-1);
+  padding: var(--size-2);
   border: var(--radius-1) solid var(--color-gray-background);
   box-shadow: var(--shadow-2);
   text-align: left;
@@ -10,7 +10,7 @@
     background-color: var(--color-green-pale);
     border-radius: var(--radius-4);
     padding: var(--size-2);
-    margin-right: var(--size-fluid-1);
+    margin-right: var(--size-1);
   }
 
   & a {

diff --git a/src/components/why-greenwood/why-greenwood.module.css b/src/components/why-greenwood/why-greenwood.module.css
@@ -62,7 +62,8 @@
 
 @media (min-width: 1024px) {
   .subHeading {
-    width: 80%;
+    width: 90%;
+    text-align: center;
   }
 
   .cardContainer {
@@ -81,6 +82,10 @@
 }
 
 @media (min-width: 1280px) {
+  .subHeading {
+    width: 80%;
+  }
+
   .cardContainer {
     width: 100%;
   }
@@ -97,6 +102,14 @@
 }
 
 @media (min-width: 1440px) {
+  .container {
+    padding: var(--size-9) var(--size-10);
+  }
+
+  .subHeading {
+    width: 70%;
+  }
+
   .card {
     min-height: 440px;
     height: fit-content;

diff --git a/src/styles/home.css b/src/styles/home.css
@@ -4,26 +4,33 @@ app-hero-banner {
   margin: var(--size-2) auto;
 }
 
-app-latest-post {
-  width: 92%;
-  margin: 0 auto;
-}
-
 .capabilities-content {
   display: none;
 }
 
-@media (min-width: 768px) {
-  app-hero-banner,
-  app-latest-post {
-    padding: var(--size-2);
+@media (min-width: 1024px) {
+  app-latest-post,
+  app-hero-banner {
+    width: 94%;
+    margin: 0 auto;
+  }
+
+  app-hero-banner {
+    padding-bottom: var(--size-2);
+  }
+}
+
+@media (min-width: 1300px) {
+  app-latest-post,
+  app-hero-banner {
+    width: 88%;
+    margin: 0 auto;
   }
 }
 
 @media (min-width: 1440px) {
-  app-hero-banner,
-  app-latest-post {
-    width: 80%;
-    padding-left: 0;
+  app-latest-post,
+  app-hero-banner {
+    width: 85%;
   }
 }