Add SloanOps return banner to demo sites

2026-09-03 10:41:48 -04:00
parent f56cf5e10e
commit dec4d22d46
3 changed files with 110 additions and 0 deletions
@@ -0,0 +1,103 @@
+<aside class="demo-banner" aria-label="Demo website notice" data-demo-banner>
+  <div class="demo-banner__inner">
+    <p>
+      <strong>Demo website</strong>
+      <span>This is a sample site created by SloanOps.</span>
+    </p>
+    <a href="https://sloanops.com/">
+      Return to SloanOps <span aria-hidden="true">↗</span>
+    </a>
+  </div>
+</aside>
+
+<style>
+  .demo-banner {
+    background: #102a3a;
+    color: #f7fbfc;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    position: relative;
+    z-index: 50;
+  }
+
+  .demo-banner__inner {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+    margin: auto;
+    min-height: 3.5rem;
+    padding: .4rem 0;
+    width: min(75rem, calc(100% - 2rem));
+  }
+
+  p {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: .88rem;
+    gap: .55rem;
+    line-height: 1.35;
+    margin: 0;
+  }
+
+  strong {
+    background: rgba(255, 255, 255, .13);
+    border: 1px solid rgba(255, 255, 255, .24);
+    border-radius: 999px;
+    font-size: .68rem;
+    letter-spacing: .1em;
+    padding: .25rem .5rem;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .demo-banner a {
+    align-items: center;
+    background: #fff;
+    border: 1px solid #fff;
+    border-radius: 999px;
+    color: #102a3a;
+    display: inline-flex;
+    flex: none;
+    font-size: .82rem;
+    font-weight: 800;
+    gap: .4rem;
+    justify-content: center;
+    min-height: 2.75rem;
+    padding: .55rem .85rem;
+    text-decoration: none;
+    transition: background-color .2s ease, color .2s ease, transform .2s ease;
+    white-space: nowrap;
+  }
+
+  .demo-banner a:hover,
+  .demo-banner a:focus-visible {
+    background: #d9f3f0;
+    color: #0b615b;
+    transform: translateY(-.08rem);
+  }
+
+  @media (max-width: 36rem) {
+    .demo-banner__inner {
+      align-items: stretch;
+      flex-direction: column;
+      gap: .55rem;
+      padding: .7rem 0 .75rem;
+    }
+
+    .demo-banner a {
+      align-self: flex-start;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .demo-banner a {
+      transition: none;
+    }
+
+    .demo-banner a:hover,
+    .demo-banner a:focus-visible {
+      transform: none;
+    }
+  }
+</style>