Update font sizes, line heights, and spacing to match Figma design

[judithweng]

Front page needs some styling fixes. Below is a screenshot of the required font sizes and line heights

[chihlinc]

@judithweng I can write the codes like the font size below.
Frontpage -
Global Distributed Tracking: Heading 1
About, Sample devices, contact: Heading 2
New device, new container: Heading 3
Create new device, device image(optional), Device name, device description, choose files: Heading 4

The Global Open Source Quality Assurance System (GOSQAS) provides the opportunity to create truthful, transparent documentation via our open source provenance tracker, Global Distributed Tracking (GDT). Designed specifically for low-resource settings, GDT allows anyone with simple website access to securely record their project data. Our development philosophy of “Trust Through Transparency” (TTT) encourages better global communication within diverse communities- to include humanitarian response, open source hardware, and scientific research: Heading 5

[judithweng]

@chihlinc That's perfect! Thank you!

[judithweng]

@chihlinc Katie made some recent changes in PR #194. You can continue to fix the font on the other pages but most importantly try to fix the spacing for the front page. Nina provides the exact padding for each component in Figma.

[chihlinc]

What spacing are you referring to? Could you elaborate?

[judithweng]

@chihlinc Spacing between each text, buttons and fields. For example, the button "Create Device" currently has a gap between the button and the end of the blue form. This gap looks bigger than the one pictured in Figma. See images below (tops is current site and bottom is figma)

If you could double check if the padding is correct and code it in (if not already), that would be perfect.