From 5fc5473b3992fa08cebfb55a63a24265f2ec94eb Mon Sep 17 00:00:00 2001 From: fkakatie Date: Fri, 26 Jun 2026 13:06:26 -0600 Subject: [PATCH 1/2] chore: lint --- blocks/footer/footer.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index cfe0514..774ff10 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -16,7 +16,7 @@ footer .footer { padding: var(--space-l); } -@media (width >=900px) { +@media (width >= 900px) { footer .footer { gap: var(--space-m); } @@ -66,7 +66,7 @@ footer .footer details[open] .icon svg { transform: rotate(-180deg); } -footer .footer details>ul { +footer .footer details > ul { display: block; overflow: hidden; height: 0; @@ -74,11 +74,11 @@ footer .footer details>ul { transition: height 0.2s ease; } -footer .footer details>ul>li { +footer .footer details > ul > li { padding: 0.6em 0; } -@media (width >=600px) { +@media (width >= 600px) { footer .footer summary { grid-template-columns: 1fr; cursor: default; @@ -95,14 +95,14 @@ footer .footer details>ul>li { display: none; } - footer .footer details>ul { + footer .footer details > ul { overflow: visible; height: auto; padding: 0; transition: none; } - footer .footer details>ul>li { + footer .footer details > ul > li { padding: 0.4em 0; } } @@ -112,7 +112,7 @@ footer .footer-nav { grid-area: nav; } -@media (width >=600px) { +@media (width >= 600px) { footer .footer-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); @@ -120,7 +120,7 @@ footer .footer-nav { } } -@media (width >=900px) { +@media (width >= 900px) { footer .footer-nav { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); } @@ -148,7 +148,7 @@ footer .footer-social a { width: 44px; } -@media (width >=600px) { +@media (width >= 600px) { footer .footer-social ul { justify-content: flex-end; } @@ -191,7 +191,7 @@ footer .footer-copyright #cookie:focus-visible { text-decoration: underline; } -@media (width >=600px) { +@media (width >= 600px) { footer .footer-copyright ul { display: flex; flex-wrap: wrap; From e654eef7c9bf63d55bbf26512c5e5aa16940633f Mon Sep 17 00:00:00 2001 From: fkakatie Date: Fri, 26 Jun 2026 16:19:07 -0600 Subject: [PATCH 2/2] feat: columns block --- blocks/columns/columns.css | 100 ++++++++++++++++++++++++++++++++----- blocks/columns/columns.js | 51 ++++++++++++++----- 2 files changed, 126 insertions(+), 25 deletions(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 58e1bd8..bc15914 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,33 +1,107 @@ +.columns { + display: flex; + flex-direction: column; + gap: var(--space-m); +} + .columns > div { display: flex; flex-direction: column; + gap: var(--space-m); +} + +@media (width >= 600px) { + .columns, + .columns > div { + gap: 0; + } + + .columns > div { + flex-direction: row; + } + + .columns > div > div { + flex: 1; + min-width: 0; + } + + .columns [data-row="media"] { + align-items: center; + } +} + +/* media wrapper */ +.columns .media-wrapper { + order: -1; + position: relative; + overflow: hidden; + min-height: 184px; +} + +.columns .media-wrapper picture { + position: absolute; + inset: 0; + box-sizing: border-box; } -.columns img { +.columns .media-wrapper img { + height: 100%; width: 100%; + object-fit: cover; } -.columns > div > div { - order: 1; +@media (width >= 600px) { + .columns .media-wrapper { + align-self: stretch; + order: unset; + min-height: 314px; + } } -.columns > div > .columns-img-col { - order: 0; +/* body wrapper */ +.columns .body-wrapper { + box-sizing: border-box; } -.columns > div > .columns-img-col img { +.columns .body-wrapper h1::after, +.columns .body-wrapper h2::after, +.columns .body-wrapper h3::after, +.columns .body-wrapper h4::after, +.columns .body-wrapper h5::after, +.columns .body-wrapper h6::after { + content: ''; display: block; + height: 5px; + width: 40px; + margin-top: var(--space-s); + background-color: var(--color-brand); +} + +.columns .body-wrapper .button { + width: 100%; +} + +@media (width >= 600px) { + .columns .body-wrapper .button { + width: unset; + min-width: 200px; + } + + .columns [data-row="media"] .body-wrapper { + padding: var(--space-m); + } } @media (width >= 900px) { - .columns > div { - flex-direction: unset; - align-items: center; - gap: var(--space-m); + .columns [data-row="media"] .body-wrapper { + padding: var(--space-xl); } +} - .columns > div > div { - flex: 1; - order: unset; +/* checkerboard */ +@media (width >= 600px) { + .columns.cols-2 > div { + display: grid; + grid-template-columns: 1fr 1fr; } } diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index 9b78c81..aca01ab 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -1,18 +1,45 @@ -export default function decorate(block) { - const cols = [...block.firstElementChild.children]; - block.classList.add(`columns-${cols.length}-cols`); +import { createOptimizedPicture } from '../../scripts/aem.js'; + +/** + * Returns the shared column count if every row has the same number of columns. + * @param {Element} block The block element + * @returns {number|null} Column count, or `null` if rows differ + */ +function getColCount(block) { + const rows = [...block.children]; + if (rows.length === 0) return null; + const n = rows[0].children.length; + return rows.every((row) => row.children.length === n) ? n : null; +} - // setup image columns +/** + * Replaces all images in the block with optimized picture elements. + * @param {Element} block The columns block element + */ +function optimizeImages(block) { + block.querySelectorAll('.media-wrapper picture > img').forEach((img) => { + img.closest('picture').replaceWith( + createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]), + ); + }); +} + +/** @param {Element} block */ +export default function decorate(block) { [...block.children].forEach((row) => { [...row.children].forEach((col) => { - const pic = col.querySelector('picture'); - if (pic) { - const picWrapper = pic.closest('div'); - if (picWrapper && picWrapper.children.length === 1) { - // picture is only content in column - picWrapper.classList.add('columns-img-col'); - } - } + const els = [...col.children]; + const isMedia = els.length > 0 && els.every((el) => el.tagName === 'PICTURE' || el.tagName === 'VIDEO'); + col.classList.add(isMedia ? 'media-wrapper' : 'body-wrapper'); }); + if (row.querySelector('.media-wrapper')) row.dataset.row = 'media'; }); + + const colCount = getColCount(block); + if (colCount && ![...block.classList].some((c) => c.startsWith('cols-'))) { + block.classList.add(`cols-${colCount}`); + if (colCount % 2 === 0) block.classList.add('cols-even'); + } + + optimizeImages(block); }