✨feature: Update typography and button styles for improved responsiveness
Sync TODOs with Issues / sync_todos (push) Successful in 7s
Sync TODOs with Issues / sync_todos (push) Successful in 7s
This commit is contained in:
Keith Solomon
+46
-56
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -120,8 +120,8 @@
|
||||
"name": "Text 30px"
|
||||
},
|
||||
{
|
||||
"slug": "text-35px",
|
||||
"size": "var(--text-35px)",
|
||||
"slug": "text-34px",
|
||||
"size": "var(--text-34px)",
|
||||
"name": "Text 35px"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -33,9 +33,9 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
<?php get_template_part( '/views/blocks/contact-block/linework' ); ?>
|
||||
</div>
|
||||
|
||||
<div class="contact-block__content container pt-12 pb-16">
|
||||
<div class="contact-block__content container px-4! pt-12 pb-16 relative z-10">
|
||||
<?php if ( $text ) : ?>
|
||||
<h2 class="contact-block__text font-quincy font-normal leading-none text-white max-w-3/4 relative z-10 mb-8">
|
||||
<h2 class="contact-block__text font-quincy font-normal leading-none text-white max-w-4/5 mb-8">
|
||||
<?php echo wp_kses_post( $text ); ?>
|
||||
</h2>
|
||||
<?php endif; ?>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user