From eeb41f4d99eb5bd2d9451206fd451362ec2b14de Mon Sep 17 00:00:00 2001
From: Brian Talbot <hi.talbs@gmail.com>
Date: Tue, 14 Oct 2025 15:03:28 -0400
Subject: [PATCH] Adding Maintenance Mode View (#1560)

* adding `.background-grid` styling utility
* adding 503-based maintenance mode view

---------

Co-authored-by: Konnor Rogers <konnor5456@gmail.com>
Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
---
 packages/webawesome/docs/503.md               | 312 ++++++++++++++++++
 .../webawesome/docs/assets/styles/utils.css   |  44 ++-
 2 files changed, 355 insertions(+), 1 deletion(-)
 create mode 100644 packages/webawesome/docs/503.md

diff --git a/packages/webawesome/docs/503.md b/packages/webawesome/docs/503.md
new file mode 100644
index 000000000..812b1e96b
--- /dev/null
+++ b/packages/webawesome/docs/503.md
@@ -0,0 +1,312 @@
+---
+title: Web Awesome is Undergoing Maintenance
+description: We're performing routine maintenance to keep things running smoothly. Check back soon!
+layout: blank
+permalink: 503.html
+noindex: true
+unlisted: true
+---
+
+{% block head %}
+
+  <link id="site-stylesheet" rel="stylesheet" href="/assets/styles/theme-site.css" />
+  <link id="site-stylesheet" rel="stylesheet" href="/assets/styles/site.css" />
+{% endblock %}
+
+<style>
+  :root {
+    --scene-vertical-offset: calc(var(--wa-space-2xs) * -1);
+    --wa-font-family-heading: cera-round-pro;
+    --vehicle-offset: 25ch;
+    --vehicle-duration: 20s;
+    --vehicle-start: calc(-1 * var(--vehicle-offset));
+    --vehicle-end: calc(100% + var(--vehicle-offset));
+  }
+
+  html, wa-page {
+    background-color: var(--wa-color-surface-lowered);
+  }
+
+  wa-icon[name='traffic-cone'] {
+    --primary-color: var(--wa-color-brand-70);
+    --secondary-color: var(--wa-color-text-normal);
+    --secondary-opacity: 1.0;
+  }
+
+  wa-page.background-grid {
+    --grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 96%);
+    --subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 98%);
+  }
+
+  wa-page > [slot='main-footer'] {
+    border-block-end: var(--wa-border-style) calc(var(--wa-border-width-l) * 10) var(--wa-color-text-normal);
+    padding: 0;
+    background-color: transparent;
+  }
+
+  .header-content {
+    margin-inline: auto;
+    max-width: var(--content-width-l);
+    padding-inline: var(--content-padding-inline);
+  }
+
+  .icon-brand-logo {
+    font-size: var(--wa-font-size-xl);
+    color: var(--wa-brand-orange);
+  }
+
+  /* centering main-content */
+  wa-page::part(main-content) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #content {
+    max-width: var(--content-width-m);
+    padding-inline: var(--content-padding-inline);
+    margin-inline: auto;
+  }
+
+  .heading-stacked-subtitle {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .heading-stacked-subtitle wa-icon {
+    position: relative;
+    inset-block-start: calc(var(--wa-space-3xs) * -0.75);
+    font-size: 0.75em;
+  }
+
+  .heading-stacked-subtitle wa-icon[name="traffic-cone"] {
+    --secondary-color: var(--wa-color-text-normal);
+    --primary-color: var(--wa-color-brand-70);
+    margin-inline: calc(var(--wa-space-xs) * -1.15) calc(var(--wa-space-xs) * -0.75);
+  }
+
+  .copy {
+    code {
+      font-size: 0.75em;
+    }
+
+    strong {
+      text-decoration: underline;
+      text-decoration-color: var(--wa-color-brand-70);
+      text-decoration-thickness: var(--wa-border-width-m);
+      text-underline-offset: var(--wa-space-2xs);
+    }
+  }
+
+  .status {
+    width: 100%;
+    --min-column-size: 30ch;
+
+    wa-callout {
+      background-color: var(--wa-color-surface-default);
+    }
+  }
+
+  .linkies {
+    /* nudge those linkies left */
+    margin-inline-start: calc(var(--wa-space-xs) * -1);
+
+    a {
+      padding-inline: var(--wa-space-xs);
+    }
+  }
+
+  .scene {
+    width: 100%;
+    position: relative;
+    overflow-x: clip;
+    inset-block-end: var(--scene-vertical-offset);
+
+    .vehicle {
+      position: absolute;
+      inset-inline-start: var(--vehicle-start);
+      inset-block-end: 0; /* align all vehicles to bottom */
+      animation: driveAcross var(--vehicle-duration) linear infinite;
+      transform-origin: center;
+      z-index: 1;
+    }
+
+    .vehicle-with-object {
+      white-space: nowrap;
+      display: flex;
+      align-items: baseline;
+      gap: var(--wa-space-3xs);
+    }
+
+    .scene-left {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: var(--wa-space-l);
+    }
+
+    .scene-left wa-icon[name='toilet-portable'] {
+      position: relative;
+      inset-block-start: var(--scene-vertical-offset);
+      margin-inline: calc(var(--wa-space-xs) * -1);
+    }
+
+    .scene-left wa-icon[name='traffic-cone'] {
+      position: relative;
+      inset-block-start: var(--scene-vertical-offset);
+    }
+
+    .blocks {
+      position: absolute;
+      inset-inline-end: calc(var(--wa-space-l) * -1);
+      inset-block-end: 0;
+      z-index: 2;
+    }
+
+    .blocks wa-icon[name='block-brick'] {
+      margin-inline: calc(var(--wa-space-xs) * -1);
+    }
+
+    .blocks-bottom {
+      margin-block-start: calc(var(--wa-space-2xs) * -1);
+    }
+
+    wa-icon[family='duotone'] {
+      --secondary-opacity: 1.0;
+    }
+
+    wa-icon[name='bulldozer'],
+    wa-icon[name='excavator'] {
+      --secondary-color: var(--wa-color-brand-70);
+    }
+
+    wa-icon[name='block-brick'],
+    wa-icon[name='toilet-portable'] {
+      --secondary-color: var(--wa-color-neutral-70);
+    }
+  }
+
+  @keyframes driveAcross {
+    0% {
+      left: var(--vehicle-start);
+    }
+    100% {
+      left: var(--vehicle-end);
+    }
+  }
+
+  /* Unique rumble animations for each vehicle type */
+  @keyframes rumble-bulldozer {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    25% { transform: translateY(-1px) rotate(0.5deg); }
+    50% { transform: translateY(1px) rotate(-0.3deg); }
+    75% { transform: translateY(-0.5px) rotate(0.2deg); }
+  }
+
+
+  /* Apply rumble animation to the single vehicle */
+  .vehicle-driving { animation: driveAcross var(--vehicle-duration) linear infinite; }
+  .vehicle wa-icon[name="bulldozer"] { animation: rumble-bulldozer 0.1s ease-in-out infinite; }
+</style>
+
+<wa-page disable-sticky="header" class="background-grid">
+  <header slot="header">
+    <div class="header-content wa-split" style="flex-wrap: nowrap;">
+      <wa-icon variant="brands" name="web-awesome" class="icon-brand-logo"></wa-icon>
+      <div>
+        <wa-button id="contact-us-button" appearance="plain" href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome">
+          <wa-icon variant="regular" name="headset" label="Need help? Contact Us" class="icon-embiggen"></wa-icon>
+        </wa-button>
+        <wa-tooltip for="contact-us-button" aria-hidden="true">Contact Us</wa-tooltip>
+      </div>
+    </div>
+  </header>
+  <main id="content">
+    <div class="content-container wa-stack wa-gap-xl wa-align-items-center">
+      <h1 class="brand-font wa-stack wa-gap-s heading heading-stacked"  style="text-align: center;">
+        <span class="wa-heading-m heading-stacked-subtitle">
+          under 
+          <span class="wa-visually-hidden">maintenance</span>
+          <span aria-hidden="true">
+            m
+            <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+            inten
+            <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+            nce
+          </span>
+        </span>
+        <span class="wa-heading-3xl heading-stacked-title">Hey! We're Workin&apos; Here</span>
+      </h1>
+      <p class="copy wa-body-l line-length line-length-m" style="text-align: center;">Mind the <code>wa-gap</code>! webawesome.com is undergoing maintenance and will be back shortly.</p>
+      <div class="wa-grid wa-gap-xl status">
+        <wa-callout appearance="plain" variant="neutral">
+          <wa-icon slot="icon" family="duotone" variant="regular" name="diamond-exclamation" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-warning-fill-normal);"></wa-icon>
+          <strong>Temporarily Unavailable</strong><br />
+          Access to Docs, Accounts, and Teams
+        </wa-callout>
+        <wa-callout appearance="plain" variant="neutral">
+          <wa-icon slot="icon" family="duotone" variant="regular" name="bolt" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-success-fill-normal);"></wa-icon>
+          <strong>Fully Operational</strong><br />
+          Services (such as CDNs) and Support
+        </wa-callout>
+      </div>
+      <div class="wa-cluster wa-gap-xs linkies">
+        <h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
+        <a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="github" label="GitHub"></wa-icon>
+        </a>
+        <a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="bluesky" label="Bluesky"></wa-icon>
+        </a>
+        <a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="mastodon" label="Mastodon"></wa-icon>
+        </a>
+        <a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="x-twitter" label="Twitter (X)"></wa-icon>
+        </a>
+        <a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
+          <wa-icon family="brands" name="threads" label="Threads"></wa-icon>
+        </a>
+        <a href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome" class="appearance-plain">
+          <wa-icon variant="regular" name="envelope" label="Email Web Awesome"></wa-icon>
+        </a>
+      </div>
+    </div>
+  </main>
+  <div slot="main-footer" class="footer">
+    <div class="scene">
+      <div class="scene-left wa-cluster wa-align-items-end">
+        <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+        <div class="wa-cluster wa-gap-0">
+          <wa-icon family="duotone" variant="regular" name="toilet-portable" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="toilet-portable" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="toilet-portable" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+        </div>
+        <wa-icon family="duotone" variant="regular" name="excavator" style="font-size: var(--wa-font-size-3xl);"></wa-icon>
+        <wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
+      </div>
+      <div class="blocks wa-stack wa-align-items-center wa-gap-0">
+        <div class="blocks-top wa-cluster wa-gap-0">
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+        </div>
+        <div class="blocks-bottom wa-cluster wa-gap-0">
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+        </div>
+      </div>
+      <div class="track">
+        <wa-icon family="duotone" variant="regular" name="bulldozer" class="spacer-dot-gif" style="font-size: var(--wa-font-size-3xl); opacity: 0;"></wa-icon>
+        <span class="vehicle vehicle-driving vehicle-with-object">
+          <wa-icon family="duotone" variant="regular" name="bulldozer" style="font-size: var(--wa-font-size-3xl);"></wa-icon>
+          <wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl); position: relative; inset-inline-start: calc(var(--wa-space-2xs) * -1);"></wa-icon>
+        </span>
+      </div>
+    </div>
+
+  </div>
+</wa-page>
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index 52655e13d..b395fed00 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -111,7 +111,49 @@
   }
   /* #endregion */
 
