Give the error pages some TLC and a new background

remove projects btn as i don't have any ongoing projects worth documenting.
fix missing favicon and update title
2024-05-29 16:01:34 -05:00 · 2024-03-06 15:54:06 -06:00 · 2024-03-06 15:51:48 -06:00 · 2024-03-06 15:51:26 -06:00 · 2024-03-05 12:56:02 -06:00 · 2024-03-04 14:27:48 -06:00
24 changed files with 655 additions and 1002 deletions
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2023 Sophie Axebane
+Copyright (c) 2024 Sophie Axebane
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -1,5 +1,8 @@
-# system64.dev
+# system64.dev v2
-This is the source code for my site live at system64.dev.
+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.
-I highly recommend AGAINST using this for ANYTHING. The code for this website is atrocious and shouldn't ever be touched for everyones own good.
+# Can I use this for my own website?
-Checkout the v2 branch instead
+Yes! It should be decently easy to read the CSS and what nots to modify it for your own usage.
 # Additional licenses
 System64.dev uses the following fonts, which are under OFL license: [Bitter](https://github.com/solmatas/BitterPro), [Share Tech/Share Tech Mono](https://carrois.com/), You can view their respective licenses in the "fonts" folder.
--- a/characters/index.html
+++ b/characters/index.html
@ -0,0 +1,79 @@
 <!DOCTYPE HTML>
 <head> 
    <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="stylesheet" type="text/css" href="../styles/window_style.css"> <!-- Window Styling -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/favicon/favicon.png">
    <title>system64.dev - characters</title>
    <!-- embed -->
    <meta content="system64.dev" property="og:title" />
    <meta content="The site of IDeletedSystem64 on the World Wide Web thingamajig" property="og:description" />
    <meta content="https://system64.dev" property="og:url" />
    <meta content="https://system64.dev/img/blueberry.png" property="og:image" />
    <meta content="#2452b5" data-react-helmet="true" name="theme-color" />
 </head>
 <body>
    <div class="taskbar">
        <input class="start" type="button" onclick="location.href='/';" value="system64.dev">
        <input class="taskbar" type="button" onclick="location.href='../artwork/index.html';" value="Artwork">
        <input class="taskbar" type="button" onclick="location.href='../characters/index.html';" value="Characters">
        <input class="taskbar" type="button" onclick="location.href='https://git.system64.dev'" value="Code (Gitea)">
    </div> 
    <div class="container" style="flex-direction: column; display:inline-flex">
        <div class="window char-window">
            <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
            <img src="preview/ponytown_technocolor.png">
            <h1>Technocolor</h1>
            <p>there's supposed to be a snippet of oc lore here ok plz be patient with me</p>
           <ul>
            <li>Trans (FtM)</li>
            <li>Alicorn</li>
            <li>Music pony</li>
           </ul>
           <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
        </div>
        <div class="window char-window">
            <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
            <img src="preview/ponytown_technocolor.png">
            <h1>Technocolor 2</h1>
            <p>no way, a second one!</p>
           <ul>
            <li>Trans (FtM)</li>
            <li>Alicorn</li>
            <li>Music pony</li>
           </ul>
           <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
        </div>
        <div class="window char-window">
            <div class="window_titlebar"><h3 class="window">Technocolor (Pony)</h3></div>
            <img src="preview/ponytown_technocolor.png">
            <h1>Technocolor 3</h1>
            <p>what the fuck, three????</p>
           <ul>
            <li>Trans (FtM)</li>
            <li>Alicorn</li>
            <li>Music pony</li>
           </ul>
           <input type="button" onclick="location.href='refsheet/technocolor_refsheetv1.png';" value="Get the refsheet">
        </div>
    </div>
    <div class="window" id="char-sidebar" style="width:45vh;">
        <div class="window_titlebar"><h3 class="window">Can I draw your characters?</h3></div>
        <h1>Absolutely!</h1>
        <p>Anyone can draw my characters, there's not much that makes me happier than seeing art of my characters. It doesn't even have to be the greatest!</p>
        <p>What you can do with my characters:</p>
        <ul>
            <li>Draw them with your own character</li>
            <li>Ship them with their canon ships</li>
        </ul>
        <p>You CANNOT do this with my characters:</p>
        <ul>
            <li>Draw gore of them</li>
            <li>Ship them with your own characters</li>
            <li>Draw NSFW content</li>
        </ul>
        <p>If there's something you aren't sure about, feel free to ask me!</p>
        <p>Additionally, you can send your drawings to me via one of my contacts on my <a href="../socials.html" style="color:blue">contacts page.</a></p>
    </div>
 </body>
--- a/characters/preview/ponytown_technocolor.png
+++ b/characters/preview/ponytown_technocolor.png
--- a/characters/refsheet/technocolor_refsheetv1.png
+++ b/characters/refsheet/technocolor_refsheetv1.png
--- a/err/400.html
+++ b/err/400.html
@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>System64.dev - Error</title>
+    <title>System64.dev - 400 Bad Request</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
+    <link rel="stylesheet" type="text/css" href="../styles/err_style.css">
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/err_icon/fail_glitch.webp">
+    <link rel="stylesheet" type="text/css" href="../styles/button_style.css">
    <link rel="icon" type="image/x-icon" href="../img/favicon/err_favicon.png">
 </head>
 <body>
-    <div>
+    <div class="container">
-        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
+        <img src="../img/err_icon/fail_glitch.webp" alt="Glitched looking critical error icon">
        <h1>400 - Bad Request</h1>
        <p>Your request cannot be processed at this time.</p>
-        <p class="tiny">This error has been logged, If this keeps happening contact the webmaster.</p>
+        <p class="tiny">This error has been logged, If this keeps happening contact <a href="mailto:ideleted@system64.dev">the webmaster.</a></p>
        <input type="button" onclick="location.href='https://system64.dev'";" value="Go home">
    </div>
--- a/err/403.html
+++ b/err/403.html
@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>System64.dev - Error</title>
+    <title>System64.dev - 403 Forbidden</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
+    <link rel="stylesheet" type="text/css" href="../styles/err_style.css">
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/err_icon">
+    <link rel="stylesheet" type="text/css" href="../styles/button_style.css">
    <link rel="icon" type="image/x-icon" href="../img/favicon/err_favicon.png">    
 </head>
 <body>
-    <div>
+    <div class="container">
-        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
+        <img src="../img/err_icon/fail_glitch.webp" alt="Glitched looking critical icon">
        <h1>403 - Access Forbidden.</h1>
        <p>You do not have permission to access this page.</p>
        <input type="button" onclick="location.href='https://system64.dev'";" value="Go home">
--- a/err/404.html
+++ b/err/404.html
@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>System64.dev - Error</title>
+    <title>System64.dev - 404 Not Found</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
+    <link rel="stylesheet" type="text/css" href="../styles/err_style.css">
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/err_icon">
+    <link rel="stylesheet" type="text/css" href="../styles/button_style.css">
    <link rel="icon" type="image/x-icon" href="../img/favicon/err_favicon.png">
 </head>
 <body>
-    <div>
+    <div class="container">
-        <img src="/img/error_glitch.webp" alt="Glitched looking Warning icon">
+        <img src="../img/err_icon/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>
        <p class="tiny">Expecting something here? It may have been moved or is simply missing.</p>
--- a/err/429.html
+++ b/err/429.html
@ -1,15 +1,16 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>System64.dev - Error</title>
+    <title>System64.dev - 429 Ratelimited</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
+    <link rel="stylesheet" type="text/css" href="../styles/err_style.css">
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/err_icon">
+    <link rel="stylesheet" type="text/css" href="../styles/button_style.css">
    <link rel="icon" type="image/x-icon" href="../img/favicon/err_favicon.png">
 </head>
 <body>
-    <div>
+    <div class="container">
-        <img src="/img/error_glitch.webp" alt="Glitched looking Warning icon">
+        <img src="../img/err_icon/fail_glitch.webp" alt="Glitched looking critical  icon">
-        <h1>429 - Too many requests</h1>
+        <h1>429 - Too Many Requests</h1>
-        <p>Chill down there pardner! You're being ratelimited!</p>
+        <p>Woah there now, pardner! Chill down, ratelimited.</p>
        <p class="tiny">Ratelimits don't last very long, Check back later.</p>
        <input type="button" onclick="location.href='https://system64.dev'";" value="Go home">
--- a/err/500.html
+++ b/err/500.html
@ -0,0 +1,19 @@
 <!DOCTYPE html>
 <html>
    <head>
        <title>System64.dev - 500 Internal Server Error</title>
        <link rel="stylesheet" type="text/css" href="../styles/err_style.css">
        <link rel="stylesheet" type="text/css" href="../styles/button_style.css">
        <link rel="icon" type="image/x-icon" href="../img/favicon/err_favicon.png">    
    </head>
 <body>
    <div class="container">
        <img src="../img/err_icon/fail_glitch.webp" alt="Glitched looking critical icon">
        <h1>500 - Internal Server Error </h1>
        <p>An internal server error or misconfiguration occurred.</p>
        <p class="tiny">This error has been logged, If this keeps happening contact <a href="mailto:ideleted@system64.dev">the webmaster.</a></p>
        <input type="button" onclick="location.href='https://system64.dev'";" value="Go home">
    </div>
 </body>
 </html>
--- a/err/502.html
+++ b/err/502.html
@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html>
-<head>
+    <head>
-    <title>System64.dev - Error</title>
+        <title>System64.dev - 502 Bad Gateway</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
+        <link rel="stylesheet" type="text/css" href="../styles/err_style.css">
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/err_icon">
+        <link rel="stylesheet" type="text/css" href="../styles/button_style.css">
-</head>
+        <link rel="icon" type="image/x-icon" href="../img/favicon/err_favicon.png">    
    </head>
 <body>
-    <div>
+    <div class="container">
-        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
+        <img src="../img/err_icon/fail_glitch.webp" alt="Glitched looking critical icon">
-        <h1>502 - Bad Gateway</h1>
+        <h1>500 - Bad Gateway</h1>
-        <p>The server sent an invalid response.</p>
+        <p>The server sent an unexpected response.</p>
-        <p class="tiny">This error has been logged, If this keeps happening contact the webmaster.</p>
+        <p class="tiny">This error has been logged, If this keeps happening contact <a href="mailto:ideleted@system64.dev">the webmaster.</a></p>
        <input type="button" onclick="location.href='https://system64.dev'";" value="Go home">
    </div>
--- a/err/503.html
+++ b/err/503.html
@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>System64.dev - Error</title>
+    <title>System64.dev - Service Unavailable</title>
-    <link rel="stylesheet" type="text/css" href="/err/styles.css">
+    <link rel="stylesheet" type="text/css" href="../styles/err_style.css">
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/err_icon">
+    <link rel="stylesheet" type="text/css" href="../styles/button_style.css">
    <link rel="icon" type="image/x-icon" href="../img/favicon/err_favicon.png">  
 </head>
 <body>
-    <div>
+    <div class="container">
-        <img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
+        <img src="/img/err_icon/error_glitch.webp" alt="Glitched looking Warning icon">
        <h1>503 - Service Unavailable</h1>
-        <p>The server is not ready to process this request.</p>
+        <p>The server is not ready to process this request at this time.</p>
        <p class="tiny">The server may be down for maintenance, or is currently overloaded. Nonetheless, This error has been recorded.</p>
        <p class="tiny">If this page keeps appearing, please contact <a href="mailto:ideleted@system64.dev">the webmaster.</a></p>
        <input type="button" onclick="location.href='https://system64.dev'";" value="Go home">
    </div>
--- a/err/styles.css
+++ b/err/styles.css
@ -1,54 +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;
 }
 body {
    background: linear-gradient(45deg, rgb(0, 14, 55), rgb(2, 0, 136));
    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;
    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/fonts/Bitter/LICENSE
+++ b/fonts/Bitter/LICENSE
@ -0,0 +1,94 @@
 Copyright 2011 The Bitter Project Authors (https://github.com/solmatas/BitterPro)
 with Reserved Font Name "Bitter Pro".
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
 http://scripts.sil.org/OFL
 -----------------------------------------------------------
 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 -----------------------------------------------------------
 PREAMBLE
 The goals of the Open Font License (OFL) are to stimulate worldwide
 development of collaborative font projects, to support the font creation
 efforts of academic and linguistic communities, and to provide a free and
 open framework in which fonts may be shared and improved in partnership
 with others.
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
 fonts, including any derivative works, can be bundled, embedded, 
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The
 requirement for fonts to remain under this license does not apply
 to any document created using the fonts or their derivatives.
 DEFINITIONS
 "Font Software" refers to the set of files released by the Copyright
 Holder(s) under this license and clearly marked as such. This may
 include source files, build scripts and documentation.
 "Reserved Font Name" refers to any names specified as such after the
 copyright statement(s).
 "Original Version" refers to the collection of Font Software components as
 distributed by the Copyright Holder(s).
 "Modified Version" refers to any derivative made by adding to, deleting,
 or substituting -- in part or in whole -- any of the components of the
 Original Version, by changing formats or by porting the Font Software to a
 new environment.
 "Author" refers to any designer, engineer, programmer, technical
 writer or other person who contributed to the Font Software.
 PERMISSION & CONDITIONS
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of the Font Software, to use, study, copy, merge, embed, modify,
 redistribute, and sell modified and unmodified copies of the Font
 Software, subject to the following conditions:
 1) Neither the Font Software nor any of its individual components,
 in Original or Modified Versions, may be sold by itself.
 2) Original or Modified Versions of the Font Software may be bundled,
 redistributed and/or sold with any software, provided that each copy
 contains the above copyright notice and this license. These can be
 included either as stand-alone text files, human-readable headers or
 in the appropriate machine-readable metadata fields within text or
 binary files as long as those fields can be easily viewed by the user.
 3) No Modified Version of the Font Software may use the Reserved Font
 Name(s) unless explicit written permission is granted by the corresponding
 Copyright Holder. This restriction only applies to the primary font name as
 presented to the users.
 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
 Software shall not be used to promote, endorse or advertise any
 Modified Version, except to acknowledge the contribution(s) of the
 Copyright Holder(s) and the Author(s) or with their explicit written
 permission.
 5) The Font Software, modified or unmodified, in part or in whole,
 must be distributed entirely under this license, and must not be
 distributed under any other license. The requirement for fonts to
 remain under this license does not apply to any document created
 using the Font Software.
 TERMINATION
 This license becomes null and void if any of the above conditions are
 not met.
 DISCLAIMER
 THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
 OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
 COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/img/bg/bg_bw.jpg
+++ b/img/bg/bg_bw.jpg
--- a/index.html
+++ b/index.html
@ -1,49 +1,36 @@
 <!DOCTYPE HTML>
 <head>
-    <link rel="stylesheet" type="text/css" href="/styles/stylemain.css">
+    <link rel="stylesheet" type="text/css" href="styles/main_style.css"> <!-- Import main styling -->
-    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/favicon/blueberry.png">
+    <link rel="stylesheet" type="text/css" href="styles/button_style.css"> <!-- Button styling -->
-    <title>IDeletedSystem64</title>
+    <link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/favicon/favicon.png">
-    <!-- Replace "Username" with your name, website name or social username! -->
+    <title>system64.dev</title>
-    <script type="text/javascript" src="https://browser.pony.house/js/ponybase.js"></script><script type="text/javascript" src="https://browser.pony.house/js/browserponies.js" id="browser-ponies-script"></script><script type="text/javascript">/* <![CDATA[ */ (function (cfg) {BrowserPonies.setBaseUrl(cfg.baseurl);BrowserPonies.loadConfig(BrowserPoniesBaseConfig);BrowserPonies.loadConfig(cfg);})({"baseurl":"https://browser.pony.house/","fadeDuration":500,"volume":1,"fps":25,"speed":3,"audioEnabled":false,"showFps":false,"showLoadProgress":true,"speakProbability":0.1,"spawn":{"fluttershy":1,"princess twilight sparkle":1},"autostart":true}); /* ]]> */</script>
+    <meta content="system64.dev" property="og:title" />
-    <!-- no more snow :( 
+    <meta content="The site of IDeletedSystem64 on the World Wide Web thingamajig" property="og:description" />
-    <script type="text/javascript" src="/snowstorm/snowstorm.js"</script></script>
+    <meta content="https://system64.dev" property="og:url" />
-    -->
+    <meta content="https://img.system64.dev/web/favicon/blueberry.png" property="og:image" />
    <meta content="#2452b5" data-react-helmet="true" name="theme-color" />
 </head>
 <body>
-    <header>
+    <div class="taskbar">
-        <!-- Replace "Username" with your name, website name, or social username!-->
+        <input class="start" type="button" onclick="location.href='/';" value="system64.dev">
-        <h1 class=header>IDeletedSystem64</h1>
+        <input class="taskbar" type="button" onclick="location.href='artwork/index.html';" value="Artwork">
-    </header>
+        <input class="taskbar" type="button" onclick="location.href='characters/index.html';" value="Characters">
-    <div class="main">
+        <input class="taskbar" type="button" onclick="location.href='https://git.system64.dev'" value="Code (Gitea)">
-        <div class="neko">
+    </div>    
-            <script>NekSoType="white"</script>
+    <div class="container">
-            <h1 id=nl><script src="https://webneko.net/n20171213.js"></script><a href="https://webneko.net">Neko</a></h1>
+            <div class="main">
                <h1>I'm Sophie (she/they) <a href="blueheart.system64.dev"><img src=https://img.system64.dev/web/misc/blueheart.gif width="50vw"></a></h1>
                <h2>I am:</h2>
                <ul>
                <li>a digital and occasional traditional artist</li>
                <li>a learning beginner programmer</li>
                <li>a linux user and aspiring sysadmin</li>
                </ul>
            <div class="buttons">
                <input type="button" onclick="location.href='socials.html';" value="Socials/Contact">
                <input type="button" onclick="location.href='artwork/index.html';" value="Art Gallery">
            </div>
        </div>
-        <p class="intro">Hi there, I'm Sophie!</p>
+        <img loading="lazy" class="home" src="https://img.system64.dev/web/banners/FlutterUndulate.png" alt="fluttershy undulate in a ms paint window">
        <p class="info">She/They, Trans MtF, 20, Artist, Developer, and Linux User</p>
        <input type="button" onclick="location.href='https://en.pronouns.page/@IDeletedSystem64';" value="Pronouns.page">
        <input type="button" onclick="location.href='https://fedi.system64.dev/IDeletedSystem64';" value="Fediverse">
        <input type="button" onclick="location.href='https://pony.social/@ArtsieSophie';" value="pony.social (Art)">
        <input type="button" onclick="location.href='https://discord.gg/eT8HEZXKTp';" value="my Discord server">
        <input type="button" onclick="location.href='https://github.com/IDeletedSystem64';" value="GitHub">
        <input type="button" onclick="location.href='https://git.system64.dev/IDeletedSystem64';" value="My Gitea">
        <input type="button" onclick="location.href='https://steamcommunity.com/id/system64_';" value="Steam">
        <input type="button" onclick="location.href='https://open.spotify.com/user/w2kr77l67qtystmkuza8k2mcs';" value="Spotify">
        <div class="webbutton">
            <p><a href="http://www.theoldnet.com/#frombadge" title="Are you tired of this new Internet yet? Time to Get TheOldNet!"><img class=webbutton src="https://img.system64.dev/web/webbutton/oldnet.gif"></a></p>
            <p><a href="https://neocities.org" title="Host a free homepage with Neocities!"><img class=webbutton src="https://img.system64.dev/web/webbutton/neocities.gif"></a></p>
            <p><a href="https://instances.social/" title="Find and join a Mastodon instance!"><img class=webbutton src="https://img.system64.dev/web/webbutton/masto.gif"></a></p>
            <p><a href="https://kernel.org/" title="Built using Linux"><img class=webbutton src="/img/webbutton/gnu-linux.gif"></a></p>
            <p><a href="https://gitea.io/" title="Gitea is a painless self-hosted Git service similar to GitHub or GitLab."><img class=webbutton src="https://img.system64.dev/web/webbutton/gitea.gif"></a></p>
            <p><a href="https://firefox.com/" title="Firefox is a web browser, and my favorite especially for web development."><img class=webbutton src="https://img.system64.dev/web/webbutton/firefoxnow.gif"></a></p>
            <p><a href="https://browser.pony.house/" title="Add ponies to your website!"><img class=webbutton src="https://img.system64.dev/web/webbutton/browserpony.gif"></a></p>
            <p><a href="https://code.visualstudio.com/" title="The code editor I used for this website, as well as other projects!"><img class=webbutton src="https://img.system64.dev/web/webbutton/vscode.gif"></a></p>
        </div>
        <a class="blueheart" href="https://blueheart.system64.dev/" title="Blueheart Forever"><img src="https://img.system64.dev/web/misc/blueheart.gif" width="75vw"></a> <!-- yes we know this is done wrong, no we dont care, the code is awful. checkout v2branch instead->
        <a style="display: none;" rel="me" href="https://glaceon.social/@IDeletedSystem64">Mastodon</a> <!-- verification for mastodon main acc -->
        <a style="display: none;" rel="me" href="https://pony.social/@ArtsieSophie">Mastodon</a> <!-- verification for mastodon art acc -->
    </div>
 </body>
--- a/snowstorm/license.txt
+++ b/snowstorm/license.txt
@ -1,29 +0,0 @@
 Software License Agreement (BSD License)
 Copyright (c) 2003, Scott Schiller (schillmania.com)
 All rights reserved.
 Redistribution and use in source and binary forms, with or without modification,
 are permitted provided that the following conditions are met:
 * Redistributions of source code must retain the above copyright notice, this 
  list of conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this
  list of conditions and the following disclaimer in the documentation and/or
  other materials provided with the distribution.
 * Neither the name of schillmania.com nor the names of its contributors may be
  used to endorse or promote products derived from this software without
  specific prior written permission from schillmania.com.
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
 ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--- a/snowstorm/snowstorm.js
+++ b/snowstorm/snowstorm.js
@ -1,666 +0,0 @@
 /** @license
 * DHTML Snowstorm! JavaScript-based snow for web pages
 * Making it snow on the internets since 2003. You're welcome.
 * -----------------------------------------------------------
 * Version 1.44.20131208 (Previous rev: 1.44.20131125)
 * Copyright (c) 2007, Scott Schiller. All rights reserved.
 * Code provided under the BSD License
 * http://schillmania.com/projects/snowstorm/license.txt
 */
 /*jslint nomen: true, plusplus: true, sloppy: true, vars: true, white: true */
 /*global window, document, navigator, clearInterval, setInterval */
 var snowStorm = (function(window, document) {
  // --- common properties ---
  this.autoStart = true;          // Whether the snow should start automatically or not.
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk.
  this.flakesMax = 1000;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 128;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.useGPU = true;             // Enable transform-based hardware acceleration, reduce CPU load.
  this.className = null;          // CSS class name for further customization on snow elements
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.followMouse = true;        // Snow movement can respond to the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
  this.usePixelPosition = false;  // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified.
  // --- less-used bits ---
  this.freezeOnBlur = true;       // Only snow when the window is in focus (foreground.) Saves CPU.
  this.flakeLeftOffset = 0;       // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
  this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
  this.flakeWidth = 8;            // Max pixel width reserved for snow element
  this.flakeHeight = 8;           // Max pixel height reserved for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range for snow
  this.zIndex = 0;                // CSS stacking order applied to each snowflake
  // --- "No user-serviceable parts inside" past this point, yadda yadda ---
  var storm = this,
  features,
  // UA sniffing and backCompat rendering mode checks for fixed position, etc.
  isIE = navigator.userAgent.match(/msie/i),
  isIE6 = navigator.userAgent.match(/msie 6/i),
  isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),
  isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
  noFixed = (isBackCompatIE || isIE6),
  screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null,
  windOffset = 1,
  windMultiplier = 2,
  flakeTypes = 6,
  fixedForEverything = false,
  targetElementIsRelative = false,
  opacitySupported = (function(){
    try {
      document.createElement('div').style.opacity = '0.5';
    } catch(e) {
      return false;
    }
    return true;
  }()),
  didInit = false,
  docFrag = document.createDocumentFragment();
  features = (function() {
    var getAnimationFrame;
    /**
     * hat tip: paul irish
     * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     * https://gist.github.com/838785
     */
    function timeoutShim(callback) {
      window.setTimeout(callback, 1000/(storm.animationInterval || 20));
    }
    var _animationFrame = (window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        timeoutShim);
    // apply to window, avoid "illegal invocation" errors in Chrome
    getAnimationFrame = _animationFrame ? function() {
      return _animationFrame.apply(window, arguments);
    } : null;
    var testDiv;
    testDiv = document.createElement('div');
    function has(prop) {
      // test for feature support
      var result = testDiv.style[prop];
      return (result !== undefined ? prop : null);
    }
    // note local scope.
    var localFeatures = {
      transform: {
        ie:  has('-ms-transform'),
        moz: has('MozTransform'),
        opera: has('OTransform'),
        webkit: has('webkitTransform'),
        w3: has('transform'),
        prop: null // the normalized property value
      },
      getAnimationFrame: getAnimationFrame
    };
    localFeatures.transform.prop = (
      localFeatures.transform.w3 || 
      localFeatures.transform.moz ||
      localFeatures.transform.webkit ||
      localFeatures.transform.ie ||
      localFeatures.transform.opera
    );
    testDiv = null;
    return localFeatures;
  }());
  this.timer = null;
  this.flakes = [];
  this.disabled = false;
  this.active = false;
  this.meltFrameCount = 20;
  this.meltFrames = [];
  this.setXY = function(o, x, y) {
    if (!o) {
      return false;
    }
    if (storm.usePixelPosition || targetElementIsRelative) {
      o.style.left = (x - storm.flakeWidth) + 'px';
      o.style.top = (y - storm.flakeHeight) + 'px';
    } else if (noFixed) {
      o.style.right = (100-(x/screenX*100)) + '%';
      // avoid creating vertical scrollbars
      o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';
    } else {
      if (!storm.flakeBottom) {
        // if not using a fixed bottom coordinate...
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.bottom = (100-(y/screenY*100)) + '%';
      } else {
        // absolute top.
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';
      }
    }
  };
  this.events = (function() {
    var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,
    evt = {
      add: (old?'attachEvent':'addEventListener'),
      remove: (old?'detachEvent':'removeEventListener')
    };
    function getArgs(oArgs) {
      var args = slice.call(oArgs), len = args.length;
      if (old) {
        args[1] = 'on' + args[1]; // prefix
        if (len > 3) {
          args.pop(); // no capture
        }
      } else if (len === 3) {
        args.push(false);
      }
      return args;
    }
    function apply(args, sType) {
      var element = args.shift(),
          method = [evt[sType]];
      if (old) {
        element[method](args[0], args[1]);
      } else {
        element[method].apply(element, args);
      }
    }
    function addEvent() {
      apply(getArgs(arguments), 'add');
    }
    function removeEvent() {
      apply(getArgs(arguments), 'remove');
    }
    return {
      add: addEvent,
      remove: removeEvent
    };
  }());
  function rnd(n,min) {
    if (isNaN(min)) {
      min = 0;
    }
    return (Math.random()*n)+min;
  }
  function plusMinus(n) {
    return (parseInt(rnd(2),10)===1?n*-1:n);
  }
  this.randomizeWind = function() {
    var i;
    vRndX = plusMinus(rnd(storm.vMaxX,0.2));
    vRndY = rnd(storm.vMaxY,0.2);
    if (this.flakes) {
      for (i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
        }
      }
    }
  };
  this.scrollHandler = function() {
    var i;
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (storm.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || (noFixed ? document.body.scrollTop : 0), 10));
    if (isNaN(scrollY)) {
      scrollY = 0; // Netscape 6 scroll fix
    }
    if (!fixedForEverything && !storm.flakeBottom && storm.flakes) {
      for (i=0; i<storm.flakes.length; i++) {
        if (storm.flakes[i].active === 0) {
          storm.flakes[i].stick();
        }
      }
    }
  };
  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth - 16 - storm.flakeRightOffset;
      screenY = (storm.flakeBottom || window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - storm.flakeRightOffset;
      screenY = storm.flakeBottom || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
    }
    docHeight = document.body.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };
  this.resizeHandlerAlt = function() {
    screenX = storm.targetElement.offsetWidth - storm.flakeRightOffset;
    screenY = storm.flakeBottom || storm.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
    docHeight = document.body.offsetHeight;
  };
  this.freeze = function() {
    // pause animation
    if (!storm.disabled) {
      storm.disabled = 1;
    } else {
      return false;
    }
    storm.timer = null;
  };
  this.resume = function() {
    if (storm.disabled) {
       storm.disabled = 0;
    } else {
      return false;
    }
    storm.timerInit();
  };
  this.toggleSnow = function() {
    if (!storm.flakes.length) {
      // first run
      storm.start();
    } else {
      storm.active = !storm.active;
      if (storm.active) {
        storm.show();
        storm.resume();
      } else {
        storm.stop();
        storm.freeze();
      }
    }
  };
  this.stop = function() {
    var i;
    this.freeze();
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'none';
    }
    storm.events.remove(window,'scroll',storm.scrollHandler);
    storm.events.remove(window,'resize',storm.resizeHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.remove(document,'focusout',storm.freeze);
        storm.events.remove(document,'focusin',storm.resume);
      } else {
        storm.events.remove(window,'blur',storm.freeze);
        storm.events.remove(window,'focus',storm.resume);
      }
    }
  };
  this.show = function() {
    var i;
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'block';
    }
  };
  this.SnowFlake = function(type,x,y) {
    var s = this;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type] || 1;
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    if (storm.className) {
      this.o.setAttribute('class', storm.className);
    }
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    if (storm.useGPU && features.transform.prop) {
      // GPU-accelerated snow.
      this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';
    }
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.cursor = 'default';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);
    this.refresh = function() {
      if (isNaN(s.x) || isNaN(s.y)) {
        // safety check
        return false;
      }
      storm.setXY(s.o, s.x, s.y);
    };
    this.stick = function() {
      if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
        s.o.style.top = storm.flakeBottom+'px';
      } else {
        s.o.style.display = 'none';
        s.o.style.bottom = '0%';
        s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };
    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };
    this.move = function() {
      var vX = s.vX*windOffset, yDiff;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      yDiff = screenY+scrollY-s.y+storm.flakeHeight;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
        if (storm.snowStick) {
          s.stick();
        } else {
          s.recycle();
        }
      } else {
        if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
          // ~1/1000 chance of melting mid-air, with each frame
          s.melting = true;
          s.melt();
          // only incrementally melt one frame
          // s.melting = false;
        }
        if (storm.useTwinkleEffect) {
          if (s.twinkleFrame < 0) {
            if (Math.random() > 0.97) {
              s.twinkleFrame = parseInt(Math.random() * 8, 10);
            }
          } else {
            s.twinkleFrame--;
            if (!opacitySupported) {
              s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
            } else {
              s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1);
            }
          }
        }
      }
    };
    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };
    this.setVelocities = function() {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
    };
    this.setOpacity = function(o,opacity) {
      if (!opacitySupported) {
        return false;
      }
      o.style.opacity = opacity;
    };
    this.melt = function() {
      if (!storm.useMeltEffect || !s.melting) {
        s.recycle();
      } else {
        if (s.meltFrame < s.meltFrameCount) {
          s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
          s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
          s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
          s.meltFrame++;
        } else {
          s.recycle();
        }
      }
    };
    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
      s.meltFrame = 0;
      s.melting = false;
      s.setOpacity(s.o,1);
      s.o.style.padding = '0px';
      s.o.style.margin = '0px';
      s.o.style.fontSize = s.fontSize+'px';
      s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
      s.o.style.textAlign = 'center';
      s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };
    this.recycle(); // set up x/y coords etc.
    this.refresh();
  };
  this.snow = function() {
    var active = 0, flake = null, i, j;
    for (i=0, j=storm.flakes.length; i<j; i++) {
      if (storm.flakes[i].active === 1) {
        storm.flakes[i].move();
        active++;
      }
      if (storm.flakes[i].melting) {
        storm.flakes[i].melt();
      }
    }
    if (active<storm.flakesMaxActive) {
      flake = storm.flakes[parseInt(rnd(storm.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
    if (storm.timer) {
      features.getAnimationFrame(storm.snow);
    }
  };
  this.mouseMove = function(e) {
    if (!storm.followMouse) {
      return true;
    }
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };
  this.createSnow = function(limit,allowInactive) {
    var i;
    for (i=0; i<limit; i++) {
      storm.flakes[storm.flakes.length] = new storm.SnowFlake(parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>storm.flakesMaxActive) {
        storm.flakes[storm.flakes.length-1].active = -1;
      }
    }
    storm.targetElement.appendChild(docFrag);
  };
  this.timerInit = function() {
    storm.timer = true;
    storm.snow();
  };
  this.init = function() {
    var i;
    for (i=0; i<storm.meltFrameCount; i++) {
      storm.meltFrames.push(1-(i/storm.meltFrameCount));
    }
    storm.randomizeWind();
    storm.createSnow(storm.flakesMax); // create initial batch
    storm.events.add(window,'resize',storm.resizeHandler);
    storm.events.add(window,'scroll',storm.scrollHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.add(document,'focusout',storm.freeze);
        storm.events.add(document,'focusin',storm.resume);
      } else {
        storm.events.add(window,'blur',storm.freeze);
        storm.events.add(window,'focus',storm.resume);
      }
    }
    storm.resizeHandler();
    storm.scrollHandler();
    if (storm.followMouse) {
      storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);
    }
    storm.animationInterval = Math.max(20,storm.animationInterval);
    storm.timerInit();
  };
  this.start = function(bFromOnLoad) {
    if (!didInit) {
      didInit = true;
    } else if (bFromOnLoad) {
      // already loaded and running
      return true;
    }
    if (typeof storm.targetElement === 'string') {
      var targetID = storm.targetElement;
      storm.targetElement = document.getElementById(targetID);
      if (!storm.targetElement) {
        throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
      }
    }
    if (!storm.targetElement) {
      storm.targetElement = (document.body || document.documentElement);
    }
    if (storm.targetElement !== document.documentElement && storm.targetElement !== document.body) {
      // re-map handler to get element instead of screen dimensions
      storm.resizeHandler = storm.resizeHandlerAlt;
      //and force-enable pixel positioning
      storm.usePixelPosition = true;
    }
    storm.resizeHandler(); // get bounding box elements
    storm.usePositionFixed = (storm.usePositionFixed && !noFixed && !storm.flakeBottom); // whether or not position:fixed is to be used
    if (window.getComputedStyle) {
      // attempt to determine if body or user-specified snow parent element is relatlively-positioned.
      try {
        targetElementIsRelative = (window.getComputedStyle(storm.targetElement, null).getPropertyValue('position') === 'relative');
      } catch(e) {
        // oh well
        targetElementIsRelative = false;
      }
    }
    fixedForEverything = storm.usePositionFixed;
    if (screenX && screenY && !storm.disabled) {
      storm.init();
      storm.active = true;
    }
  };
  function doDelayedStart() {
    window.setTimeout(function() {
      storm.start(true);
    }, 20);
    // event cleanup
    storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);
  }
  function doStart() {
    if (!storm.excludeMobile || !isMobile) {
      doDelayedStart();
    }
    // event cleanup
    storm.events.remove(window, 'load', doStart);
  }
  // hooks for starting the snow
  if (storm.autoStart) {
    storm.events.add(window, 'load', doStart, false);
  }
  return this;
 }(window, document));
--- a/socials.html
+++ b/socials.html
@ -0,0 +1,43 @@
 <!DOCTYPE HTML>
 <head>
    <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" /> <!-- Embed title -->
    <meta content="The site of IDeletedSystem64 on the World Wide Web thingamajig" property="og:description" /> <!-- Embed Description -->
    <meta content="https://system64.dev" property="og:url" /> <!-- Embed Name URL -->
    <meta content="https://img.system64.dev/web/favicon/blueberry.png" property="og:image" /> <!-- Embed Image-->
    <meta content="#2452b5" data-react-helmet="true" name="theme-color" /> <!-- Embed Color -->
 </head>
 <body>
    <div class="taskbar">
        <input class="start" type="button" onclick="location.href='/';" value="system64.dev">
        <input class="taskbar" type="button" onclick="location.href='artwork/index.html';" value="Artwork">
        <input class="taskbar" type="button" onclick="location.href='characters/index.html';" value="Characters">
        <input class="taskbar" type="button" onclick="location.href='https://git.system64.dev'" value="Code (Gitea)">
    </div>
    <div class="container">   
        <div class="main" style='margin: 10vh auto auto 10vw;''>
            <h1>My links</h1>
            <h2>Socials</h2>
            <p>Fediverse: <a href='https://fedi.system64.dev/IDeletedSystem64'>Main Account (fedi.system64.dev)</a></p>
            <p>Fediverse: <a href='https://glaceon.social/@IDeletedSystem64'>Alt Account (glaceon.social)</a></p>
            <p>Twitter: <a href='https://twitter.com/IDeleteSystem64'>Twitter (Mostly Inactive.)</a></p>
            <h2>My Art</h2>
            <p>Fediverse: <a href='https://pony.social/@artsiesophie'>Art Account (pony.social)</a></p>
            <h2>Code Repositories</h2> 
            <p>Gitea: <a href='https://git.system64.dev/'>64Git</a></p>
            <p>GitHub: <a href='https://github.com/IDeletedSystem64'>IDeletedSystem64</a></p> 
            <h2>Miscellaneous</h2>
            <p>Steam: <a href='https://steamcommunity.com/id/system64_/'>IDeletedSystem64</a></p>
            <p>Bandcamp: <a href='https://bandcamp.com/ideletedsystem64'>IDeletedSystem64</a></p>
            <h2>Contact</h2>
            <p>Email: <a href='mailto:ideleted@system64.dev'>ideleted@system64.dev (Recommended)</a></p>
            <p>Matrix: @technomancer:littlepony.horse (Recommended)</p>
        </div>
        <img loading="lazy" class="home" src="https://img.system64.dev/web/banners/TheInternet.png" alt="MS Paint showing the Windows 95 browser icon">
    </div>
 </body>
