From df0a499630418f0084f9e3e2392cf40f898f72fa Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Fri, 5 Jun 2026 15:03:08 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Update=20typography=20and?= =?UTF-8?q?=20button=20styles=20for=20improved=20responsiveness?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/base/typography.css | 102 +++++++++---------- styles/blocks/buttons.css | 8 +- theme.json | 4 +- views/blocks/contact-block/contact-block.php | 4 +- views/blocks/homepage-hero/homepage-hero.css | 4 +- views/blocks/pull-quote/pull-quote.css | 2 +- 6 files changed, 57 insertions(+), 67 deletions(-) diff --git a/styles/base/typography.css b/styles/base/typography.css index f257dad..4fd08d9 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -1,43 +1,39 @@ /* Basic typographical styles */ /** - * All font sizes are based on 16px base font size and 1920px wide screen - * Default size is expressed as percentage of screen width. - * text-14px: 12px-27px, default: 14px - * text-16px: 14px-28px, default: 16px - * text-18px: 14px-30px, default: 18px - * text-20px: 16px-32px, default: 20px - * text-22px: 17px-33px, default: 22px - * text-25px: 18px-35px, default: 25px - * text-30px: 19px-37px, default: 30px - * text-35px: 20px-40px, default: 35px - * text-38px: 22px-48px, default: 38px - * text-40px: 24px-56px, default: 40px - * text-45px: 25px-64px, default: 45px - * text-50px: 27px-72px, default: 50px - * text-55px: 28px-76px, default: 55px - * text-60px: 30px-80px, default: 60px - * text-70px: 30px-76px, default: 70px - * text-75px: 32px-80px, default: 75px + * Fluid font sizes between 360px and 1920px viewport widths. + * Generated values use 16px as the base font size. + * text-14px: 12px-14px + * text-16px: 14px-16px + * text-18px: 16px-18px + * text-20px: 18px-20px + * text-22px: 20px-22px + * text-24px: 22px-24px + * text-28px: 26px-28px + * text-30px: 28px-30px + * text-32px: 30px-32px + * text-34px: 32px-34px + * text-40px: 36px-40px + * text-54px: 38px-54px + * text-64px: 48px-64px * * Font sizes at standard viewport widths: * | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px - * |-------|-------|-------|--------|--------|--------|------- - * text-14px | 12.00 | 12.36 | 12.52 | 12.85 | 13.18 | 13.38 | 14.00 - * text-16px | 14.00 | 14.36 | 14.52 | 14.85 | 15.18 | 15.38 | 16.00 - * text-18px | 14.00 | 14.72 | 15.05 | 15.70 | 16.36 | 16.77 | 18.00 - * text-20px | 16.00 | 16.72 | 17.05 | 17.70 | 18.36 | 18.77 | 20.00 - * text-22px | 17.60 | 18.36 | 18.75 | 19.47 | 20.19 | 20.65 | 22.00 - * text-25px | 18.00 | 19.26 | 19.83 | 20.98 | 22.13 | 22.85 | 25.00 - * text-30px | 18.96 | 20.89 | 21.85 | 23.66 | 25.47 | 26.60 | 30.00 - * text-35px | 20.00 | 22.69 | 23.92 | 26.38 | 28.85 | 30.38 | 35.00 - * text-38px | 22.40 | 24.85 | 26.48 | 29.04 | 31.60 | 33.20 | 38.00 - * text-40px | 24.00 | 26.87 | 28.18 | 30.81 | 33.44 | 35.08 | 40.00 - * text-45px | 25.60 | 29.22 | 30.67 | 33.86 | 37.04 | 39.03 | 45.00 - * text-50px | 27.20 | 31.58 | 33.16 | 36.90 | 40.65 | 42.98 | 50.00 - * text-70px | 30.40 | 37.01 | 40.76 | 47.26 | 53.75 | 57.82 | 70.00 - * text-75px | 32.00 | 39.46 | 43.25 | 50.30 | 57.36 | 61.77 | 75.00 -*/ + * --------- | ----- | ----- | ----- | ------ | ------ | ------ | ------ + * text-14px | 12.00 | 12.36 | 12.52 | 12.85 | 13.18 | 13.38 | 14.00 + * text-16px | 14.00 | 14.36 | 14.52 | 14.85 | 15.18 | 15.38 | 16.00 + * text-18px | 16.00 | 16.36 | 16.52 | 16.85 | 17.18 | 17.38 | 18.00 + * text-20px | 18.00 | 18.36 | 18.52 | 18.85 | 19.18 | 19.38 | 20.00 + * text-22px | 20.00 | 20.36 | 20.52 | 20.85 | 21.18 | 21.38 | 22.00 + * text-24px | 22.00 | 22.36 | 22.52 | 22.85 | 23.18 | 23.38 | 24.00 + * text-28px | 26.00 | 26.36 | 26.52 | 26.85 | 27.18 | 27.38 | 28.00 + * text-30px | 28.00 | 28.36 | 28.52 | 28.85 | 29.18 | 29.38 | 30.00 + * text-32px | 30.00 | 30.36 | 30.52 | 30.85 | 31.18 | 31.38 | 32.00 + * text-34px | 32.00 | 32.36 | 32.52 | 32.85 | 33.18 | 33.38 | 34.00 + * text-40px | 36.00 | 36.72 | 37.05 | 37.70 | 38.36 | 38.77 | 40.00 + * text-54px | 38.00 | 40.87 | 42.18 | 44.81 | 47.44 | 49.08 | 54.00 + * text-64px | 48.00 | 50.87 | 52.18 | 54.81 | 57.44 | 59.08 | 64.00 + */ @theme static { --font-sans: "Poppins", sans-serif; @@ -45,28 +41,22 @@ --line-height: 1.6; --text-base: 1rem; - --text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem); - --text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem); - --text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem); - --text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem); - --text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem); - --text-24px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5rem); - --text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem); - --text-28px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.75rem); - --text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem); - --text-32px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2rem); - --text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem); - --text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem); - --text-40px: clamp(2.25rem, calc(1.2692rem + 1.0256vw), 2.5rem); - --text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem); - --text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem); - --text-55px: clamp(1.75rem, calc(1.3712rem + 1.4615vw), 3.4375rem); - --text-60px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 3.75rem); - --text-64px: clamp(3rem, calc(1.3702rem + 2.2436vw), 4rem); - --text-65px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 4.0625rem); - --text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem); - --text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem); + --text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px); + --text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px); + --text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 2px); + --text-20px: round(up, clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem), 2px); + --text-22px: round(up, clamp(1.25rem, 1.2212rem + 0.1282vw, 1.375rem), 2px); + --text-24px: round(up, clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem), 2px); + --text-28px: round(up, clamp(1.625rem, 1.5962rem + 0.1282vw, 1.75rem), 2px); + --text-30px: round(up, clamp(1.75rem, 1.7212rem + 0.1282vw, 1.875rem), 2px); + --text-32px: round(up, clamp(1.875rem, 1.8462rem + 0.1282vw, 2rem), 2px); + --text-34px: round(up, clamp(2rem, 1.9712rem + 0.1282vw, 2.125rem), 2px); + --text-40px: round(up, clamp(2.25rem, 2.1923rem + 0.2564vw, 2.5rem), 2px); + --text-54px: round(up, clamp(2.375rem, 2.1442rem + 1.0256vw, 3.375rem), 2px); + --text-64px: round(up, clamp(3rem, 2.7692rem + 1.0256vw, 4rem), 2px); +} +:root { --h1: var(--text-64px); --h2: var(--text-40px); --h3: var(--text-32px); @@ -79,7 +69,7 @@ body { background-color: white; color: black; font-family: var(--font-sans); - font-size: var(--text-base); + font-size: var(--text-18px); line-height: var(--line-height); } diff --git a/styles/blocks/buttons.css b/styles/blocks/buttons.css index 8aac407..e90c843 100644 --- a/styles/blocks/buttons.css +++ b/styles/blocks/buttons.css @@ -21,7 +21,7 @@ --button-bg: var(--color-primary); --button-color: var(--color-white); --button-hover-bg: var(--color-info); - --button-hover-border-color: var(--color-info); + --button-hover-border-color: var(--button-bg); --button-hover-color: var(--color-white); --button-border-width: 3px; --button-border-style: solid; @@ -52,11 +52,11 @@ &[data-button-variant="outline"] { background: transparent; - &:hover { background: transparent; } + &:hover { background: var(--button-border-color, var(--button-bg)); } /* --button-color: var(--button-border-color, var(--button-bg)); */ - --button-hover-border-color: var(--button-hover-bg); - --button-hover-color: var(--button-hover-bg); + --button-hover-border-color: var(--button-border-color); + --button-hover-color: var(--button-color); } } diff --git a/theme.json b/theme.json index 003a6e9..01c1c45 100644 --- a/theme.json +++ b/theme.json @@ -120,8 +120,8 @@ "name": "Text 30px" }, { - "slug": "text-35px", - "size": "var(--text-35px)", + "slug": "text-34px", + "size": "var(--text-34px)", "name": "Text 35px" }, { diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php index f5aa60c..59d8079 100644 --- a/views/blocks/contact-block/contact-block.php +++ b/views/blocks/contact-block/contact-block.php @@ -33,9 +33,9 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview ); -
+
-

+

diff --git a/views/blocks/homepage-hero/homepage-hero.css b/views/blocks/homepage-hero/homepage-hero.css index 17153e6..90c8fc2 100644 --- a/views/blocks/homepage-hero/homepage-hero.css +++ b/views/blocks/homepage-hero/homepage-hero.css @@ -37,8 +37,8 @@ .intro { h1 { - font-size: var(--text-55px); - font-weight: 600; + font-size: var(--text-64px); + font-weight: 400; line-height: 1; strong { diff --git a/views/blocks/pull-quote/pull-quote.css b/views/blocks/pull-quote/pull-quote.css index 503af38..5fcd964 100644 --- a/views/blocks/pull-quote/pull-quote.css +++ b/views/blocks/pull-quote/pull-quote.css @@ -25,7 +25,7 @@ .pull-quote__text { font-family: var(--font-quincy); - font-size: var(--text-35px); + font-size: var(--text-34px); font-weight: 500; line-height: 1.3; padding: 6rem 0;