[website] Fade out WIP banner on scroll
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
{% endif %}
</div>
- {% if environment == "production" %}
+ {% if environment != "production" %}
<div class="wip-banner">
+ <p>
<strong>Rome is still in development</strong>. We have not had an official supported release so documentation may appear out of date until then.
+ </p>
</div>
{% endif %}

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -286,7 +286,6 @@ pre[class*=language-] {
}
.wip-banner {
- padding: 10px;
text-align: center;
position: fixed;
z-index: 99999999;
@@ -295,4 +294,16 @@ pre[class*=language-] {
right: 0;
color: #fff;
background-color: tomato;
+ transition: height 500ms ease-in-out;
+ line-height: 50px;
+ height: 50px;
+
+ &.hidden {
+ height: 0;
+ }
+
+ p {
+ margin: 0;
+ padding: 0 10px;
+ }
}

MODIFY
website/static/js/index.js
website/static/js/index.js
// @ts-check
/**
* @type {{
+ * wipBanner: HTMLElement;
* mobileHandleTOC: HTMLElement;
* mobileHandleNav: HTMLElement;
* toc: HTMLElement;
* }}
*/
const elements = {
+ wipBanner: document.querySelector(".wip-banner"),
mobileHandleTOC: document.querySelector(".mobile-handle-toc"),
mobileHandleNav: document.querySelector(".mobile-handle-nav"),
toc: document.querySelector(".toc-container"),
@@ -233,6 +235,34 @@ elements.colorSchemeSwitcher.addEventListener(
false,
);
+//# Hide development after scrolling
+
+if (elements.wipBanner) {
+ let hasScrolled = false;
+
+ window.addEventListener(
+ "scroll",
+ () => {
+ if (hasScrolled) {
+ return;
+ }
+
+ if (window.scrollY > 0) {
+ hasScrolled = true;
+ setTimeout(
+ () => {
+ elements.wipBanner.classList.add("hidden");
+ },
+ 2_000,
+ );
+ }
+ },
+ {
+ passive: true,
+ },
+ );
+}
+
//# Team list shuffle
/**

[website] Fade out WIP banner on scroll (#841)