--- a/styles/button_style.css
+++ b/styles/button_style.css
@ -0,0 +1,79 @@
 /* CSS for System64.dev v2, by IDeletedSystem64. Under MIT License (7.31.23) */
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
 /* Get those fonts */
 /* 
 CSS rule items are seperated depending on what they do around here,
 For example: Text/font related rules are grouped together
 while the height/width is in its own group, with white space 
 seperating the groups; They are also seperated with comments.
 */
 /* Input / Buttons */
 input {
    -webkit-appearance: none;
    appearance: none;
    background: #c3c3c3;
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;
    min-width: 200px; 
    min-height: 32px;
    font-family: 'Share Tech Mono', 'monospace';
    font-size: 13pt;
    font-weight: bold;
 }
 input:active {
    background: #b5b5b5;
    box-shadow: inset 0em 0em;
 }
 /* Inputs for Taskbar */
 input.start {
    /* Yes, the home button is called the "Start" button inside, sue us, Microsoft! */
    min-height: 29px;
    min-width: 130px;
    max-width: 230px;
    padding-left: 25px;
    background: url(https://img.system64.dev/web/taskbar/blueberry_pt.png) no-repeat, left;
    background-position: 3px;
 }
 input.taskbar{
    min-height: 29px;
    min-width: 170px;
    max-width: 230px;
 }
 /* Mobile "Support" :( */
@media (max-width: 64em) {
 input {
    font-size: 20pt;
    min-height: 3.5vh;
    min-width: 22.5vw;
 }
 input.start {
    background: none;
    padding: 7px;
    min-height: 4.5vh;
    min-width: 17vw;
 }
 input.taskbar {
    padding: 7px;
    min-width: 19.7vw;
    min-height: 4.5vh;
 }
 }
--- a/styles/err_style.css
+++ b/styles/err_style.css
@ -0,0 +1,64 @@
 /* CSS for System64.dev v2 Error Pages, Under MIT License. (8.11.23) */
 /* decoration */
 body {
    background-image: url("../img/bg/bg_bw.jpg");
 }
 /* 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 */
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Bitter'; src: url(../fonts/Bitter/Bitter-VariableFont_wght.ttf) format('woff2'); }
 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;
 }
 /* Mobile :( */
