Fix text positioning issues, remove unneeded rules

Make error pages use Flexbox, use new stylesheet location.
Remove old stylesheet, its been moved to styles.
2023-06-06 17:14:31 -05:00 · 2023-06-06 17:05:09 -05:00 · 2023-06-06 17:04:51 -05:00 · 2023-06-06 17:04:12 -05:00 · 2023-06-06 17:03:56 -05:00 · 2023-06-06 17:03:25 -05:00
13 changed files with 142 additions and 106 deletions
--- a/README.md
+++ b/README.md
@ -1,2 +1,5 @@
-# system64.neocities.org v2
+# system64.dev v2
 The eventual successor to the current website, being a rewrite to make it more of a personal website than just my links to socials and other places.
+
+# Can I use this for my own website?
+Yes! It should be decently easy to read the CSS and what nots to modify it for your own usage.
--- a/err/400.html
+++ b/err/400.html
@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>System64.dev - Error</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
-    <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
-</head>
+    <head>
+        <title>System64.dev - Error</title>
+        <link rel="stylesheet" type="text/css" href="/styles/err_styles.css">
+        <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling now comes from the button stylesheet for regular pages. -->
+        <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
+        <meta content="system64.dev - Error" property="og:title" />
+        <meta content="oopsie poopsie, that's an error!" property="og:description" />
+        <meta content="https://system64.dev" property="og:url" />
+        <meta content="https://system64.dev/img/fail_glitch.webp" property="og:image" />
+        <meta content="#f00202" data-react-helmet="true" name="theme-color" />
+    </head>
 <body>
-    <div>
+    <div class="container">
        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
        <h1>400 - Bad Request</h1>
        <p>Your request cannot be processed at this time.</p>
--- a/err/403.html
+++ b/err/403.html
@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>System64.dev - Error</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
-    <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
-</head>
+    <head>
+        <title>System64.dev - Error</title>
+        <link rel="stylesheet" type="text/css" href="/styles/err_styles.css">
+        <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling now comes from the button stylesheet for regular pages. -->
+        <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
+        <meta content="system64.dev - Error" property="og:title" />
+        <meta content="oopsie poopsie, that's an error!" property="og:description" />
+        <meta content="https://system64.dev" property="og:url" />
+        <meta content="https://system64.dev/img/fail_glitch.webp" property="og:image" />
+        <meta content="#f00202" data-react-helmet="true" name="theme-color" />
+    </head>
 <body>
-    <div>
+    <div class="container">
        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
        <h1>403 - Access Forbidden.</h1>
        <p>You do not have permission to access this page.</p>
--- a/err/404.html
+++ b/err/404.html
@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>System64.dev - Error</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
-    <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
-</head>
+    <head>
+        <title>System64.dev - Error</title>
+        <link rel="stylesheet" type="text/css" href="/styles/err_styles.css">
+        <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling now comes from the button stylesheet for regular pages. -->
+        <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
+        <meta content="system64.dev - Error" property="og:title" />
+        <meta content="oopsie poopsie, that's an error!" property="og:description" />
+        <meta content="https://system64.dev" property="og:url" />
+        <meta content="https://system64.dev/img/fail_glitch.webp" property="og:image" />
+        <meta content="#f00202" data-react-helmet="true" name="theme-color" />
+    </head>
 <body>
-    <div>
+    <div class="container">
        <img src="/img/error_glitch.webp" alt="Glitched looking Warning icon">
        <h1>404 - Not Found</h1>
        <p>Great and Powerful unicorns behind curtains! That page couldn't be found on the server!</p>
--- a/err/429.html
+++ b/err/429.html
@ -1,11 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>System64.dev - Error</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
-    <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
-</head>
+    <head>
+        <title>System64.dev - Error</title>
+        <link rel="stylesheet" type="text/css" href="/styles/err_styles.css">
+        <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling now comes from the button stylesheet for regular pages. -->
+        <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
+        <meta content="system64.dev - Error" property="og:title" />
+        <meta content="oopsie poopsie, that's an error!" property="og:description" />
+        <meta content="https://system64.dev" property="og:url" />
+        <meta content="https://system64.dev/img/fail_glitch.webp" property="og:image" />
+        <meta content="#f00202" data-react-helmet="true" name="theme-color" />
+    </head>
 <body>
+    <div class="container">
    <div>
        <img src="/img/error_glitch.webp" alt="Glitched looking Warning icon">
        <h1>429 - Too many requests</h1>
--- a/err/500.html
+++ b/err/500.html
@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>System64.dev - Error</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
-    <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
-</head>
+    <head>
+        <title>System64.dev - Error</title>
+        <link rel="stylesheet" type="text/css" href="/styles/err_styles.css">
+        <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling now comes from the button stylesheet for regular pages. -->
+        <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
+        <meta content="system64.dev - Error" property="og:title" />
+        <meta content="oopsie poopsie, that's an error!" property="og:description" />
+        <meta content="https://system64.dev" property="og:url" />
+        <meta content="https://system64.dev/img/fail_glitch.webp" property="og:image" />
+        <meta content="#f00202" data-react-helmet="true" name="theme-color" />
+    </head>
 <body>
-    <div>
+    <div class="container">
        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
        <h1>500 - Internal Server Error </h1>
        <p>An internal server error or misconfiguration occurred.</p>
--- a/err/502.html
+++ b/err/502.html
@ -1,11 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>System64.dev - Error</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
-    <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
-</head>
+    <head>
+        <title>System64.dev - Error</title>
+        <link rel="stylesheet" type="text/css" href="/styles/err_styles.css">
+        <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling now comes from the button stylesheet for regular pages. -->
+        <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
+        <meta content="system64.dev - Error" property="og:title" />
+        <meta content="oopsie poopsie, that's an error!" property="og:description" />
+        <meta content="https://system64.dev" property="og:url" />
+        <meta content="https://system64.dev/img/fail_glitch.webp" property="og:image" />
+        <meta content="#f00202" data-react-helmet="true" name="theme-color" />
+    </head>
 <body>
