From 93f1b0f4ffa1533330f4067a2b8a29f6afc7d170 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 23 Nov 2023 07:13:29 +0530 Subject: [PATCH 1/3] Updated the rte block with landing-section css --- blocks/forms/forms.css | 5 ++ blocks/rte/rte.css | 3 + blocks/rte/rte.js | 19 ++++++ styles/Typo.css | 147 ++++++++++++++++++++++++++++++++++------- 4 files changed, 151 insertions(+), 23 deletions(-) create mode 100644 blocks/rte/rte.css create mode 100644 blocks/rte/rte.js 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 fd9c931a..34f83b0e 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 { @@ -1590,3 +1652,42 @@ 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; + + } +} + +@media (max-width: 479px) { + .landing-section { + padding: 30px 10px; + width: auto; + } +} From 5a646f7c9f1bf6e23d4f041880f3373392d048e4 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 23 Nov 2023 07:23:39 +0530 Subject: [PATCH 2/3] Updated the mobile response --- styles/Typo.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/styles/Typo.css b/styles/Typo.css index 34f83b0e..34470e46 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -1681,7 +1681,11 @@ form.hs-form .hs-input[type="checkbox"] { .landing-section { padding: 40px 20px; width: auto; - + flex-direction: column; + } + + .landing-section > div { + padding: 0; } } From 229eb8c210c8b86514442ed5f54a46e818874e04 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 23 Nov 2023 07:27:01 +0530 Subject: [PATCH 3/3] Made 100% form on mobile version --- styles/Typo.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/Typo.css b/styles/Typo.css index 34470e46..bd0d5e14 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -1686,6 +1686,7 @@ form.hs-form .hs-input[type="checkbox"] { .landing-section > div { padding: 0; + width: 100%; } }