Header size on lifecycle page

[iimog]

On the lifecycle page: https://opentraits.org/lifecycle different header levels are shown in different sizes. However, <h1> (without post-title class) is much smaller than <h2>. This makes the structure of the document a little confusing. I'm not sure whether this is something that should be fixed in the css stylesheet or if it is better to just shift all headings by one level (i.e. ## --> ###).

[jhpoelen]

hey @iimog - great observation about the header levels- the sizes do look different and this doesn't help when reading the lifecyle page.

I didn't carefully look at layout when I copied the page over from our draft hackpad.io space.

I like your idea to come up with some kind of style guide, select another pre-packed style or create some customized css style sheet: the jekyll static site generator that is used should support this.

PS please feel free to tag me in issue if you'd like to have my input. I'd be happy to self-assign to an issue if I can commit to working on something.

[iimog]

Awesome, I'll have a look at the style sheets and pre-packed styles. Thanks for your help @jhpoelen

[fdschneider]

Hi there, I had a look into this earlier, but I had trouble running the Jekyll website locally because of some major version changes in Jekyll.

It seems the config.yml calls the minima theme. These external themes are a new thing from Jekyll 4.0 onwards. They are installed as own ruby gems. The theme is then partly overwritten by the local stylesheet-specs in style.css, which defines new h1 & h2 sizes within the content div, but no further. Actually, the style.css should not be necessary as the theme would produce a neatly looking website.

Alternatively, the page could use an own stylesheet without relying on the minima theme (the old way).

When revising this, you should all make sure to have the most recent version of Jekyll installed.

[jhpoelen]

@fdschneider good to hear that you had a look and I can see that having to upgrade to jekyll 4 , released relatively recently in Aug 2019, is a bit of a bummer. I wish there were more tools like unix's cat (https://en.wikipedia.org/wiki/Cat_(Unix)) - a tool that hasn't changed much since the 1970s.

There is some version info for web developers in the readme on https://github.com/open-traits-network/open-traits-network.github.io#instructions-for-website-developers , but please do feel free to update the info to make it more apparent. I did notice that Github Pages (the service that currently hosts our pages) appears the be using <meta name="generator" content="Jekyll v3.9.0" /> .

As far as the styling goes - I think that you can override existing styles in _layout templates using a custom css without having to ditch the entire style. An example is the member page at https://github.com/open-traits-network/open-traits-network.github.io/blob/master/_layouts/member.html#L26 using css from the css/ directory .

Curious to see what we'll come up with .

[iimog]

I finally had another look and the quick fix was actually quite easy: https://github.com/open-traits-network/open-traits-network.github.io/commit/6584f2dc671568bdcf573fd73cadc693820e0361 Apparently the theme we are using has css entries for h2-h6 inside class .post-content, manually setting font size. However, there is no such entry for h1 (probably because they assume there is only one h1 for the whole post and that is part of the .post-title not the .post-content. I now manually added a rule to assets/main.scss to appropriately handle h1 inside .post-content. In my opinion this is good enough and this issue can be closed.

[jhpoelen]

@iimog Thanks Markus for making this work! I reviewed your changes and noticed that the header sizes are a little more intuitive now. Am closing this issue now, but others, please feel free to re-open if you feel that there's more work left to do on adjusting the header size on the https://opentraits.org/lifecycle page.