diff --git a/blocks/forms/forms.css b/blocks/forms/forms.css index 1406df7a..f7bd0020 100644 --- a/blocks/forms/forms.css +++ b/blocks/forms/forms.css @@ -2,6 +2,11 @@ padding: 50px 0; } +.forms h1, .forms h2, .forms h3, .forms h4, .forms h5, .forms h6 { + padding-top: 20px; + padding-bottom: 20px; +} + .grey-forms { border: 1px solid #ccc; padding: 10px 15px; diff --git a/blocks/rte/rte.css b/blocks/rte/rte.css new file mode 100644 index 00000000..8d1126ef --- /dev/null +++ b/blocks/rte/rte.css @@ -0,0 +1,3 @@ +.rte { + padding: 50px 0; +} \ No newline at end of file diff --git a/blocks/rte/rte.js b/blocks/rte/rte.js new file mode 100644 index 00000000..f120024f --- /dev/null +++ b/blocks/rte/rte.js @@ -0,0 +1,19 @@ +export default function decorate(block) { + if (block.classList.contains('hyperlink')) { + const images = block.querySelectorAll('picture'); + images.forEach((image) => { + const { parentElement } = image; + const { nextSibling } = parentElement; + if (nextSibling) { + const nextNextSibling = nextSibling.nextSibling; + if (nextNextSibling) { + const link = nextNextSibling.querySelector('a'); + if (link && link.classList.contains('secondary')) { + link.innerHTML = ''; + link.appendChild(image); + } + } + } + }); + } +} diff --git a/styles/Typo.css b/styles/Typo.css index 58014159..598c4176 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -864,55 +864,117 @@ body.purple input[type="submit"]:hover { } .text-left { - text-align: left; + text-align: left!important; } .text-center { - text-align: center; + text-align: center!important; } .text-right { - text-align: right; + text-align: right!important; +} + +.align-start { + align-items: flex-start; +} + +.align-center { + align-items: center; +} + +.align-end { + align-items: flex-end; +} + +.justify-start { + justify-content: flex-start; +} + +.justify-center { + justify-content: center; +} + +.justify-end { + justify-content: flex-end; +} + +.flex { + display: flex; +} + +.flex-row { + flex-direction: row; +} + +.flex-column { + flex-direction: column; +} + + + +.h-space-10 { + padding: 0 10px; +} + +.h-space-20 { + padding: 0 20px } -.padding-1 { - padding: 1px; +.h-space-30 { + padding: 0 30px; } -.padding-2 { - padding: 2px +.h-space-40 { + padding: 0 40px; } -.padding-4 { - padding: 4px; +.h-space-50 { + padding: 0 50px; } -.padding-8 { - padding: 8px; +.v-space-10 { + padding: 10px 0; } -.padding-16 { - padding: 16px; +.v-space-20 { + padding: 20px 0; } -.margin-1 { - margin: 1px; +.v-space-30 { + padding: 30px 0; } -.margin-2 { - margin: 2px +.v-space-40 { + padding: 40px 0; } -.margin-4 { - margin: 4px; +.v-space-50 { + padding: 50px 0; } -.margin-8 { - margin: 8px; +.space-5 { + padding: 5px; } -.margin-16 { - margin: 16px; +.space-10 { + padding: 10px; +} + +.space-20 { + padding: 20px; +} + +.space-30 { + padding: 30px; +} + +.space-40 { + padding: 40px; +} + +.space-50 { + padding: 50px; } .bg-grey { @@ -1600,3 +1662,47 @@ form.hs-form .hs-input[type="checkbox"] { padding-bottom: 0 } +/* landing section */ + +.landing-section { + box-sizing: border-box; + margin: 0 auto; + width: 980px; + display: flex; + align-items: flex-start; + justify-content: center; + gap: 5px; + padding: 50px 0; +} + +.landing-section > div { + flex-grow: 1; + flex-basis: 0; + padding: 0 20px; +} + +.landing-section .forms { + padding: 30px; + background-color: #fff;; + border: 1px solid #cbd6e2; +} + +@media (max-width: 1024px) { + .landing-section { + padding: 40px 20px; + width: auto; + flex-direction: column; + } + + .landing-section > div { + padding: 0; + width: 100%; + } +} + +@media (max-width: 479px) { + .landing-section { + padding: 30px 10px; + width: auto; + } +}