[openstreetmap/openstreetmap-website] Ensure heading text appears above the header illustration (#3264)

[Andy Allan]

Fixes #3259 

The first problem was that there was a missing class there, since the CSS rule applied only to a certain list of classes and those class names are based on the controller. So this was inadvertantly broken in #3165.

The main problem is that the text appeared behind the background illustration. This predates any of our recent CSS work, but was probably less noticed back then since the titles were in a much smaller font. Here's a screenshot from early 2019 codebase. The titles need to be very long before being overlapped by the illustration.

![Screenshot from 2021-07-21 12-10-13](https://user-images.githubusercontent.com/360803/126503768-18f8a10c-3f46-4794-93d4-8ed708d4f2a5.png)

So in this PR I've refactored the heading, so that the titles are a child of the div that has the background illustration, and this means the text naturally appears over the top.

![Screenshot from 2021-07-21 15-04-48](https://user-images.githubusercontent.com/360803/126504048-64c95b39-ff05-4fbc-89b5-8c3a9848e27d.png)

I've also tweaked the div to be `min-height` instead of `height`, so that even with very long texts and very narrow windows, the title stays within the header rather than overlapping the rest of the content. This is probably unimportant in the real world.

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/3264

-- Commit Summary --

  * Refactor to use a heading class for height when using header-illustrations
  * Ensure the heading text appears above the illustration

-- File Changes --

    M app/assets/stylesheets/common.scss (18)
    M app/views/confirmations/confirm.html.erb (6)
    M app/views/users/blocked.html.erb (6)
    M app/views/users/new.html.erb (6)
    M app/views/users/terms.html.erb (6)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/3264.patch
https://github.com/openstreetmap/openstreetmap-website/pull/3264.diff

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3264
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210721/ac9a65cc/attachment.htm>