h2 header within a div with "notice" class displays box with a weird top margin

Andre601 commented 3 years ago

Environment

Minimal Mistakes version: 2.24.0
Ruby gem or remote theme version: 0.4.3 (Jekyll-remote-theme)*
Jekyll version: 3.9.0*
Git repository URL: https://github.com/Readme-Workflows/Readme-Icons
GitHub Pages hosted (if yes provide URL to site): https://readme-workflows.github.io/Readme-Icons/
Operating system: Windows 10

*Info taken from https://pages.github.com/versions/ since it's a GitHub pages hosted page.

Expected behavior

The h2 header should not have such a large padding with the notice box above it.

Steps to reproduce the behavior

Use a H2 Header within a div that has the notice<--type> class applied.

Example:

{% capture example %}
This is some text to display below the header.  
The header itself will have a large green area above it since the margin of the header expands the notice div upwards.
{% endcapture %}

<div class="notice--success">
  <h2 class="no_toc">Example</h2>
  {{ example | markdownify }}
</div>

Other

I've only tested this with the H2 and H4 header. I can't say if other headers are affected too, but I wouldn't doubt this to be the case. The H4 Header seems to be fine.

mmistakes commented 3 years ago

I think you're hitting all the scenarios the notice class wasn't designed to handle. The notice-- classes were written to only apply to a <p> element. Not blockquotes, lists, headings, etc. So this isn't completely unexpected as it was done intentionally as a way of styling a paragraph of Markdown easily.

The better path forward I think is to abstract notices into their own _includes that accept parameters for headings and content. Then those elements can be styled appropriately.

iBug commented 3 years ago

H4 was taken special care but not H2:

https://github.com/mmistakes/minimal-mistakes/blob/42f75127024eed8c24c39c41b11fabb930cbe147/_sass/minimal-mistakes/_notices.scss#L24-L25

mmistakes commented 3 years ago

OK. I stand corrected. So maybe a small CSS adjustment to fix the spacing.

And a future enhancement to build out a new notice helper. Similar to this... https://idratherbewriting.com/documentation-theme-jekyll/mydoc_alerts.html

Could have swore I built this before, but maybe I'm thinking of another one of my themes.... or personal site... or both.

github-actions[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please add as an Idea under discussions and elaborate on why it is core to this project and why you feel more than 80% of users would find it beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

mmistakes / minimal-mistakes