-  /* #region funsies */
+  /* #region funsies + cosmetics */
+
+  /* grid background */
+  .background-grid {
+    --grid-spacing: var(--wa-space-2xl);
+    --grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 90%);
+    --grid-line-width: var(--wa-border-width-s);
+    --subgrid-spacing: calc(var(--grid-spacing) / 2);
+    --subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 95%);
+    --subgrid-line-width: var(--wa-border-width-s);
+
+    background-image:
+      /* main grid - vertical lines */
+      linear-gradient(to right, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
+      /* main grid - horizontal lines */
+        linear-gradient(to bottom, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
+      /* sub-grid - vertical lines (offset by half the main grid spacing) */
+        linear-gradient(
+          to right,
+          var(--subgrid-line-color) var(--subgrid-line-width),
+          transparent var(--subgrid-line-width)
+        ),
+      /* sub-grid - horizontal lines (offset by half the main grid spacing) */
+        linear-gradient(
+          to bottom,
+          var(--subgrid-line-color) var(--subgrid-line-width),
+          transparent var(--subgrid-line-width)
+        );
+
+    background-size:
+      var(--grid-spacing) var(--grid-spacing),
+      var(--grid-spacing) var(--grid-spacing),
+      var(--subgrid-spacing) var(--subgrid-spacing),
+      var(--subgrid-spacing) var(--subgrid-spacing);
+
+    background-position:
+      0 0,
+      0 0,
+      calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2),
+      calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
+  }
+  /* #endregion */
+
   /* buttons with icon toggle on hover */
   wa-button .icon-hover {
     display: none;