Added font family and heading styles (#1012)

Author: kelynch

app/assets/stylesheets/_typography.scss

@@ -0,0 +1,27 @@
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 2.0rem;
+}
+
+h3 {
+    font-size: 1.75rem;
+}
+
+h4 {
+    font-size: 1.5rem;
+}
+
+h5 {
+    font-size: 1.25rem;
+}
+
+h6 {
+    font-size: 1rem;
+}

app/assets/stylesheets/_variables.scss

@@ -1,3 +1,5 @@
+@import url(https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap);
+
 $princeton-orange: #E77500;
 $princeton-orange-80: #EC9133;
 $princeton-orange-20: #FAE3CC;
@@ -11,6 +13,7 @@ $gray-60: #717171;
 $gray-20: #D0D0D0;
 $gray-10: #EEEEEE;
 $white: #FFFFFF;
+$black: #000000;
 
 $green-dark: #006450;
 $red-dark: #B00002;
@@ -21,4 +24,6 @@ $light-blue: #BED8E2;
 $status-success: #DDEDE6;
 $status-error: #F3D9D9;
 $status-warning: #FFF6DF;
-$status-info: #E6EEF8;
+$status-info: #E6EEF8;
+
+$libre-franklin: "Libre Franklin", sans-serif;

app/assets/stylesheets/application.scss

@@ -11,15 +11,21 @@
  * It is generally better to create a new file per style scope.
  */
 
-@import "settings";
+@import "bootstrap";
+
+@import "alternate_mediaflux";
 @import "banner";
+@import "components/mediaflux_status";
 @import "emulator";
-@import "alternate_mediaflux";
-@import "header";
 @import "footer";
-@import "components/mediaflux_status";
-@import "variables";
+@import "header";
+@import "settings";
 @import "styles_preview";
+@import "typography";
+@import "variables";
 
-@import "bootstrap";
+body {
+    font-family: $libre-franklin;
+    color: $black;
+}
 

app/views/welcome/styles_preview.html.erb

@@ -2,6 +2,13 @@
 
 <p>This page shows the styles that have been implemented for this site's look and feel.</p>
 
+<h1>Heading Level 1</h1>
+<h2>Heading Level 2</h2>
+<h3>Heading Level 3</h3>
+<h4>Heading Level 4</h4>
+<h5>Heading Level 5</h5>
+<h6>Heading Level 6</h6>
+
 <h2>Colors</h2>
 
 <div class="colors-section">
@@ -40,3 +47,5 @@
 
 
 
+
+