From 68fd37a3fa3e3170ef02170fa137ce331cfb57ec Mon Sep 17 00:00:00 2001 From: Akshay Mankar <itsakshaymankar@gmail.com> Date: Sat, 7 Jan 2023 19:41:18 +0100 Subject: [PATCH] Add banner to announce that some services are down --- _includes/layouts/homepage.tsx | 5 +++++ _includes/styles/page.scss | 28 ++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/_includes/layouts/homepage.tsx b/_includes/layouts/homepage.tsx index 30c004e..090228c 100644 --- a/_includes/layouts/homepage.tsx +++ b/_includes/layouts/homepage.tsx @@ -24,6 +24,11 @@ export default ({ <body className="ps-main"> <Background /> <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 }) => <a href={href} diff --git a/_includes/styles/page.scss b/_includes/styles/page.scss index 4c49dfe..fe31279 100644 --- a/_includes/styles/page.scss +++ b/_includes/styles/page.scss @@ -21,6 +21,34 @@ 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 { border: 12px solid black; margin-top: 10vh;