From d85d6fbe2bf1de05fa642dd0fe342966f8f41cbc Mon Sep 17 00:00:00 2001
From: rdrew <rdrew@upei.ca>
Date: Thu, 18 Apr 2024 14:09:01 -0300
Subject: [PATCH] added vars

---
 css/base.css           | 103 ++++++++++++++++++-----------------
 css/block.css          |  11 ++++
 css/components.css     |  26 +++++----
 css/fonts.css          |  88 ++++++++++++++++++++++++++++++
 css/header.css         | 118 ++++++++++++++++++++++++-----------------
 css/sidebar.css        |  23 +++++++-
 css/site-variables.css |  78 ++++++++++++++++++++++-----
 vre2024.libraries.yml  |   1 +
 8 files changed, 325 insertions(+), 123 deletions(-)
 create mode 100644 css/fonts.css

diff --git a/css/base.css b/css/base.css
index a356c6e..6b27132 100644
--- a/css/base.css
+++ b/css/base.css
@@ -37,18 +37,18 @@ body {
 body {
   color: var(--color-text);
   background-color: var(--body-bg-color);
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Open Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: var(--body-font);
+  /*system-ui,*/
+  /*-apple-system,*/
+  /*BlinkMacSystemFont,*/
+  /*'Segoe UI',*/
+  /*Roboto,*/
+  /*Oxygen,*/
+  /*Ubuntu,*/
+  /*Cantarell,*/
+  /*'Open Sans',*/
+  /*'Helvetica Neue',*/
+  /*sans-serif;*/
   font-size: 1rem;
   font-weight: 400;
   min-height: 100vh;
@@ -99,6 +99,7 @@ h3,
 h4,
 h5,
 h6 {
+  font-family: var(--heading-font);
   color: var(--color-heading);
   font-weight: 700;
   font-style: normal;
@@ -295,27 +296,29 @@ select {
 }
 .button,
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
   position: relative;
   cursor: pointer;
   border: 0;
   padding: 8px 10px;
   line-height: 1.6;
   -webkit-appearance: button;
+  background: var(--upei-green);
+  color: #fff;
 }
 button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
   outline: 0;
 }
 button[disabled],
@@ -340,19 +343,19 @@ input,
 textarea {
   max-width: 100%;
 }
-input[type='text'],
-input[type='email'],
-input[type='url'],
-input[type='password'],
-input[type='search'],
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
 textarea {
   padding: 10px;
 }
-input[type='text']:focus,
-input[type='email']:focus,
-input[type='url']:focus,
-input[type='password']:focus,
-input[type='search']:focus,
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
 textarea:focus {
   outline: 0;
 }
@@ -360,28 +363,28 @@ textarea {
   width: 100%;
   overflow: auto;
 }
-[type='checkbox'],
-[type='radio'] {
+[type="checkbox"],
+[type="radio"] {
   padding: 0;
   cursor: pointer;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
 }
-[type='search']::-webkit-search-decoration {
+[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-[type='file'] {
+[type="file"] {
   cursor: pointer;
 }
 fieldset {
@@ -414,7 +417,7 @@ label[for] {
   margin-bottom: 1rem;
 }
 .form-required:after {
-  content: '*';
+  content: "*";
   display: inline-block;
   padding-left: 4px;
   color: red;
@@ -439,11 +442,11 @@ label.option {
 :-ms-input-placeholder {
   color: var(--border);
 }
-.field--name-body input[type='text'],
-.field--name-body input[type='email'],
-.field--name-body input[type='url'],
-.field--name-body input[type='password'],
-.field--name-body input[type='search'],
+.field--name-body input[type="text"],
+.field--name-body input[type="email"],
+.field--name-body input[type="url"],
+.field--name-body input[type="password"],
+.field--name-body input[type="search"],
 .field--name-body textarea {
   display: block;
   margin-bottom: 0.8rem;
@@ -489,8 +492,8 @@ ol {
   margin: 0;
   padding: 0 0 0.25rem 1rem;
 }
-[dir='rtl'] ul,
-[dir='rtl'] ol {
+[dir="rtl"] ul,
+[dir="rtl"] ol {
   padding: 0 1rem 0.25rem 0;
 }
 ol ol,
@@ -498,8 +501,8 @@ ul ul {
   margin: 0;
   padding: 0 0 0.25rem 1rem;
 }
-[dir='rtl'] ol ol,
-[dir='rtl'] ul ul {
+[dir="rtl"] ol ol,
+[dir="rtl"] ul ul {
   padding: 0 1rem 0.25rem 0;
 }
 ul {
@@ -509,8 +512,8 @@ li > ul,
 li > ol {
   margin-bottom: 0;
 }
-[dir='rtl'] ul,
-[dir='rtl'] ol {
+[dir="rtl"] ul,
+[dir="rtl"] ol {
   padding: 0 1rem 0.25rem 0;
 }
 li {
diff --git a/css/block.css b/css/block.css
index cbceb97..fb29a1c 100644
--- a/css/block.css
+++ b/css/block.css
@@ -4,3 +4,14 @@
 .block-content {
   position: relative;
 }
+
+.block-title {
+  /*font-size: var(--sidebar-block-title-font-size);*/
+  /*font-family: var(--sidebar-block-title-font-family);*/
+  /*color: var(--sidebar-block-title-font-color);*/
+}
+.block-content {
+  /*font-size: var(--sidebar-block-font-size);*/
+  /*font-family: var(--sidebar-block-font-family);*/
+  /*color: var(--sidebar-block-font-color);*/
+}
diff --git a/css/components.css b/css/components.css
index 976f723..4d0337a 100644
--- a/css/components.css
+++ b/css/components.css
@@ -1,4 +1,3 @@
-
 /* Admin Toolbar */
 button.toolbar-item,
 button.toolbar-icon {
@@ -54,11 +53,11 @@ button.toolbar-icon {
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   line-height: 0;
 }
 
@@ -80,6 +79,12 @@ ul.page-tabs {
 }
 
 .page-tabs li a {
+  font-family: var(--tabs-font);
+font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 75;
   background-color: var(--page-tab-bg-color);
   color: var(--page-tab-text-color);
   padding: 0.5rem 1rem;
@@ -103,7 +108,8 @@ ul.page-tabs {
   flex: 1 1 auto;
 }
 /* Entity reference */
-.node-taxonomy-container, .node-links-container {
+.node-taxonomy-container,
+.node-links-container {
   position: relative;
   display: block;
   width: 100%;
@@ -207,11 +213,11 @@ ul.inline li a {
   text-align: center;
   padding: 4px;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 .scrolltop:hover {
   background: var(--secondary);
diff --git a/css/fonts.css b/css/fonts.css
new file mode 100644
index 0000000..22303a5
--- /dev/null
+++ b/css/fonts.css
@@ -0,0 +1,88 @@
+/*@format*/
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+.roboto-condensed-normal {
+  font-family: 'Roboto Condensed', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+.roboto-condensed-thin {
+  font-family: 'Roboto Condensed', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 200;
+  font-style: normal;
+}
+
+.roboto-thin {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.roboto-light {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.roboto-regular {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.roboto-medium {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.roboto-bold {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.roboto-black {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 900;
+  font-style: normal;
+}
+
+.roboto-thin-italic {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+
+.roboto-light-italic {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.roboto-regular-italic {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.roboto-medium-italic {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  font-style: italic;
+}
+
+.roboto-bold-italic {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.roboto-black-italic {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
diff --git a/css/header.css b/css/header.css
index df69db5..83e02d7 100644
--- a/css/header.css
+++ b/css/header.css
@@ -7,7 +7,17 @@
   position: relative;
   width: 100%;
   margin: 0;
-	padding: 0.5rem 0;
+  padding: 0.5rem 0;
+}
+.header-top,
+.header-top a {
+  font-weight: 300;
+  font-variation-settings: "wdth" 75;
+  background: var(--header-top-bg-color);
+  color: var(--header-top-text-color);
+  font-size: .8rem;
+}
+.header {
   background: var(--header-bg-color);
   color: var(--header-text-color);
 }
@@ -18,16 +28,16 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-          gap: 1rem;
-          flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 .region-header-top-left,
 .region-header-top-right {
@@ -63,11 +73,11 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   gap: 1rem;
 }
 /* Header -> Site branding */
@@ -77,13 +87,15 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding-right: 1rem;
 }
 .site-logo {
-  padding-right: 5px;
+  padding-right: var(--branding-separator-padding);
+  margin-right: var(--branding-separator-padding);
   width: var(--logo-width);
+  border-right: var(--branding-separator);
 }
 .site-logo img {
   display: block;
@@ -94,18 +106,24 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 .site-name,
 .site-slogan {
   line-height: 1.1;
 }
+.site-slogan {
+  font-family: var(--site-slogan-font-family);
+  font-size: var(--site-slogan-font-size);
+  color: var(--site-slogan-font-color);
+}
 .site-name {
   a {
+    font-family: var(--heading-font);
     font-size: var(--site-name-font-size);
     color: var(--site-name-font-color);
   }
@@ -118,8 +136,8 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   gap: 0.5rem;
 }
 .menu-wrap {
@@ -135,8 +153,8 @@
   box-shadow: none;
   z-index: 25;
   -webkit-transform: translateX(-100%);
-      -ms-transform: translateX(-100%);
-          transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  transform: translateX(-100%);
   -webkit-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   transition: all 0.4s linear;
@@ -163,6 +181,7 @@
   display: block;
   color: #ffffff;
   padding: 0.5rem 0;
+font-variation-settings: "wdth" var(--header-menu-font-width);
 }
 .menu-wrap .menu > li a::after {
   content: none;
@@ -204,8 +223,8 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   justify-content: space-between;
   width: 36px;
   height: 28px;
@@ -248,13 +267,13 @@
 .active-menu .menu-wrap {
   overflow-y: scroll;
   -webkit-transform: translateX(0);
-      -ms-transform: translateX(0);
-          transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
   -webkit-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   transition: all 0.4s linear;
   padding: 1rem;
-  box-shadow: 6px  0 1rem #111111;
+  box-shadow: 6px 0 1rem #111111;
 }
 .active-menu .menu {
   display: block;
@@ -263,24 +282,24 @@
 @-webkit-keyframes slideUp {
   0% {
     -webkit-transform: translateY(20px);
-            transform: translateY(20px);
+    transform: translateY(20px);
     opacity: 0;
   }
   100% {
     -webkit-transform: translateY(0px);
-            transform: translateY(0px);
+    transform: translateY(0px);
     opacity: 1;
   }
 }
 @keyframes slideUp {
   0% {
     -webkit-transform: translateY(20px);
-            transform: translateY(20px);
+    transform: translateY(20px);
     opacity: 0;
   }
   100% {
     -webkit-transform: translateY(0px);
-            transform: translateY(0px);
+    transform: translateY(0px);
     opacity: 1;
   }
 }
@@ -296,11 +315,11 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   cursor: pointer;
   width: 34px;
   height: 34px;
@@ -310,6 +329,7 @@
   font-size: 24px;
 }
 .search-box {
+box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3333);
   position: fixed;
   background-color: var(--light);
   top: 0;
@@ -318,18 +338,20 @@
   width: 100%;
   z-index: 50;
   -webkit-transform: translate(0, -100%);
-      -ms-transform: translate(0, -100%);
-          transform: translate(0, -100%);
+  -ms-transform: translate(0, -100%);
+  transform: translate(0, -100%);
   -webkit-transition: -webkit-transform 0.5s;
   transition: -webkit-transform 0.5s;
   -o-transition: transform 0.5s;
   transition: transform 0.5s;
-  transition: transform 0.5s, -webkit-transform 0.5s;
+  transition:
+    transform 0.5s,
+    -webkit-transform 0.5s;
 }
 .search-box.open {
   -webkit-transform: translate(0, 0);
-      -ms-transform: translate(0, 0);
-          transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
+  transform: translate(0, 0);
 }
 .search-box-content {
   position: relative;
@@ -350,11 +372,11 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   color: var(--dark);
   border: 3px solid var(--dark);
   border-radius: 50%;
@@ -403,8 +425,8 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 /* Header -> Page Header-> breadcrumb */
 .breadcrumb {
diff --git a/css/sidebar.css b/css/sidebar.css
index bfd47b6..dcb3f3f 100644
--- a/css/sidebar.css
+++ b/css/sidebar.css
@@ -11,8 +11,27 @@
   gap: 2rem;
 }
 .sidebar .block {
-  background-color: var(--light);
+  background-color: var(--sidebar-block-background);
   padding: 1rem;
+  border: var(--sidebar-block-border);
+}
+.sidebar .block-title {
+  background: var(--sidebar-block-title-background);
+  font-size: var(--sidebar-block-title-font-size);
+  font-family: var(--sidebar-block-title-font-family);
+  color: var(--sidebar-block-title-font-color);
+}
+.sidebar .block-content {
+  font-variation-settings: "wdth" 75;
+  font-size: var(--sidebar-block-font-size);
+  font-family: var(--sidebar-block-font-family);
+  color: var(--sidebar-block-font-color);
+}
+.sidebar .block a {
+  color: var(--sidebar-block-link-color);
+}
+.sidebar .block a:hover {
+  color: var(--sidebar-block-link-color-hover);
 }
 .sidebar ul,
 .sidebar ol {
@@ -25,7 +44,7 @@
 }
 .sidebar li {
   padding: 6px 0;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--sidebar-ul-separator-line);
 }
 .sidebar .block p:last-of-type {
   margin: 0;
diff --git a/css/site-variables.css b/css/site-variables.css
index ccbf630..217983f 100644
--- a/css/site-variables.css
+++ b/css/site-variables.css
@@ -4,6 +4,10 @@
 /* Variables
 ---------------------------------------- */
 :root {
+
+/*
+ *colors
+ */
   --upei-red: #8c2004;
   --upei-green: #5c8727;
   --upei-yellow: #fbb040;
@@ -11,35 +15,83 @@
   --primary: #365ab5;
   --primary: var(--upei-red);
   --secondary: #d05700;
-  --dark: #232742;
-  --light: #ccc;
+  --dark: #333;
+  --light: #eee;
   --border: #a8a6a6;
 
   --color-text: #444444;
-  --color-heading: #111111;
-  --body-bg-color: #fff;
+  --color-heading: #333;
 
+  --font-family-serif: 'Noto Serif', sans-serif;
+  --font-family-sans-serif: 'Noto Sans', sans-serif;
+  /*
+   *body
+   */
+  --body-bg-color: #fff;
+  --page-container-width: 1440px;
+  --body-font: var(--font-family-sans-serif);
+  --heading-font: var(--font-family-serif);
+  /*
+   *branding
+   */
+  /*--header-bg-color: #333;*/
+  --header-top-bg-color: var(--dark);
+  --header-top-text-color: #fff;
+  --header-bg-color: none;
+  --header-text-color: var(--color-text);
+  --logo-width: 160px;
+  --site-name-font-family: var(--font-family-serif);
+  --site-name-font-size: 2em;
+  --site-name-font-color: var(--header-text-color);
+  --site-slogan-font-family: var(--font-family-sans-serif);
+  --site-slogan-font-size: inherit;
+  --site-slogan-font-color: var(--header-text-color);
+  --branding-separator: 2px solid #333;
+  --branding-separator-padding: .5rem;
+  --header-menu-font-width: 75 /*65-100*/;
+  /*
+   *tabs
+   */
+  --tabs-font: var(--font-family-sans-serif);
   --page-tab-bg-color: var(--light);
   --page-tab-text-color: #333;
   --page-tab-text-color-active: var(--primary);
   --page-tab-border-color: var(--border);
-
+  /*
+   *search button
+   */
+  --search-button-color: var(--upei-green);
+  --search-button-text-color: #fff;
+  
+  /*
+   *headings
+   */
   --h1-size: 2.2rem;
   --h2-size: 1.9rem;
   --h3-size: 1.6rem;
   --h4-size: 1.3rem;
   --h5-size: 1.1rem;
   --h6-size: 1.1rem;
+  /*
+   *block styles
+   */
+  --sidebar-block-title-font-size: var(--h3-size);
+  --sidebar-block-title-font-family: var(--font-family-serif);
+  --sidebar-block-title-font-color: var(--color-text);
+  --sidebar-block-title-background: inherit;
+  --sidebar-block-background: var(--light);
+  --sidebar-block-font-size: inherit;
+  --sidebar-block-font-family: var(--font-family-sans-serif);
+  --sidebar-block-font-color: var(--color-text);
+  --sidebar-block-border: 1px solid var(--light);
+  --sidebar-block-link-color: var(--color-text);
+  --sidebar-block-link-color-hover: var(--primary);
+  --sidebar-ul-separator-line: 2px solid var(--primary);
 
-  --page-container-width: 1440px;
-
-  --header-bg-color: #333;
-  --header-text-color: #fff;
-  --logo-width: 100px;
-  --site-name-font-size: 2em;
-  --site-name-font-color: var(--header-text-color);
 
-  /*footer*/
+  /*
+   *footer
+   */
   --footer-bg-color: #ccc;
   --footer-text-color: initial;
   --footer-link-color: var(--upei-red);
diff --git a/vre2024.libraries.yml b/vre2024.libraries.yml
index ce52415..662a031 100644
--- a/vre2024.libraries.yml
+++ b/vre2024.libraries.yml
@@ -2,6 +2,7 @@ global-styling:
   version: VERSION
   css:
     base:
+      css/fonts.css: {}
       css/site-variables.css: {}
       css/base.css: {}
     layout: