simplifyed CSS for 404, 501, 520 Error Page (#131)

black-backdoor · Jan 3, 2025 · 1d0bae1 · 1d0bae1
1 parent a4b715d
commit 1d0bae1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 30 deletions.
diff --git a/src/404/index.html b/src/404/index.html
@@ -5,6 +5,7 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,12 +18,14 @@
     <!-- PWA -->
     <script src="/pwa/register.js"></script>
 </head>
+
 <body>
-    <main>
-        <h1>:(</h1>
-        <h3>You deviated from the path. The page you are looking for might have been removed, had its name changed or is temporarily unavailable.</h3>
-        <h3>404 - Page not found</h3>
-        <a href="/">Press any key to continue...</a>
+    <main class="bsod">
+        <h1 class="bsod__header">:(</h1>
+        <h3 class="bsod__message">You deviated from the path. The page you are looking for might have been removed, had its name changed or is temporarily unavailable.</h3>
+        <h3 class="bsod__error-code">404 - Page not found</h3>
+        <a href="/" class="bsod__continue-link">Press any key to continue...</a>
     </main>
 </body>
+
 </html>
diff --git a/src/404/style.css b/src/404/style.css
@@ -7,6 +7,10 @@ html {
     font-size: 100%;
 }
 
+* {
+    box-sizing: border-box;
+}
+
 body {
     font-family: Arial, sans-serif;
     font-size: 16px;
@@ -23,46 +27,41 @@ body {
     background-color: var(--bg-color);
 }
 
-main {
-    height: 70%;
+.bsod {
     width: 70%;
 }
 
 
 /* title: ":(" */
-h1 {
+.bsod__header {
     margin: 0;
-    font-size: 150px;
+    font-weight: 700;
+    font-size: 9rem;
 }
 
-h3 {
-    font-weight: normal;
+.bsod__message,
+.bsod__error-code {
+    font-weight: 400;
     font-size: 1.6rem;
 }
 
-a {
+.bsod__continue-link {
     cursor: pointer;
     color: var(--text-color);
-    font-size: 20px;
+    font-size: 1.25rem;
     text-decoration: none;
 }
 
 
 /* MOBILE */
 @media screen and (max-width: 750px) {
-    h1 {
-        font-size: 100px;
+    .bsod__header {
+        font-size: 6.25rem;
     }
 }
 
 @media screen and (max-width: 380px){
-    main {
+    .bsod {
         width: 95%;
     }
 }
-
-@media screen and (max-height: 500px){
-    main {
-        height: 80%;
-    }
-}
diff --git a/src/501/index.html b/src/501/index.html
@@ -5,6 +5,7 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,11 +19,13 @@
     <!-- PWA -->
     <script src="/pwa/register.js"></script>
 </head>
+
 <body>
-    <main>
-        <h1>:)</h1>
-        <h3>Sorry, I'm too lazy to implement this feature</h3>
-        <a href="/">Press any key to continue...</a>
+    <main class="bsod">
+        <h1 class="bsod__header">:)</h1>
+        <h3 class="bsod__message">Sorry, I'm too lazy to implement this feature</h3>
+        <a href="/" class="bsod__continue-link">Press any key to continue...</a>
     </main>
 </body>
+
 </html>
diff --git a/src/520/index.html b/src/520/index.html
@@ -5,6 +5,7 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,11 +19,13 @@
     <!-- PWA -->
     <script src="/pwa/register.js"></script>
 </head>
+
 <body>
-    <main>
-        <h1>( ._.)</h1>
-        <h3>I don't know WHAT the fuck is going on.</h3>
-        <a href="/">Press any key to continue...</a>
+    <main class="bsod">
+        <h1 class="bsod__header">( ._.)</h1>
+        <h3 class="bsod__message">I don't know WHAT the fuck is going on.</h3>
+        <a href="/" class="bsod__continue-link">Press any key to continue...</a>
     </main>
 </body>
+
 </html>