Add a development banner to generated development specification

.github/workflows/pages.yml

@@ -39,6 +39,8 @@ jobs:
         git fetch origin gh-pages
         git checkout gh-pages
         mkdir -p specification/develop
+        # patch dev specification to include banner
+        sed -i 's|</head>|</head><div class="banner-container"><div class="banner">This is a development version of the specification.</div></div>|g' optimade.html
         mv optimade.html specification/develop/index.html
         git add specification/develop/index.html
         git commit -m "Deploy develop specification to GitHub Pages: ${SHA}"

tests/makefiles/style.css

@@ -46,6 +46,29 @@ body {
     --field-indent: 9em; /* default indent of fields in field lists */
 }
 
+/*Banner for development version*/
+.banner-container {
+    max-width: 60rem;
+    min-width: 60rem;
+    height: 50px;
+    position: fixed;
+    top: 0;
+    color: var(--code-bg-color);
+    background: var(--code-fg-color);
+    border: outset 2px var(--tertiary);
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.banner {
+    text-transform: uppercase;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 1.5em;
+    display: table-cell;
+}
+
 /* "page layout" */
 main, footer, header {
   line-height:1.6;