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 9940e797..1c876e00 100644 --- 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 index de016504..5ddb0fcf 100644 --- 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 index b0bc43cf..2cf7bcf4 100644 --- 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 index 1593f10d..d05a8d9e 100644 --- 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 index 3b3c8723..8c320bca 100644 --- 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 index c7771442..4eff092d 100644 --- 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 index 51f12446..f9d3ebcf 100644 --- 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%; } }