diff options
| -rw-r--r-- | .gitignore | 17 | ||||
| -rw-r--r-- | acetwisty.ico | bin | 0 -> 90022 bytes | |||
| -rw-r--r-- | art/index.php | 131 | ||||
| -rw-r--r-- | credits/index.html | 86 | ||||
| -rw-r--r-- | favicon.ico | bin | 0 -> 15086 bytes | |||
| -rw-r--r-- | index.php | 58 | ||||
| -rw-r--r-- | noises/index.php | 58 | ||||
| -rw-r--r-- | not_found.html | 27 | ||||
| -rw-r--r-- | pimo-art-credits.txt | 3 | ||||
| -rw-r--r-- | posts/index.php | 51 | ||||
| -rw-r--r-- | some-assembly-required/index.html | 120 | ||||
| -rw-r--r-- | style.css | 117 | ||||
| -rw-r--r-- | subpage.css | 32 |
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 Binary files differnew file mode 100644 index 0000000..bae3e3a --- /dev/null +++ b/acetwisty.ico 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 Commons CC 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 Binary files differnew file mode 100644 index 0000000..8753c65 --- /dev/null +++ b/favicon.ico 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(" ", " ", $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 |
