Merge pull request #1391 from ember-learn/404-page

Implement 404 page as in the API docs
ember-learn · Jul 24, 2024 · 70ea0df · 70ea0df
2 parents 602983a + 9363553
commit 70ea0df
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 0 deletions.
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -23,6 +23,36 @@ table {
   padding: 2rem;
 }
 
+// 404 styling
+.whoops {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-6)
+}
+
+.whoops img {
+    width: 240px;
+    margin: var(--spacing-2);
+}
+
+@media (max-width: 450px) {
+  .whoops {
+    flex-direction: column;
+    padding: var(--spacing-3);
+  }
+
+  .whoops img {
+    width: 80%;
+    margin: var(--spacing-4);
+  }
+
+  .whoops__message {
+    margin: var(--spacing-2);
+    text-align: center;
+  }
+}
+
 // override ember-styleguide. Needed to contain code blocks.
 .main {
   grid-area: main;

diff --git a/app/templates/error.hbs b/app/templates/error.hbs
@@ -0,0 +1,9 @@
+{{page-title "Page Not Found"}}
+
+<article class="whoops">
+  <img src="/images/stinky-fish.png" alt="tomster stinky fish"/>
+  <div class="whoops__message">
+    <h2>Ack! 404 friend, you're in the wrong place</h2>
+    <LinkTo @route='index'>Click here to go home</LinkTo>
+  </div>
+</article>
diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/public/images/stinky-fish.png b/public/images/stinky-fish.png