update h3, h4 styles on article pages

[ryanpitts]

Per https://github.com/OpenNews/opennews-source/issues/22#issuecomment-277016862, need to:

• Push current smaller gray H3 style into H4
• Duplicate current red H2 style into H3

[ryanpitts]

@kissane could you point me to an example article that will help me know if I apply the right changes? (I haven't done this yet, just looking for a good test case)

[kissane]

Sure! This one (this is the staging copy) has plenty of H3s and H4s to work with: https://opennews-source-staging.herokuapp.com/articles/how-we-made-rewind-red-planet/

[kissane]

There's some squirreliness happening here that needs my attention and then @ryanpitts help

[kissane]

OK, so. I have been looking at the CSS and especially at our old markup. I have learned…so many things. Like how I have been using H3s for manual subheds and the CMS has been using H2s, and everything makes sense now.

@ryanpitts, can we replace existing rules for H2s and H3s within articles with this rule?

.article-main h2, .article-main h3 { color: #F7786B; font-size: 1.2em; }

And can we make H4s use this?

.article-main h4 {
    color: #7C8A98;
    font-size: 1em;
}

instead of this?

.article-main h4 {
    font-size: .9em;
}

That would make me very happy, assuming I have the right rules.

[kissane]

@beep, before Ryan dives into this, would you mind giving it a brief sense-check? I would hate to be driving us off a cliff with my CSS ineptitude.

[beep]

@kissane Happy to! Do you have a few links of affected pages, perchance? Would love to see some of this olde markuppe.

[kissane]

@beep Thank you so much!

https://opennews-source-staging.herokuapp.com/articles/security-journalists-part-two-threat-modeling/ is one in which the first-level subheads are H2s, which is not a thing I realized.

and https://opennews-source-staging.herokuapp.com/articles/visually-speaking-patterns-humane-data-visualizati/ is one in which the first-level subheads are H3s, as I thought they always were.

In all cases of which I'm aware, the second-level subheads in articles are H4s.

So I think for now making in-article H2 and H3 that lovely orange and the H4 the medium grey will achieve the intended effect, but I much appreciate the additional pair of eyes.

[kissane]

Orange? Red? It's very nice, whatever it is.

[beep]

@kissane Thank youuuuuu for the links! So, yes, you totally nailed the suggested fix. Specifically, we’d want to replace this bit with this:

.article-main h2,
.article-main h3 {
    color: #F7786B;
    font-size: 1.2em;    /* 24/20 */
}
.article-main h4 {
    color: #7C8A98;
    font-size: 1em;
}
.article-main h5 {
    font-size: 0.9em;
}
.article-main h6 {
    font-size: 0.8125em;    /* 13/16 */
}

[kissane]

Thank you for pretending that my nonsense is equivalent to your lovely fix. And thanks also for the fix!

[ryanpitts]

I'll drop this in and get some grunt on

[ryanpitts]

OK this CSS update is on staging

[kissane]

It's perfect, thanks everyone!