+    <div class="container">
    <div>
        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
        <h1>502 - Bad Gateway</h1>
--- a/err/503.html
+++ b/err/503.html
@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <title>System64.dev - Error</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
-    <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
-</head>
+    <head>
+        <title>System64.dev - Error</title>
+        <link rel="stylesheet" type="text/css" href="/styles/err_styles.css">
+        <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling now comes from the button stylesheet for regular pages. -->
+        <link rel="icon" type="image/x-icon" href="/err/img/favicon.png">
+        <meta content="system64.dev - Error" property="og:title" />
+        <meta content="oopsie poopsie, that's an error!" property="og:description" />
+        <meta content="https://system64.dev" property="og:url" />
+        <meta content="https://system64.dev/img/fail_glitch.webp" property="og:image" />
+        <meta content="#f00202" data-react-helmet="true" name="theme-color" />
+    </head>
 <body>
-    <div>
+    <div class="container">
        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
        <h1>503 - Service Unavailable</h1>
        <p>The server is not ready to process this request at this time.</p>
--- a/err/styles.css
+++ b/err/styles.css
@ -1,60 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap');
-
-html,body {
-    height: 100%;
-}
-h1 {
-    font-family: 'Bitter', serif;
-    color: white;
-    font-size: 50px;
-    text-align: center;
-}
-p {
-    font-family: 'Bitter', serif;
-    color: white;
-    text-align: center;
-    float: bottom;
-}
-p.tiny {
-    font-family: 'Bitter', serif;
-    color: white;
-    font-size: 12px;
-    text-align: center;
-    float: bottom;
-}
-a {
-    color: white;
-    font-family: 'Bitter', serif;
-}
-
-body {
-    background-image: url("/img/bg.jpg");
-    background-repeat: no-repeat;
-    height: 100%;
-}
-
-div {
-    margin-top: auto;
-    display: block;
-}
-img {
-    width: 20%;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-input {
-    -webkit-appearance: none;
-    appearance: none;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    min-width: 250px;
-    background: #dad9d9;
-    font-size: 170%;
-    font-family: 'Share Tech Mono', monospace;
-    color: black;
-    box-shadow: inset -0.05em -0.05em black
-}
--- a/index.html
+++ b/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <head>
-    <link rel="stylesheet" type="text/css" href="/styles/stylemain.css"> <!-- Import main styling -->
-    <link rel="stylesheet" type="text/css" href="/styles/buttons.css"> <!-- Button styling -->
+    <link rel="stylesheet" type="text/css" href="/styles/main_style.css"> <!-- Import main styling -->
+    <link rel="stylesheet" type="text/css" href="/styles/button_style.css"> <!-- Button styling -->
    <link rel="icon" type="image/x-icon" href="/img/favicon/favicon.png">
    <title>system64.dev</title>
    <meta content="system64.dev" property="og:title" />
--- a/styles/button_style.css
+++ b/styles/button_style.css
--- a/styles/err_styles.css
+++ b/styles/err_styles.css
@ -0,0 +1,49 @@
+/* CSS for System64.dev v2 Error Pages, Under MIT License. (6.6.23) */
+
+/* decoration */
+body {
+    background-image: url("/img/bg.jpg");
+    background-repeat: no-repeat;
+}
+
+/* positioning and sizing */
+
+.container { /* not docker or kubernetes, sadly. */
+    display: flex;
+    flex-direction: column;
+}
+
+div {
+    margin: auto;
+    align-items: center;
+}
+
+img {
+    width: 20%;
+    height: auto;
+}
+
+/* fonts */
+
+@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap'); /* Bitter */ 
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); /* Share Tech Mono */
+
+h1 {
+    font-family: 'Bitter', serif;
+    color: white;
+    font-size: 50px;
+    text-align: center;
+}
+p {
+    font-family: 'Bitter', serif;
+    color: white;
+    text-align: center;
+}
+p.tiny {
+    font-size: 12px;
+    margin-top: -5px;
+}
+a {
+    color: white;
+    font-family: 'Bitter', serif;
+}
--- a/styles/main_style.css
+++ b/styles/main_style.css
@ -1,6 +1,6 @@
-/* CSS for System64.dev v2, by IDeletedSystem64. Under MIT License (v4.14.23) */
-@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+/* CSS for System64.dev v2, by IDeletedSystem64. Under MIT License (v6.5.23) */
+@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap'); /* Bitter */
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); /* Share Tech Mono */
 /* Import dem fonts */

 button.home {
Author	SHA1	Message	Date
Sophie Marie	57053cf3f3	Fix text positioning issues, remove unneeded rules	2023-06-06 17:14:31 -05:00
Sophie Marie	5c18ad0931	Make error pages use Flexbox, use new stylesheet location.	2023-06-06 17:05:09 -05:00
Sophie Marie	b45406fd97	Remove old stylesheet, its been moved to styles.	2023-06-06 17:04:51 -05:00
Sophie Marie	a013836bdd	Use new stylesheet name	2023-06-06 17:04:12 -05:00
Sophie Marie	dcde6f3fdf	Rewrite and simplify error stylesheet to use Flexbox	2023-06-06 17:03:56 -05:00
Sophie Marie	061685b07a	Give stylesheets a uniform naming scheme	2023-06-06 17:03:25 -05:00
Sophie Marie	5e30923af1	update title	2023-06-06 16:26:03 -05:00