site: style buttons for required elements

We wanted a way to increase the findability of required elements in
addition the the "required" badge on the element's information box.
This styles the button in the module grouping as well.

site/layouts/partials/module-elements.html

@@ -14,7 +14,11 @@
       {{/* Use range over a nested where. The way to read this is */}}
       {{/* from the inside out: terms, cluster, module.           */}}
       {{ range where (where (where site.RegularPages "Type" "terms") "Params.cluster" "==" $cluster) "Params.module" "==" $module }}
+        {{- if .Params.required -}}
+        <a class="btn btn-sm btn-required m-1" href="#{{ .Params.slug }}">{{ .Params.field }}</a>
+        {{- else -}}
         <a class="btn btn-sm btn-outline-primary m-1" href="#{{ .Params.slug }}">{{ .Params.field }}</a>
+        {{- end -}}
       {{ end }}
       </td>
     </tr>

site/source/scss/fsc.scss

@@ -21,6 +21,19 @@ div.badge-required {
     }
 }
 
+// Style the buttons for required metadata elements. Note the syntax for the
+// hover and active states uses the SASS parent selector "&" so we can nest
+// the rules.
+.btn-required {
+    color: var(--bs-red);
+    border-color: var(--bs-red);
+
+    &:hover, &:active {
+        color: #fff;
+        background-color: var(--bs-red);
+    }
+}
+
 /* Override Bootstrap's top border on tbody */
 .table>:not(:first-child) {
     border-top: 2px solid $primary;

site/source/scss/iseal.scss

@@ -33,6 +33,19 @@ div.badge-required {
     }
 }
 
+// Style the buttons for required metadata elements. Note the syntax for the
+// hover and active states uses the SASS parent selector "&" so we can nest
+// the rules.
+.btn-required {
+    color: $iseal-secondary-red;
+    border-color: $iseal-secondary-red;
+
+    &:hover, &:active {
+        color: #fff;
+        background-color: $iseal-secondary-red;
+    }
+}
+
 /* Override Bootstrap's top border on tbody */
 .table>:not(:first-child) {
     border-top: 2px solid $iseal-tint-80;