added vars

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 {

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);*/
+}

css/components.css

@@ -1,4 +1,3 @@
-
 /* Admin Toolbar */
 button.toolbar-item,
 button.toolbar-icon {
@@ -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%;

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;
+}

css/header.css

@@ -8,6 +8,16 @@
   width: 100%;
   margin: 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);
 }
@@ -82,8 +92,10 @@
   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;
@@ -104,8 +116,14 @@
 .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);
   }
@@ -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;
@@ -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;
@@ -324,7 +344,9 @@
   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);

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;

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);

vre2024.libraries.yml

@@ -2,6 +2,7 @@ global-styling:
   version: VERSION
   css:
     base:
+      css/fonts.css: {}
       css/site-variables.css: {}
       css/base.css: {}
     layout: