Adjusted Markdown content styling

[ericsoderberghp]

Here are some styling tweaks to give just a bit more spacing and alignment to the text content.

[netlify]

✔️ Deploy Preview for hpe-dev-portal ready!

🔨 Explore the source changes: 308ea1c

🔍 Inspect the deploy log: https://app.netlify.com/sites/hpe-dev-portal/deploys/6126afbc3f002a0007890a24

😎 Browse the preview: https://deploy-preview-679--hpe-dev-portal.netlify.app

[jaygiang]

@ericsoderberghp LGTM! ✅

[jaygiang]

Hi @ericsoderberghp,

I was talking with Didier and we wondering the reason behind pushing the content more the left and freeing up space to the right, thus making the content more narrow. This will be something that I will bring up with the team.

Before:

After:

[ericsoderberghp]

Hey, sure. The motivation was that wider paragraphs reduce accessibility because it's harder to scan backwards to determine where the beginning of the next line is as you are reading it. The grommet Paragraph component has that built into it, tied to the font size. We provide fill={true} in Paragraph for exceptional one-off cases but it shouldn't be used as the standard way to represent text blocks.

[jaygiang]

Thanks @ericsoderberghp for the explanation! We will bring this up to the team next week and will get back to you.

[jaygiang]

Hi @ericsoderberghp, sorry about the late response.

We are good to implement this 👍 There are just 2 issues we noticed:

1. When a blog has an ordered or bulleted list, it will take up the full width of the container rather than match the width of the Paragraph component. Here's an example: https://deploy-preview-679--hpe-dev-portal.netlify.app/blog/application-modernization-with-the-application-workbench/
   I took a closer look and it looks like there are no styles set for ul, ol, li in the Markdown components. I've added the following custom styles to the components object in src > components > Markdown > index.js and it seemed to look better:

  ol: {
    props: {
      style: {
        fontSize: '27px',
        maxWidth: '643px',
      },
    },
  },
  ul: {
    props: {
      style: {
        fontSize: '27px',
        maxWidth: '643px',
      },
    },
  },
  li: {
    props: {
      style: {
        marginBottom: '20px',
      },
    },
  },

Before:

After:

Though I'm not sure if there's a better approach since these values are hardcoded to match the styles from the Paragraph component.

2. When a blog has a code block, it will also take up the full width of the container. Here's an example: https://deploy-preview-679--hpe-dev-portal.netlify.app/blog/accessing-dtap-in-pods/
   I took a closer look at this as well and was able to reduce the width and font size in the following file src > components > Markdown > markdownTheme.js

Before:

After:

[jaygiang]

Hi @ericsoderberghp, just a friendly reminder to see if you have had a chance to see the comment above. Thanks!

[ericsoderberghp]

Hi @ericsoderberghp, just a friendly reminder to see if you have had a chance to see the comment above. Thanks!

Ah, yes. Glad you poked me. I can't this week, hopefully next week. Thanks for the good feedback.