general mobile and responsivess styling refinements

ProjectEvergreen · Jul 8, 2024 · fae241e · fae241e
1 parent e9637c0
commit fae241e
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 42 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
@@ -2,8 +2,7 @@
   background-color: var(--color-gray);
   border: var(--border-size-1) solid var(--color-black);
   border-radius: var(--radius-5);
-  padding: 10px 20px;
-  width: 90%;
+  padding: var(--size-px-5) var(--size-px-5);
   margin: 20px auto;
 }
 
@@ -13,17 +12,17 @@
 }
 
 .icons {
-  text-align: center;
-  width: 80%;
+  display: block;
 }
 
 .icon {
   display: block;
   text-align: center;
   background-color: var(--color-white);
   border-radius: var(--radius-5);
-  padding: var(--size-fluid-1) var(--size-fluid-1);
-  margin: var(--size-fluid-1);
+  padding: var(--size-fluid-1) var(--size-fluid-2);
+  margin: var(--size-fluid-1) var(--size-fluid-1) var(--size-fluid-1) 0;
+  line-height: 100%;
 }
 
 .icon svg {
@@ -41,3 +40,13 @@
     vertical-align: middle;
   }
 }
+
+@media (min-width: 1440px) {
+  .icons {
+    max-width: 80%;
+  }
+
+  .container {
+    padding: var(--size-px-10) var(--size-px-11);
+  }
+}
diff --git a/src/components/get-started/get-started.js b/src/components/get-started/get-started.js
@@ -4,7 +4,7 @@ export default class GetStarted extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
       <div class="${styles.container}">
-        <h3 class="${styles.heading}">Get Started in seconds</h3>
+        <h3 class="${styles.heading}">Get started in seconds 🚀</h3>
 
         <div class="${styles.snippet}">
           <pre>$ npx @greenwood/init@latest</pre>

diff --git a/src/components/get-started/get-started.module.css b/src/components/get-started/get-started.module.css
@@ -57,9 +57,9 @@
   text-decoration: none;
 }
 
-@media (min-width: 821px) {
+@media (min-width: 1024px) {
   .container {
-    padding: 160px 0;
+    padding: var(--size-px-10) 0 var(--size-px-13) 0;
   }
 
   .snippet {

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 <em class="${styles.headingEmphasis}">here</em></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
@@ -1,7 +1,7 @@
 .container {
   text-align: left;
   margin: 0;
-  padding: 0;
+  padding: var(--size-px-2);
 }
 
 .heading,

diff --git a/src/components/run-anywhere/run-anywhere.module.css b/src/components/run-anywhere/run-anywhere.module.css
@@ -7,7 +7,6 @@
 
 .iconContainer {
   margin: 0 auto;
-  width: 60%;
 }
 
 .heading {
@@ -21,27 +20,14 @@
   padding: 20px;
 }
 
-.platformColumn {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.platformBox {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-  flex-direction: column;
-}
-
 .iconBox {
   border-radius: var(--radius-3);
   box-shadow: var(--shadow-2);
   background-color: var(--color-white);
   width: 150px;
   line-height: 150px;
+  margin: 0 auto;
+  display: inline-block;
 }
 
 .icon {
@@ -60,25 +46,21 @@
   color: var(--color-black);
   padding: 10px 20px;
   text-decoration: none;
+  line-height: 100%;
 }
 
-@media (max-width: 767px) {
-  .platformColumn {
-    flex-basis: calc(50% - 12px);
+@media (min-width: 768px) {
+  .platformBox {
+    display: inline-block;
   }
-}
 
-@media (max-width: 460px) {
-  .platformColumn {
-    flex-basis: 100%;
+  .iconLink {
+    display: block;
+    margin: 0 var(--size-px-6);
   }
 }
 
 @media (min-width: 1024px) {
-  .iconContainer {
-    max-width: 80%;
-  }
-
   .subHeading {
     max-width: 70%;
   }

diff --git a/src/components/walkthrough/walkthrough.css b/src/components/walkthrough/walkthrough.css
@@ -1,5 +1,5 @@
 :host .walkthrough {
-  padding: 30px;
+  padding: 50px;
   border-radius: var(--radius-5);
   color: var(--color-white);
   background-color: var(--color-secondary);
@@ -16,7 +16,7 @@
 
 .card {
   display: inline-block;
-  border-radius: var(--radius-4);
+  border-radius: var(--radius-5);
   cursor: pointer;
   margin: var(--font-size-1) 0;
   padding: 10px 20px;
@@ -37,9 +37,14 @@
   color: var(--color-black);
 }
 
+.snippet pre {
+  border-radius: var(--radius-3);
+}
+
 h2 {
   font-size: var(--font-size-fluid-3);
   font-weight: bold;
+  margin: 0;
 }
 
 h3 {
@@ -92,6 +97,14 @@ img {
 }
 
 @media (min-width: 760px) {
+  :host .walkthrough {
+    padding: 50px 100px;
+  }
+
+  .snippet pre {
+    border-radius: var(--radius-1);
+  }
+
   .card {
     padding: 20px;
     margin-right: 20px;

diff --git a/src/components/walkthrough/walkthrough.js b/src/components/walkthrough/walkthrough.js
@@ -16,7 +16,7 @@ export default class Walkthrough extends HTMLElement {
     if (this.cards.length > 0) {
       template.innerHTML = `
         <div class="walkthrough">
-          <h2>Go from Zero to Fullstack with web standards</h2>
+          <h2>Go from zero to fullstack with web standards</h2>
           <h3>Lorum Ipsum...</h3>
 
           <nav class="cards">

diff --git a/src/styles/home.css b/src/styles/home.css
@@ -27,7 +27,6 @@ app-get-started {
 
   app-run-anywhere {
     display: block;
-    width: 70%;
     margin: 0 auto;
   }
 }