Add banner to announce that some services are down
This commit is contained in:
parent
516b6567a2
commit
68fd37a3fa
|
@ -24,6 +24,11 @@ export default ({
|
||||||
<body className="ps-main">
|
<body className="ps-main">
|
||||||
<Background />
|
<Background />
|
||||||
<main className="ps-main--page ps-page ps-page_home">
|
<main className="ps-main--page ps-page ps-page_home">
|
||||||
|
<section className="ps-page--banner">
|
||||||
|
<div className="ps-page--banner-contents">
|
||||||
|
⚠️ A few of our services are currently down due to an incident in one of our datacenters. We hope to bring them back up soon.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
{links.map(({ href, title, openInNewTab }) =>
|
{links.map(({ href, title, openInNewTab }) =>
|
||||||
<a
|
<a
|
||||||
href={href}
|
href={href}
|
||||||
|
|
|
@ -21,6 +21,34 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--banner {
|
||||||
|
border: 12px solid black;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 2vw;
|
||||||
|
margin-right: 2vw;
|
||||||
|
background: white;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--banner-contents {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: white;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 8rem;
|
||||||
|
line-height: 1em;
|
||||||
|
padding: 0.2vw;
|
||||||
|
margin: 2vw;
|
||||||
|
@media screen and (min-width: 700px) {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1000px) {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&--section {
|
&--section {
|
||||||
border: 12px solid black;
|
border: 12px solid black;
|
||||||
margin-top: 10vh;
|
margin-top: 10vh;
|
||||||
|
|
Loading…
Reference in a new issue