Fixed styling issues on 404 and 500 pages

Author: pparage

static_global/css/style.css

@@ -512,53 +512,10 @@ footer .border-top {
 
 
 /* 404 - 500 */
- .notfound .notfound-404 h1 {
-    color: black;
-    font-weight: 900;
-    font-size: 276px;
-    margin: 0;
-  }
-   .notfound h2 {
-    font-size: 46px;
-    color: #000;
-    font-weight: 900;
-    text-transform: uppercase;
-    margin: 0
-  }
-  .notfound p {
-    font-size: 16px;
-    color: #000;
-    font-weight: 400;
-    text-transform: uppercase;
-    margin-top: 15px
-  }
-  .notfound a {
-    font-size: 14px;
-    text-decoration: none;
-    text-transform: uppercase;
-    background: #189cf0;
-    display: inline-block;
-    padding: 16px 38px;
-    border: 2px solid transparent;
-    border-radius: 40px;
-    color: #fff;
-    font-weight: 400;
-    -webkit-transition: .2s all;
-    transition: .2s all
-  }
-  .notfound a:hover {
-    background-color: #fff;
-    border-color: #189cf0;
-    color: #189cf0
-  }
-
+ /* Removed custom error page styles in favor of using Bootstrap */
+  
   @media only screen and (max-width:480px) {
-    .notfound .notfound-404 h1{
-      font-size:162px !important;
-    }
-    .notfound h2{
-      font-size:26px !important;
-    }
+    /* Error page responsive styles */
   }
 
 /*
@@ -630,13 +587,15 @@ footer .border-top {
     }
 
     .border-bottom-radius-only{
-     border-radius: 0 0 20px 20px;!important;
+     border-radius: 0 0 20px 20px !important;
     }
      .border-top-radius-only{
-     border-radius: 20px 20px 0 0;!important;
+     border-radius: 20px 20px 0 0 !important;
     }
 @media(min-width: 2800px) {
 .container-extended{
   max-width:1650px;
 }
 }
+
+

templates/404.html

@@ -2,18 +2,28 @@
 
 {% block content %}
 
-<div id="notfound" class="min-vh-100 d-flex align-items-center justify-content-center">
-  <div class="notfound text-center">
-    <div class="notfound-404">
-      <h1>404</h1>
+<div class="min-vh-100 d-flex align-items-center justify-content-center">
+  <div class="text-center" style="max-width: 767px;">
+    <div class="mb-4">
+      <h1 style="font-size: 6rem; font-weight: 900;">404</h1>
     </div>
-    <h2>We are sorry, Page not found!</h2>
-    <br>
+    <h2 class="text-uppercase fw-bold mb-3">We are sorry, Page not found!</h2>
     <p>The page you are looking for might have been removed,<br>
       had its name changed, or is temporarily unavailable.</p>
-    <a href="/" class="btn btn-primary">Back To Homepage</a>
+    
+    <div class="d-flex justify-content-center mt-4">
+      <a href="/" class="btn btn-primary">Back To Homepage</a>
+    </div>
+    
+    <div class="bg-light rounded p-4 mt-5">
+      <h3 class="fs-5 fw-bold mb-3">What you can try:</h3>
+      <ul class="text-start list-unstyled">
+        <li class="py-1"><i class="text-primary me-2">•</i> Check the URL for errors</li>
+        <li class="py-1"><i class="text-primary me-2">•</i> Return to the homepage</li>
+        <li class="py-1"><i class="text-primary me-2">•</i> Use the navigation menu</li>
+      </ul>
+    </div>
   </div>
 </div>
 
-
 {% endblock %}

templates/500.html

@@ -2,18 +2,29 @@
 
 {% block content %}
 
-<div id="notfound" class="min-vh-100 d-flex align-items-center justify-content-center">
-  <div class="notfound text-center">
-    <div class="notfound-404">
-      <h1>500</h1>
+<div class="min-vh-100 d-flex align-items-center justify-content-center">
+  <div class="text-center" style="max-width: 767px;">
+    <div class="mb-4">
+      <h1 style="font-size: 6rem; font-weight: 900;">500</h1>
+    </div>
+    <h2 class="text-uppercase fw-bold mb-3">Server Error</h2>
+    <p class="mb-1">We've encountered an unexpected issue on our servers and our team has been notified.</p>
+    <p>Please try again in a few moments or contact support if the problem persists.</p>
+    
+    <div class="d-flex gap-3 justify-content-center mt-4">
+      <a href="/" class="btn btn-primary">Back To Homepage</a>
+      <a href="javascript:location.reload()" class="btn btn-outline-primary">Try Again</a>
+    </div>
+    
+    <div class="bg-light rounded p-4 mt-5">
+      <h3 class="fs-5 fw-bold mb-3">What you can try:</h3>
+      <ul class="text-start list-unstyled">
+        <li class="py-1"><i class="text-primary me-2">•</i> Refresh the page</li>
+        <li class="py-1"><i class="text-primary me-2">•</i> Clear your browser cache</li>
+        <li class="py-1"><i class="text-primary me-2">•</i> Try again later</li>
+      </ul>
     </div>
-    <h2>Something is definitely broken</h2>
-    <br>
-    <p>We have encountered an issue on our side and are currently working on it.
-      Please do come back later!</p>
-    <a href="/">Back To Homepage</a>
   </div>
 </div>
 
-
 {% endblock %}

templates/nav.html

@@ -43,7 +43,7 @@
             </li>
             <li><a class="dropdown-item" href="/infra-testing/email-test">E-Mail
               Test</a></li>
-            <li><a class="dropdown-item" href="/infra-testing/infra-test">Infrastructure
+            <li><a class="dropdown-item" href="/infra-testing/service-test">Infrastructure
               Test</a></li>
             <!--<li><a class="dropdown-item" href="/infra-testing/whois-lookup">WHOIS Lookup</a></li>-->
             <li class="dropdown-divider"></li>