Implement QA amends to updated bridges.torproject.org

This ticket will serve to track all amends for the Bridge DB pages.

Live preview links:

• https://kez.pages.torproject.net/bridgedb/
• https://kez.pages.torproject.net/bridgedb/options/
• https://kez.pages.torproject.net/bridgedb/bridges/
• https://kez.pages.torproject.net/bridgedb/captcha/
• https://kez.pages.torproject.net/bridgedb/howto/

All Pages

Header

• Add full color Tor logo
• Top nav bar items aren't aligned in the same way other torproject pages are, but this may be resolved when you add the logo
• It looks like the purple bg for the header was cut short. When I inspect the other pages on torproject, it's showing a height of 247.6 px
• The large type in the header should be h2, not h1
• We need to add the subheader type above the h2 in its own div so it reflects the same format as the other pages, this type should be h6
• The placement of this type is currently not right, but that might resolve once you fix the bg and add the subheader type
• h2 type here should be 4.5 rem
• Top header height is looking better, but still a bit off, the height is taller than the other about pages. Can you reference the build in any of the about pages so that it's the same?

Typography

• Add top-margin of 3rem to the support header
• Can we use the same accordion behavior on these support questions as we do in https://support.torproject.org/?
• In the support section, can we change the padding-top from 3rem to 1rem on bridgedb-support-body so there's less space between the title and questions
• In the support section, can we make sure font is 1.5rem? It looks like its currently 1.3 rem, but I'm not actually sure
• In the support section, font weight should be 500 (I don't think one is set right now from what I can tell?)
• In the support section, can we add .75rem padding to top and bottom of each line (same format as https://support.torproject.org/)
• In the support sections, main questions (ex: "What are bridges?") should be 1.5 rem (they are currently 1.75), and should follow these same values as in the torproject.org FAQ page
• In the support sections, paragraph type should be 1.3 rem (it is currently 1.5) and should follow these values that are in the torproject.org FAQ page

Footer

• Font awesome down arrow is missing from download tor browser button
• The 'Donate Now' button is off if you compare to other page footers - correct type size should be h5 at 1.25rem
• 'Donate Now' button is still off compared to other tor page footers, looks like maybe it just wasn't updated? (kez: it wasn't updated)
• 'Donate Now' button in footer is still not updated on the live preview

Responsive

• Header is broken, menu should be hidden in hamburger menu for https://kez.pages.torproject.net/bridgedb/, https://kez.pages.torproject.net/bridgedb/options/, https://kez.pages.torproject.net/bridgedb/bridges/
• Menu is still breaking for these pages (Get Bridges for Tor, Options, and Bridge lines). Happens at about 991px width.

BridgeDB

Typography

• The type in the header should read 'Get Bridges' in the smaller subheader, and 'Options' in the larger header
• This top preamble should match the formatting on the history page - type should be 2rem, and margin and padding should reflect that page as well
• Add the word 'support' above support questions below main content, in the same format as https://support.torproject.org/
• Preamble (first paragraph) should reflect this formatting
• The footer on this page has smaller social icons than the other footers. Icons should be 24px

Cards

• These containers should match the formatting on https://community.torproject.org/
• We should use the svg illustrations here, with png as a fallback: bridges-add.svg, bridges-download.svg, bridges-get.svg
• After the preamble font formatting is updated, the padding between that container and the card container should be the same as https://community.torproject.org/
• There should be less padding between cards. It should be the same as https://community.torproject.org/
• Can we try subbing out the current SVGs for these ones? I reduced the white space to try and make it more uniform with the community card images:

add-bridges-002.svg

download-002.svg

get-bridges-002.svg

• Here are the pngs for fallback images as well

add-bridges

download-bridges

get-bridges

• @kez can you please set the svgs above as the default images in the cards, but pngs as fallback images? Currently png is showing as default

General

• Add same line divider here as is on other pages

Responsive

• Cards look like they aren't behaving under flex rules properly, should stack at some point
• @kez There are slight formatting differences on the cards here versus the community page. Here's a screenshot of them side-by-side on mobile view. Is it possible for us to use the same spacing/sizing/etc on these cards as we do in https://community.torproject.org/?

BridgeDB/Options

Typography

• For the top text container, can we change the margin and padding to the same as the history page, so that there's not so big of a gap at the top?

Buttons

• Hover bg color of 'just give me bridges' button should be #673a7e

Advanced Options Container

• Add bottom-margin of 3rem

BridgeDB/Bridges

Typography

• The type in the header should read 'Get Bridges' in the smaller subheader, and 'Bridge Lines' in the larger header
• Type and icon color in 'Show QRcode' button should be #ffffff
• Can we add the light grey rectangular bg behind these like in the design mockups? Aside from differing size, should be similar to the advanced options container

BridgeDB/Captcha

• The type in the header should read 'Get Bridges' in the smaller subheader, and 'Bridges' in the larger header