fix(blog-detail): add correct spacing to paragraph

[proeung]

Issue

Fixes https://github.com/hlxsites/merative2/issues/246

Description

Changed

• This PR adds the correcting spacing between paragraphs for desktop and smaller breakpoints.
• Currently, we have 16px spacing and the text paragraphs are too close (see - https://www.merative.com/blog/marcy-tatsch-curam).
• Adds styling for the unordered list which was not part of the Blog Detail page Figma design specs.

Design Specs

• Figma Link - https://www.figma.com/file/FSqQ1LYrVSssEFOZuOnMIE/Final-page-layouts-for-Merative.com?type=design&node-id=1262%3A48026&t=jPkVX4hrssQJtxqi-1

Test URLs

• Before (Changes from main): https://main--merative2--hlxsites.hlx.live/blog/marcy-tatsch-curam
• After (Changes from this PR): https://fix-blog-paragraph-spacing--merative2--proeung.hlx.page/blog/marcy-tatsch-curam

Testing Instruction

• Visit one of the blog pages (eg. https://fix-blog-paragraph-spacing--merative2--proeung.hlx.page/blog/ism-recap-2022)
• Ensure that the spacing on the desktop and smaller breakpoints match with the Figma design
• Ensure that there's proper styling of the <ol> or unordered list

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/marcy-tatsch-curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/marcy-tatsch-curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/marcy-tatsch-curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[proeung]

@keith-kaplan Great find! We have the styling for the <ol> unordered list defined in the Design System Figma file (see - link), however, these styles were not accounted for in the code because it wasn't a treatment that was being displayed as options within the Blog detail page design (see link).

Anywho, I went in and added the styling for the <ol> and <ul> to reflect the design system. @sachinmesh or @anabarcelona Can you take a look at this page (https://fix-blog-paragraph-spacing--merative2--proeung.hlx.page/blog/ism-recap-2022) and let me know if the styles for the listing and paragraph are correct for all breakpoints? Thanks!

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[proeung]

Adding @sachinmesh's design QA feedback that he left in the JIRA comment (https://jira.wh-sdlc.watson-health.ibm.com/browse/MERATIVE-768).

HI Putra Bonaccorsi

The spacing between paragraphs around 48px is good.

Can we increase the spacing between the title and curam image to 48px. As well above the Marcy Tatsch image to 48px.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[proeung]

@sachinmesh This PR is ready for a design QA re-review.

[sachinmesh]

HI @proeung This spacing between title and curam image should be 48px in desktop and 32px in tablet / Mobile.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[proeung]

@sachinmesh Okay, can you check again?

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[sachinmesh]

HI @proeung , thank you for the spacing adjustment. Now its good. One last thing i saw was the font style of selected text in table of contents. It should be H5, i.e 16px Alliance No.1 Regular and not semibold.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/blog/ism-recap-2022
/blog/marcy-tatsch-curam

[proeung]

HI @proeung , thank you for the spacing adjustment. Now its good. One last thing i saw was the font style of selected text in table of contents. It should be H5, i.e 16px Alliance No.1 Regular and not semibold.

@sachinmesh I already fixed this in another PR, but for some reason, this deploy preview is still loading the cached version. I've raised this caching issue with folks from the Adobe side (https://adobe-dx-support.slack.com/archives/C04BLPWJRGR/p1687803179395579). Regardless, this font family as already been addressed (see this deploy preview - https://fix-blog-paragraph-spacing-2--merative2--proeung.hlx.page/blog/marcy-tatsch-curam).

Also, let's keep the scope of this PR to just the description outlined above.