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

@@ -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"

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

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

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;

site/source/scss/style.scss

@@ -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';