Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Andre601 opened this issue Jul 23, 2021 · 4 comments

Comments

@Andre601
Copy link

Andre601 commented Jul 23, 2021

Environment

*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
Copy link
Owner

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
Copy link
Collaborator

iBug commented Jul 23, 2021

H4 was taken special care but not H2:

h4 {
margin-top: 0 !important; /* override*/

@mmistakes
Copy link
Owner

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

This comment was marked as outdated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants