diff --git a/blocks/whatsinside/whatsinside.css b/blocks/whatsinside/whatsinside.css index 4c03d746..adfea342 100644 --- a/blocks/whatsinside/whatsinside.css +++ b/blocks/whatsinside/whatsinside.css @@ -1,80 +1,79 @@ -.wrapper { +.whatsinside { + padding: 20px; + max-width: 1400px; + margin: 0 auto; + text-align: left; +} + +.whatsinside .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2.75rem; - padding-top: 50px; - padding-left: 50px; - padding-right: 60px; + padding-top: 40px; + padding-left: 40px; + padding-right: 40px; } -.element:first-child { - font-size: 1.5rem; - color: #2E2B31; - font-family: helvetica; - font-weight: 700; - hyphens: auto; - letter-spacing: .15rem; - margin-bottom: 0; - margin-top: 1.5rem; - box-sizing: border-box; - display: block; - margin-block-start: 0.83rem; - text-align: left; - padding-left: 30px !important; +.whatsinside .wrapper .whats-inside_block { + display: flex; + justify-content: space-between; + margin-bottom: 40px; +} + +.whatsinside .wrapper .whats-inside_block .whats-inside_block-image { + width: 15%; +} + +.whatsinside .wrapper .whats-inside_block .whats-inside_block-image img { + margin-top: 1rem; + width: 60px; + height: auto; } -.content { - width: 346px; +.whatsinside .wrapper .whats-inside_block .whats-inside_block-content { + width: 82%; + text-align: left; color: #2E2B31; font-family: helvetica; + margin-top: 1rem; +} + +.whatsinside .wrapper .whats-inside_block .whats-inside_block-content h3{ + font-size: 1.25rem; letter-spacing: .25rem; font-weight: 700; + hyphens: auto; line-height: 1.28; + margin-top: 0.5rem; margin-bottom: 0; - background-color: #fff; - font-size: 1.25rem; - overflow-wrap: break-word; - text-align: left; -} - -.imgdiv { - display: flex; + padding: 0; } -.imgdiv div:first-child img { - width: 60px; - height: 60px; -} - -.imgdiv div:first-child { - width: 20%; - padding-top: 10px; +.whatsinside .wrapper .whats-inside_block .whats-inside_block-content p{ + line-height: 28px; + margin-bottom: 0; + margin-top: 1rem; + padding: 0; } @media only screen and (max-width: 767px) { - .wrapper { + .whatsinside .wrapper { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; - padding: 55px; grid-gap: 0; } - .imgdiv div:first-child { - width: 100%; - text-align: center; - } - - .imgdiv { - display: flex; + .whatsinside .wrapper .whats-inside_block { flex-direction: column; + margin-bottom: 40px; + justify-content: flex-start; } - .imgdiv div:first-child img { - width: 120px; - height: 120px; + .whatsinside .wrapper .whats-inside_block .whats-inside_block-image { + width: 100%; } - .content { - width: 100%; + .whatsinside .wrapper .whats-inside_block .whats-inside_block-content { + width: 100%; } } \ No newline at end of file diff --git a/blocks/whatsinside/whatsinside.js b/blocks/whatsinside/whatsinside.js index 7073aacb..6d0aea3c 100644 --- a/blocks/whatsinside/whatsinside.js +++ b/blocks/whatsinside/whatsinside.js @@ -1,4 +1,4 @@ -import { div, h2, h3 } from '../../scripts/dom-builder.js'; +import { div, h2 } from '../../scripts/dom-builder.js'; export default function decorate(block) { const picEle = block.querySelector('img'); @@ -7,24 +7,25 @@ export default function decorate(block) { const wrapper = div({ class: 'wrapper' }); [...block.children].forEach((element, index) => { if (index === 0) { - const newelement = h2({ class: 'element' }, element.textContent); - headingDiv.append(newelement); + const enablement = h2({ class: 'element' }, element.textContent); + headingDiv.append(enablement); } else if (index !== 1) { - const newelement = h3({ class: 'content' }, element.textContent); const imgDiv = document.createElement('div'); const image = document.createElement('img'); image.setAttribute('src', src); imgDiv.appendChild(image); + imgDiv.classList.add('whats-inside_block-image'); const contentDiv = document.createElement('div'); - contentDiv.append(newelement); + contentDiv.classList.add('whats-inside_block-content'); + contentDiv.append(element); const mainDiv = document.createElement('div'); - mainDiv.classList.add('imgdiv'); + mainDiv.classList.add('whats-inside_block'); mainDiv.append(imgDiv); mainDiv.append(contentDiv); wrapper.append(mainDiv); } }); - const parent = block.parentNode; - parent.prepend(headingDiv); - block.replaceChildren(wrapper); + block.innerText = ''; + block.appendChild(headingDiv); + block.appendChild(wrapper); } diff --git a/styles/Typo.css b/styles/Typo.css index 2073f4f8..a63135c5 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -152,6 +152,32 @@ th { padding: 12px 10px; } +/* Horizontal alignment based on align attribute */ +td[align="left"] { + text-align: left; +} + +td[align="center"] { +text-align: center; +} + +td[align="right"] { +text-align: right; +} + +/* Vertical alignment based on valign attribute */ +td[valign="top"] { +vertical-align: top; +} + +td[valign="middle"] { +vertical-align: middle; +} + +td[valign="bottom"] { +vertical-align: bottom; +} + body.red th { background-color: #d1222b; }