Improve WIP website banner
MODIFY
website/src/_includes/layouts/base.liquid
website/src/_includes/layouts/base.liquid
</head>
<body>
- {% 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 %}
-
<div class="container">
<div class="skip-to-content">
<a href="#main-content">Skip to main content</a>

MODIFY
website/src/_includes/scripts/index.js
website/src/_includes/scripts/index.js
@@ -365,35 +365,6 @@ if (homepageExample != null) {
);
}
-//# Hide WIP banner after scrolling
-
-const wipBanner = document.querySelector(".wip-banner");
-if (wipBanner) {
- let hasScrolled = false;
-
- window.addEventListener(
- "scroll",
- () => {
- if (hasScrolled) {
- return;
- }
-
- if (window.scrollY > 0) {
- hasScrolled = true;
- setTimeout(
- () => {
- wipBanner.classList.add("hidden");
- },
- 2_000,
- );
- }
- },
- {
- passive: true,
- },
- );
-}
-
//# Color scheme switcher
function toggleColorSchemeSwitch() {

MODIFY
website/src/_includes/scripts/index.liquid
website/src/_includes/scripts/index.liquid
{% include scripts/index.js %}
+
+{% if environment == "production" %}{% include scripts/under-construction.js %}{% endif %}

ADD
website/src/_includes/scripts/under-construction.js
+if (!location.href.includes("veryfunny")) {
+ const style = document.createElement("style");
+ style.textContent = `
+ html {
+ background-image: url("/img/under-construction-1.gif");
+ }
+
+ body {
+ font-family: "Comic Sans MS", cursive, sans-serif;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: Impact, Charcoal, sans-serif;
+ }
+
+ .content .header-anchor {
+ display: inline-block;
+ background-image: url("/img/under-construction-2.gif");
+ width: 60px;
+ height: 60px;
+ vertical-align: middle;
+ color: transparent;
+ }
+
+ svg {
+ background-image: url("/img/under-construction-3.gif");
+ background-size: contain;
+ }
+
+ svg path {
+ fill: transparent !important;
+ }
+
+ .hero {
+ background-image: url("/img/under-construction-4.gif");
+ text-shadow: 1px 1px red;
+ }
+ `;
+ document.head.appendChild(style);
+ const {documentElement} = document;
+}

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -290,26 +290,3 @@ pre[class*=language-] {
margin-right: -32px;
}
}
-
-.wip-banner {
- text-align: center;
- position: fixed;
- z-index: 99999999;
- bottom: 0;
- left: 0;
- 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;
- }
-}

ADD
website/static/img/under-construction-1.gif
website/static/img/under-construction-1.gif
Binary files /dev/null and b/website/static/img/under-construction-1.gif differ

ADD
website/static/img/under-construction-2.gif
website/static/img/under-construction-2.gif
Binary files /dev/null and b/website/static/img/under-construction-2.gif differ

ADD
website/static/img/under-construction-3.gif
website/static/img/under-construction-3.gif
Binary files /dev/null and b/website/static/img/under-construction-3.gif differ

ADD
website/static/img/under-construction-4.gif
website/static/img/under-construction-4.gif
Binary files /dev/null and b/website/static/img/under-construction-4.gif differ

Improve WIP website banner (#896)