From 596021a906e3a68c7f85062307584de4144a76d6 Mon Sep 17 00:00:00 2001
From: Kate Lynch <katelynch@princeton.edu>
Date: Tue, 29 Oct 2024 10:02:10 -0400
Subject: [PATCH] Added font family and heading styles (#1012)

---
 app/assets/stylesheets/_typography.scss   | 27 +++++++++++++++++++++++
 app/assets/stylesheets/_variables.scss    |  7 +++++-
 app/assets/stylesheets/application.scss   | 18 ++++++++++-----
 app/views/welcome/styles_preview.html.erb |  9 ++++++++
 4 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/stylesheets/_typography.scss

diff --git a/app/assets/stylesheets/_typography.scss b/app/assets/stylesheets/_typography.scss
new file mode 100644
index 00000000..cc8bdfd9
--- /dev/null
+++ b/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;
+}
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 996116d8..c485f84e 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/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;
\ No newline at end of file
+$status-info: #E6EEF8;
+
+$libre-franklin: "Libre Franklin", sans-serif;
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index be90b739..cd06407e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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;
+}
 
diff --git a/app/views/welcome/styles_preview.html.erb b/app/views/welcome/styles_preview.html.erb
index 64062ef6..d2ac19ae 100644
--- a/app/views/welcome/styles_preview.html.erb
+++ b/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 @@
 
 
 
+
+