Merge pull request #146 from hlxsites/bug/whats-inside

Updated the alignment issues and fixed the styling issues

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%;
     }
 }

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);
 }

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;
 }