diff --git a/src/components/landing/AboutSection.astro b/src/components/landing/AboutSection.astro index 6957c27..288a521 100644 --- a/src/components/landing/AboutSection.astro +++ b/src/components/landing/AboutSection.astro @@ -51,62 +51,89 @@ import { Picture } from "astro:assets"; grid-template-columns: var(--base-grid); max-width: var(--max-content-width); margin-inline: auto; - padding-block: 8rem 5.5rem; + padding-block: 5rem; padding-inline: var(--padding-x); - & h2 { - grid-column: 1 / 6; + @media screen and (min-width: 64rem) { + padding-block: 8rem 5.5rem; + } - font-size: 4.75rem; + & h2 { + grid-column: 1 / -1; + + font-size: var(--fs-xl); line-height: var(--leading-title); letter-spacing: var(--tracking-narrow); span { display: block; } + + @media screen and (min-width: 64rem) { + grid-column: 1 / 7; + } } & div { - grid-column: -1 / -6; + grid-column: 1 / -1; font-size: 1.125rem; line-height: var(--leading-paragraph); + @media screen and (max-width: 63.9375rem) { + margin-top: 1rem; + } + > p { - margin-top: var(--fs-md); + margin-top: 1.5rem; + + @media screen and (max-width: 63.9375rem) { + max-width: 52ch; + } + } + + @media screen and (min-width: 64rem) { + grid-column: -7 / -1; } } } .image { display: grid; - grid-template-columns: 1fr auto 1fr; - justify-content: center; - align-items: center; + place-items: center; margin-bottom: 8rem; - min-height: 400px; - max-height: 500px; + width: 100%; + height: 100%; + /* max-height: 400px; */ & picture { display: block; - grid-column: 1 / -1; - grid-row: 1 / -1; + width: 100%; + height: 100%; + max-height: 500px; + grid-column: 1; + grid-row: 1; } & .background { display: block; width: 100%; + height: 100%; max-width: 100%; object-fit: cover; } & p { - grid-column: 2; + grid-column: 1; grid-row: 1; max-width: 43ch; - font-size: 2rem; + font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); line-height: var(--leading-paragraph); z-index: 1; + + @media screen and (max-width: 63.9375rem) { + padding: 3rem; + } } } diff --git a/src/components/landing/ContactSection.astro b/src/components/landing/ContactSection.astro index 8b1348f..33d23a0 100644 --- a/src/components/landing/ContactSection.astro +++ b/src/components/landing/ContactSection.astro @@ -58,10 +58,10 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro"; .content { grid-column: 3 / 12; - grid-row: 1; align-content: center; - + @media screen and (min-width: 50rem) { + grid-row: 1; grid-column: 6 / -1; } } @@ -89,9 +89,9 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro"; width: max-content; margin-inline: auto; - margin-top: 15rem; + margin-top: 8rem; - font-size: clamp(3rem, 3vw + 3rem, 6.25rem); + font-size: clamp(2.5rem, 5vw + 1rem, 6.25rem); font-weight: 600; text-transform: uppercase; @@ -99,6 +99,10 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro"; line-height: var(--leading-tightest); letter-spacing: var(--tracking-narrow); } + + @media screen and (min-width: 64vw) { + margin-top: 12rem; + } } diff --git a/src/components/landing/ValuesSection.astro b/src/components/landing/ValuesSection.astro index 2375dcb..f82e682 100644 --- a/src/components/landing/ValuesSection.astro +++ b/src/components/landing/ValuesSection.astro @@ -48,59 +48,84 @@ function formatIndex(index: number) { grid-template-columns: var(--base-grid); max-width: var(--max-content-width); margin-inline: auto; - padding-block: 8rem 5.5rem; + padding-block: 4rem; padding-inline: var(--padding-x); + + @media screen and (min-width: 50rem) { + padding-block: 8rem 5.5rem; + } } h2 { grid-column: 1 / -1; - font-size: 4.75rem; + font-size: var(--fs-xl); line-height: var(--leading-title); letter-spacing: var(--tracking-narrow); text-align: center; } ul { - margin-top: 5.5rem; + margin-top: 3rem; list-style: none; grid-column: 1 / -1; > * { border-bottom: 0.25rem solid hsl(0 100 100 / 30%); } + + @media screen and (min-width: 50rem) { + margin-top: 5.5rem; + } } li { display: grid; grid-template-columns: var(--base-grid); - padding-block: 6rem; + padding-block: 4rem; + + @media screen and (min-width: 50rem) { + padding-block: 6rem; + } } .content { - grid-row: 1; - grid-column: 5 / -1; + grid-column: 1 / -1; + + @media screen and (max-width: 49.9375rem) { + margin-top: 2rem; + } + + @media screen and (min-width: 50rem) { + grid-row: 1; + grid-column: 5 / -1; + } } h3 { - font-size: 3rem; + font-size: clamp(2.25rem, 2.5vw + 1rem, 3rem); line-height: var(--leading-title); } p { margin-top: 1.875rem; - font-size: 1.5rem; + font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); line-height: var(--leading-paragraph); } span { display: inline-block; height: max-content; + grid-row: 1; - grid-column: 1 / 4; + grid-column: 1 / -1; font-size: clamp(10rem, 16vw, 15.625rem); font-weight: 600; line-height: var(--leading-tightest); + + @media screen and (min-width: 50rem) { + grid-column: 1 / 4; + } }