Skip to content

<hr/> tag looks weird with margin: 0 #11

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

Closed
ozkriff opened this issue Aug 21, 2019 · 2 comments · Fixed by #14
Closed

<hr/> tag looks weird with margin: 0 #11

ozkriff opened this issue Aug 21, 2019 · 2 comments · Fixed by #14

Comments

@ozkriff
Copy link
Member

ozkriff commented Aug 21, 2019

Minima's _base.scss file resets the margin of the <hr> tag to zero:

body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;

And it results in that Markdown's horizontal line ------ sticks to the next line uncomfortably close:

image

With this brute-force patch:

$ git diff _sass/
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
index db7d5a1..cac4ba7 100644
--- a/_sass/minima/_base.scss
+++ b/_sass/minima/_base.scss
@@ -37,6 +37,7 @@ body {
 h1, h2, h3, h4, h5, h6,
 p, blockquote, pre,
 ul, ol, dl, figure,
+hr,
 %vertical-rhythm {
   margin-bottom: $spacing-unit / 2;
 }

it looks much better to me:

image

But I'm note sure if that's the correct way of doing it.

@ozkriff
Copy link
Member Author

ozkriff commented Aug 21, 2019

Also, something seems to be wrong with nested lists' margins:

image

@17cupsofcoffee
Copy link
Collaborator

The only downside to editing the minima files would be we'd have to diff them if we upgrade to a newer version or risk losing your changes - the alternative would be to add hr { margin-bottom: $spacing-unit / 2; } to extra.scss, but that would bump the filesize a little. Tradeoffs to both ways :)

The nested list issue is my bad - change this part of extra.scss:

li {
    // For consistency with other elements.
    margin-bottom: 15px;
}

To this:

li {
    // For consistency with other elements.
    margin: 15px 0;
}

Might be worth adding these tweaks (and any others) to the newsletter PR if they're in service of making the newsletter look better!

This was referenced Aug 28, 2019
17cupsofcoffee added a commit that referenced this issue Aug 29, 2019
* Fix CSS margin issues
* Update extra.scss

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

Successfully merging a pull request may close this issue.

2 participants