Add error page styling

This css sheet applies to the 404 and 500 pages

1 files changed, 66 insertions, 0 deletions

diff --git a/pydis_site/static/css/error_pages.css b/pydis_site/static/css/error_pages.css
new file mode 100644
index 00000000..77bb7e2b
--- /dev/null
+++ b/pydis_site/static/css/error_pages.css
@@ -0,0 +1,66 @@
+html {
+    height: 100%;
+}
+
+body {
+    background-color: #7289DA;
+    background-image: url("https://raw.githubusercontent.com/python-discord/branding/master/logos/banner_pattern/banner_pattern.svg");
+    background-size: 128px;
+    font-family: "Hind", "Helvetica", "Arial", sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+h1,
+p {
+    color: black;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 10px;
+}
+
+h1 {
+    margin-bottom: 15px;
+    font-size: 26px;
+}
+
+p,
+li {
+    line-height: 125%;
+}
+
+a {
+    color: #7289DA;
+}
+
+ul {
+    margin-bottom: 0;
+}
+
+li {
+    margin-top: 10px;
+}
+
+.error-box {
+    display: flex;
+    flex-direction: column;
+    max-width: 512px;
+    background-color: white;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 5px 7px 40px rgba(0, 0, 0, 0.432);
+}
+
+.logo-box {
+    display: flex;
+    justify-content: center;
+    height: 80px;
+    padding: 15px;
+    background-color: #758ad4;
+}
+
+.content-box {
+    padding: 25px;
+}