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 %} + + + +{% endblock %} + + + + +
+ +
+
+ +
+ +
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;