diff --git a/src/components/build-with-friends/build-with-friends.module.css b/src/components/build-with-friends/build-with-friends.module.css index 64466e00..9e2bac57 100644 --- 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,8 +12,7 @@ } .icons { - text-align: center; - width: 80%; + display: block; } .icon { @@ -22,8 +20,9 @@ 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 index c3ccbc7c..e6a19ac9 100644 --- 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 = `
$ npx @greenwood/init@latestdiff --git a/src/components/get-started/get-started.module.css b/src/components/get-started/get-started.module.css index 3970dc32..74d72bb5 100644 --- 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 index e025b041..2192650d 100644 --- 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 = `
Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.
diff --git a/src/components/hero-banner/hero-banner.module.css b/src/components/hero-banner/hero-banner.module.css index f377172f..f3abf1ab 100644 --- 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 index 14c54ad1..6173254f 100644 --- 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 index 4dcb5b86..2f56290e 100644 --- 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 index 0fd7c4c7..6aeb4026 100644 --- 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 = `