h1 elements are not styled

[maciejmatczak]

Hello,
Just came across an issue, as in title. In style.scss there is no style statement for h1, hence it looks almost like a normal text.

Code on left, browser on the right, it's a part from an article:

[ivanhercaz]

Hi @maciejmatczak! Thank you very much for this report. It is very useful, not just to add the h1 style, but for another headings styles such as h5 and h6. Today I am going to work on this and I will release a new version before the end of the day.

My idea is to use the Bulma element title with the size especification (is-*). As you can see in the screenshot below, h4, h5 and h6 have a strange style so I need to specify some details as margin-top and not margin-bottom.

I am open to any idea!

[maciejmatczak]

Hi @ivanhercaz, thanks for reply.

It looks like those are not supposed to be nested at all :D. Maybe ignore it and just use is-size-1? If you would still like to use it, maybe some html attribute conditionals:

p + .title.is-1 {
  margin-top: 2rem;
}

[ivanhercaz]

The idea is to related each heading with each is-size. Currently there is already a SCSS block that works fine with h2 and h3.

buruma/static/scss/style.scss

Lines 32 to 42 in fb47c3e

	h2 {
	@extend .subtitle, .is-3;
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
	}
	h3 {
	@extend .subtitle, .is-4;
	margin-bottom: 0.5rem;
	margin-top: 1.5rem;
	}

My idea is to apply same margin-top for every heading and then reduce the margin-bottom progressively. I think h1, h2 and h3 are fine, although I need to change the last two to is-2 and is-3 respectively. But I think h4, h5 and h6 should have a minimum margin-bottom and a reduced margin-top to 1rem (I have to test it yet).

What do you think @maciejmatczak?

[ivanhercaz]

@maciejmatczak, one question, what version of Buruma are you using? v. 0.1.0 (via pelican-themes) or 0.2.1 (via the master branch of this repository)?

[ivanhercaz]

Another question: title class makes headings stronger that I usually use it, this is why I extend h2 and h3 with subtitle instead of title. I am going to perform this changes according to this, but I really want to read your opinion about it.

[maciejmatczak]

Hmmm, 0.2.1 as far as I remember.

Checkout the fiddle. Raw bulma, headers with subtitle is-* vs is-size-* (these are separate classes https://bulma.io/documentation/modifiers/typography-helpers/), accordingly:
https://jsfiddle.net/0jvo135g/2/

After you applying margin-top, is it any difference?

[ivanhercaz]

Ups, excuse me I didn't read it until I already made a PR with a proposal. Yes, I know they are separate classes. The difference between subtitle is-* and is-size-* is a very little change in the margin-top.

The reason why I I decide to use subtitle and is-* is because I adapt it with more margin-top and with less margin-bottom, changing this values just in .subtitle class, in that way it isn't necessary to change in each tag, just extend them. I think it is a cleaner way.

Could you check the PR I opened (#34) for this? Thank you a lot for your participation. I am really happy that Buruma has your attention ❤️