|
|
|
|
@@ -1,312 +0,0 @@
|
|
|
|
|
---
|
|
|
|
|
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' 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>
|
