Methodology page has some broken styles

[rviscomi]

Per #223, there are some CSS tweaks needed on the Methodology page:

• style the tables
• ensure tables fit in small viewports
• add borders under nested list items in the index
• ensure all links have hover/focus styles (related Add hover/focus states for interactive elements #210)
• make the index sticky on desktop so it's visible while scrolling (max-height 100% and overflow-y scroll)
• ensure the H1 has the colored "overline" similar to other pages
• ensure the hero image is as wide as the hero on chapter pages (866px on desktop)
• the "index" doesn't open on tap for mobile (important)

The Chapter designs include a mockup of a table that we should implement in 2019.css:

And one optional piece of functionality:

• as the page is scrolled, update the "active" index item with a green highlight (using IntersectionObserver)

cc @MSakamaki

[bkardell]

The head image causes some serious horizontal scrolling on mobile.. that seems probably not specific to this page, but ..

[rviscomi]

I think the image issue was fixed by a recent commit that has not yet been pushed to the live website.

[rviscomi]

@HTTPArchive/developers anyone interested in working on this issue? I think this is a fun one (using IntersectionObserver and sticky positioning) 😄

[rviscomi]

Assigning @ymschaap who is looking into tables in #333

[rviscomi]

@ymschaap are you looking into the remaining TODO items for this issue?

[ymschaap]

No sorry, I don't have time available this week to do more work on this.

[rviscomi]

No worries, thank you!

@HTTPArchive/developers does anyone have time to look into this?

[rviscomi]

The styles aren't "broken" any more so I'll close this and open a FR for the new improvements.