♻️ Improve padding for headings inside greyboxes

[tiagov8]

cc @hveraus @bettybondoc

Hi team (designers),

Pain

When you have a heading in the 1st line of a greybox, it adds a top padding that is unnecessary.

Tasks

• [x] 1. Remove top padding from headings if they are the 1st element inside a greybox

greybox > h1:first-child, greybox > h2:first-child, greybox > h3:first-child, greybox > h4:first-child {
  margin-top:0;
}

https://www.ssw.com.au/rules/awesome-readme/

Thanks!

[jeoffreyfischer]

✅ Done - I have removed top padding from headings if they are the 1st element inside a greybox. I have also removed bottom padding from headings if they are the last element inside a greybox.

Figure: Margin is removed for headings at the top or bottom of a greybox

[tiagov8]

Hey @jeoffreyfischer I forgot to include tasks for other boxes 🤦‍♂️

• [x] 1. Please do the same for "info" "hightlight" "china" "codeauditor" and "todo" https://ssw.com.au/rules/rule/#5-boxes

[jeoffreyfischer]

The changes have been applied to all boxes mentionned by @tiagov8. However, some of them didn't get the style fixed for some reason.

✅ Fixed for

• greybox
• info

❌ Not fixed for

• info
• highlight
• china
• codeauditor
• todo

As per my conversation with Tiago, we have no idea why the second list is not fixed (info, highlight...). We will deploy the changes to Staging to check whether they work there. Note: the main use case was spacing in greybox, so ut's not the end of the world if the other boxes heading spacing is not fixed as they are rarely used.

[tiagov8]

This is now done ✅

See examples: https://www.ssw.com.au/rules/rule