57 landing page body css tf

[terrifricker]

Changes to index.html

1. The font used in our wireframe is Inter. The download page for the Inter font is https://rsms.me/inter/download/. The suggested code is added to index.html section.

   <link rel="preconnect" href="https://rsms.me/">
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Changes to styles.css

1. Add suggested Inter font code to body.

   font-family: Inter, sans-serif;
   font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

2. Add my basic boiler plate properties

   * {
   box-sizing: border-box;
   }
   body {
   min-height:  100vh;
   margin: 0;
   }

   border-box so that my css widths and heights of objects include their borders. min-height: 100vh so that any background that I set on the body covers at least the visible viewport. margin: 0 to remove the default margin on the body. I don't set this globally like I see some developers do because I want to keep the default margins on other elements.

3. Make the body a flex box container. These settings will make each direct descendent of in index.html flex items.

   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;

   justify-content: flex-start will push all items to the top with no default spacing between them. Control the space between items with margins. align-items: center will center all items horizontally within the viewport.

[terrifricker]

Closes issue #58