Merge pull request #1051 from swiftlang/fb/exception-page

Add 404 page

Author: shahmishal

404.md

@@ -4,7 +4,9 @@ title: Internal Server Error
 permalink: /404.html
 ---
 
-<section class="section">
-    <h1>Not Found</h1>
-    The page you're looking for can’t be found.
+<section id="exception">
+    <div class="content">
+        <h1>Not Found</h1>
+        <p>The page you're looking for can’t be found.</p>
+    </div>
 </section>

assets/stylesheets/new-stylesheets/_pages.scss

@@ -1,3 +1,4 @@
 @use 'pages/index';
+@use 'pages/exception';
 @use 'pages/install';
 @use 'pages/get-started';

assets/stylesheets/new-stylesheets/_themes.scss

@@ -22,6 +22,8 @@
 
   --page-bg: #fff;
 
+  --exception-page-bg: #fac685;
+
   --install-page-bg: linear-gradient(0deg, #f6b391 0%, #f8ce6e 92%);
   --install-site-code-box-bg: #ffffff;
   --install-site-code-box-pre-bg: #f2f2f2;
@@ -124,6 +126,8 @@
 
   --page-bg: #fff;
 
+  --exception-page-bg: #23344a;
+
   --install-page-bg: linear-gradient(0deg, #ff8115 0%, #b7451b 92%);
   --install-site-code-box-bg: #23344a;
   --install-site-code-box-pre-bg: #111727;

assets/stylesheets/new-stylesheets/pages/_exception.scss

@@ -0,0 +1,22 @@
+#exception {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--exception-page-bg);
+  color: var(--site-text-color);
+
+  .content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    padding: 18vw 0;
+
+    h1 {
+      font-size: 48px;
+    }
+
+    @media only screen and (max-width: 1024px) {
+      margin: 90px 0;
+    }
+  }
+}