Fix #2739 add variables size for layout hero

[IvanFrescas]

This is an improvement|documentation fix.

Fixes issue #2739 adding three sass variables to hero layout

Proposed solution

Testing Done

It was tested locally and the layout hero is still working the same way as before.

Changelog updated?

No.

[jgthms]

So this is a breaking change because you're removing the horizontal padding on the hero-body defined here:

.hero-body
  padding: 3rem 1.5rem

I would actually created 4 variables:

$hero-body-padding
$hero-body-padding-vertical-small
$hero-body-padding-vertical-medium
$hero-body-padding-vertical-large

[IvanFrescas]

Thanks for your answer, I'll work on it.

[IvanFrescas]

What do you think of this solution?
I also noticed that in the documentation there is no reference to the is-small class. If you want I can make another issue of that.

[jgthms]

I'd keep padding-top and padding-bottom for the small medium and large versions. Otherwise, you're repeating 1.5rem 4 times.

[IvanFrescas]

I relied on the file section.sass where it also has the sizes for medium and large.
do you have any suggestions to avoid repeating 1.5rem?

[hammadzz]

I'd keep padding-top and padding-bottom for the small medium and large versions. Otherwise, you're repeating 1.5rem 4 times.

That would be cleaner.

I relied on the file section.sass where it also has the sizes for medium and large.
do you have any suggestions to avoid repeating 1.5rem?

Just remove the 1.5rem from medium and large as it is an unnecessarily overriding the same value from hero-body. But I am new to SASS so @jgthms will have to confirm.

[jgthms]

Actually you’re right. Doing like section.sass is fine actually. Let’s go with that.

[IvanFrescas]

Awesome.
So, should I leave the changes as they are? Or should I modify something? 🤔