[DOC-565] 404 page (#247)

dandimeo · dandimeo · web-flow · commit 3c3abb3d9aec · 2023-10-03T13:09:42.000+02:00
* first 404 implemenetaiton

* fix: add missing / at homepage redirect

* finish not found implementation

* get rid of page-loading system in 404.html

---------

Co-authored-by: dandimeo &lt;daniele@arangodb.com&gt;
diff --git a/site/themes/arangodb-docs-theme/layouts/404.html b/site/themes/arangodb-docs-theme/layouts/404.html
@@ -10,12 +10,6 @@
   </head>
 
 <body>
-    <div id="show-page-loading">
-        <div class="logo-loading-page">
-            <img src="/images/logo_main.png" alt="ArangoDB" title="" style="position: fixed; top: 0px; left: 0; right: 0; bottom: 154px; margin: auto; width: 232px !important;"></a>
-        </div>
-        <div class="loader"></div>
-    </div>
     <div id="page-wrapper" class="page_content_splash" style="height: auto;opacity: 0;">
         <section id="page-main">
             <section class="page-container" id="page-container">
diff --git a/site/themes/arangodb-docs-theme/layouts/_default/home.notfound.html b/site/themes/arangodb-docs-theme/layouts/_default/home.notfound.html
@@ -1,7 +1,20 @@
 <section class="page-container" id="page-container">
   <div class="container-main">
-    <div class="row-main">
-      <article>Not found</article>
-    </div>
+      <div class="notfound">
+        <div class="flex-block-wrapper">
+          
+          <div class="notfound-404">
+            <p class="notfound-4">4</p>
+            <img id="notfound-image" src="{{ "images/sad-avocado.png" | relURL }}" alt="Page not found!">
+            <p class="notfound-4">4</p>
+          </div>
+          <hgroup>
+            <h3 style="text-align: center;">Oops… Avocados are not growing here</h1>
+          </hgroup>
+          <p style="text-align: center;">
+            <a href="{{ site.BaseURL }}/stable">Back to Home</a>
+          </p>
+        </div>
+      </article>
   </div>
 </section>
diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css
@@ -258,7 +258,7 @@ img {
     opacity: 1;
     transition: opacity 0.5s;
     height: auto !important;
-    width: auto !important;
+    width: auto;
     max-height: 100%;
 }
 
@@ -1260,6 +1260,15 @@ article.default, article.chapter, article.home {
     max-width: 800px;
 }
 
+article.notfound {
+    margin: auto;
+    margin-top: 7rem;
+    min-height: 600px;
+    grid-area: article;
+    width: calc(80vw - 440px);
+    max-width: 800px;
+}
+
 @media screen and (max-width: 768px) {
     article.default, article.chapter, article.home {
         width: 100vw;
@@ -2065,6 +2074,24 @@ nav.pagination .next {
     margin: 0 !important;
 }
 
+/* 404 page */
+.flex-block-wrapper {
+    margin-top: 9rem;
+}
+
+.notfound-404 {
+    display: flex;
+    font-size: 10rem;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4rem;
+}
+
+#notfound-image {
+    display: block;
+    width: 9rem;
+}
+
 .ag-banner {
     display: flex;
     align-items: center;