@media (max-width: 64em) {
    h1 {
        font-size: 64pt;
    }
    p {
        font-size: 32pt;
    }
    p.tiny {
        font-size: 18pt;
    }
 }
--- a/styles/main_style.css
+++ b/styles/main_style.css
@ -0,0 +1,124 @@
 /* CSS for System64.dev v2, by IDeletedSystem64. Under MIT License (v8.11.23) */
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Bitter'; src: url(../fonts/Bitter/Bitter-VariableFont_wght.ttf) format('woff2'); }
 /* Import dem fonts */
 button.home {
    font-family: 'Share Tech Mono', monospace; 
    color: white;
    /* font-size: */ 
    display: inline;
 }
 h1 {
    font-family: 'Bitter', serif;
    color: white;
    display: inline;
    font-size: 26pt
 }
 h2 {
    font-family: 'Bitter', serif;
    color: white;
    font-size: 16pt;
 }
 li {
    font-family: 'Share Tech Mono', monospace;
    color: white;
    font-size: 15pt;
    list-style-type: square;
 }
 p {
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    font-size: 18px; 
    color: white;
 }
 a {
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;;
    font-size: 18px; 
    color: white;
 }
 /* Text based stuffs */
 body {
    background-image: url("https://img.system64.dev/web/bg/bg.jpg"); /* nevermind we're just gonna use a jpg */
 }
 .container {
    display: flex;
 }
 div.main {
    align-items: center;
    margin: 35vh auto auto 10vw;
 }
 img.home {
    height: 70vh;
    width: auto;
    align-self: center;
    padding-right: 5vw;
    padding-top: 10vh;
 }
 div.taskbar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 31px;
    background-color: #c3c3c3;
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #c3c3c3,inset -2px -2px grey,inset 2px 2px #dfdfdf;
 }
 /* Website layout */
 img.webbutton{
    width: 88px;
    height: 31px;
    float: left;
    text-align: center;
 }
 /* Web buttons :) */
  /* REEEE MOBILE DEVICES */
  @media (max-width: 64em) {
    h1 {
        font-size: 56pt;
    }
    h2 {
        font-size: 28pt;
    }
    li {
        font-size: 26pt;
    }
    div.main {
        margin-top: 35vh;
    }
    .container {
        flex-wrap: wrap;
        align-items: center;
    }
    img.home {
        display: none;
    }
    div.taskbar {
        height: 4.5vh;
    }
  }
