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.
This commit is contained in:
Alan Orth 2021-12-01 14:05:48 +02:00
parent 8aef2a0a20
commit 71bcd1092c
3 changed files with 26 additions and 11 deletions

View File

@ -6,7 +6,7 @@
<span class="">{{ .Params.title | markdownify }}</span> <span class="">{{ .Params.title | markdownify }}</span>
{{- with .Params.required -}} {{- with .Params.required -}}
<div class="badge-required"> <div class="badge-required">
<span class="badge bg-primary align-middle">Required</span> <span class="badge align-middle">Required</span>
</div> </div>
{{- end -}} {{- end -}}
</th> </th>

View File

@ -8,6 +8,12 @@ $iseal-dark-blue: #0e304a;
// another light blue // another light blue
$iseal-light-blue: #328cd1; $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: Some styles inspired from the Dublin Core DCTERMS website, see:
https://www.dublincore.org/specifications/dublin-core/dcmi-terms/ https://www.dublincore.org/specifications/dublin-core/dcmi-terms/
@ -16,13 +22,23 @@ $iseal-light-blue: #328cd1;
body { body {
/* for the "scroll spy" navbar feature */ /* for the "scroll spy" navbar feature */
position: relative; position: relative;
color: $primary; color: $black;
background-color: $white; 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 { div.badge-required {
float: right; float: right;
span {
background-color: $iseal-secondary-red;
}
} }
td.field-name { td.field-name {
@ -30,17 +46,16 @@ td.field-name {
font-weight: 700; font-weight: 700;
} }
.table {
color: $primary;
}
/* Override Bootstrap's top border on tbody */ /* Override Bootstrap's top border on tbody */
.table>:not(:first-child) { .table>:not(:first-child) {
border-top: 2px solid $iseal-light-blue; 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 { h1, h2, h3 {
color: $primary; color: $primary;
font-weight: 700;
} }
.footer { .footer {

View File

@ -1,10 +1,10 @@
// override some Bootstrap colors. Apparently we need to do this *before* we // override some Bootstrap colors. Apparently we need to do this *before* we
// process Bootstrap. // process Bootstrap.
// ISEAL dark blue // ISEAL primary (dark) blue
$primary: #072439; $primary: rgb(0, 82, 142);
// ISEAL light blue // ISEAL secondary (light) blue
$secondary: #2A7AB7; $secondary: rgb(27, 118, 188);
// selectively import components we need from bootstrap // selectively import components we need from bootstrap
// see: node_modules/bootstrap/scss/bootstrap.scss // see: node_modules/bootstrap/scss/bootstrap.scss