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;