forked from hlxsites/merative
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into zelta-page-updates
- Loading branch information
Showing
2 changed files
with
250 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| main .image-content-grid-container { | ||
| width: 100%; | ||
| } | ||
|
|
||
| main .image-content-grid-container .main-image-content-grid-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper > p { | ||
| font-size: var(--font-size-11); | ||
| font-family: var(--sans-serif-font-medium); | ||
| line-height: var(--line-height-120); /* 16.8px */ | ||
| letter-spacing: var(--letter-spacing-02-em); | ||
| text-transform: uppercase; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper > h2 { | ||
| margin: unset; | ||
| margin-top: var(--spacer-element-08); | ||
| width: 85%; | ||
| } | ||
|
|
||
| .image-content-grid-container .default-content-wrapper { | ||
| display: none; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid { | ||
| position: relative; | ||
| display: grid; | ||
| grid-template-columns: 1fr; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p { | ||
| font-size: var(--font-size-16); | ||
| letter-spacing: var(--letter-spacing-001-em); | ||
| margin: var(--spacer-element-05) 0 var(--spacer-element-07) 0; | ||
| line-height: var(--line-height-160); | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p span svg { | ||
| height: var(--spacer-layout-03); | ||
| width: auto; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p:first-child { | ||
| margin: unset; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div { | ||
| width: 100%; | ||
| margin: 0 auto; | ||
| padding-top: var(--spacer-element-10); | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child { | ||
| border-bottom: none; | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 { | ||
| font-family: var(--sans-serif-font-medium); | ||
| font-size: var(--font-size-18); | ||
| line-height: var(--line-height-160); | ||
| letter-spacing: var(--letter-spacing-1); | ||
| margin: 0; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div .button-container { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div a { | ||
| display: inline-block; | ||
| text-decoration: none; | ||
| font-family: var(--sans-serif-font-medium); | ||
| font-size: var(--font-size-16); | ||
| letter-spacing: var(--letter-spacing-1); | ||
| height: var(--spacer-element-06); | ||
| border-bottom: var(--spacer-element-01) solid var(--primary-purple); | ||
| color: var(--primary-purple); | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div a:hover { | ||
| background: var(--gradient-left-right); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; /* stylelint-disable-line */ | ||
| -webkit-text-fill-color: transparent; | ||
| color: transparent; | ||
| border-image-slice: 1; | ||
| border-image-source: var(--gradient-left-right); | ||
| } | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| main .image-content-grid-container .main-image-content-grid-wrapper { | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| padding: var(--spacer-layout-06) 0; | ||
| align-items: flex-start; | ||
| gap: 84px; | ||
| flex-shrink: 0; | ||
| margin: 0 auto; | ||
| width: calc(100% - 72px); | ||
| } | ||
|
|
||
| .section.image-content-grid-container .image-content-grid-wrapper { | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| .image-content-grid-container .default-content-wrapper { | ||
| display: block; | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper > h2 { | ||
| margin: unset; | ||
| margin-top: var(--spacer-element-07); | ||
| margin-bottom: var(--spacer-element-10); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child { | ||
| padding-top: 0; | ||
| } | ||
|
|
||
| .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img { | ||
| width: 163px; | ||
| border-bottom-right-radius: 163px; | ||
| border-top-right-radius: 163px; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (min-width: 1200px) { | ||
| main .image-content-grid-container .main-image-content-grid-wrapper { | ||
| width: var(--section-width-desktop); | ||
| padding: var(--spacer-layout-07) 0; | ||
| gap: var(--gap-120); | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper > p { | ||
| font-size: var(--font-size-14); | ||
| letter-spacing: var(--letter-spacing-02-em); | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p { | ||
| max-width: 305px; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper > h2 { | ||
| margin: unset; | ||
| margin-top: var(--spacer-element-08); | ||
| margin-bottom: var(--spacer-element-05); | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid { | ||
| position: relative; | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| grid-template-rows: auto auto auto; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child { | ||
| padding-top: var(--spacer-layout-04); | ||
| } | ||
|
|
||
| .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img { | ||
| width: 265px; | ||
| border-bottom-right-radius: 265px; | ||
| border-top-right-radius: 265px; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 { | ||
| font-size: var(--font-size-21); | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > p { | ||
| margin-right: 39px; | ||
| } | ||
|
|
||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > p { | ||
| margin-left: 39px; | ||
| } | ||
|
|
||
| /* no bottom padding for last row of cards */ | ||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-last-child(2), .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child { | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| /* no border on last row of cards */ | ||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-last-child(-n + 2), | ||
| .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-child(2n + 1):nth-last-child(-n + 2) ~ .image-content-grid-container .image-content-grid-wrapper .image-content-grid div { | ||
| border-bottom: none; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /* eslint-disable max-len */ | ||
| export default async function decorate(block) { | ||
| // Remove first level of nesting | ||
| const childDivs = block.querySelectorAll('.image-content-grid > div'); | ||
|
|
||
| childDivs.forEach((childDiv) => { | ||
| while (childDiv.firstChild) { | ||
| block.appendChild(childDiv.firstChild); | ||
| } | ||
| childDiv.remove(); | ||
| }); | ||
|
|
||
| // Function to find the ancestor with the class .image-content-grid-container | ||
| function findImageContentGridContainer(element) { | ||
| let parent = element.parentElement; | ||
|
|
||
| while (parent) { | ||
| if (parent.classList.contains('image-content-grid-container')) { | ||
| return parent; // Return the element with the desired class | ||
| } | ||
| parent = parent.parentElement; // Move up to the next parent element | ||
| } | ||
|
|
||
| return null; // Return null if the ancestor isn't found | ||
| } | ||
|
|
||
| const imageContentGridContainer = findImageContentGridContainer(block); | ||
|
|
||
| // Create a new div element | ||
| const newWrapper = document.createElement('div'); | ||
| newWrapper.classList.add('main-image-content-grid-wrapper'); | ||
|
|
||
| // Iterate through the existing children and move them into the new div | ||
| while (imageContentGridContainer.firstChild) { | ||
| newWrapper.appendChild(imageContentGridContainer.firstChild); | ||
| } | ||
|
|
||
| // Append the new div back to the solution-list-container | ||
| imageContentGridContainer.appendChild(newWrapper); | ||
|
|
||
| // Get the parent element with class "default-content-wrapper" | ||
| const defaultContentWrapper = imageContentGridContainer.querySelector('.default-content-wrapper'); | ||
|
|
||
| // Get the first p element among all p elements inside the default content wrapper | ||
| const firstPTag = defaultContentWrapper.querySelector('p'); | ||
|
|
||
| // Get the h2 tag from default content wrapper | ||
| const heading = defaultContentWrapper.querySelector('h2'); | ||
|
|
||
| // Select the image-content-grid-wrapper element | ||
| const imageContentGridWrapper = imageContentGridContainer.querySelector('.image-content-grid-wrapper'); | ||
| imageContentGridWrapper.insertBefore(heading, imageContentGridWrapper.firstChild); | ||
| imageContentGridWrapper.insertBefore(firstPTag, imageContentGridWrapper.firstChild); | ||
| } |