--- a/styles/stylemain.css
+++ b/styles/stylemain.css
@ -1,167 +0,0 @@
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Bitter'; src: url(../fonts/Bitter/Bitter-VariableFont_wght.ttf) format('woff2'); }
 /* Import Fonts */
 header {
    background: linear-gradient(#072CFF, #00137F );
    position: absolute;
    left: 0px;
    top: 0px;
    height: 40px;
    width: 100%
 }
 h1.header {
    padding: 32px;
    font-family: 'Bitter', serif;
    font-weight: 600;
    color: white;
    display: inline;
 }
 p.intro {
    font-family: 'Share Tech', serif;
    color: white;
    font-size: 2.5vw;
    text-align: center;
 }
 p.info {
    font-family: 'Share Tech', serif;
    color: white;
    font-size: 1.25vw;
    text-align: center;
 }
 div.main {
    top: 10%;
    right: 25%;
    margin: auto;
    width: 50%;
    padding: 10px;
    border-radius: 30px;
 }
 a.blueheart { /* probably not the right way of doing things, but this css is awful and i cannot comprehend it for the life of me anymore... -64 */
    margin: auto;
    padding-top: 100px;
    width: 60%;
 }
 body {
    background-image: url("https://img.system64.dev/web/bg/bg.jpg"); 
 }
 input {
    -webkit-appearance: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    min-width: 265px;
    background: #dad9d9;
    font-size: 170%;
    font-family: 'Share Tech Mono', serif;
    color: black;
    box-shadow: inset -0.05em -0.05em black
 }
 input:active {
    background: #acacac;
    box-shadow: inset 0em 0em
 }
 a {
    text-decoration: none;
 }
 .button {
    display: inline-flex;
    font-size: 16px;
    text-align: center;
    border: none;
    border-radius: 4px;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: 0.3s ease-in-out;
 }
 .button.button1 {
    border-radius: 0;
    box-sizing: border-box;
    min-height: 23px;
    color: #000;
    padding: 0 2px 2px 0;
    border-top: 1px solid #CCCCCC;
    border-right: 0.1px solid transparent;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    background-color: #979797;
    width: 15%;
 }
 .button.button1 span {
    -webkit-appearance: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    background: #dad9d9;
    font-size: 170%;
    font-family: 'Share Tech Mono', monospace;
    box-shadow: inset -0.05em -0.05em black;
 }
 .button.button1 span:hover,
 .button.button1:hover + .button.button1 span {
    background-color: #ACACAC;
    border-top: 1px solid transparent;
    border-right: 0.1px solid #dad9d9;
    border-bottom: 1px solid #dad9d9;
    border-left: 1px solid transparent;
    box-shadow: inset -0.05em -0.05em transparent;}
 .button.button1:hover {
    background-color: #ACACAC;
 }
 div.webbutton {
    margin: auto; 
    width: 264px;
    padding-top: 3px;
 }
 img.webbutton{
    width: 88px;
    height: 31px;
    float: left;
    text-align: center;
 }
 /* I'm mad that I have to make this mobile-compatible, Lol. https://web.archive.org/web/20220407235806/https://twitter.com/IDeleteSystem64/status/1512218098325147655 */
@media only screen and (max-width: 980px) {
    p.intro {
        font-size: 8vw;
        padding-top: 10px;
    }
    header { 
        height: 75px;
    }
    h1.header {
        font-size: 60px;
        padding-left: 25%;
    }
    input {
        margin-left: -10%;
        font-size: 7vw;
    	-webkit-text-size-adjust:100%;
        min-width: 125%;
        max-width: 125;
    }   
    p.info {
        font-family: 'Share Tech Mono', monospace;
        color: white;
        font-size: 4.5vw;
        text-align: center;
    }
    img.webbutton {
        width: 176px;
        height: 62px;
        float: left;
    }
    div.webbutton {
        width: 100%;
        padding-left: 15%;
    }
 }
--- a/styles/window_style.css
+++ b/styles/window_style.css
@ -0,0 +1,70 @@
 /* Moving window stuff here to make it easier to work with */
@font-face { font-family: 'Share Tech'; src: url(../fonts/Share-Tech/ShareTech-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; src: url(../fonts/Share-Tech/ShareTechMono-Regular.ttf) format('woff2'); }
@font-face { font-family: 'Bitter'; src: url(../fonts/Bitter/Bitter-VariableFont_wght.ttf) format('woff2'); }
 /* Probably not the right way to do it, but eh. We can come back to this later.*/
 div.window_titlebar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 22px;
    background: navy;
 }
 div.window {
    position: relative;
    border-style: ridge;
    border-width: 5px;
    border-color: #e9e9e9;
    overflow-y: auto; /* I don't even know what this does, or why it's here... */
    padding-top: 4vh;
    padding-bottom: 1vh;
    padding-left: 1vh;
    background-color: #e9e9e9;
    margin-left: 25vh;
    margin-top: 10vh;
 }
 .char-window {
    width: 40vw;
    max-width: 60vw;
    max-height: 60vh;
 }
 /* I don't know what I'm doing :D */
 #char-sidebar {
    float: right;
    margin-right: 25vh;
    margin-left: auto;
 }
 img {
    float: right;
 }
 /* Fonts */
 h1 {
    font-family: 'Bitter', serif;
    font-size: 20pt;
    color: black
 }
 p { color: black }
 li { color: black }
 h3.window {
    color: white;
    display: inline;
    padding-left: 2px;
    font-family: 'Bitter', serif;
    font-size: 11pt;
 }
