From 93b57650736020b898fd4d8ee93aad56e0cf5f40 Mon Sep 17 00:00:00 2001 From: Jake Schoolmeesters Date: Tue, 9 Apr 2024 09:57:42 -0500 Subject: [PATCH 1/3] cards-update: update card styles to match new designs. --- blocks/cards/cards.css | 65 ++++++++++++++++---- blocks/property-listing/cards/cards.css | 40 +++++++++--- blocks/property-listing/property-listing.css | 7 ++- styles/styles.css | 1 + 4 files changed, 88 insertions(+), 25 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index c372a9f1..2d7a40e6 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,3 +1,13 @@ +.cards.block { + padding-bottom: 32px; +} + +.cards.wide.block { + margin: 0 auto; + max-width: var(--wide-page-width); + border-bottom: 1px solid var(--secondary-accent); +} + .cards.block, .cards.block .cards-list { display: flex; @@ -11,10 +21,12 @@ } .cards.block .title h4 { - text-transform: uppercase; - text-align: center; - letter-spacing: var(--letter-spacing-l); + color: var(--primary-color); + font-size: var(--heading-font-size-s); + font-weight: var(--font-weight-bold); line-height: var(--line-height-m); + text-align: center; + text-transform: capitalize; } .cards.block .cards-list .cards-item { @@ -61,15 +73,21 @@ } .cards.block .cards-list .cards-item .card-image p { - position: absolute; - left: 0; + background-color: var(--white); bottom: 0; - text-transform: uppercase; - padding: 1em .5em 0 0; + font-size: var(--heading-font-size-xxs); + font-weight: var(--font-weight-bold); + left: 0; + letter-spacing: var(--letter-spacing-m); margin: 0; min-width: calc((2 / 3) * 100%); - letter-spacing: var(--letter-spacing-l); - background-color: var(--white); + padding: 16px 16px 0 0; + position: absolute; + text-transform: uppercase; +} + +.tertiary-background .cards.block .cards-list .cards-item .card-image p { + background-color: var(--tertiary-color); } .cards.block .cards-list .cards-item .card-body h3 { @@ -79,8 +97,9 @@ } .cards.block .cards-list .cards-item .card-body p { - margin: 8px 0 24px; + font-size: var(--body-font-size-xs); letter-spacing: var(--letter-spacing-xs); + margin: 8px 0 24px; } .cards.block .cards-list .cards-item .card-body .button-container { @@ -90,9 +109,9 @@ } .cards.block .cards-list .cards-item .card-body .button-container a { + border: 1px solid var(--primary-color); + color: var(--primary-color); padding: 10px 24px; - border: 1px solid var(--black); - color: var(--black); } /* Icons variation */ @@ -134,6 +153,11 @@ margin-bottom: 0; } +.cards.block.tertiary-background.border-top .cards-list .cards-item { + background-color: var(--tertiary-color); + border-top: 1px solid var(--secondary-light); +} + .cards.block.shade-icon .cards-list .cards-item .card-body p { text-align: center; margin-bottom: 10px; @@ -207,6 +231,10 @@ } @media (min-width: 900px) { + .cards.block .title h4 { + font-size: var(--heading-font-size-m); + } + .cards.block .cards-list { flex-direction: row; align-items: stretch; @@ -234,16 +262,29 @@ max-height: 500px; } + .cards.block .cards-list .cards-item .card-image p { + font-size: var(--heading-font-size-xs); + } + .cards.block.cards-2-cols .cards-list .cards-item .card-image picture { padding-bottom: 45%; } + .cards.block .cards-list .cards-item .card-body h3 { + font-size: var(--heading-font-size-xl); + font-weight: var(--font-weight-semibold); + } + .cards.block.icons .cards-list { flex-flow: row wrap; align-items: stretch; column-gap: 20px; } + .cards.block .cards-list .cards-item .card-body p { + font-size: var(--body-font-size-s); + } + .cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) { padding: 0 25px 54px; } diff --git a/blocks/property-listing/cards/cards.css b/blocks/property-listing/cards/cards.css index 20591d05..3b806f1c 100644 --- a/blocks/property-listing/cards/cards.css +++ b/blocks/property-listing/cards/cards.css @@ -20,13 +20,13 @@ flex-direction: column; scroll-snap-align: start; flex-shrink: 0; - width: 250px; + width: 80%; max-width: 90%; background-color: var(--white); } .property-list-cards .listing-tile a { - aspect-ratio: 16/9; + aspect-ratio: 1.3/1; } .property-list-cards .listing-tile .property-no-available-image { @@ -105,7 +105,7 @@ .property-list-cards .property-labels .property-label { display: initial; height: 24px; - font-size: var(--body-font-size-xs); + font-size: var(--heading-font-size-xs); padding: 0 7px; line-height: 24px; font-family: var(--font-family-primary); @@ -212,10 +212,10 @@ } .property-list-cards .property-details .property-info-wrapper .address { + color: var(--body-color); font-family: var(--font-family-primary); + font-size: var(--body-font-size-xs); font-weight: var(--font-weight-normal); - font-size: var(--body-font-size-s); - color: var(--body-color); letter-spacing: var(--letter-spacing-xxs); line-height: var(--line-height-s); margin: 2px 0; @@ -223,10 +223,10 @@ } .property-list-cards .property-details .property-info-wrapper .specs { + color: var(--body-color); font-family: var(--font-family-primary); + font-size: var(--body-font-size-xxs); font-weight: var(--font-weight-light); - color: var(--body-color); - font-size: var(--body-font-size-xs); letter-spacing: var(--letter-spacing-xxs); line-height: normal; padding-top: 3px; @@ -240,7 +240,7 @@ } .property-list-cards .property-details .property-buttons .buttons-row-flex { - justify-content: space-around; + justify-content: flex-end; flex-grow: 1; display: flex; flex-wrap: wrap; @@ -251,6 +251,12 @@ height: 24px; position: relative; background-color: transparent; + margin-left: 10px; +} + +.property-list-cards .property-details .property-buttons .button-property img { + height: 24px; + width: 24px; } .property-list-cards .property-details .property-buttons .button-property span { @@ -295,9 +301,9 @@ } .property-list-cards .listing-tile .extra-info div { - font-size: var(--body-font-size-xs); - font-family: var(--font-family-primary); color: var(--dark-grey); + font-family: var(--font-family-primary); + font-size: var(--body-font-size-xxs); letter-spacing: 0; line-height: var(--line-height-xs); } @@ -311,6 +317,20 @@ display: block; } +@media (min-width: 900px) { + .property-list-cards .property-details .property-info-wrapper .address { + font-size: var(--body-font-size-s); + } + + .property-list-cards .property-details .property-info-wrapper .specs { + font-size: var(--body-font-size-xxs); + } + + .property-list-cards .listing-tile .extra-info div { + font-size: var(--body-font-size-xxs); + } +} + @media (min-width: 1200px) { .property-list-cards { display: grid; diff --git a/blocks/property-listing/property-listing.css b/blocks/property-listing/property-listing.css index 560a965a..91e4cca1 100644 --- a/blocks/property-listing/property-listing.css +++ b/blocks/property-listing/property-listing.css @@ -20,11 +20,12 @@ } .property-listing.block .header > div > span { - font-weight: var(--font-weight-bold); - text-transform: uppercase; - border-bottom: 3px solid var(--primary-color); + color: var(--primary-color); + font-size: var(--heading-font-size-l); + font-weight: var(--font-weight-semibold); letter-spacing: initial; line-height: var(--line-height-m); + text-transform: capitalize; } .property-listing.block .header > div > p { diff --git a/styles/styles.css b/styles/styles.css index b675628c..c6c90a28 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -72,6 +72,7 @@ --heading-font-size-m: 18px; --heading-font-size-s: 16px; --heading-font-size-xs: 12px; + --heading-font-size-xxs: 10px; /* Body */ --body-font-size-xxxl: 40px; From eec40b60677e85727ffa7c636e6c78e1bde4d207 Mon Sep 17 00:00:00 2001 From: Jake Schoolmeesters Date: Tue, 9 Apr 2024 10:53:50 -0500 Subject: [PATCH 2/3] cards-update: fixing css linter issues --- blocks/cards/cards.css | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 2d7a40e6..15883317 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -86,10 +86,6 @@ text-transform: uppercase; } -.tertiary-background .cards.block .cards-list .cards-item .card-image p { - background-color: var(--tertiary-color); -} - .cards.block .cards-list .cards-item .card-body h3 { padding-top: 16px; font-size: var(--body-font-size-l); @@ -102,6 +98,10 @@ margin: 8px 0 24px; } +.tertiary-background .cards.block .cards-list .cards-item .card-image p { + background-color: var(--tertiary-color); +} + .cards.block .cards-list .cards-item .card-body .button-container { margin: 16px 0 0 ; height: 40px; @@ -153,6 +153,15 @@ margin-bottom: 0; } +.cards.block.shade-icon .cards-list .cards-item { + background-color: var(--light-grey); + padding: 0; + border-top: 1px solid #000; + min-height: 274px; + align-items: center; + justify-content: center; +} + .cards.block.tertiary-background.border-top .cards-list .cards-item { background-color: var(--tertiary-color); border-top: 1px solid var(--secondary-light); @@ -167,15 +176,6 @@ background-color: var(--light-grey); } -.cards.block.shade-icon .cards-list .cards-item { - background-color: var(--light-grey); - padding: 0; - border-top: 1px solid #000; - min-height: 274px; - align-items: center; - justify-content: center; -} - .cards.block.shade-icon .cards-list .cards-item .card-body h4 { padding: 8px 30px; text-align: center; From 334fffe38c3e10807674c9505b885a517f542d0e Mon Sep 17 00:00:00 2001 From: Jake Schoolmeesters Date: Tue, 9 Apr 2024 13:39:18 -0500 Subject: [PATCH 3/3] cards-update: switch head font to body font variable --- blocks/property-listing/cards/cards.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/property-listing/cards/cards.css b/blocks/property-listing/cards/cards.css index 3b806f1c..3ac54d1f 100644 --- a/blocks/property-listing/cards/cards.css +++ b/blocks/property-listing/cards/cards.css @@ -105,7 +105,7 @@ .property-list-cards .property-labels .property-label { display: initial; height: 24px; - font-size: var(--heading-font-size-xs); + font-size: var(--body-font-size-xxs); padding: 0 7px; line-height: 24px; font-family: var(--font-family-primary);