From d4bd504ff2a9d508f546f2fd5ec110de8bf5dec1 Mon Sep 17 00:00:00 2001 From: Alan Orth Date: Tue, 21 Dec 2021 18:20:59 +0200 Subject: [PATCH] site: add FSC style We now have FSC and ISEAL color schemes with some common style in main.scss. I don't have any branding guidelines for FSC so I'm just using colors for now. --- site/package.json | 6 +++-- site/source/scss/fsc.scss | 31 +++++++++++++++++++++++++ site/source/scss/iseal.scss | 46 +++++++++++++++++++++++++++++++++++++ site/source/scss/main.scss | 36 ----------------------------- site/source/scss/style.scss | 14 ----------- 5 files changed, 81 insertions(+), 52 deletions(-) create mode 100644 site/source/scss/fsc.scss create mode 100644 site/source/scss/iseal.scss delete mode 100644 site/source/scss/style.scss diff --git a/site/package.json b/site/package.json index c0c9b355..d5ed074d 100644 --- a/site/package.json +++ b/site/package.json @@ -3,11 +3,13 @@ "version": "0.0.1", "description": "Generate ISEAL Core Metadata Set documentation website.", "scripts": { - "build:css": "sass --style expanded source/scss/style.scss assets/css/style.css.tmp && cleancss -O1 --format breakWith=lf --with-rebase assets/css/style.css.tmp -o assets/css/style.min.css", + "build:css": "npm run build:css:iseal && npm run build:css:fsc", + "build:css:fsc": "sass --style expanded source/scss/fsc.scss assets/css/fsc.css.tmp && cleancss -O1 --format breakWith=lf --with-rebase assets/css/fsc.css.tmp -o assets/css/fsc.min.css", + "build:css:iseal": "sass --style expanded source/scss/iseal.scss assets/css/iseal.css.tmp && cleancss -O1 --format breakWith=lf --with-rebase assets/css/iseal.css.tmp -o assets/css/iseal.min.css", "build:js": "uglifyjs node_modules/jquery/dist/jquery.slim.min.js node_modules/bootstrap/dist/js/bootstrap.min.js -o assets/js/bundle.min.js", "build:site": "./bin/hugo/hugo", "build": "npm run build:css && npm run build:js && npm run clean && npm run copy:icons && npm run build:site", - "clean": "rm assets/css/style.css.tmp assets/css/style.css.tmp.map", + "clean": "rm assets/css/*.css.tmp assets/css/*.css.tmp.map", "copy:icons": "cp node_modules/bootstrap-icons/icons/file-earmark-code.svg node_modules/bootstrap-icons/icons/file-earmark-spreadsheet.svg assets/icons", "postinstall": "hugo-installer --version 0.89.4", "server": "./bin/hugo/hugo serve" diff --git a/site/source/scss/fsc.scss b/site/source/scss/fsc.scss new file mode 100644 index 00000000..d21590e7 --- /dev/null +++ b/site/source/scss/fsc.scss @@ -0,0 +1,31 @@ +// override some Bootstrap colors. Apparently we need to do this *before* we +// process Bootstrap. + +// FSC primary (dark) green +$primary: rgb(0, 92, 66); +// FSC secondary (light) green +$secondary: rgb(114, 191, 66); + +// selectively import components we need from bootstrap +// see: node_modules/bootstrap/scss/bootstrap.scss +@import 'bootstrap'; + +// common style overrides +@import 'main'; + +div.badge-required { + float: right; + + span { + background-color: var(--bs-red); + } +} + +/* Override Bootstrap's top border on tbody */ +.table>:not(:first-child) { + border-top: 2px solid $primary; +} + +h1, h2, h3 { + color: $primary; +} diff --git a/site/source/scss/iseal.scss b/site/source/scss/iseal.scss new file mode 100644 index 00000000..9e3a8f84 --- /dev/null +++ b/site/source/scss/iseal.scss @@ -0,0 +1,46 @@ +// override some Bootstrap colors. Apparently we need to do this *before* we +// process Bootstrap. + +// ISEAL primary (dark) blue +$primary: rgb(0, 82, 142); +// ISEAL secondary (light) blue +$secondary: rgb(27, 118, 188); + +// Tint colors (80%, 60%, 40%, and 20% of primary blue) +$iseal-tint-80: rgb(68, 106, 160); +$iseal-tint-60: rgb(113, 136, 181); +$iseal-tint-40: rgb(159, 172, 205); +$iseal-tint-20: rgb(206, 212, 229); + +// 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); + +// selectively import components we need from bootstrap +// see: node_modules/bootstrap/scss/bootstrap.scss +@import 'bootstrap'; + +// common style overrides +@import 'main'; + +div.badge-required { + float: right; + + span { + background-color: $iseal-secondary-red; + } +} + +/* Override Bootstrap's top border on tbody */ +.table>:not(:first-child) { + border-top: 2px solid $iseal-tint-80; +} + +// 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; +} diff --git a/site/source/scss/main.scss b/site/source/scss/main.scss index 18550988..1efa2dbf 100644 --- a/site/source/scss/main.scss +++ b/site/source/scss/main.scss @@ -3,18 +3,6 @@ See: https://getbootstrap.com/docs/5.0/examples/sticky-footer/ */ -// Tint colors (80%, 60%, 40%, and 20% of primary blue) -$iseal-tint-80: rgb(68, 106, 160); -$iseal-tint-60: rgb(113, 136, 181); -$iseal-tint-40: rgb(159, 172, 205); -$iseal-tint-20: rgb(206, 212, 229); - -// 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/ @@ -38,41 +26,17 @@ p.lead { color: inherit; } -div.badge-required { - float: right; - - span { - background-color: $iseal-secondary-red; - } -} - td.field-name { text-align: right; font-weight: 700; } -/* Override Bootstrap's top border on tbody */ -.table>:not(:first-child) { - border-top: 2px solid $iseal-tint-80; -} - -// 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; -} - h3 img.icon { width: 32px; height: 32px; vertical-align: bottom; } -code { - color: $iseal-secondary-orange; -} - .footer { color: $white; background-color: $primary; diff --git a/site/source/scss/style.scss b/site/source/scss/style.scss deleted file mode 100644 index 1a75abdd..00000000 --- a/site/source/scss/style.scss +++ /dev/null @@ -1,14 +0,0 @@ -// override some Bootstrap colors. Apparently we need to do this *before* we -// process Bootstrap. - -// 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 -@import 'bootstrap'; - -// local style overrides -@import 'main';