Compare commits

..

61 Commits

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
24 changed files with 655 additions and 1002 deletions

View File

@ -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

View File

@ -1,5 +1,8 @@
# system64.dev
This is the source code for my site live at system64.dev.
# 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.
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.
Checkout the v2 branch instead
# 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.
# 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.

79
characters/index.html Normal file
View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 MiB

View File

@ -1,16 +1,17 @@
<!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="https://img.system64.dev/web/err_icon/fail_glitch.webp">
<title>System64.dev - 400 Bad Request</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>
<img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
<div class="container">
<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>

View File

@ -1,13 +1,14 @@
<!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="https://img.system64.dev/web/err_icon">
<title>System64.dev - 403 Forbidden</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>
<img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
<div class="container">
<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">

View File

@ -1,13 +1,14 @@
<!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="https://img.system64.dev/web/err_icon">
<title>System64.dev - 404 Not Found</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>
<img src="/img/error_glitch.webp" alt="Glitched looking Warning icon">
<div class="container">
<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>

View File

@ -1,15 +1,16 @@
<!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="https://img.system64.dev/web/err_icon">
<title>System64.dev - 429 Ratelimited</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>
<img src="/img/error_glitch.webp" alt="Glitched looking Warning icon">
<h1>429 - Too many requests</h1>
<p>Chill down there pardner! You're being ratelimited!</p>
<div class="container">
<img src="../img/err_icon/fail_glitch.webp" alt="Glitched looking critical icon">
<h1>429 - Too Many Requests</h1>
<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">

19
err/500.html Normal file
View File

@ -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>

View File

@ -1,16 +1,17 @@
<!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="https://img.system64.dev/web/err_icon">
</head>
<head>
<title>System64.dev - 502 Bad Gateway</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>
<img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
<h1>502 - Bad Gateway</h1>
<p>The server sent an invalid response.</p>
<p class="tiny">This error has been logged, If this keeps happening contact the webmaster.</p>
<div class="container">
<img src="../img/err_icon/fail_glitch.webp" alt="Glitched looking critical icon">
<h1>500 - Bad Gateway</h1>
<p>The server sent an unexpected response.</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>

View File

@ -1,16 +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="https://img.system64.dev/web/err_icon">
<title>System64.dev - Service Unavailable</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>
<img src="/img/fail_glitch.webp" alt="Glitched looking Warning icon">
<div class="container">
<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>

View File

@ -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
}

94
fonts/Bitter/LICENSE Normal file
View File

@ -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.

BIN
img/bg/bg_bw.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

View File

@ -1,49 +1,36 @@
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="/styles/stylemain.css">
<link rel="icon" type="image/x-icon" href="https://img.system64.dev/web/favicon/blueberry.png">
<title>IDeletedSystem64</title>
<!-- Replace "Username" with your name, website name or social username! -->
<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>
<!-- no more snow :(
<script type="text/javascript" src="/snowstorm/snowstorm.js"</script></script>
-->
<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="https://img.system64.dev/web/favicon/favicon.png">
<title>system64.dev</title>
<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://img.system64.dev/web/favicon/blueberry.png" property="og:image" />
<meta content="#2452b5" data-react-helmet="true" name="theme-color" />
</head>
<body>
<header>
<!-- Replace "Username" with your name, website name, or social username!-->
<h1 class=header>IDeletedSystem64</h1>
</header>
<div class="main">
<div class="neko">
<script>NekSoType="white"</script>
<h1 id=nl><script src="https://webneko.net/n20171213.js"></script><a href="https://webneko.net">Neko</a></h1>
<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">
<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>
<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 -->
<img loading="lazy" class="home" src="https://img.system64.dev/web/banners/FlutterUndulate.png" alt="fluttershy undulate in a ms paint window">
</div>
</body>

View File

@ -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.

View File

@ -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));

43
socials.html Normal file
View File

@ -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>

79
styles/button_style.css Normal file
View File

@ -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;
}
}

64
styles/err_style.css Normal file
View File

@ -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;
}
}

124
styles/main_style.css Normal file
View File

@ -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;
}
}

View File

@ -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%;
}
}

70
styles/window_style.css Normal file
View File

@ -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;
}