From 71bcd1092c30dd577ec202791d209cbcd181d20e Mon Sep 17 00:00:00 2001
From: Alan Orth <alan.orth@gmail.com>
Date: Wed, 1 Dec 2021 14:05:48 +0200
Subject: [PATCH] site: apply principles from ISEAL branding guidelines

The ISEAL Branding Guidelines Version 3.0 (June 2021) say we should
use Arial font for online material and it specifies the RGB values
to use for headings, sub-headings, and body text. It also specifies
four secondary colors to be used in support of the primary colors.
---
 site/layouts/_default/term.html |  2 +-
 site/source/scss/main.scss      | 27 +++++++++++++++++++++------
 site/source/scss/style.scss     |  8 ++++----
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/site/layouts/_default/term.html b/site/layouts/_default/term.html
index 4bd4b4c7..a9d73ad1 100644
--- a/site/layouts/_default/term.html
+++ b/site/layouts/_default/term.html
@@ -6,7 +6,7 @@
                 <span class="">{{ .Params.title | markdownify }}</span>
                 {{- with .Params.required -}}
                 <div class="badge-required">
-                  <span class="badge bg-primary align-middle">Required</span>
+                  <span class="badge align-middle">Required</span>
                 </div>
                 {{- end -}}
               </th>
diff --git a/site/source/scss/main.scss b/site/source/scss/main.scss
index 6d2c02d6..2186072b 100644
--- a/site/source/scss/main.scss
+++ b/site/source/scss/main.scss
@@ -8,6 +8,12 @@ $iseal-dark-blue: #0e304a;
 // another light blue
 $iseal-light-blue: #328cd1;
 
+// Secondary colors
+$iseal-secondary-orange: rgb(223, 155, 24);
+$iseal-secondary-green: rgb(137, 168, 52);
+$iseal-secondary-red: rgb(196, 41, 55);
+$iseal-secondary-purple: rgb(116, 68, 129);
+
 /*
    Some styles inspired from the Dublin Core DCTERMS website, see:
    https://www.dublincore.org/specifications/dublin-core/dcmi-terms/
@@ -16,13 +22,23 @@ $iseal-light-blue: #328cd1;
 body {
     /* for the "scroll spy" navbar feature */
     position: relative;
-    color: $primary;
+    color: $black;
     background-color: $white;
-    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
+    font-family: Arial,sans-serif;
+}
+
+// The ISEAL Branding Guidelines Version 3.0 say that sub-headings should be
+// normal weight and secondary blue color.
+p.lead {
+    color: $secondary;
 }
 
 div.badge-required {
     float: right;
+
+    span {
+        background-color: $iseal-secondary-red;
+    }
 }
 
 td.field-name {
@@ -30,17 +46,16 @@ td.field-name {
     font-weight: 700;
 }
 
-.table {
-    color: $primary;
-}
-
 /* Override Bootstrap's top border on tbody */
 .table>:not(:first-child) {
     border-top: 2px solid $iseal-light-blue;
 }
 
+// The ISEAL Branding Guidelines Version 3.0 say that headings should be bold
+// weight and primary blue color.
 h1, h2, h3 {
     color: $primary;
+    font-weight: 700;
 }
 
 .footer {
diff --git a/site/source/scss/style.scss b/site/source/scss/style.scss
index d327c39c..1a75abdd 100644
--- a/site/source/scss/style.scss
+++ b/site/source/scss/style.scss
@@ -1,10 +1,10 @@
 // override some Bootstrap colors. Apparently we need to do this *before* we
 // process Bootstrap.
 
-// ISEAL dark blue
-$primary: #072439;
-// ISEAL light blue
-$secondary: #2A7AB7;
+// ISEAL primary (dark) blue
+$primary: rgb(0, 82, 142);
+// ISEAL secondary (light) blue
+$secondary: rgb(27, 118, 188);
 
 // selectively import components we need from bootstrap
 // see: node_modules/bootstrap/scss/bootstrap.scss