aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAda Isopods <me@bathynomus.xyz>2023-01-09 21:57:46 -0700
committerAda Isopods <me@bathynomus.xyz>2026-10-21 23:30:16 -0600
commite7d593cf078eaac4f1af82fc39d9fdf0ae8a37f8 (patch)
tree6cfb29a0938c48c18c4e8c832c723cce78b40b09
parentd646ae0d9abb61030677a1a27945b9f5540c89f5 (diff)
Initial commit of website contents
-rw-r--r--.gitignore17
-rw-r--r--acetwisty.icobin0 -> 90022 bytes
-rw-r--r--art/index.php131
-rw-r--r--credits/index.html86
-rw-r--r--favicon.icobin0 -> 15086 bytes
-rw-r--r--index.php58
-rw-r--r--noises/index.php58
-rw-r--r--not_found.html27
-rw-r--r--pimo-art-credits.txt3
-rw-r--r--posts/index.php51
-rw-r--r--some-assembly-required/index.html120
-rw-r--r--style.css117
-rw-r--r--subpage.css32
13 files changed, 700 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6777fd8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,17 @@
+*.ttf
+*.png
+*.jpg
+*.jxl
+*.webp
+*.avif
+*.gif
+*.mp4
+*.mkv
+*.webm
+*.mp3
+*.wav
+*.flac
+*.ogg
+/downloads/
+/downloads/*
+/downloads/**
diff --git a/acetwisty.ico b/acetwisty.ico
new file mode 100644
index 0000000..bae3e3a
--- /dev/null
+++ b/acetwisty.ico
Binary files differ
diff --git a/art/index.php b/art/index.php
new file mode 100644
index 0000000..ae7da21
--- /dev/null
+++ b/art/index.php
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <?php
+ $siteurl = $_SERVER['HTTP_HOST'];
+ if($siteurl == "deeptwisty.com") {
+ echo '<link rel="icon" type="image/x-icon" href="../favicon.ico"><title>deep twisty official NFTs</title><style>@font-face { font-family: "Ubuntu"; src: url(../ubuntu.ttf); } :root { --stdfont: "Ubuntu", Century Gothic,CenturyGothic,AppleGothic,sans-serif; } </style>';
+ } elseif($siteurl == "isopod.cool") {
+ echo '<link rel="icon" type="image/x-icon" href="../../favicon.ico"><title>niceopod official NFTs</title><style>:root { --stdfont: mono, monospace; } </style>';
+ }
+ ?>
+ <style>
+ :root {
+ --shadowcolor: #00000099;
+ --imagesperrow: 4;
+ }
+ body {
+ font-family: var(--stdfont);
+ margin: 0;
+ padding: 0;
+ background: #202020;
+ width: 100vw;
+ overflow-x: hidden;
+ }
+ .flex-container {
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ @media (max-width: 1200px) {
+ :root {
+ --imagesperrow: 3;
+ }
+ }
+ @media (max-width: 800px) {
+ :root {
+ --imagesperrow: 2;
+ }
+ }
+
+ a {
+ height: calc(100vw / var(--imagesperrow));
+ width: calc(100vw / var(--imagesperrow));
+ color: transparent;
+ text-decoration: none;
+ background-position: center;
+ background-size: 100%;
+ padding: 2rem;
+ transition-duration: 0.5s;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 0 0 0 0 var(--shadowcolor) inset;
+ }
+ a span {
+ text-align: center;
+ }
+ input[type="checkbox"]:checked + label a {
+ --shadowcolor: #000000ef;
+ }
+ a:hover, input[type="checkbox"]:checked + label a {
+ color: white;
+ background-size: 115%;
+ /*box-shadow: 0 calc(100vw / var(--imagesperrow)) 0 0 var(--shadowcolor) inset;*/
+ box-shadow: 0 0 0 calc(100vw / var(--imagesperrow) / 2) var(--shadowcolor) inset;
+ }
+ .caption {
+ padding: 10px;
+ padding-top: 6px;
+ height: 100%;
+ border-bottom-right-radius: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flex-container">
+ <?php
+ function test_image($name) { // Returns true if a file is an image (png or gif), false otherwise
+ return (strpos($name, ".png") > 0 or strpos($name, ".gif") > 0);
+ }
+
+ $images = array_filter(scandir("."), "test_image"); // Generate array of every image in the directory by filename
+
+ usort($images, function($a, $b) { // Sort images by modification date of the files
+ return filemtime("$b") - filemtime("$a");
+ });
+
+ $datecounts = array();
+ foreach($images as $im) { // Generate list of dates and how many images have them
+ $mt = date("Y-m-d", filemtime("$im")); // File modification date in ISO format
+ if($datecounts[$mt]) {
+ $datecounts[$mt]++;
+ } else {
+ $datecounts[$mt] = 1;
+ }
+ }
+
+ $pmt = $mt;
+ foreach($images as $im) { // Loops through each image and echoes it to the page
+
+ $no = substr($im, 0, strpos($im, ".")); // Filename with extension stripped
+ $mt = date("Y-m-d", filemtime("$im")); // File modification date in ISO format
+ $is = getimagesize("$im");
+ $ist = $is[0] . "×" . $is[1] . "px"; // Image size formatted as X×Ypx
+
+ $cl = "";
+ if($datecounts[$mt] > 1) { // If there's more than one image published on the same date, merge them into a single thumbnail that can be clicked to reveal the full set. Would have done this based on names, but that would have been much harder. Might do that later.
+ if($pmt != $mt) {
+ echo "<style>.d$mt { display: none; } #show$mt:checked ~ .d$mt { display: flex; } #show$mt + label:hover a { cursor: pointer; }</style><input type='checkbox' style='display: none;' id='show$mt'></input>";
+ $tn = $no;
+ if(file_exists("thumbs/$mt.png")) { // Use the same image for the group thumbnail as the first image in the group. If there's a thumbnail named with the date in question, use that instead.
+ $tn = $mt;
+ }
+ echo "<label for='show$mt'><a style='background-image:url(thumbs/$tn.png);'><span>...</span></a></label>";
+ $pmt = $mt;
+ }
+ $cl = " class='d$mt'";
+ }
+
+ echo "<a href='$im' style='background-image:url(thumbs/$no.png);'$cl><span>$im<br>$mt • $ist</span></a>";
+ }
+ ?>
+ </div>
+ </body>
+</html>
diff --git a/credits/index.html b/credits/index.html
new file mode 100644
index 0000000..dd6669d
--- /dev/null
+++ b/credits/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/x-icon" href="../favicon.ico">
+ <title>deep twisty - credits</title>
+ <link href="../style.css" rel="stylesheet" type="text/css" media="all">
+ <link href="../subpage.css" rel="stylesheet" type="text/css" media="all">
+ <style>
+ section {
+ text-align: left;
+ }
+ h2 {
+ margin-bottom: 0;
+ }
+ li {
+ margin: 0.3rem;
+ }
+ </style>
+ </head>
+ <body>
+
+ <main>
+ <h1 id="header"><span id="headerblue">cre</span><span id="headergreen">di</span><span id="headeryellow">ts</span></h1>
+ <p><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="../">home</a></p><hr>
+ <section>
+ <h2>Pimo</h2>
+ <ul>
+ <li><a href="https://blendswap.com/blend/29080">Piano model</a></li>
+ <li><a href="https://www.turbosquid.com/3d-models/photorealistic-human-rig-3d-1422553">Person model</a></li>
+ </ul>
+
+ <h2>Tetrahead</h2>
+ <ul>
+ <li><a href="https://www.turbosquid.com/3d-models/3d-realistic-musicians-music-model-1653971">Bassist model</a></li>
+ </ul>
+
+ <h2>Other</h2>
+ <ul>
+ <li><a href="https://seaslug.neocities.org/">deep twisty logo</a></li>
+ <li>Many models and textures:
+ <ul>
+ <li><a href="https://polyhaven.com/">Polyhaven</a></li>
+ <li><a href="https://ambientcg.com/">AmbientCG</a></li>
+ </ul>
+ </li>
+ <li><a href="https://www.musicradar.com/news/tech/sampleradar-500-free-industrial-samples-504614">MusicRadar industrial sample pack</a></li>
+ <li><a href="https://soundpacks.com/free-sound-packs/80s-retro-futuristic-drum-pack/">DataDrive 80s retro futuristic drum pack</a></li>
+ <li><a href="https://soundconstraints.com/products/corona-virus-sample-pack?_pos=1&_sid=c06f60aca&_ss=r">SoundConstraints COVID-19 sample pack</a></li>
+ </ul>
+
+ <h2>Software</h2>
+ <ul>
+ <li>
+ DAWs
+ <ul>
+ <li title="not used for anything, yet"><a href="https://www.reaper.fm/">REAPER</a></li>
+ <li title="used for everything from Nova to Pimo"><a href="https://lmms.io/">LMMS</a></li>
+ <li title="used for Plot Twist"><a href="https://www.audiotool.com/">Audiotool</a></li>
+ </ul>
+ </li>
+ <li>
+ Plugins
+ <ul>
+ <li title="used with REAPER"><a href="https://surge-synthesizer.github.io/">Surge XT</a></li>
+ <li title="used with LMMS"><a href="https://www.kvraudio.com/product/synth1-by-daichi-laboratory-ichiro-toda">Synth1</a></li>
+ </ul>
+ </li>
+ <li>Visual
+ <ul>
+ <li title="used for all images and videos since Colony"><a href="https://www.blender.org/">Blender</a></li>
+ <li title="used for videos prior to the release of Colony"><a href="https://www.shotcut.org/">Shotcut</a></li>
+ <li title="used for visuals prior to the release of Colony"><a href="https://getpaint.net/">Paint.NET</a></li>
+ </ul>
+ </li>
+ </ul>
+
+ <h2>Licensing <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="cc4_80x15.png"></a></h2>
+ <p style="max-width: 22rem;">Everything I make is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative&nbsp;Commons&nbsp;CC&nbsp;BY-NC-SA</a> license unless otherwise specified.</p><p style="max-width: 22rem;">To request permission to use something I've made commercially, contact me at <a href="mailto:willem@deeptwisty.com">willem@deeptwisty.com</a>.</p>
+ </section>
+ </main>
+
+ </body>
+
+</html>
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..8753c65
--- /dev/null
+++ b/favicon.ico
Binary files differ
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..0eb954a
--- /dev/null
+++ b/index.php
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+ <?php
+ $captions = array(
+ 'musician',
+ '3d artist',
+ 'programmer',
+ 'gamer',
+ 'dweeb',
+ '"artist"',
+ 'creative type',
+ 'proponent of cool stuff',
+ 'linux user',
+ 'canadian',
+ '.com'
+ );
+ $cap = str_replace(" ", "&nbsp;", $captions[array_rand($captions)]);
+ ?>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title><?php
+ if($cap != '.com') { echo "deep twisty - $cap"; }
+ else { echo "deeptwisty.com"; }
+ ?></title>
+ <meta name="description" content="official website of deep twisty, a musician, we think">
+ <link href="style.css" rel="stylesheet" type="text/css" media="all">
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
+ <!--script> if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { document.location="mobile.html"; } </script-->
+ <style>html, body {height: 100%;}</style>
+ </head>
+ <body>
+ <section id="main">
+ <h1 id="header"><span id="headerblue">deep</span> <span id="headergreen">twi</span><span id="headeryellow">sty</span><span id="subheader"><?php echo $cap; ?></span></h1>
+ <p style="text-shadow: 0 0 4px black;">i'm a computer musician, 3d artist and programmer who's committed to this alias now.<br>this is a hub for the stuff i make. i hope you like it.</p>
+ <nav id="ext">
+ <a rel="me" class="bandcamp-color" href="https://deeptwisty.bandcamp.com">bandcamp</a>
+ <a rel="me" class="youtube-color" href="https://www.youtube.com/@deeptwisty">youtube</a>
+ <a rel="me" class="itchio-color" href="https://deeptwisty.itch.io">itch.io</a>
+ <a rel="me" class="patreon-color" href="https://patreon.com/deeptwisty">patreon</a>
+ </nav>
+ <nav id="int">
+ <a class="white-color" href="/posts">posts</a>
+ <a class="white-color" href="/art">art</a>
+ <a class="white-color" href="/noises">noises</a>
+ </nav>
+ <a href="." style="margin-top: 1rem; font-size: 0;"><img src="images/button.png" style="width: 88px;"/></a>
+ </section>
+
+ <section id="secondary">
+ <div id="displaycontent">
+ <iframe style="border: 0; width: 450px; height: 450px; max-width: 80vw; max-height: 80vw;" src="https://bandcamp.com/EmbeddedPlayer/album=1230113999/size=large/bgcol=333333/linkcol=ffffff/minimal=true/transparent=true/" seamless><a href="https://deeptwisty.bandcamp.com/album/pimo">Pimo by deep twisty</a></iframe>
+ </div>
+ </section>
+
+ <a href="/credits" style="font-size: 10pt; position: absolute; right: .5rem; bottom: .5rem; text-decoration: none;">credits & licensing</a>
+ </body>
+</html>
diff --git a/noises/index.php b/noises/index.php
new file mode 100644
index 0000000..f9fc8e3
--- /dev/null
+++ b/noises/index.php
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/x-icon" href="../favicon.ico">
+ <title>deep twisty - noises</title>
+ <link href="../style.css" rel="stylesheet" type="text/css" media="all">
+ <link href="../subpage.css" rel="stylesheet" type="text/css" media="all">
+ <style>
+ article {
+ padding: 1rem;
+ max-width: 25rem;
+ margin: auto;
+ }
+ h2 {
+ margin-bottom: 0.45rem;
+ font-size: medium;
+ }
+ article p {
+ margin-top: 0.1rem;
+ }
+ audio {
+ border-radius: 2rem;
+ box-shadow: 2px 2px 8px black;
+ }
+ </style>
+ </head>
+ <body>
+
+ <main>
+ <h1 id="header"><span id="headerblue">no</span><span id="headergreen">is</span><span id="headeryellow">es</span></h1>
+ <p><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="../">home</a></p><hr>
+ <div id="songs">
+ <?php
+ // Code to automatically populate the page with every mp3 file in the directory.
+ // Should display filename - and date of creation and id3 comment if possible.
+
+ function test_audio($name) { // Returns true if a file is an mp3, false otherwise
+ return (strpos($name, ".mp3") > 0);
+ }
+
+ $files = array_filter(scandir("."), "test_audio");
+
+ usort($files, function($a, $b) { // Sort files by modification date of the files
+ return filemtime("$b") - filemtime("$a");
+ });
+
+ foreach($files as $fi) {
+ echo "<article><h2>$fi</h2><audio controls><source src='$fi' type='audio/mpeg'>your browser does not support embedded audio.</audio></article>";
+ }
+ ?>
+ </div>
+ </main>
+
+ </body>
+
+</html>
diff --git a/not_found.html b/not_found.html
new file mode 100644
index 0000000..433cd6f
--- /dev/null
+++ b/not_found.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>deep twisty</title>
+ <meta name="description" content="official website of deep twisty, a musician, we think">
+ <link href="https://deeptwisty.com/style.css" rel="stylesheet" type="text/css" media="all">
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
+ <style>
+ html body {
+ width: 100%;
+ height: 100%;
+ overflow: clip;
+ }
+ </style>
+ </head>
+ <body>
+ <div style="height: 100vh; display: flex; flex-direction: column; justify-content: center;">
+ <div style="height: 14em; width: 110vw; display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: url(https://deeptwisty.com/images/bg_default.png); box-shadow: 0 0 8px 4px black inset; transform: rotate(-3deg) translateX(5vw);">
+ <h1 style="margin: 0; text-align: center; width: 100%; font-size: 8em; text-shadow: 4px 4px 4px black; margin-top: -18px;">404</h1>
+ <h2 style="margin: 0; text-align: center; width: 100%; font-size: 2em; text-shadow: 2px 2px 2px black; margin-top: -10px;">item not found</h2>
+ </div>
+ </div>
+ </body>
+
+</html> \ No newline at end of file
diff --git a/pimo-art-credits.txt b/pimo-art-credits.txt
new file mode 100644
index 0000000..71b14ad
--- /dev/null
+++ b/pimo-art-credits.txt
@@ -0,0 +1,3 @@
+Piano: https://blendswap.com/blend/29080
+Person: https://www.turbosquid.com/3d-models/photorealistic-human-rig-3d-1422553
+Other models: https://polyhaven.com/models \ No newline at end of file
diff --git a/posts/index.php b/posts/index.php
new file mode 100644
index 0000000..1fe640e
--- /dev/null
+++ b/posts/index.php
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/x-icon" href="../favicon.ico">
+ <title>deep twisty - posts</title>
+ <link href="../style.css" rel="stylesheet" type="text/css" media="all">
+ <link href="../subpage.css" rel="stylesheet" type="text/css" media="all">
+ <style>
+ article.post {
+ padding: 1rem;
+ max-width: 25rem;
+ margin: auto;
+ }
+ h2.datemarker {
+ margin-bottom: 0;
+ font-size: small;
+ }
+ .post p {
+ margin-top: 0.1rem;
+ }
+ </style>
+ </head>
+ <body>
+
+ <main>
+ <h1 id="header"><span id="headerblue">po</span><span id="headergreen">st</span><span id="headeryellow">s</span></h1>
+ <p><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="../">home</a><span style="display: inline-block; margin: 0 0.3rem; font-size: 0;"></span><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="https://journal.miso.town/atom?url=https://deeptwisty.com/posts/">feed</a></p><hr>
+ <div id="posts">
+ <?php
+ $infile = fopen("posts.txt", "r") or die("file read error -_-");
+ $content = fread($infile,filesize("posts.txt"));
+ fclose($infile);
+ $post_arr = explode("\n",$content);
+ $posts_out = "";
+ foreach($post_arr as $p) {
+ if(strlen($p) > 3) {
+ $date = substr($p, 0, strpos($p, " "));
+ $pcont = substr($p, strpos($p, " ") + 1);
+ $posts_out = "<article class='post'><h2 class='datemarker'>$date</h2><p>$pcont</p></article>$posts_out";
+ }
+ }
+ echo $posts_out;
+ ?>
+ </div>
+ </main>
+
+ </body>
+
+</html>
diff --git a/some-assembly-required/index.html b/some-assembly-required/index.html
new file mode 100644
index 0000000..026070c
--- /dev/null
+++ b/some-assembly-required/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/x-icon" href="../favicon.ico">
+ <title>deep twisty - Some Assembly Required</title>
+ <link href="../style.css" rel="stylesheet" type="text/css" media="all">
+
+ <script>
+ var leadIndex = 1;
+ var secIndex = 1;
+ var beatIndex = 1;
+ var iteration = "";
+ var noise = document.createElement("AUDIO");
+
+ function setIndices() {
+ leadIndex = document.getElementById("lead").value;
+ secIndex = document.getElementById("sec").value;
+ beatIndex = document.getElementById("beat").value;
+
+ iteration = leadIndex.toString().concat(secIndex.toString().concat(beatIndex.toString()));
+ noise.setAttribute("src", iteration.concat(".mp3"));
+ document.getElementById("iterName").innerHTML='<a class="iter" href="'.concat(iteration) + '.mp3">' + 'Iteration '.concat(iteration) + '</a>';
+ }
+
+ function PlayMusic() {
+ setIndices();
+ noise.play();
+ }
+
+ function StopMusic() {
+ noise.pause();
+ noise.fastSeek(0);
+ }
+ </script>
+
+ <style>
+ body {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ text-shadow: 0 0 6px black;
+ }
+ hr {
+ width: 30%;
+ margin: auto;
+ }
+ .Main {
+ background: #202020 url("../images/bg_default.png");
+ height: fit-content;
+ min-height: 100%;
+ max-width: 750px;
+ box-shadow: 0 10px 8px 4px black inset;
+ margin-top: -20px;
+ padding-top: 20px;
+ padding-left: 30px;
+ padding-right: 30px;
+ }
+ #header {
+ margin-bottom: -15px;
+ transform: rotate(-2deg);
+ }
+ button {
+ color: white;
+ width:15%;
+ padding:.5%;
+ background-color: transparent;
+ border: 2px solid white;
+ box-shadow: 0 0 8px white, 0 0 8px white inset, 4px 4px 8px black;
+ margin: 4px;
+ border-radius: 5px;
+ }
+ button:hover {
+ text-shadow: 0 0 4px white;
+ background-color: #ffffff22;
+ }
+ button:active {
+ background-color: transparent;
+ text-shadow: none;
+ box-shadow: none;
+ }
+ input {
+ width:10%;
+ padding:.5%;
+ text-align: center;
+ border: none;
+ box-shadow: 4px 4px 4px black, 0 0 2px white, 0 0 2px white inset;
+ margin: 4px;
+ border-radius: 5px;
+ }
+ #subheader {
+ margin-top: -15px;
+ margin-bottom: 0;
+ font-size: 2em;
+ transform: rotate(0.8deg);
+ font-family: var(--hfont);
+ }
+ .iter { color: gainsboro; transition-duration: 0.2s; }
+ .iter:hover { color: white; text-shadow: 0 0 7px white;}
+ </style>
+</head>
+
+<body background="bg_default.png" bgcolor="black">
+
+ <div class="Main">
+ <h1 id="header"><span id="headerblue">Some</span> <span id="headergreen">Assembly</span> <span id="headeryellow">Required</span></h1>
+ <h2 id="subheader">by deep twisty</h2>
+ <h1 id="iterName">Iteration ___</h1>
+ <input type="number" min="1" max="3" step="1" value="1" id="lead">
+ <input type="number" min="1" max="3" step="1" value="1" id="sec">
+ <input type="number" min="1" max="3" step="1" value="1" id="beat"><br>
+ <button onclick="PlayMusic();">play</button>
+ <button onclick="StopMusic();">stop</button>
+ </div>
+
+</body>
+
+</html> \ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0d3a55e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,117 @@
+@font-face {
+ font-family: Ubuntu;
+ src: url(ubuntu.ttf);
+}
+@font-face {
+ font-family: Ubuntu-Bold;
+ src: url(ubuntu-bold.ttf);
+}
+:root {
+ --hfont: 'Ubuntu-Bold', 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
+ --stdfont: 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
+}
+html, body {
+ min-height: 100%;
+ margin:0;
+ padding:0;
+}
+body {
+ overflow-x: clip;
+ color: gainsboro;
+ font-family: var(--stdfont);
+ background-color: black;
+ background-image: url('bg_default.png');
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-size: cover;
+ overflow-wrap: break-word;
+ display: flex;
+ flex-direction: row-reverse;
+}
+a {
+ color: gainsboro;
+}
+p {
+ text-shadow: 0 0 5px black;
+}
+#main {
+ flex: 50%;
+ padding: 1rem;
+ box-shadow: 0 0 45px 90px rgba(0, 0, 0, 0.7);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.7);
+ background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
+ background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
+}
+#secondary {
+ flex: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+#displaycontent {
+ box-shadow: 4px 4px 8px 2px black;
+ font-size: 0;
+}
+#header {
+ font-family: var(--hfont);
+ font-size: 3.5em;
+ color: transparent;
+ -webkit-text-stroke-width: 2px;
+ margin: 0;
+}
+#subheader {
+ margin-left: -5px;
+ font-size: 0.6em;
+ color: white;
+ -webkit-text-stroke-width: 0;
+ text-shadow: 0 0 9px white;
+ z-index: 1;
+ animation-name: subheaderappear;
+ animation-duration: 0.5s;
+}
+@keyframes subheaderappear {
+ from {color: #19191900; text-shadow: 0 0 0 black;}
+ to {color: white; text-shadow: 0 0 9px white;}
+}
+nav a {
+ text-decoration: none;
+ display: inline;
+ font-family: var(--hfont);
+ font-size: 1.4em;
+ padding: 5px;
+}
+@media(max-width: 80vh) {
+ body {
+ flex-direction: column;
+ }
+ #main {
+ padding: 1rem;
+ background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
+ }
+}
+.bandcamp-color { color: #629aa9; transition-duration: 0.2s; }
+.bandcamp-color:hover { color: #86c3d4 ; text-shadow: 0 0 7px #629aa9 ; }
+.youtube-color { color: #ff0000; transition-duration: 0.2s; }
+.youtube-color:hover { color: #ff5252 ; text-shadow: 0 0 7px #ff0000 ; }
+.itchio-color { color: #fa5c5c; transition-duration: 0.2s; }
+.itchio-color:hover { color: #ff8181 ; text-shadow: 0 0 7px #fa5c5c ; }
+.patreon-color { color: #FF424D; transition-duration: 0.2s; }
+.patreon-color:hover { color: #ff656c ; text-shadow: 0 0 7px #FF424D ; }
+.white-color { color: gainsboro; transition-duration: 0.2s; }
+.white-color:hover { color: white; text-shadow: 0 0 7px white;}
+
+#headerblue { -webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue; animation: hblue; animation-duration: 10s; animation-iteration-count: infinite;}
+@keyframes hblue {
+ 0%, 100% {-webkit-text-stroke-color: rgb(0, 0, 200); text-shadow: 0 0 15px rgb(0, 0, 200);}
+ 15% {-webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue;}
+}
+#headergreen { -webkit-text-stroke-color: #5ff508; text-shadow: 0 0 15px #5ff508; }
+#headeryellow { -webkit-text-stroke-color: gold; text-shadow: 0 0 15px gold; animation: hyellow; animation-duration: 16.7ms; animation-iteration-count: infinite;}
+@keyframes hyellow {
+ from {text-shadow: 0 0 15px rgba(219, 186, 0, 0.87);}
+ to {text-shadow: 0 0 15px gold;}
+}
diff --git a/subpage.css b/subpage.css
new file mode 100644
index 0000000..94900d6
--- /dev/null
+++ b/subpage.css
@@ -0,0 +1,32 @@
+body {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ text-shadow: 0 0 6px black;
+}
+
+main {
+ background: #202020 url("../images/bg_default.png");
+ height: fit-content;
+ min-height: 100%;
+ min-width: 20rem;
+ max-width: 50rem;
+ box-shadow: 0 10px 8px 4px black inset;
+ margin-top: -1.2rem;
+ padding-top: 1.2rem;
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
+main img {
+ max-width: 100%;
+}
+
+#header {
+ margin-bottom: -1rem;
+}
+
+hr {
+ width: 30%;
+ margin: auto;
+} \ No newline at end of file