js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding Maintenance Mode View (#1560)

Browse Source 
* 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>
This commit is contained in:
Brian Talbot
2025-10-14 15:03:28 -04:00
committed by GitHub
parent b0680f19a9
commit eeb41f4d99
2 changed files with 355 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
packages/webawesome/docs/503.md Normal file
View File

@@ -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>

44
packages/webawesome/docs/assets/styles/utils.css
View File

@@ -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;