diff --git a/blocks/v2-resources/v2-resources.css b/blocks/v2-resources/v2-resources.css new file mode 100644 index 000000000..42735ec9f --- /dev/null +++ b/blocks/v2-resources/v2-resources.css @@ -0,0 +1,98 @@ +.section.v2-resources-container { + padding: 0 0 40px; +} + +.section.v2-resources-container .v2-resources-wrapper { + padding: 40px 16px 90px; +} + +.v2-resources__heading { + font-family: var(--ff-headline-medium); + text-wrap: balance; + margin: 0 0 8px; +} + +.v2-resources__content { + display: flex; + flex-direction: column; + gap: 8px; +} + +.v2-resources__content p { + margin: 0; +} + +.v2-resources__subtitle { + margin: 32px 0 0; +} + +a.v2-resources__link { + display: flex; + align-items: center; + color: var(--text-color); + height: 32px; + width: fit-content; + font-size: var(--body-font-size-xs); + letter-spacing: 1.12px; + line-height: var(--button-line-height); + border-bottom: 1px solid transparent; + margin-top: 8px; +} + +a.v2-resources__link:hover { + color: var(--c-tertiary-cool-gray); + text-decoration: none; + border-color: var(--c-tertiary-cool-gray); +} + +.v2-resources-container.section--background-with-dots::after { + height: 15%; + width: 37%; + left: 0; + bottom: 0; +} + +@media (min-width: 744px) { + .section.v2-resources-container { + padding: 0 0 80px; + } + + .section.v2-resources-container .v2-resources-wrapper { + padding: 80px 16px 0; + } + + .v2-resources__content-wrapper { + display: flex; + column-gap: 16px; + } + + .v2-resources__header { + width: 40%; + } + + .v2-resources__heading { + margin: 0; + } + + .v2-resources__content .v2-resources__subtitle:first-of-type { + margin-top: 0; + } + + .v2-resources-container.section--background-with-dots::after { + height: 28%; + width: 25%; + } +} + +@media (min-width: 1200px) { + .v2-resources-container.section--background-with-dots::after { + height: 42%; + width: 248px; + left: 50%; + transform: translateX(-644px); + } + + .section.v2-resources-container .v2-resources-wrapper { + padding: 80px 0 0; + } +} \ No newline at end of file diff --git a/blocks/v2-resources/v2-resources.js b/blocks/v2-resources/v2-resources.js new file mode 100644 index 000000000..765783192 --- /dev/null +++ b/blocks/v2-resources/v2-resources.js @@ -0,0 +1,33 @@ +export default async function decorate(block) { + const blockName = 'v2-resources'; + + const contentWrapper = block.querySelector(':scope > div'); + contentWrapper.classList.add(`${blockName}__content-wrapper`); + + const columns = [...block.querySelectorAll(':scope > div > div')]; + + const [headerCol, contentCol] = columns; + + headerCol.classList.add(`${blockName}__header`); + contentCol.classList.add(`${blockName}__content`); + + const header = [...headerCol.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + header[0].classList.add(`${blockName}__heading`); + + const subtitles = [...contentCol.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + subtitles.forEach((subt) => subt.classList.add(`${blockName}__subtitle`)); + + const contentElmts = [...contentCol.children]; + + contentElmts.forEach((el, idx) => { + const tagName = el.tagName.toLowerCase(); + const isButton = [...el.classList].includes('button-container'); + if (tagName === 'p' && isButton) { + const link = el.querySelector('a'); + link.classList.add(`${blockName}__link`); + link.classList.remove('button--primary', 'button'); + contentElmts[idx - 1].insertAdjacentElement('afterend', link); + el.remove(); + } + }); +} diff --git a/styles/styles.css b/styles/styles.css index 6e663a01a..626245534 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1072,7 +1072,7 @@ main .section.responsive-title h1 { height: 60%; height: round(60%, 24px); width: 40%; - width: round(40%, 24px);; + width: round(40%, 24px); position: absolute; right: 0; z-index: 1;