[Webpack] Style FAQ and rainy day option pages

[Syntaf]

Description

The FAQ and rainy day option pages are important informational pages for visitors

Problem

When I moved to a webpack based frontend stack, we lost styling for these pages. I want the pages below to match the pages on production 1-1.

There are two existing stylesheets that are applied to these pages:

• faq.scss which only applies to the FAQ pages
• rainy_day_options.scss which only applies to the rainy day option pages

We can either trash these stylesheets all together and rebuild them, OR simply tack onto them to fix the styling issues on the pages. The end result should be mobile friendly

Tasks

FAQ Page

• The banner on this page should mirror the banner used on the rainy day options page, but say "Frequently Asked Questions"

• The back button should use a button styling of btn btn-outline-dark.
• The footer should not overlap with the content on mobile devices (see below)

Rainy Day Options Page

• The background color on the <li> items should be #eee

• The "Areas" header should have a font size of 26px and be black
• .crag-info should have a padding of 25px
• .crag-info should have a background color of #fff
• .crag-info should have no bottom margin
• The descriptions card should have a 35px margin to the features card
• .mountain-project should have a padding of 15px and border-radius of 8px

Notes:

FAQ page:

• app/views/area/faqs/index.html.erb
• app/javascript/stylesheets/faq.scss

Rainy Day Page:

• app/views/area/rainy_day_options/index.html.erb
• app/javascript/stylesheets/rainy_day_options.scss
• app/javascript/controllers/rainy_day_controller.js