fix: prettier error page

ubiquity · Dec 17, 2024 · 29ba726 · 29ba726
1 parent 1b97465
commit 29ba726
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 52 deletions.
diff --git a/src/components/404.ts b/src/components/404.ts
@@ -1,34 +1,27 @@
 export function create404Page(): string {
   return `
-    <div id="Page404">
-        <div>
-            <p>Oops!</p>
-            <p>We can't seem to find the page you're looking for</p>
-            <p>
-            <b>Here are some helpful links instead:</b>
-            </p>
-            <ul>
-            <li>
-                <a href="//github.com/ubiquity/ubiquity-dollar/wiki" target="_blank">Docs</a>
-            </li>
-            <li>
-                <a href="//dao.ubq.fi/faq" target="_blank">FAQ</a>
-            </li>
-            <li>
-                <a href="//github.com/ubiquity/ubiquity-dollar" target="_blank">Github</a>
-            </li>
-            <li>
-                <a href="//discord.gg/SjymJ5maJ4" target="_blank">Discord</a>
-            </li>
-            <li>
-                <a href="//t.me/ubiquitydao" target="_blank">Telegram</a>
-            </li>
-            <li>
-                <a href="//x.com/UbiquityDAO" target="_blank">X</a>
-            </li>
-            </ul>
-        </div>
-    <div> 404 </div>
-    </div>
+        <main class="err-container">
+            <div class="err-content">
+                <h1>Sorry!</h1>
+                <p class="err-subtitle">We can't seem to find the page you're looking for</p>
+                
+                <div class="err-links">
+                    <h2>Here are some helpful links instead:</h2>
+                    
+                    <div class="err-links-grid">
+                        <a href="https://github.com/ubiquity/ubiquity-dollar/wiki" class="err-nav-link">DOCS</a>
+                        <a href="https://dao.ubq.fi/faq" class="err-nav-link">FAQ</a>
+                        <a href="https://github.com/ubiquity/ubiquity-dollar" class="err-nav-link">GITHUB</a>
+                        <a href="https://discord.com/invite/SjymJ5maJ4" class="err-nav-link">DISCORD</a>
+                        <a href="https://t.me/ubiquitydao" class="err-nav-link">TELEGRAM</a>
+                        <a href="https://twitter.com/UbiquityDAO" class="err-nav-link">TWITTER</a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="err-code">
+                404
+            </div>
+        </main>
 `;
 }
diff --git a/static/style.css b/static/style.css
@@ -27,36 +27,93 @@ body {
   font-size: 1rem;
 }
 
-/* Page 404 styles */
-#Page404 {
+/* ERROR PAGE STYLES */
+
+.err-container {
+  min-height: 100vh;
   display: flex;
-  height: 100%;
   justify-content: space-between;
   align-items: center;
+  font-family: "Inter", sans-serif;
+  width: 100%;
+  max-width: 1200px;
   padding: 2rem;
+  gap: 2rem;
+  margin: 0 auto;
 }
-#Page404 a {
-  text-decoration: underline;
+
+.err-content {
+  flex: 1;
 }
-#Page404 ul {
-  padding: 0;
-  margin: 0;
+
+.err-content h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
 }
-#Page404 li {
-  width: 100%;
+
+.err-subtitle {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
 }
-#Page404 > div:nth-child(1) {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 16px;
+
+.err-links h2 {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+  font-weight: 500;
 }
-#Page404 > div:nth-child(1) > p:nth-child(1) {
-  font-size: 2rem;
+
+.err-links-grid {
+  display: grid;
+  gap: 1rem;
 }
-#Page404 > div:nth-child(2) {
-  align-items: center;
-  display: flex;
-  font-size: 4rem;
-  padding: 16px;
+
+.err-nav-link {
+  color: #fff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+.err-nav-link:hover {
+  opacity: 1;
+}
+
+.err-code {
+  font-size: 8rem;
+  font-weight: 600;
+  opacity: 0.8;
+  line-height: 1;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .err-container {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .err-code {
+    font-size: 6rem;
+  }
+
+  .err-links-grid {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .err-code {
+    font-size: 4rem;
+  }
+
+  .err-content h1 {
+    font-size: 2rem;
+  }
+
+  .err-subtitle {
+    font-size: 1rem;
+  }
 }