Convert blog post titles to h1 while keeping the styles

[bhumi1102]

This PR addresses this SEO task

• Update the blog post tiles and "category" headings while are displayed in the same location on /blog
• Update styles to maintain current font size and weight, otherwise the blog post titles look too huge (screenshot attached).

[bhumi1102]

CC: One more SEO task @AmandaPerino, @jathayde

[bhumi1102]

Without css update, the titles look like this:

before:

after:

[jathayde]

@bhumi1102 looking at the code we've got a few things to namespace to make this work I feel. So the headlines are defined as .common-headline hn where n is the number 1-6 and then there's a mobile-first responsive style for min-width: 1024px. This is defined in _sass/common/headline.scss.

For these particular pages, the div is classed with .post so we could say .post h1 and then copy in the H2 items either on headline.scss or post.scss (I feel the latter makes more sense.

How do you feel about that?

[bhumi1102]

For these particular pages, the div is classed with .post so we could say .post h1 and then copy in the H2 items either on headline.scss or post.scss (I feel the latter makes more sense.

Hi @jathayde - let me parse what you're saying, what do you mean by "then copy in the H2 items" above? In the diff, I've made updates to the post.scss file to add h1 styles. Though I think you're suggesting slightly different changes..

How do you feel about that?

I consider all my changes placeholders to make it work. So I'm up for whatever you suggest as the person in charge of the rails website styles :) It's not clear to me what you're suggesting though, to help clarify what you mean, do you mind using the "suggest changes" directly on the diff to make your update? So I can see what you mean. (Also up for getting on a short call if that's faster/easier - I can be available Monday 5/19 anytime between 9am - 2pm central). Thanks!

[jathayde]

My apologies, let me step through it:

In _layouts/post.html we want to change line 14 to use H1 instead of H2 (I believe that's the core of the issue):

        <h1>{{ page.title | strip_html }}</h1>

Then, in order to not make them massively crazy, we need to modify the H1 but only for pages with a class of .post (which is not on body but on a parent div. I apologize for mistyping). So first, off we need to modify post.html again to add:

And then in _sass/modules/_post.scss we need to add this block in the &__headline (which generates out to a class of .post__headline):

  &__headline {

    margin: -7px 30px -6px 30px;
    text-align: center;

    h1 {
      color: $color-red;
      font-size: 39px;
      @media (max-width: 800px) {
        font-size: 32px;
      }
      @media (max-width: 600px) {
        font-size: 28px;
      }
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 38px;
    }

    h5 {
      margin-bottom: 16px;
    }

    h6 {
      font-weight: 400;
      margin-top: 17px;
    }

  }

Only the h1 is new here and it's the h2 styles from _headline.scss. This should work or get us close.

[bhumi1102]

No worries @jathayde! So the above makes sense and I made the h1 changes in post.scss. The post.html change from h2 to h1 is already in my diff. With this the blog titles are h1 but don't look massive (attaching screenshot). The other 3 one-off changes in the diff are need to make the "category title" which is rendered in the same place as the blog post title not look massive.

Let me know if anything else in this PR. (I'd like to wrap up these SEO open PRs this week and merge if it works out).

[jathayde]

This looks good to me code wise. The one-off changes are the releases.html, etc?

[bhumi1102]

This looks good to me code wise. The one-off changes are the releases.html, etc?

Yup, releases.html, news.html, foundations.html. Thanks for confirming @jathayde. This one should be good to merge I think. CC: @AmandaPerino

[zzak]

Couple of side-by-sides

Are the blog titles supposed to shrink in size?

Also I couldn't find where "releases" is actually used / accessible so I couldn't check that.

[bhumi1102]

Thanks for reviewing this one @zzak! No the blog titles are not suppose to shrink. They were missing the "desktop" styles, I've fixed this now! Attaching screenshot:

Only change below is from h2 --> h1 (no font size change, as desired)

[bhumi1102]

Also I couldn't find where "releases" is actually used / accessible so I couldn't check that.

To answer your second question @zzak, "releases" is used at /category/releases, similar to /category/news and /category/foundation. The intention is to keep these headings same as the blog post font size of 55px. (without the update to the 3 corrosponding html files, the font size is huge at 78px). Attaching screenshots:

[bhumi1102]

@AmandaPerino I've addressed all review comments on this one. I was unsure about the font-sizes before but now I've sorted through the various media sizes and made sure that we are matching the existing sizes in all cases!