Author	SHA1	Message	Date
Sophie Marie	06bd674971	Give the error pages some TLC and a new background	2024-05-29 16:01:34 -05:00
Sophie Marie	55d77a6f0b	remove projects btn as i don't have any ongoing projects worth documenting.	2024-03-06 15:54:06 -06:00
Sophie Marie	0c1146bfbf	fix missing favicon and update title	2024-03-06 15:51:48 -06:00
Sophie Marie	10691a7bc3	WIP: Final concept of the characters page The final will likely use JS and JSON to dynamically add characters rather than being hard coded like they are in this example/concept	2024-03-06 15:51:26 -06:00
Sophie Marie	01ede1d201	Update copyright year	2024-03-05 12:56:02 -06:00
Sophie Marie	099f82bf9c	oh shit fix broken.. everything	2024-03-04 14:27:48 -06:00
Sophie Marie	f40e1da52c	fix locations	2024-03-04 14:10:04 -06:00
Sophie Marie	db956c4ba4	WIP: Add characters page todo: fix display when multiple windows, mobile support, move images to img.system64.dev	2024-03-03 16:22:35 -06:00
Sophie Marie	742cac0ef8	change recommended contact	2024-03-03 16:21:42 -06:00
Sophie Marie	b7def23926	Rename oc refs button, update link	2024-03-03 16:20:16 -06:00
Sophie Marie	ae8cb4394a	Yo I heard you liked links so we updated the links	2024-02-23 14:20:52 -06:00
Sophie Marie	c808f44447	error pages now use img.system64.dev for images	2024-01-02 21:49:53 -06:00
Sophie Marie	213ac6a4aa	move images to load off img.system64.dev	2024-01-02 18:09:31 -06:00
Sophie Marie	ed62f24784	Remove old images	2023-12-30 11:21:23 -06:00
Sophie Marie	98802768ee	reorganize images	2023-12-30 11:19:54 -06:00
Sophie Marie	9cd8c81d01	💙	2023-11-09 16:49:29 -06:00
Sophie Marie	02581940d0	edit matrix	2023-11-09 16:48:53 -06:00
Sophie Marie	3c0bdb09e8	Some crude mobile support, Closes #3 It might not be much, but it will have to do for now. closes Issue #3	2023-08-11 16:22:29 -05:00
Sophie Marie	ed8b886b28	Remove unneeded duplicate error stylesheet	2023-08-11 13:29:51 -05:00
Sophie Marie	f2eb0cba34	Fix button and taskbar sizing	2023-08-01 11:21:21 -05:00
Sophie Marie	26c6f75125	Rewrite button stylesheet	2023-07-31 17:16:29 -05:00
Sophie Marie	fc9689e9a4	I forgot to update the date	2023-07-31 16:07:40 -05:00
Sophie Marie	26d9ef0815	Fix error stylesheet not being named correctly.	2023-07-31 15:51:31 -05:00
Sophie Marie	9c62543d5b	Add Bitter font license	2023-07-29 16:23:29 -05:00
Sophie Marie	19789f1f44	Social/Links page final	2023-07-29 16:22:05 -05:00
Sophie Marie	d67b6a9ee0	Font attributions	2023-07-29 15:54:28 -05:00
Sophie Marie	eac01ff7d1	Move fonts to be locally hosted.	2023-07-29 15:47:55 -05:00
Sophie Marie	cd3cef45ce	Socials page final	2023-07-28 16:00:54 -05:00
Sophie Marie	582034d828	WIP: Add socials page	2023-06-25 10:39:16 -05:00
Sophie Marie	00d6bce6a3	Change background image to AVIF	2023-06-25 10:38:46 -05:00
Sophie Marie	ba1603b912	Add paragraph and anchor rules, make all main elements centered left	2023-06-07 15:16:55 -05:00
Sophie Marie	bd20e6d9b6	Move 'start' button CSS to buttons.css	2023-06-07 14:40:20 -05:00
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
Sophie Marie	8c5e6666d1	'artist credit: hibiscus0912 on Twitter' 'I have no idea what else this commit does'	2023-06-06 14:24:14 -05:00
Sophie Marie	2643fb71c2	Finally add an embed for Discord,Twitter,Fedi,Etc	2023-06-05 15:13:29 -05:00
Sophie Marie	56a31156f2	TEMP (its bad): Home-page now has a near final design	2023-06-05 14:42:41 -05:00
Sophie Marie	694727c1fa	Add style for "taskbar" buttons	2023-06-05 14:41:28 -05:00
Sophie Marie	a81d7a6b36	Add a mailto: link for messages saying to contact the webmaster	2023-06-03 10:35:41 -05:00
Sophie Marie	330091ae5b	Use the website bg instead of a gradient on error pages	2023-06-03 10:31:52 -05:00
Sophie Marie	6969960b73	Add menu buttons	2023-04-28 20:31:10 -05:00
Sophie Marie	bceccea001	Fix images, improve menubar appearance	2023-04-28 20:16:12 -05:00
Sophie Marie	9d5a46b22b	Add beginings of menubar, image to home	2023-04-28 19:39:41 -05:00
Sophie Marie	29d29c06ce	Add image to the homepage	2023-04-26 20:47:55 -05:00
Sophie Marie	dec09dcc18	Rewrite index.html to use new css rules	2023-04-16 18:36:46 -05:00
Sophie Marie	047a4ff232	Move buttons to their own stylesheet	2023-04-16 18:36:00 -05:00
Sophie Marie	292f1f8edb	Remove testing css	2023-04-16 18:34:39 -05:00
Sophie Marie	73163609e0	Rewrite entirety of CSS	2023-04-16 18:33:02 -05:00
Sophie Marie	956ec4484a	Update License	2023-04-16 11:37:24 -05:00
Sophie Marie	a8e0587a4a	Tell index.html to use new stylesheet	2023-04-14 10:55:47 -05:00
Sophie Marie	037e031060	Begin work on new stylesheet	2023-04-14 10:55:24 -05:00
Sophie Marie	7f177ba009	Redo the complete layout of the main page	2023-03-05 15:49:16 -06:00
Sophie Marie	a9b696724c	Add error pages to v2	2023-03-05 12:49:26 -06:00
Sophie Marie	a739fd44f0	Remove unneeded files	2023-03-04 20:48:03 -06:00
Sophie Marie	c471d02f1a	Comment out CSS, Other changes.	2023-01-15 22:25:55 -06:00
Sophie Marie	49fcacca81	Update README.md	2022-11-12 09:55:51 -06:00