Add banner to announce that some services are down

This commit is contained in:
Akshay Mankar 2023-01-07 19:41:18 +01:00
parent 516b6567a2
commit 68fd37a3fa
2 changed files with 33 additions and 0 deletions

View file

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

View file

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