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;
