1
0
Fork 0

make it work on phones tm

- Rearranged navigation significantly
  - Navbar is now unlimited width on desktop
  - Navbar is now always on top of the screen, even on the landing page
  - Navbar has been replaced with hamburger menu on mobile
- Significant styling alterations to look good on phones tm
  - Most of the credit goes to a certain meta tag.
  - (Appearance on desktop is mostly unchanged)
  - The background on mobile is now 100% image, but darkened to improve contrast
  - Table pages such as /links/ and /stats/ now rearrange on mobile:

    column a                column a  column b
    column b       vs       column a  column b
    column a                column a  column b
    column b                column a  column b

  - font size on landing page scales with device width on tall displays
  - guestbook posts use CSS grid now
- Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though
- Updated /stats/
  - Added some new stats
  - Updated CD collection size
- Updated /about/uses/
  - I now use Nextcloud News instead of Yarr
  - My phone runs Graphene
  - I use Fennec browser on mobile instead of standard Firefox
  - New background as the old one was horrible for contrast
- Added Waxlimbs - For Science! to /about/music/
- The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site
- Corrected various markup issues with the help of validator.w3.org/nu/
- Added alt text to a ton of images
- todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered
- /stuff/ remains unchanged. I'll get to it
- Hopefully that's everything lol
main
will 1 year ago
parent 1d8fdef22c
commit 620200137e

@ -11,15 +11,10 @@
<?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); ?>
<h1>about me</h1>
<h2 id="caption">hi</h2>
<nav>
<a href="music/">music</a>
<!--a href="games/">games</a-->
<a href="uses/">uses</a>
</nav>
<p><span title="General Kenobi!">Hello there!</span> They call me Will, but I tend to go by deep twisty (more on that later) or some variation of "isopod" or "bathynomus" on the internet. I like to make stuff on the computer, like <a href="https://deeptwisty.bandcamp.com/">music</a>, or <a href="https://deeptwisty.com/art">art</a>, or this website. I've heard rumors calling me such things as "canadian", "autistic", and "incalculably talented". I cannot confirm or deny any of these allegations.</p>
<p><span title="General Kenobi!">Hello there!</span> They call me Will (any pronouns), but I tend to go by deep twisty (more on that later) or some variation of "isopod" or "bathynomus" on the internet. I like to make stuff on the computer, like <a href="https://deeptwisty.bandcamp.com/">music</a>, or <a href="https://deeptwisty.com/art">art</a>, or this website. I've heard rumors calling me such things as "canadian", "autistic", and "incalculably talented". I cannot confirm or deny any of these allegations.</p>
<h2>What's a "deep twisty"?</h2>
<p>"deep twisty" is a pseudonym I came up with to release music under, because everyone is doing it. It comes from some tweets from an <a href="https://web.archive.org/web/20221214182955/https://twitter.com/SubnauticaSCM/status/1095774020446744576">official Subnautica twitter account</a> where they referred to the then-work-in-progress Deep Twisty Bridges biome as just "deep twisty". I thought it sounded funny. Funny enough to brand myself on, apparently.</p>
<p>As for "niceopod", "nice" was the best word I could think of that rhymes with the first syllable of "isopod". I feel like it sounds like I'm trying to say I'm nice. <span title="I'm slowly deprecating this username for this reason. You'll typically find it replaced with &quot;isopod&quot; or &quot;bathynomus&quot; or some other isopod-related thing, depending on availability.">I'm not</span>, it's just that the alternatives were "iceopod" and "sliceopod". Isopods are nice though.</p>
<!--p>As for "niceopod", "nice" was the best word I could think of that rhymes with the first syllable of "isopod". I feel like it sounds like I'm trying to say I'm nice. <span title="I'm slowly deprecating this username for this reason. You'll typically find it replaced with &quot;isopod&quot; or &quot;bathynomus&quot; or some other isopod-related thing, depending on availability.">I'm not</span>, it's just that the alternatives were "iceopod" and "sliceopod". Isopods are nice though.</p-->
<p>I go by Will because that's my name and I can't be fucked changing it.</p>
<h2>About the site</h2>
<p>This website is written in pure HTML, CSS, and a tiny bit of Javascript with the server-side stuff done in PHP. It (and everything else I host) is hosted using Nginx on a VPS with 2GB of RAM and 1 CPU core running Ubuntu Server, with domains registered with <a href="https://porkbun.com/">Porkbun</a>.

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Music</title>
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
#flex-container {
display: flex;
flex-wrap: wrap;
@ -44,6 +44,18 @@
#flex-container a:hover span {
bottom: -5.2rem;
}
@media only screen and (max-width: 43rem) {
#flex-container a {
--columncount: 1;
}
}
@media only screen and (hover: none) {
#flex-container a:hover {
transform: initial;
z-index: initial;
box-shadow: initial;
}
}
</style>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
</head>
@ -57,6 +69,7 @@
<a style="--img: url(covers/funeral.png);" target="_blank" href="https://noisemaster.bandcamp.com/album/funeral-ep"><span>Noisemaker - Funeral EP</span></a>
<a style="--img: url(covers/ultrakill_imperfect_hatred.png);" target="_blank" href="https://heavenpierceher.bandcamp.com/album/ultrakill-imperfect-hatred"><span>Heaven Pierce Her - ULTRAKILL: Imperfect Hatred</span></a>
<a style="--img: url(covers/el_camino.png);" target="_blank" href="https://theblackkeys.com/?frontpage=true"><span>The Black Keys - El Camino</span></a>
<a style="--img: url(covers/for_science.png);" target="_blank" href="https://waxlimbs.bandcamp.com/album/for-science"><span>Waxlimbs - For Science!</span></a>
<a style="--img: url(covers/triangle_unicode.png);" target="_blank" href="https://wearemagonia.bandcamp.com/album/triangle-unicode-lp"><span>We Are Magonia - Triangle Unicode</span></a>
<a style="--img: url(covers/unstoppable_force.png);" target="_blank" href="https://caliphate.bandcamp.com/album/unstoppable-force"><span>CALIPHATE - Unstoppable Force</span></a>
<a style="--img: url(covers/walks_of_lung.png);" target="_blank" href="https://patriciataxxon.bandcamp.com/album/walks-of-lung"><span>Patricia Taxxon - Walks of Lung</span></a>

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My setup</title>
<link href="../../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
details {
margin-top: 1ch;
}
@ -27,6 +27,11 @@
summary {
margin-bottom: 1ch;
}
@media only screen and (hover: none) {
body > ul {
padding-left: 5vw;
}
}
/*
:root {
@ -150,7 +155,8 @@
</details>
<details>
<summary>Pictures</summary>
<img src="images/pc1.png" style="width: 50%;" /><img src="images/pc2.png" style="width: 50%;" />
<img src="images/pc1.png" style="width: 50%;" alt="My computer tower. The CPU heatsink, graphics card, RAM, and optical drive are prominently visible.">
<img src="images/pc2.png" style="width: 50%;" alt="Closer shot of the inside of my compter with the glass side panel removed. My shoddy cable management is on full display.">
</details>
</li>
<li>
@ -173,26 +179,20 @@
</details>
</li>
<li>
My phone is a <b>Google Pixel 4a</b> running <a href="https://grapheneos.org/">Graphene</a>.
My phone is a <b>Google Pixel 4a</b>.
<details>
<summary>More details</summary>
<p>I said I was going to wait until my old LG K61 became unusable before replacing it. I thought I'd failed to do that right up until
its replacement, a used flagship from nearly three years ago, arrived and blew it out of the water in almost every way. I never noticed
its replacement, a used flagship from the same time period, arrived and blew it out of the water in almost every way. I never noticed
up until now just how painfully unresponsive my old phone was. Mobile websites are, like, usable now!</p>
<p>Performance was never a consideration in buying the phone, though. I'm not a huge fan of the idea of using a Google device, but the Pixel line are the only devices supported by
Graphene OS, possibly the single most secure and private mobile OS currently on the market short of full fat Linux on something like a Pinephone.
It's got a number of nice features: the OS has been fully stripped of all of Google's slimy little rootkit tentacles, and even if you do need
to install Google Play Services for something like an app that relies on it for push notifications, it's as aggressively sandboxed as any other app.
That's another thing - Graphene has powerful per-app permission settings, allowing you to turn off network and even hardware sensor access for apps you
don't trust, and every app you download has almost no permissions by default. I'll stop gushing about it here now, Graphene's features page has its own comprehensive overview.</p>
<p>So I kind of had to get a Pixel if I wanted Graphene, but why the 4a in particular? There are more recent, largely better models within my price range.
Graphene OS. But why the 4a in particular? There are more recent, largely better models within my price range.
Mainly, I chose to get the specific model I did because it was the last Pixel device to be released with two important attributes: the presence of a headphone jack,
and the lack of 5G support. The headphone jack, I think, is self-explanatory. I <i>never</i> intend to purchase a phone without one if I can avoid it. As for the 5G, I don't trust it.
Basically, much of the performance improvement 5G offers comes from a new transmission technique called beam forming, where instead of blasting every signal equally in all directions
like a radio tower it specifically calibrates the signal for a given device such that it's effectively focused in a narrow cone directed at that device, and for this to work properly
the tower needs to know where the phone is at a level of precision that is within inches. I feel like I shouldn't need to explain why that's scary.
</p>
<p>Yeah, so in summary, phone's good, installation process is easy, I recommend it if you can deal with the small amount of jank caused by the Android ecosystem's dependency on Google <s>Rootkit</s> Play Services.</p>
</details>
</li>
<li>I have a <b>Nintendo Switch</b> that, admittedly, doesn't see much use. Kirby and the Forgotten Land was good,
@ -245,7 +245,7 @@
<span title="Java Edition, mind. I could have played Pocket Edition anytime I wanted. Minecraft on anything but the PC used to suck big-time. Feature parity didn't exist. I think Chromebooks might even be able to run Minecraft Bedrock Edition now with the Android app support. Honestly, I think it would still be worth hacking proper Linux onto them to play the real deal.">Minecraft</span> on it, which Chromebooks famously can't do,
so naturally the logical solution was to install Linux on the thing with Crouton in order to run it. It was
incredibly sketchy, janky, and not exactly performant, but I got my Minecraft and that was what mattered. I
killed it 9 months in by overworking its poor little <span title="When I say overworked, I mean it. The thing was redlining basically all the time whenever I was doing about anything in the Linux environment, especially Minecraft. It would overhead so much so often I'm pretty sure I melted the adhesive keeping the bottom panel on, because by the end of its life that thing was in a pretty much constant state of nearly coming off.">passively
killed it 9 months in by overworking its poor little <span title="When I say overworked, I mean it. The thing was redlining basically all the time whenever I was doing about anything in the Linux environment, especially Minecraft. It would overheat so much so often I'm pretty sure I melted the adhesive keeping the bottom panel on, because by the end of its life that thing was in a pretty much constant state of nearly coming off.">passively
cooled</span> Celeron CPU, and after that I mostly stuck with Windows on the two HP laptops I had over the
next six years for software compatibility reasons, but I tried to switch back to Linux occasionaly.</p>
<p>I finally pulled it off last year, when I used a combination of upsetting news about Windows 11 and a
@ -260,8 +260,11 @@
</details>
</li>
<li>
I use <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> as my only web browser
outside of testing.
<p>My phone runs <a href="https://grapheneos.org/">Graphene OS</a>. It's a hardened fork of the Android Open Source Project with all of Google's proprietary spyware stripped out. It's the only reason I bought a Pixel and it's very nice. I'd go into more detail, but the devs do a great job of that on their website.</p>
</li>
<li>
I use <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> as my main web browser
outside of testing. On mobile I use the <a href="https://f-droid.org/packages/org.mozilla.fennec_fdroid/">Fennec</a> fork.
<details>
<summary>More details</summary>
<p>I really like Firefox. It's customizable as hell, the dev tools are better, and it's designed to keep your
@ -278,7 +281,7 @@
</li>
<li>For Chromium testing and the occasional poorly-built website that just doesn't want to run in Firefox, I use <a
href="https://github.com/ungoogled-software/ungoogled-chromium">Ungoogled Chromium</a>.</li>
<li>I use a self-hosted <a href="https://github.com/nkanaev/yarr">Yarr</a> instance for my RSS reader.</li>
<li>I currently use the News app on my self-hosted Nextcloud instance for RSS, with the default Android app.</li>
<li>Loathe as I am to admit it, Microsoft's Visual Studio Code is really good. Which is why I use <a
href="https://vscodium.com/" target="_blank">VSCodium</a>, an open-source build with all the telemetry
stripped out.
@ -332,12 +335,11 @@
<details>
<summary>More details</summary>
I also have a <i>heavily</i> customized <a href="https://github.com/hykilpikonna/hyfetch">fetch</a> script I'm currently itching to show off:
<img src="images/2022-12-20_zsh.png" alt="A heavily customized HyFetch (neofetch with pride flags, essentially) featuring, among various stock readouts, fully custom GPU and GPU load and temperature readouts, a fully custom indicator of what media is playing, and a custom to-do list. All of this stuff is absolutely caked in dynamically drawn Unicode box drawing characters and ANSI control codes. The ASCII Manjaro logo has nonbinary pride flag colors. The color theme at play is gruvbox." title="My HyFetch config and accompanying zsh prompt, as of 2022-12-20. The zsh prompt is pretty much stock Powerlevel10k, but the HyFetch above it has been gutted and reassembled out of ANSI control codes and sed commands into something borderline unrecognizable. I'm pretty sure it's radioactive. It's slick as fuck though. The TODO and Playing segments are fully custom and drawn dynamically. I've also configured it to not show when logging in via ssh or the VSCode/kate integrated terminals. Don't ask why I enabled sshd on my home computer." />
<img src="images/2022-12-20_zsh.png" alt="A heavily customized HyFetch (neofetch with pride flags, essentially) featuring, among various stock readouts, fully custom GPU and GPU load and temperature readouts, a fully custom indicator of what media is playing, and a custom to-do list. All of this stuff is absolutely caked in dynamically drawn Unicode box drawing characters and ANSI control codes. The ASCII Manjaro logo has nonbinary pride flag colors. The color theme at play is gruvbox." title="My HyFetch config and accompanying zsh prompt, as of 2022-12-20. The zsh prompt is pretty much stock Powerlevel10k, but the HyFetch above it has been gutted and reassembled out of ANSI control codes and sed commands into something borderline unrecognizable. I'm pretty sure it's radioactive. It's slick as fuck though. The TODO and Playing segments are fully custom and drawn dynamically. I've also configured it to not show when logging in via ssh or the VSCode/kate integrated terminals. Don't ask why I enabled sshd on my home computer.">
</details>
</li>
</ul>
<div id="leftsidebg" style="background-image: url(bg.png); --distancefromcenter: -20%;"
title="Pictured: Nvidia driver support on Wayland"></div>
<div id="leftsidebg" style="background-image: url(bg.jxl), url(bg.png); --distancefromcenter: -20%;"></div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
</body>

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog</title>
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
ul#articles {
margin: 0;
margin-top: 1rem;
@ -94,7 +94,13 @@
$year = $nyr;
echo "<li><h2 id='$year'>$year</h2></li>";
}
echo "<li><a href='".$entry->link["href"]."'><time>".substr($entry->published, 0, 10)."</time><h4>".$entry->title."</h4><span>".$entry->summary."</span></a></li>";
$dt = substr($entry->published, 0, 10);
$ti = $entry->title;
$wn = "";
if(preg_match('/2022-0(5|4)-(21|25|13)/', $dt)) {
$wn = "title=\"This post is on the archived v2 version of the site. It will not load if you don't have Javascript enabled, and expect jank if viewing on mobile. You have been warned.\" ";
}
echo "<li><a ".$wn."href='".$entry->link["href"]."'><time>".$dt."</time><h4>".$ti."</h4><span>".$entry->summary."</span></a></li>";
}
echo "</ul>";
@ -107,7 +113,7 @@
<p>I got a new phone recently! It's a Google Pixel 4a. I wouldn't ordinarily even entertain the idea of using a Google phone, but the Pixel line are the only phones supported by my custom OS of choice, Graphene. I chose the 4a in particular because it was the last Pixel to ship with two important features: a heaphone jack and no 5G support. Did you know that 5G connectivity allows your phone to be tracked to within inches of its position? Cool, right?</p>
<p>I also got a new keyboard. I bought a TKL keyboard and accompanying separate numpad from Keychron because they didn't have any 100% keyboards in the color I wanted. They're really good, much better than my old Logitech in about every possible way. In fact, while writing this I tested them both side by side and noticed that the old keyboard has, like, this hollow ring to it that I never realized wasn't normal. Having used something nicer, it feels and sounds pretty shitty in comparison. All that said, ordering from Keychron fucking sucked. Their system flagged my order as potentially fraudulent and it literally took weeks to convince them to ship it to me. Buy their shit, but buy it somewhere other than their website.</p>
</article>
<article id="2023-02-07">
<article id="2023-02-09">
<h2>2023-02-09</h2>
<p>I've deprecated the changelog on my website in favor of just linking an RSS feed of my <a href="https://git.isopod.cool/will/isopod.cool/commits/branch/main">git commits</a> to it. Strictly speaking this is probably a worse user experience, but it's my website and I'm too lazy to keep maintaining two changelogs. Figured I'd announce it here in case someone is regularly checking on the changelog but isn't subscribed to its Atom feed and is curious what happened.</p>
<p>In other news, job's going alright so far. On my last shift I learned how to take apart the meat grinder for cleaning. Currently waiting on the arrival of some shoes I ordered that should be better for working retail in than my old ones, which are so worn out it's like standing barefoot on the floor all day. Speaking of all day, I've got a bunch of eight-hour shifts coming up, so I'm excited for that (← lying). Money is money I guess.</p>
@ -117,8 +123,8 @@
<article id="2023-02-07">
<h2>2023-02-07</h2>
<picture>
<source srcSet="images/2023-02-07_lollmao.jxl" type="image/jxl" />
<img loading="lazy" src="images/2023-02-07_lollmao.png" alt="Email from johnsmith98969896@gmail.com to sussybaka.uwu@bathynomus.xyz: Hello, [four line breaks] My name is john smith and I am a Digital Marketer and Content Writer, [three line breaks] myself, write unique and outstanding content that can be added to your website. [three line breaks] Please let me know if you accept guest blogs so I can share some topics. You can also suggest to me any topic of your choice. [four line breaks] If you are interested in my proposal, please reply positively." />
<source srcSet="images/2023-02-07_lollmao.jxl" type="image/jxl">
<img loading="lazy" src="images/2023-02-07_lollmao.png" alt="Email from johnsmith98969896@gmail.com to sussybaka.uwu@bathynomus.xyz: Hello, [four line breaks] My name is john smith and I am a Digital Marketer and Content Writer, [three line breaks] myself, write unique and outstanding content that can be added to your website. [three line breaks] Please let me know if you accept guest blogs so I can share some topics. You can also suggest to me any topic of your choice. [four line breaks] If you are interested in my proposal, please reply positively.">
</picture>
<p>No, John, no I do not.</p>
</article>
@ -131,7 +137,7 @@
<ul>
<li>The UI is bloated, slow, and overly javascript-y, like it's trying and failing to be an app</li>
<li>My ability to access their website via anything but Chromium with no VPN is spotty at best</li>
<li>I had to go through support to get <span title="Like an A record, but for IPv6. Basically, A and AAAA records are the DNS records that point your computer to an IP address when you enter a URL. Very important.">AAAA records</li> added to my domains. There's just not an option in the UI for it.</li>
<li>I had to go through support to get <span title="Like an A record, but for IPv6. Basically, A and AAAA records are the DNS records that point your computer to an IP address when you enter a URL. Very important.">AAAA records</span> added to my domains. There's just not an option in the UI for it.</li>
<li>I've still got upcoming bills for my domains AFTER transferring them away with no obvious way to cancel them or remove payment information</li>
<li>No clear way to delete my account either</li>
<li>Also, they charge extra for WHOIS privacy</li>
@ -154,20 +160,20 @@
<summary>Isopods</summary>
<a href="https://www.inaturalist.org/photos/184195133">
<picture>
<source srcSet="images/2023-01-23_calmanesia.jxl" type="image/jxl" />
<img loading="lazy" src="images/2023-01-23_calmanesia.png" alt="Very spiky isopod in the genus Calmanesia" />
<source srcSet="images/2023-01-23_calmanesia.jxl" type="image/jxl">
<img loading="lazy" src="images/2023-01-23_calmanesia.png" alt="Very spiky isopod in the genus Calmanesia">
</picture>
</a>
<a href="https://www.inaturalist.org/observations/46633771">
<picture>
<source srcSet="images/2023-01-23_troglodillo.jxl" type="image/jxl" />
<img loading="lazy" src="images/2023-01-23_troglodillo.png" alt="Spotted brown isopod in the genus Troglodillo" />
<source srcSet="images/2023-01-23_troglodillo.jxl" type="image/jxl">
<img loading="lazy" src="images/2023-01-23_troglodillo.png" alt="Spotted brown isopod in the genus Troglodillo">
</picture>
</a>
<a href="https://www.inaturalist.org/observations/41366000">
<picture>
<source srcSet="images/2023-01-23_bathynomus.jxl" type="image/jxl" />
<img loading="lazy" src="images/2023-01-23_bathynomus.png" alt="A giant isopod, Bathynomus Giganteus" />
<source srcSet="images/2023-01-23_bathynomus.jxl" type="image/jxl">
<img loading="lazy" src="images/2023-01-23_bathynomus.png" alt="A giant isopod, Bathynomus Giganteus">
</picture>
</a>
</details>
@ -182,7 +188,7 @@
<article id="2023-01-05">
<h2>2023-01-05</h2>
<p>Wow, I haven't seen you since last year! I told you I wouldn't get another post out within a week. I bought Factorio for myself for Christmas, and that was a mistake. I already have 83 hours logged in my save file, and I've probably played a bit more than that because I save scum like crazy when fighting biters.</p>
<p>In spite of this, I've actually done some stuff on the ol' website! I've got an article in the works, and I've created a <a href="../etc/quotes/">page</a> immortalizing all the funniest bullshit my friends and I have said in our discord group chat. I'm real proud of it, I wrote some PHP code to generate HTML styled like real discord messages. It's nicer presentation, easier on my server's storage space, and better for screen readers than uploading screenshots! Fair warning if you want to check it out, there's quite a high density of "sex joke".</a>
<p>In spite of this, I've actually done some stuff on the ol' website! I've got an article in the works, and I've created a <a href="../etc/quotes/">page</a> immortalizing all the funniest bullshit my friends and I have said in our discord group chat. I'm real proud of it, I wrote some PHP code to generate HTML styled like real discord messages. It's nicer presentation, easier on my server's storage space, and better for screen readers than uploading screenshots! Fair warning if you want to check it out, there's quite a high density of "sex joke".</p>
</article>
<article id="2022-12-21">
<h2>2022-12-21</h2>
@ -192,9 +198,9 @@
<details>
<summary>Click to be subjected</summary>
<p>Thanks. I really needed to get this out of my system.</p>
<img src="images/2022-12-21_zsh.png" alt="The sickest damn Neofetch config you've ever seen in your life" />
<img src="images/2022-12-21_zsh.png" alt="The sickest damn Neofetch config you've ever seen in your life">
<p>Admittedly, this is actually a fork of Neofetch called Hyfetch. It's functionally the same though, all it does is color the ASCII Manjaro logo with nonbinary pride flag colors. Anyway, just look at this shit. I'm gonna brag about every damn detail of it to you now. First off, those lines surrounding everything are dynamically drawn. The width of the box is dependent on the width of the <span title="It's just the top line because I know that one's likely to always be the longest">top line</span> there. All the shit underneath is dynamic too. That "playing" indicator goes away completely when nothing's playing, and as a fun little touch I made it so that separators in the title string like " - " and " | " are replaced with a line that connects up to the box. The to-do list below it isn't hard coded either. That thing pulls from a text file in my home directory and dynamically draws those lines to connect to each item, and it also disappears when there's nothing in the to-do list. I've configured zshrc to only show this when I log in via terminal emulators so it doesn't clog up my IDE terminal windows or my <span title="Don't ask.">ssh</span> client. Half these readouts are custom. I had to install a whole separate program (shoutout <a href="https://github.com/clbr/radeontop">radeontop</a>) to get the GPU load. I had to learn both sed and ANSI escape codes to get this to work. It's so packed to brimming with both I almost want to throw up looking at it, and I didn't even get most of it off Stack Overflow. I can do all this crazy crap because Neofetch's config file is literally just a shell script it runs, but that also means I had to write all that shit in <i>bash</i>. Let me tell you, it's a bitch and a half to get almost anything of substance done in that fuckin' mess of a language. I learned the hard way it can only do integer math on its own. Javascript's weird type coercion shit and Lua counting arrays from 1 instead of 0 is child's play compared to what I had to deal with to get my Neofetch looking all pretty. If statements in this nightmare language are fucking indecipherable. I had to search for "bash if" more than I had to search for anything related to that ANSI control code fuckery.</p>
<img src="images/2022-12-21_ssh.png" alt="An equally sick fetch script as the first, but fully custom and running on my VPS" />
<img src="images/2022-12-21_ssh.png" alt="An equally sick fetch script as the first, but fully custom and running on my VPS">
<p>I also have this. I coded it for my VPS, just because, and it's <i>entirely</i> custom. From <span title="Except the ASCII art. I stole the ASCII art from Neofetch. It's my code printing it and my ANSI escapes coloring it, though.">scratch</span>. This is how I learned Bash can't do floating point math. Did I need to do this? No. Was there any good reason for me to do this? Probably not. What's your point?</p>
</details>
<p>I also went bowling today, so that was fun. I sucked shit at it. There was pizza.</p>
@ -220,15 +226,14 @@
<h2>2022-11-06</h2>
<p>I've started the first of my classes! So far it's been mostly reading the textbook and making tedious discussion posts about it in the class forum. I understand on some level why they make us do it, but that doesn't make it not annoying.</p>
<p>All this stuff going on hasn't left me with a ton of time or energy to update my website. One course isn't exactly a full load, but between doing the course work, procrastinating on the course work, working on this music video, procrastinating on that, and my utterly wrecked sleep schedule, there just doesn't seem to be enough hours in the day.</p>
<p>Speaking of the music video, here's some more renders of it I've made if you're interested:
<details>
<summary>Renders</summary>
<iframe style="display: block; margin: 1rem auto;" width="560" height="315" src="https://www.youtube-nocookie.com/embed/2-EA661SKic" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Looks so much better in Cycles, doesn't it? I lament the destructive effects of Youtube compression, however.
<iframe style="display: block; margin: 1rem auto;" width="560" height="315" src="https://www.youtube-nocookie.com/embed/r54mC6eIZxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
This second one was rendered in a secret third thing, Workbench, a barebones rendering engine with basically no graphical features at all that I used here just to see how some timings would look in the final product.
</details>
</p>
<p>Speaking of the music video, here's some more renders of it I've made if you're interested:</p>
<details>
<summary>Renders</summary>
<iframe style="display: block; margin: 1rem auto; border: none;" width="560" height="315" src="https://www.youtube-nocookie.com/embed/2-EA661SKic" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Looks so much better in Cycles, doesn't it? I lament the destructive effects of Youtube compression, however.
<iframe style="display: block; margin: 1rem auto; border: none;" width="560" height="315" src="https://www.youtube-nocookie.com/embed/r54mC6eIZxI" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
This second one was rendered in a secret third thing, Workbench, a barebones rendering engine with basically no graphical features at all that I used here just to see how some timings would look in the final product.
</details>
<p>I've also finally made some progress towards getting some kind of ADHD medication, so hopefully that will help somewhat.</p>
</article>
<article id="2022-10-28">
@ -257,12 +262,12 @@
<p>I've been working on that music video I mentioned in... uh... July. I'd be lying if I said I thought I was making good progress, but I'm certainly making progress. Here's some pictures:</p>
<details>
<summary>Pictures</summary><br>
<img width="100%" src="images/2022-10-01_arm.png" alt="A low-poly 3D render of a robotic arm mounted on a vertical rail" />
<img width="100%" src="images/2022-10-01_drone.png" alt="A low-poly 3D render of a quadcopter-style drone carrying a cube with &quot;CRATE&quot; crudely scrawled on the front" />
<img width="100%" src="images/2022-10-01_cam.png" alt="A low-poly 3D render of a wall-mounted camera with a glowing green light below the lens" />
<img style="width:100%;" src="images/2022-10-01_arm.png" alt="A low-poly 3D render of a robotic arm mounted on a vertical rail">
<img style="width:100%;" src="images/2022-10-01_drone.png" alt="A low-poly 3D render of a quadcopter-style drone carrying a cube with &quot;CRATE&quot; crudely scrawled on the front">
<img style="width:100%;" src="images/2022-10-01_cam.png" alt="A low-poly 3D render of a wall-mounted camera with a glowing green light below the lens">
And a partial test render:
<video width="100%" controls>
<source src="images/2022-10-01_mv_preview.mp4" type="video/mp4" />
<video style="width:100%;" controls>
<source src="images/2022-10-01_mv_preview.mp4" type="video/mp4">
Your browser does not support the video tag. Watch it <a href="images/2022-10-01_mv_preview.mp4">here</a>.
</video>
</details>
@ -309,6 +314,7 @@
<p>I've had my driver's license for a few days now. I've even driven a couple of places... independently! It's proving to be significantly less terrifying than I was expecting, they said, jinxing themself.</p>
<p>Yeah, about that bit at the end there. The short version is, I'm no longer certain of my gender. You'd know this already if you've been poking around my site of late<span title="😎">;</span> I've taken quite a while to actually properly write about it. I guess I just felt weird about making it "official" by discussing it, so to speak. Anyway, I've started using he/they as opposed to the default he/him in spaces where I feel comfortable doing so, like here. Just to try it out. Seeing how I like it. Gathering data, et cetera. We'll see how it works out. Gender is hard.</p>
<p>Oh, and the car's fine, by the way. We think there was a broken seal somewhere in the power steeing system. The repair was expensive.</p>
</article>
<article id="2022-08-12">
<h2>2022-08-12</h2>
<p>It's been an exciting 24 hours. I'm <i>actually</i> just about over this cold, it seems, for one. Also, I took my driver's exam today! I passed with 60 out of a possible 75 demerit points. Not phenomenal, but good enough! I am now officially a licensed driver! I smelled steering fluid during the parking section of the test though, so we took the family car I took it in to a mechanic immediately after. Fun stuff. In nicer news, we celebrated with ice cream cake afterwards!</p>
@ -373,15 +379,14 @@
<h2>2022-07-14</h2>
<p>Instead of writing a new blog post, I have added an <a href="https://journal.miso.town/">HTML Journal</a> to my site. <span title="Naturally, the logical conclusion of this is one page each for posts of every possible word count.">This will be a place for posts that are too short to warrant a blog post, but too long to be a <a href="https://status.cafe/users/niceopod">status</a>.</span> For example:</p>
<p>I installed some RGB strips in my computer recently! Well, one RGB strip. I bought two, but they were both a meter long and I seem to have underestimated just how long that is. When I built the computer, I figured I didn't need RGB, so I went out of my way a little to avoid it and then I realized that the glass panel on my case was tinted so I couldn't even see in. Hence the RGB strip, because I didn't want to spend money replacing perfectly good parts with ones that light up. I've got the strip crammed in a gap next to the wall of the case where it's blocked from direct view so that it just illuminates the inside and doesn't shine in my face. Here's a picture:</p>
<a href="images/2022-07-14_PC-RGB.jpg"><img src="images/2022-07-14_PC-RGB.jpg" style="width: 50%; margin: 0 25%;"/></a>
<img src="images/2022-07-14_PC-RGB.jpg" style="width: 50%; margin: 0 25%;" alt="My computer tower. The inside is illuminated in rainbow colors by a hidden RGB LED strip.">
<p>It's not exactly radiant compared to some other peoples' setups, but I like it. It's subtler.</p>
<p>Cool, right? I've retrofitted the blog post list to be compliant with HTML Journal's fresh new sister spec, <a href="https://blog.miso.town/">HTML Blog</a>, as well, mainly for the automatic feed generation it offers.</p>
</article>
<div class="buttons" style="margin-bottom: 1rem;">
<a href="https://status.cafe/"><img src="images/banner-statuscafe.png"/></a>
<a href="https://kiosk.nightfall.city/"><img src="images/neonkiosk.png"/></a>
<a href="https://journal.miso.town/"><img src="images/banner-htmlj.png"/></a>
<a href="https://blog.miso.town/"><img src="images/banner-htmlb.png"/></a>
<a href="https://status.cafe/"><img src="images/banner-statuscafe.png" alt="Status Cafe"></a>
<a href="https://kiosk.nightfall.city/"><img src="images/neonkiosk.png" alt="Neon Kiosk"></a>
<a href="https://journal.miso.town/"><img src="images/banner-htmlj.png" alt="Valid HTML Journal"></a>
</div>
<div id="rightsidebg" style="background-image: url(bg.png); --distancefromcenter: -10%;"></div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>deeptwisty.com 2nd anniversary - A History of This Bullshit</title>
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
@font-face {
font-family: Ubuntu;
src: url('../../../stuff/fonts/ubuntu.ttf');
@ -92,7 +92,7 @@
<body>
<h1><span id="headerblue">nice</span><span id="headergreen">obl</span><span id="headeryellow">og</span></h1>
<h2 id="caption">deeptwisty.com 2nd anniversary:<br />A History of This Bullshit</h2>
<h2 id="caption">deeptwisty.com 2nd anniversary:<br>A History of This Bullshit</h2>
<nav>
<a href="../../../">home</a>
<a href="../../">blog</a>

@ -5,17 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guide - How to Block User Agents With Nginx</title>
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
h1 {
background-image: url('nginx.svg');
}
/*summary > * {
margin-bottom: 0;
display: inline-block;
}
details[open] > summary h6 {
display: none;
}*/
</style>
</head>
<body>
@ -31,7 +24,7 @@
<h2>How to do it</h2>
<p>Paste this into the main <code>server</code> block of your Nginx config to instantly drop the connection to any client with a "Wildebeest" (case insensitive) user agent:</p>
<code>
<h4>/etc/nginx/sites-available/yoursite</h4>
<span class="codetitle">/etc/nginx/sites-available/yoursite</span>
if ($http_user_agent ~* (wildebeest)) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;return 444;<br>
}
@ -54,7 +47,7 @@
<h3>Block multiple user agents</h3>
<p>You can also block multiple user agents in one statement like so:</p>
<code>
<h4>/etc/nginx/sites-available/yoursite</h4>
<span class="codetitle">/etc/nginx/sites-available/yoursite</span>
if ($http_user_agent ~* (wildebeest|googlebot)) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;return 444;<br>
}
@ -62,13 +55,13 @@
<h3>Includes</h3>
<p>One thing I'd recommend doing is moving all your user agent blocks to a separate file that you can include in all your Nginx sites. I place this file at <code>/etc/nginx/includes/bans</code>:</p>
<code>
<h4>/etc/nginx/includes/bans</h4>
<span class="codetitle">/etc/nginx/includes/bans</span>
if ($http_user_agent ~* (wildebeest|googlebot)) {<br>
&nbsp;&nbsp;&nbsp;&nbsp;return 444;<br>
}
</code>
<code>
<h4>/etc/nginx/sites-available/yoursite</h4>
<span class="codetitle">/etc/nginx/sites-available/yoursite</span>
include /etc/nginx/includes/bans;
</code>
<p>The <code>include</code> statement goes in your <code>server</code> block as before.</p>

@ -3,9 +3,9 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guide - Self-Host Safely with WireGuard</title>
<title>Guide - Self-Host Safe(r)ly with WireGuard</title>
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
h1 {
background-image: url('wireguard_logo.png');
}
@ -20,13 +20,13 @@
</head>
<body>
<h1>guide:</h1>
<h2 id="caption">Self-Host Safely with WireGuard</h2>
<h2 id="caption">Self-Host Safe(r)ly with WireGuard</h2>
<nav>
<a href="../../../">home</a>
<a href="../../">blog</a>
</nav>
<details>
<summary><h2>Preamble</h2> <h6>Click to show</h5></summary>
<summary><h2>Preamble</h2> <h6>Click to show</h6></summary>
<p>If you're like me, you don't like relying on other people for your online services, either because you don't want to give out your data unnecessarily, or just because you don't want to shell out for subscription services. You might be willing to host such services yourself, and you might even have access to spare hardware to do it on.</p>
<p>One critical issue arises, however: your home network. Maybe you're behind some weird impenetrable NAT setup you don't control, or maybe your IP address is dynamic and changes regularly, or maybe you just don't want to expose your home IP to the world. What then?</p>
<p>Luckily for us, there's a way to circumvent all that nonsense. A custom VPN like the one we'll be setting up today, hosted on an external server like a VPS, can punch through any weird home internet configuration while also swapping out your home IP address for a static one that you can feel safe exposing to the world.</p>
@ -50,14 +50,14 @@
<code>$ sysctl -w net.ipv4.ip_forward=1</code>
<h3>On the client</h3>
<p>We'll need to generate a public/private key pair for each machine on our VPN network. Do that now for our client like so:</p>
<code>$ sudo bash -c "umask 077 ; wg genkey &gt; /etc/wireguard/client_priv.key"<br/>$ sudo bash -c "wg pubkey &lt; /etc/wireguard/client_priv.key &gt; /etc/wireguard/client_pub.key"</code>
<code>$ sudo bash -c "umask 077 ; wg genkey &gt; /etc/wireguard/client_priv.key"<br>$ sudo bash -c "wg pubkey &lt; /etc/wireguard/client_priv.key &gt; /etc/wireguard/client_pub.key"</code>
<p>This generates a private key for WireGuard and then generates a corresponding public key based on it. Our client's keys can now be found in <code>/etc/wireguard/client_priv.key</code> and <code>/etc/wireguard/client_pub.key</code> for our private and public keys respectively.</p>
<h3>Back to the server</h2>
<h3>Back to the server</h3>
<p>Now do the same for the server:</p>
<code>$ umask 077 ; wg genkey &gt; /etc/wireguard/server_priv.key<br/>$ wg pubkey &lt; /etc/wireguard/server_priv.key &gt; /etc/wireguard/server_pub.key</code>
<code>$ umask 077 ; wg genkey &gt; /etc/wireguard/server_priv.key<br>$ wg pubkey &lt; /etc/wireguard/server_priv.key &gt; /etc/wireguard/server_pub.key</code>
<p>Our server's keys can now be found in <code>/etc/wireguard/server_priv.key</code> and <code>/etc/wireguard/server_pub.key</code> for our private and public keys respectively.</p>
<p>Now, create a WireGuard configuration file at <code>/etc/wireguard/wg0.conf</code>. <code>wg0</code> will be the name of our network interface, you can name yours something else if you'd like.</p>
<code>[Interface]<br/>Address = 172.16.0.1/24<br/>ListenPort = 51820<br/>PrivateKey = &nbsp;&nbsp;#(server's private key goes here)<br/># Firewall rules<br/>PostUp = iptables -A FORWARD -i %i -j ACCEPT; iptables -A FORWARD -o %i -j ACCEPT; iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE<br/>PostDown = iptables -D FORWARD -i %i -j ACCEPT; iptables -D FORWARD -o %i -j ACCEPT; iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE<br/><br/>[Peer]<br/># Client #1 details<br/>PublicKey = &nbsp;&nbsp;#(client's public key goes here)<br/># Traffic to route to this client<br/>AllowedIPs = 172.16.0.2/32</code>
<code>[Interface]<br>Address = 172.16.0.1/24<br>ListenPort = 51820<br>PrivateKey = &nbsp;&nbsp;#(server's private key goes here)<br># Firewall rules<br>PostUp = iptables -A FORWARD -i %i -j ACCEPT; iptables -A FORWARD -o %i -j ACCEPT; iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE<br>PostDown = iptables -D FORWARD -i %i -j ACCEPT; iptables -D FORWARD -o %i -j ACCEPT; iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE<br><br>[Peer]<br># Client #1 details<br>PublicKey = &nbsp;&nbsp;#(client's public key goes here)<br># Traffic to route to this client<br>AllowedIPs = 172.16.0.2/32</code>
<p>Paste the server's private key after <code>PrivateKey =</code> in <code>[Interface]</code> and the client's public key after <code>PublicKey =</code> in <code>[Peer]</code>.</p>
<p>With this setup, our server will use the virtual local IP <code>172.16.0.1</code> and our client will use the IP <code>172.16.0.2</code>. You can also add up to 254 more clients by duplicating the <code>[Peer]</code> block and and updating it with the respective public key and a new local IP address.</p>
<p>Now, enable and start the WireGuard service with</p>
@ -65,7 +65,7 @@
<p><code>wg0</code> being what we called our network interface before.</p>
<h3>Back to the client</h3>
<p>Create a WireGuard configuration file for our client at <code>/etc/wireguard/myvpn.conf</code> (you can replace <code>myvpn</code> with a different name if you so choose):</p>
<code>[Interface]<br/>Address = 172.16.0.2/24<br/>PrivateKey = &nbsp;&nbsp;#(client's private key goes here)<br/># Optionally, set to your desired DNS server<br/># DNS = 9.9.9.9<br/><br/>[Peer]<br/>PublicKey = &nbsp;&nbsp;#(server's public key goes here)<br/># Endpoint (server) can be a domain name or IP address<br/>Endpoint = (server's public IP goes here):51820<br/># Traffic to route to server<br/>AllowedIPs = 0.0.0.0/0, ::/0<br/>PersistentKeepalive = 25</code>
<code>[Interface]<br>Address = 172.16.0.2/24<br>PrivateKey = &nbsp;&nbsp;#(client's private key goes here)<br># Optionally, set to your desired DNS server<br># DNS = 9.9.9.9<br><br>[Peer]<br>PublicKey = &nbsp;&nbsp;#(server's public key goes here)<br># Endpoint (server) can be a domain name or IP address<br>Endpoint = (server's public IP goes here):51820<br># Traffic to route to server<br>AllowedIPs = 0.0.0.0/0, ::/0<br>PersistentKeepalive = 25</code>
<p>Make sure you use your server's public IP here. The PersistentKeepalive option is there because WireGuard closes the connection by default if no data comes through for a while and will only reopen it for the client, so here we send a KeepAlive packet every 25 seconds to prevent that in order to keep our client accessible from the internet.</p>
<p>Now we start WireGuard:</p>
<code>$ sudo wg-quick up myvpn</code>
@ -77,13 +77,13 @@
<code>$ ufw route allow proto tcp to 172.16.0.2 port 25565</code>
<p><code>25565</code> being your relevant port. Repeat this command as necessary.</p>
<p>Now we need to configure iptables. We can do this through UFW by adding the following onto the very end of the file <code>/etc/ufw&#8288;/before.rules</code>:</p>
<code>*nat<br/>:PREROUTING ACCEPT [0:0]<br/>:POSTROUTING ACCEPT [0:0]<br/>-A PREROUTING -i eth0 -p tcp --dport 25565 -j DNAT --to-destination 172.16.0.2<br/>-A POSTROUTING -o eth0 -j MASQUERADE<br/>COMMIT</code>
<code>*nat<br>:PREROUTING ACCEPT [0:0]<br>:POSTROUTING ACCEPT [0:0]<br>-A PREROUTING -i eth0 -p tcp --dport 25565 -j DNAT --to-destination 172.16.0.2<br>-A POSTROUTING -o eth0 -j MASQUERADE<br>COMMIT</code>
<p>Where <code>25565</code> is, again, your relevant port. Copy the <code>-A PREROUTING</code> line for every port you need.</p>
<p>Now restart UFW:</p>
<code>$ ufw reload</code>
<h3>On the client</h3>
<p>Allow the relevant ports and restart UFW:</p>
<code>$ ufw allow 51820<br/>$ ufw allow 25565<br/>$ ufw reload</code>
<code>$ ufw allow 51820<br>$ ufw allow 25565<br>$ ufw reload</code>
<p>And you're done! At this point, your client should be accessible from the IP address of your server on the ports you forwarded.</p>
</body>
</html>

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guide - Things I Keep Having to Google</title>
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
/*h1 {
background-image: url('wireguard_logo.png');
}
@ -43,10 +43,10 @@
<table>
<tr><td colspan="2"><h4>pipeline</h4></td></tr>
<tr><td><code>command | command2</code></td><td>uses the output of one command as the input to the next</td></tr>
<tr><td><code>command > file</code></td><td>saves the output of a command to a file</td></tr>
<tr><td><code>command < file</code></td><td>uses a file as the input to a command</td></tr>
<tr><td><code>command < fileA > fileB</code></td><td>will therefore run <code>command</code> with the contents of <code>fileA</code> as the input, and save the output to <code>fileB</code></td></tr>
<tr><td nowrap><code>command <<< "string or $variable"</code></td><td>will use the string or variable as the input to a command, the same as <code>&nbsp;< file</code></td></tr>
<tr><td><code>command &gt; file</code></td><td>saves the output of a command to a file</td></tr>
<tr><td><code>command &lt; file</code></td><td>uses a file as the input to a command</td></tr>
<tr><td><code>command &lt; fileA &gt; fileB</code></td><td>will therefore run <code>command</code> with the contents of <code>fileA</code> as the input, and save the output to <code>fileB</code></td></tr>
<tr><td style="white-space:nowrap;"><code>command &lt;&lt;&lt; "string or $variable"</code></td><td>will use the string or variable as the input to a command, the same as <code>&nbsp;&lt; file</code></td></tr>
<tr><td colspan="2"><h4>variables</h4></td></tr>
<tr><td><code>variable=value</code></td><td>assigns a variable</td></tr>
<tr><td><code>$variable</code></td><td>references it</td></tr>
@ -80,12 +80,12 @@
<h2>Webdev stuff</h2>
<h4>Tables</h4>
<ul>
<li>Force a <code>&lt;td&gt;</code> element not to wrap by adding the <code>nowrap</code> attribute to it.</li>
<li>Force a <code>&lt;td&gt;</code> element not to wrap by adding the <code>white-space:nowrap;</code> CSS property to it.</li>
<li>Set the <code>table-layout</code> CSS property to <code>fixed</code> to force the the columns to be equal widths.</li>
</ul>
<h4>PHP</h4>
<ul>
<li>The <code>date()</code> function in PHP returns date information. The first argument is a format string and the second is an optional integer for a Unix timestamp. The valid format characters as of PHP 8 can be found <a href="https://www.php.net/manual/en/datetime.format.php">here</a>, and examples are listed in this table:</p>
<li>The <code>date()</code> function in PHP returns date information. The first argument is a format string and the second is an optional integer for a Unix timestamp. The valid format characters as of PHP 8 can be found <a href="https://www.php.net/manual/en/datetime.format.php">here</a>, and examples are listed in this table:
<details>
<summary>Show table</summary><br>
It is currently <?php echo date('l, F j, Y \a\t g:i:s A T');?><br><br>

@ -22,59 +22,59 @@
<?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); ?>
<h1>more</h1>
<h2 id="caption">more</h2>
<nav><a href="greenhouse/">greenhouse</a><a href="quotes/">quotes</a><a href="https://rss-bridge.isopod.cool/?action=display&bridge=GiteaBridge&context=Commits&branch=main&host=https%3A%2F%2Fgit.isopod.cool&user=will&project=isopod.cool&format=Atom">changelog (atom)</a><a href="changelog.php">changelog (legacy)</a></nav>
<nav><a href="quotes/">quotes</a><a href="https://rss-bridge.isopod.cool/?action=display&bridge=GiteaBridge&context=Commits&branch=main&host=https%3A%2F%2Fgit.isopod.cool&user=will&project=isopod.cool&format=Atom">changelog (atom)</a><!--a href="changelog.php">changelog (legacy)</a--></nav>
<iframe src="https://john.citrons.xyz/embed?ref=https://isopod.cool/"
style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe>
style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;max-height:94px;height:fit-content;border:none;"></iframe>
<h2>Buttons</h2>
<div class="buttons">
<a target="_blank" href="https://easyussr.neocities.org/torrenting.html"><img src="buttons/piracy.gif"></a>
<a target="_blank" href="https://frame.work"><img src="buttons/bestviewed.gif"></a>
<a target="_blank" href="https://www.videolan.org/"><img src="buttons/getvlcnow.png"></a>
<img src="buttons/35mm.gif">
<img src="buttons/tested_on_firefox.gif">
<img src="buttons/nowebp.gif">
<a target="_blank" href="http://web3.14159.annwfn.net/"><img src="buttons/web-pi.png"></a>
<a target="_blank" href="https://neocities.org"><img src="buttons/neocities_stamp.gif"></a>
<a target="_blank" href="http://www.ermel.org/handcoded/"><img src="buttons/handcode.png"></a>
<a target="_blank" href="https://12ft.io/"><img src="buttons/dontyouhate.gif"></a>
<img src="buttons/righttorepair.png">
<img src="buttons/google_stand.gif">
<a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/"><img src="buttons/chrome.gif"></a>
<img src="buttons/i_hate_microsoft.png">
<img src="buttons/win11no.gif">
<img src="buttons/antinft.gif">
<a target="_blank" href="https://yesterweb.org/no-to-web3/"><img src="buttons/notoweb3.gif"></a>
<img src="buttons/amd_powered.gif">
<img src="buttons/linux_powered.gif">
<img src="buttons/drpepper.gif">
<img src="buttons/the void.gif">
<img src="buttons/krisbtn.png">
<img src="buttons/badhtml.png">
<img src="buttons/bantimetravel.png">
<img src="buttons/css.png">
<a target="_blank" href="https://crouton.net/"><img src="buttons/usatoday.gif"></a>
<a target="_blank" href="https://seaslug.neocities.org/"><img src="buttons/shrimp.png"></a>
<img src="buttons/canadian.gif" title="Regrettably...">
<img src="buttons/queercoded.png">
<img src="buttons/aro.png">
<a target="_blank" href="https://easyussr.neocities.org/torrenting.html"><img src="buttons/piracy.gif" alt="Piracy Now!"></a>
<a target="_blank" href="https://frame.work"><img src="buttons/bestviewed.gif" alt="Best viewed with a computer"></a>
<a target="_blank" href="https://www.videolan.org/"><img src="buttons/getvlcnow.png" alt="get VLC now!"></a>
<img src="buttons/35mm.gif" alt="Best heard through a 3.5mm jack">
<img src="buttons/tested_on_firefox.gif" alt="Tested on Firefox">
<img src="buttons/nowebp.gif" alt="No WebP! Just use PNG">
<a target="_blank" href="http://web3.14159.annwfn.net/"><img src="buttons/web-pi.png" alt="Web Pi Certified"></a>
<a target="_blank" href="https://neocities.org"><img src="buttons/neocities_stamp.gif" alt="Neocities: The web is yours"></a>
<a target="_blank" href="http://www.ermel.org/handcoded/"><img src="buttons/handcode.png" alt="100% hand coded HTML"></a>
<a target="_blank" href="https://12ft.io/"><img src="buttons/dontyouhate.gif" alt="Don't you hate it when you're reading a page and then some-- This content is for subscribers only! Paywalls Gatekeep Knowledge."></a>
<img src="buttons/righttorepair.png" alt="I support right to repair">
<img src="buttons/google_stand.gif" alt="Stand up to Google! Fight for open web standards! Fight for online privacy! Fight against monopolistic practices!">
<a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/"><img src="buttons/chrome.gif" alt="Google Chrome is evil!"></a>
<img src="buttons/i_hate_microsoft.png" alt="I hate Microsoft">
<img src="buttons/win11no.gif" alt="Windows 11 No!">
<img src="buttons/antinft.gif" alt="This is an Anti-NFT site">
<a target="_blank" href="https://yesterweb.org/no-to-web3/"><img src="buttons/notoweb3.gif" alt="Keep the web free, say no to web3"></a>
<img src="buttons/amd_powered.gif" alt="Powered by AMD">
<img src="buttons/linux_powered.gif" alt="Linux powered">
<img src="buttons/drpepper.gif" alt="Powered by Dr Pepper">
<img src="buttons/the_void.gif" alt="Powered by the void">
<img src="buttons/krisbtn.png" alt="Kris where tf are we">
<img src="buttons/badhtml.png" alt="W3C Bad HTML Markup">
<img src="buttons/bantimetravel.png" alt="Ban Time Travel &quot;Now&quot;">
<img src="buttons/css.png" alt="CSS is awesome">
<a target="_blank" href="https://crouton.net/"><img src="buttons/usatoday.gif" alt="USA Today Hot Site"></a>
<a target="_blank" href="https://seaslug.neocities.org/"><img src="buttons/shrimp.png" alt="Shrimp Now!"></a>
<img src="buttons/canadian.gif" title="Regrettably..." alt="Canadian on the web">
<img src="buttons/queercoded.png" alt="You're telling me a queer coded this">
<img src="buttons/aro.png" alt="Aromantic pride flag">
<!--img src="buttons/ace.png"-->
<a href="https://rainy.gay/pride/pridebuttons.html"><img src="buttons/nonbinary.png"></a>
<br /><a target="_blank" href="https://citrons.xyz/a/memetic-apioform-page.html"
style="display: inline-block; margin-top: .7rem;"><img src="images/apiopage.png" /></a>
<a href="https://rainy.gay/pride/pridebuttons.html"><img src="buttons/nonbinary.png" alt="Nonbinary pride flag"></a>
<br><a target="_blank" href="https://citrons.xyz/a/memetic-apioform-page.html"
style="display: inline-block; margin-top: .7rem;"><img src="images/apiopage.png" alt="memetic apiopage - click to view"></a>
</div>
<h3>My buttons</h3>
<div class="buttons">
<img src="buttons/isopodhours.png" />
<img src="buttons/niceopod_button_2.png" />
<img src="buttons/niceopod_button.png" />
<a target="_blank" href="https://deeptwisty.com/"><img src="buttons/deeptwisty_button.png" /></a>
<img src="buttons/isopodhours.png" alt="isopod hours">
<img src="buttons/niceopod_button_2.png" alt="niceopod">
<img src="buttons/niceopod_button.png" alt="niceopod">
<a target="_blank" href="https://deeptwisty.com/"><img src="buttons/deeptwisty_button.png" alt="deep twisty"></a>
</div>
<h2>TODO</h2>
<ul>
<li>Add a changelog to this page by parsing the atom feed</li>
<li>Make a cool 404 page</li> <!-- Line Item -->
<li>Add my CD collection to the music page</li>
<li>Optimize this thing for mobile displays</li>
<li>[In progress] Optimize this thing for mobile displays</li>
<li>Make a page for games I like</li>
<li>Update the navigation on the landing page to a vertical layout</li>
<li>Write another blog post</li>

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guestbook</title>
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
table {
border-collapse: collapse;
table-layout: fixed;
@ -26,21 +26,14 @@
article {
width: 90%;
margin: 2rem auto;
}
article > table {
width: 100%;
}
article td {
padding: 0.5rem 0.3rem;
}
article td:nth-child(2) {
text-align: center;
}
article td:last-child {
text-align: right;
}
article td:first-child {
text-align: left;
display: grid;
gap: 1rem;
grid-template-areas:
'gb-name gb-date gb-index'
'gb-cool gb-cool gb-cool'
'gb-found gb-found gb-found'
'gb-message gb-message gb-message'
'gb-reply gb-reply gb-reply';
}
input, textarea {
@ -53,11 +46,14 @@
border-bottom: 2px solid #444444;
color: gainsboro;
padding: 0.35rem;
box-sizing: border-box;
font-size: .9em;
}
input[type="submit"], input[type="reset"] {
padding: 0.35rem 0.5rem;
box-shadow: 2px 2px 6px black;
margin: 0.3rem;
display: inline-block;
}
input[type="submit"]:active, input[type="reset"]:active {
transform: translate(1px, 1px); box-shadow: 0 0 2px black;
@ -84,13 +80,20 @@
.message {
padding-top: 1.5rem;
}
.gb-date {
text-align: center;
}
.gb-index {
text-align: right;
}
@media only screen and (hover: none) {
td {
display: block;
}
form td:first-child {
text-align: left;
}
form td:nth-child(2) {
padding-left: 0;
padding-right: 0;
}
input[type="text"], input[type="email"], textarea {
background: none;
border: 2px solid #00000033;
@ -109,6 +112,29 @@
article td:first-child {
text-align: left;
}
article {
grid-template-areas:
'gb-name gb-name gb-index'
'gb-date gb-date gb-date'
'gb-cool gb-cool gb-cool'
'gb-found gb-found gb-found'
'gb-message gb-message gb-message'
'gb-reply gb-reply gb-reply';
}
}
@media (prefers-contrast: more) {
input[type="text"], input[type="email"], textarea {
outline: 1px solid white;
color: white;
}
input:focus, textarea:focus {
outline: 3px solid white;
}
input[type="submit"] {
background: none;
color: white;
outline: 1px solid white;
}
}
</style>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
@ -163,7 +189,7 @@
<?php if($return == "success") { echo "<td></td><td><span class='success'>Successfully posted!</span></td>"; } ?>
<tr>
<td colspan="2"><input type="reset"><input type="submit" value="Post"></td>
<td colspan="2" style="text-align: center;"><input type="reset"><input type="submit" value="Post"></td>
</tr>
</table>
@ -183,21 +209,21 @@
$coolsanitized = htmlentities(preg_replace("/https?:\/\//i", "", $cool));
$reply = htmlentities($post->reply);
$output = $output."<hr/><article><table><tr><td>";
$output = $output."<hr><article><div style='grid-area:gb-name;'>";
if($website) { $output = $output."<a href='$website'>$name</a>"; }
else { $output = $output.$name; }
$output = $output."</td><td><time>$date</time></td><td>Entry #$index</td></tr>";
$output = $output."</div><div style='grid-area:gb-date;' class='gb-date'>$date</div><div style='grid-area:gb-index;' class='gb-index'>Entry #$index</div>";
if($cool) {
$output = $output."<tr><td colspan='3'><b>cool thing</b>: <a href='$cool'>$coolsanitized</a></td></tr>";
$output = $output."<div style='grid-area:gb-cool;'><b>cool thing</b>: <a href='$cool'>$coolsanitized</a></div>";
}
if($found) {
$output = $output."<tr><td colspan='3'><b>How did you find me?</b><br/>$found</td></tr>";
$output = $output."<div style='grid-area:gb-found;'><b>How did you find me?</b><br>$found</div>";
}
$output = $output."<tr><td colspan='3' class='message'>$message</td></tr>";
$output = $output."<div style='grid-area:gb-message;'>$message</div>";
if($reply) {
$output = $output."<tr><td colspan='3' class='reply'><b>Reply</b>:<br/>$reply</td></tr>";
$output = $output."<div style='grid-area:gb-reply;' class='reply'><b>Reply</b>:<br>$reply</div>";
}
$output = $output."</table></article>";
$output = $output."</article>";
$index++;
$totaloutput = $output.$totaloutput;
}

@ -27,11 +27,30 @@
background-image: url(images/bubblecolumn1.gif);
background-repeat: repeat-y;
}
main {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (prefers-reduced-motion) {
#bubblecolumn {
display: none;
}
}
@media only screen and (hover: none) {
#rightsidebg {
box-shadow: none;
}
@media (max-width: 43rem) {
h1 {
font-size: 10.5vw;
}
h1 + h2#caption {
font-size: 1.1em;
}
}
}
</style>
<?php
include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php');
@ -185,16 +204,17 @@
<title><?php if($tit) { echo "isopod.cool v3 - $tit"; } else { echo "isopod.cool v3"; } ?></title>
<meta name="description" content="real life isopod">
</head>
<body id="centeredcontent">
<body>
<?php include('nav.php'); ?>
<main>
<h1 style="margin-top: 0;">isopod.cool v3</h1>
<h2 id="caption"><?php echo $cap; ?></h2>
<?php include('nav.php'); ?>
<nav>
<!--a href="https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://isopod.cool/">&lt;</a><a href="https://yesterweb.org/webring/">yester webring</a><a href="https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://isopod.cool/">?</a><a href="https://webring.yesterweb.org/noJS/index.php?d=next&https://isopod.cool/">&gt;</a>&nbsp;&nbsp;-->
<a href="https://hotlinewebring.club/niceopod/previous">&lt;</a><i><a href="https://hotlinewebring.club/">hotline webring</a></i><a href="https://hotlinewebring.club/niceopod/next">&gt;</a>&nbsp;&nbsp;<a href="https://melonland.net/surf-club.html">melonring</a><a href="https://brain.melonking.net/surf-club-random">?</a>
</nav>
<div>
<h1 style="margin-top: 0;">isopod.cool v3</h1>
<h2 id="caption"><?php echo $cap; ?></h2>
<!--nav><a href="https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://isopod.cool/">&lt;</a><a href="https://yesterweb.org/webring/">yester webring</a><a href="https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://isopod.cool/">?</a><a href="https://webring.yesterweb.org/noJS/index.php?d=next&https://isopod.cool/">&gt;</a></nav-->
<nav><a href="https://hotlinewebring.club/bathynomus/previous">&lt;</a><i><a href="https://hotlinewebring.club/">hotline webring</a></i><a href="https://hotlinewebring.club/bathynomus/next">&gt;</a></nav>
<nav><a href="https://melonland.net/surf-club.html">melonring</a><a href="https://brain.melonking.net/surf-club-random">?</a></nav>
<!--nav><a href="https://webring.bucketfish.me/redirect.html?to=prev&name=isopod">&lt;</a><a href="https://webring.bucketfish.me">bucket webring</a><a href="https://webring.bucketfish.me/redirect.html?to=next&name=isopod">&gt;</a-->
</div>
<!--script type="text/javascript">document.write('<a href="desktop.html">$login<span class="blinking" >_</span></a>');</script-->
</main>

@ -5,11 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Links</title>
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
table td {
padding: 0.3rem;
@ -20,6 +21,14 @@
#statstable tr:nth-child(2n+1) {
background-color: #ffffff11;
}
@media only screen and (hover: none) {
td:nth-child(2) {
margin-bottom: 1rem;
}
table {
margin-top: 0 !important;
}
}
</style>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
</head>
@ -43,35 +52,35 @@
<td colspan="2"><h2>Me</h2></td>
</tr>
<tr>
<td><a target="_blank" href="https://deeptwisty.com/art/" rel="me">deeptwisty.com/art</a></td>
<td><a href="https://deeptwisty.com/art/" rel="me">deeptwisty.com/art</a></td>
<td>My art page</td>
</tr>
<tr>
<td><a target="_blank" href="https://social.isopod.cool/will" rel="me">@will@social.isopod.cool</a></td>
<td><a href="https://social.isopod.cool/will" rel="me">@will@social.isopod.cool</a></td>
<td>My account on my personal fediverse instance</td>
</tr>
<tr>
<td><a target="_blank" href="https://tumblr.isopod.cool/" rel="me">@isopodhours</a></td>
<td><a href="https://tumblr.isopod.cool/" rel="me">@isopodhours</a></td>
<td>My Tumblr account</td>
</tr>
<tr>
<td><a target="_blank" href="https://deeptwisty.bandcamp.com/" rel="me">deeptwisty.bandcamp.com</a></td>
<td><a href="https://deeptwisty.bandcamp.com/" rel="me">deeptwisty.bandcamp.com</a></td>
<td>My Bandcamp page. If you want to support me, you can buy my music here.</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.youtube.com/@deeptwisty" rel="me">deep twisty</a></td>
<td><a href="https://www.youtube.com/@deeptwisty" rel="me">deep twisty</a></td>
<td>The Youtube channel for my music</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.youtube.com/@isopodgaming" rel="me">Willem</a></td>
<td><a href="https://www.youtube.com/@isopodgaming" rel="me">Willem</a></td>
<td>My Youtube channel for other stuff</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.twitch.tv/deeptwistygaming" rel="me">deeptwistygaming</a></td>
<td><a href="https://www.twitch.tv/deeptwistygaming" rel="me">deeptwistygaming</a></td>
<td>My Twitch channel</td>
</tr>
<tr>
<td><a target="_blank" href="https://deeptwisty.itch.io/" rel="me">deeptwisty.itch.io</a></td>
<td><a href="https://deeptwisty.itch.io/" rel="me">deeptwisty.itch.io</a></td>
<td>My itch.io page</td>
</tr>
<tr>
@ -83,17 +92,17 @@
<tr>
<td colspan="2">
<div class="buttons">
<a target="_blank" href="https://seaslug.neocities.org/"><img src="buttons/seaslug.png" alt="Sea slug on the net!"/></a>
<a target="_blank" href="https://onlysans.neocities.org/"><img src="buttons/onlysans.png" alt="Only Sans"/></a>
<a target="_blank" href="https://kalechips.net/"><img src="buttons/kalechips.png" alt="Kalechips"/></a>
<a target="_blank" href="https://morrysillusion.net/"><img src="buttons/morrysillusion.png" alt="Morry's Illusion"/></a>
<a target="_blank" href="https://josef.neocities.org/"><img src="buttons/josef.gif" alt="Josef"/></a>
<a target="_blank" href="https://the64thsanctum.net/"><img src="buttons/64thsanctum.gif" alt="64th Sanctum"/></a>
<a target="_blank" href="https://sadgrl.online/"><img src="buttons/sadgrl.gif" alt="Sadgrl"/></a>
<a target="_blank" href="https://icg.neocities.org/"><img src="buttons/Icelog.gif" alt="Iceologist"/></a>
<a target="_blank" href="https://robophobia.neocities.org/"><img src="buttons/robophobia.png" alt="Robophobia"/></a>
<a target="_blank" href="https://forum.melonland.net/"><img src="buttons/melonland-forum.gif" alt="Melonland Forum"/></a>
<a target="_blank" href="https://sizeof.cat/"><img src="buttons/sizeofcat.png" alt="Size of Cat"/></a>
<a href="https://seaslug.neocities.org/"><img src="buttons/seaslug.png" alt="Sea slug on the net!"></a>
<a href="https://onlysans.neocities.org/"><img src="buttons/onlysans.png" alt="Only Sans"></a>
<a href="https://kalechips.net/"><img src="buttons/kalechips.png" alt="Kalechips"></a>
<a href="https://morrysillusion.net/"><img src="buttons/morrysillusion.png" alt="Morry's Illusion"></a>
<a href="https://josef.neocities.org/"><img src="buttons/josef.gif" alt="Josef"></a>
<a href="https://the64thsanctum.net/"><img src="buttons/64thsanctum.gif" alt="64th Sanctum"></a>
<a href="https://sadgrl.online/"><img src="buttons/sadgrl.gif" alt="Sadgrl"></a>
<a href="https://icg.neocities.org/"><img src="buttons/Icelog.gif" alt="Iceologist"></a>
<a href="https://robophobia.neocities.org/"><img src="buttons/robophobia.png" alt="Robophobia"></a>
<a href="https://forum.melonland.net/"><img src="buttons/melonland-forum.gif" alt="Melonland Forum"></a>
<a href="https://sizeof.cat/"><img src="buttons/sizeofcat.png" alt="Size of Cat"></a>
</div>
</td>
</tr>
@ -101,51 +110,51 @@
<td colspan="2"><h2>Utility</h2></td>
</tr>
<tr>
<td><a target="_blank" href="https://easyussr.neocities.org/torrenting.html">Easy USSR</a></td>
<td><a href="https://easyussr.neocities.org/torrenting.html">Easy USSR</a></td>
<td>A comprehensive beginner's guide to <span class="serif">Legally Acquiring Media</span></td>
</tr>
<tr>
<td><a target="_blank" href="https://12ft.io/">12ft.io</a></td>
<td><a href="https://12ft.io/">12ft.io</a></td>
<td>Show me a 10ft paywall, I'll show you a 12ft ladder.</td>
</tr>
<tr>
<td><a target="_blank" href="https://landchad.net/">LandChad.net</a></td>
<td><a href="https://landchad.net/">LandChad.net</a></td>
<td>A collection of tutorials for setting up various self-hosted services.</td>
</tr>
<tr>
<td><a target="_blank" href="https://3ds.hacks.guide/">3DS Hacks Guide</a></td>
<td><a href="https://3ds.hacks.guide/">3DS Hacks Guide</a></td>
<td>A comprehensive guide for modding 2ds and 3ds consoles. I know it's legit because I used it on mine.</td>
</tr>
<tr>
<td><a target="_blank" href="https://hshop.erista.me/">hShop</a></td>
<td><a href="https://hshop.erista.me/">hShop</a></td>
<td>A repository of software for your freshly hacked 3ds</td>
</tr>
<tr>
<td><a target="_blank" href="https://switching.software/">switching.software</a></td>
<td><a href="https://switching.software/">switching.software</a></td>
<td>A curated list of alternatives to popular software and services from companies like Google and Amazon.</td>
</tr>
<tr>
<td><a target="_blank" href="https://github.com/awesome-selfhosted/awesome-selfhosted">Awesome Selfhosted</a></td>
<td><a href="https://github.com/awesome-selfhosted/awesome-selfhosted">Awesome Selfhosted</a></td>
<td>A comprehensive list of self-hosted alternatives to various software.</td>
</tr>
<tr>
<td><a target="_blank" href="https://newpipe.net/">Newpipe</a> & <a target="_blank" href="https://invidious.io/">Invidious</a></td>
<td><a href="https://newpipe.net/">Newpipe</a> & <a href="https://invidious.io/">Invidious</a></td>
<td>Better YouTube frontends for Android and the browser respectively.</td>
</tr>
<tr>
<td><a target="_blank" href="https://hypem.com/merch-table">Hype Machine Merch Table</a></td>
<td><a href="https://hypem.com/merch-table">Hype Machine Merch Table</a></td>
<td>Scans a Spotify playlist and links the Bandcamp page of any artist in it who has one.</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.darkpattern.games/">Dark Pattern Games</a></td>
<td><a href="https://www.darkpattern.games/">Dark Pattern Games</a></td>
<td>A database of mobile games that flags them for predatory design patterns.</td>
</tr>
<tr>
<td><a target="_blank" href="https://regexr.com/">RegExr</a></td>
<td><a href="https://regexr.com/">RegExr</a></td>
<td>A website to test regular expressions for you</td>
</tr>
<tr>
<td><a target="_blank" href="https://jsrn.net/howoldisit/">How old is it?</a></td>
<td><a href="https://jsrn.net/howoldisit/">How old is it?</a></td>
<td>For when your prospective employer asks for 10 years of <?php
$boogeraids = array(
'.NET Core',
@ -260,84 +269,84 @@
?> experience.</td>
</tr>
<tr>
<td><a target="_blank" href="https://github.com/viraptor/reverse-interview">Reverse Interview</a></td>
<td><a href="https://github.com/viraptor/reverse-interview">Reverse Interview</a></td>
<td>A list of questions to ask at (tech) job interviews</td>
</tr>
<tr>
<td><a target="_blank" href="https://based.cooking/">based.cooking</a></td>
<td><a href="https://based.cooking/">based.cooking</a></td>
<td>A recipe website without all the typical recipe website garbage.</td>
</tr>
<tr>
<tr>
<td><a target="_blank" href="https://8mb.video/">8mbvideo</a></td>
<td><a href="https://8mb.video/">8mbvideo</a></td>
<td>Compresses any video file just enough to comply with Discord's filesize limits.</td>
</tr>
<tr>
<td><a target="_blank" href="https://jort.link/">jort.link</a></td>
<td><a href="https://jort.link/">jort.link</a></td>
<td>A shield to prevent accidental DDOSing of links posted to the fediverse</td>
<tr>
<td colspan="2"><h2>Fun</h2></td>
</tr>
<tr>
<td><a target="_blank" href="https://cooltext.com/Logo-Design-Burning">Burning Text Generator</a></td>
<td>Does <img src="https://isopod.cool/old/2/images/this_burning.gif" style="height: 3ch;"></td>
<td><a href="https://cooltext.com/Logo-Design-Burning">Burning Text Generator</a></td>
<td>Does <img src="https://isopod.cool/old/2/images/this_burning.gif" style="height: 3ch;" alt="this (the text is on fire)"></td>
</tr>
<tr>
<td><a target="_blank" href="https://fsymbols.com/generators/zalgo/">Zalgo Text Generator</a></td>
<td><a href="https://fsymbols.com/generators/zalgo/">Zalgo Text Generator</a></td>
<td>Does t̵̝̻̘͒̓̈́h̵͇͙͔́̾i̵͎̪̞͊́̾s̵̫̼̀̾</td>
</tr>
<tr>
<td><a target="_blank" href="https://crouton.net">crouton.net</a></td>
<td><a href="https://crouton.net">crouton.net</a></td>
<td>crouton</td>
</tr>
<tr>
<td><a target="_blank" href="https://cornonthec.observer/">cornonthec.observer/</a></td>
<td><a href="https://cornonthec.observer/">cornonthec.observer/</a></td>
<td>corn on the cob server</td>
</tr>
<tr>
<td><a target="_blank" href="https://draculadaily.substack.com/about">Dracula Daily</a></td>
<td><a href="https://draculadaily.substack.com/about">Dracula Daily</a></td>
<td>Read Bram Stoker's <i>Dracula</i> in real time, in your email inbox.</td>
</tr>
<tr>
<td><a target="_blank" href="https://wobble.town/">Wobble Town</a></td>
<td><a href="https://wobble.town/">Wobble Town</a></td>
<td>A cute little virtual pet!</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.allaboutbirds.org/cams/">Cornell Lab Bird Cams</a></td>
<td><a href="https://www.allaboutbirds.org/cams/">Cornell Lab Bird Cams</a></td>
<td>Live bird cams!</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.1001freefonts.com/snailets.font">Snailets font</a></td>
<td><a href="https://www.1001freefonts.com/snailets.font">Snailets font</a></td>
<td>The best font</td>
</tr>
<tr>
<td><a target="_blank" href="https://imgflip-is-dead.crabdance.com/">Imgflip is DEAD</a></td>
<td><a href="https://imgflip-is-dead.crabdance.com/">Imgflip is DEAD</a></td>
<td>A clone of Imgflip's meme generator, "because watermarks and tracking suck".</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.inaturalist.org/">iNaturalist</a></td>
<td><a href="https://www.inaturalist.org/">iNaturalist</a></td>
<td>An extensive crowdsourced library of high-quality photos of over 400,000 species of plants and animals</td>
</tr>
<tr>
<td><a target="_blank" href="https://alula.github.io/SpaceCadetPinball">Space Cadet Pinball</a></td>
<td><a href="https://alula.github.io/SpaceCadetPinball">Space Cadet Pinball</a></td>
<td>Windows XP Space Cadet Pinball, reverse engineered to run in your browser!</td>
</tr>
<tr>
<td><a target="_blank" href="https://trilobites.info/">trilobites.info</a></td>
<td><a href="https://trilobites.info/">trilobites.info</a></td>
<td>Trilobite knowledge!</td>
</tr>
<tr>
<td colspan="2"><h2>More stuff</h2></td>
</tr>
<tr>
<td><a target="_blank" href="https://links.yesterweb.org/">Yesterlinks</a> [<a target="_blank" href="https://links.yesterweb.org/surf.php">Random</a>]</td>
<td><a href="https://links.yesterweb.org/">Yesterlinks</a> [<a href="https://links.yesterweb.org/surf.php">Random</a>]</td>
<td>A "user-curated directory of interesting off-the-beaten path websites", with over 500 links and counting!</td>
</tr>
<tr>
<td><a target="_blank" href="https://search.marginalia.nu/">Marginalia Search</a> [<a target="_blank" href="https://search.marginalia.nu/explore/random">Random</a>]</td>
<td><a href="https://search.marginalia.nu/">Marginalia Search</a> [<a href="https://search.marginalia.nu/explore/random">Random</a>]</td>
<td>A custom-built search engine for small, non-commercial websites.</td>
</tr>
<tr>
<td><a target="_blank" href="https://vincentsdungeon.com/links.html">Vincent's Dungeon/links</a></td>
<td><a href="https://vincentsdungeon.com/links.html">Vincent's Dungeon/links</a></td>
<td>A bigger link directory than mine brimming with educational, web, and TTRPG resources, curated by Vincent.</td>
</tr>
</table>

@ -1,24 +1,32 @@
<?php
$uris = array(
'about',
'blog',
'links',
'stats',
'stuff',
'guestbook',
'etc'
);
$host = $_SERVER['HTTP_HOST'];
echo "<nav>";
if($_SERVER["DOCUMENT_ROOT"] !== getcwd()) {
echo "<a href='https://$host/'>home</a>";
}
foreach($uris as $uri) {
if($uri == str_replace("/", "", $_SERVER['REQUEST_URI'])) {
echo "<span>$uri</span>";
function echolink($url, $name) {
global $host;
if("/$url/" != $_SERVER['REQUEST_URI']) {
echo "<a href='https://$host/$url/'>$name</a>";
} else {
echo "<a href='https://$host/$uri/'>$uri</a>";
echo "<span>$name</span>";
}
}
echo "</nav>"
echo "<input type='checkbox' id='navtoggle'>";
echo '<label for="navtoggle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" width="32" fill="currentColor"><path d="M1 0h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2zm0 8h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2zm0-4h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z"></path></svg></label>';
echo "<nav id='main-nav' style='--rowcount: 3;'><div>";
if($_SERVER["DOCUMENT_ROOT"] !== getcwd()) {
echo "<a href='https://$host/'>home</a>";
}
echolink("about", "about");
echolink("about/uses", "uses");
echolink("about/music", "music");
echo "</div><div>";
echolink("blog", "blog");
echolink("links", "links");
echolink("stuff", "stuff");
echolink("guestbook", "guestbook");
echo "</div><div>";
echolink("stats", "stats");
echolink("etc/greenhouse", "greenhouse");
echolink("etc", "etc");
echo "</div></nav>";
?>

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stats</title>
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">
<style>
#statstable {
width: 100%;
border-collapse: collapse;
@ -17,6 +17,14 @@
#statstable tr:nth-child(2n+1) {
background-color: #ffffff11;
}
@media only screen and (hover: none) {
#statstable td {
width: initial;
}
#statstable td:first-child {
font-weight: bold;
}
}
</style>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
</head>
@ -41,9 +49,25 @@
<td>Desktop environment</td>
<td>KDE Plasma</td>
</tr>
<tr>
<td>Layout</td>
<td>ANSI 75% + Knob + External numpad</td>
</tr>
<tr>
<td>Switches</td>
<td>Keychron K Pro Brown</td>
</tr>
<tr>
<td>Firmware</td>
<td>QMK</td>
</tr>
<tr>
<td>RGB</td>
<td>Yes</td>
</tr>
<tr>
<td>CDs owned</td>
<td>14</td>
<td>114</td>
</tr>
<tr>
<td>Consoles modded</td>
@ -61,6 +85,14 @@
<td>Websites</td>
<td>2</td>
</tr>
<tr>
<td>Web services</td>
<td title="Each website is one, plus Akkoma, SearXNG, RSS-Bridge, Forgejo, and Nextcloud.">7</td>
</tr>
<tr>
<td>Domains owned</td>
<td title="deeptwisty.com, isopod.cool, and bathynomus.xyz">3</td>
</tr>
<tr>
<td>Talent</td>
<td style="font-family: mono; color: red;">[Integer overflow error]</td>
@ -94,7 +126,8 @@
'Listed <a href="https://genders.wtf">here</a>',
'AMD Ryzen 7 5700G, 32GB DDR4-3600 RAM, AMD Radeon RX 6600XT GPU, 500GB NVMe SSD, 1TB SATA SSD, 4TB HDD',
'I forgor 💀',
'<i>Bathynomus Giganteus</i>'
'<i>Bathynomus Giganteus</i>',
'I\'ll figure it out later'
);
echo $boogeraids[array_rand($boogeraids)];
?></td>
@ -117,7 +150,7 @@
</tr>
<tr>
<td>Drop rates</td>
<td nowrap="">1-3 bags of Doritos - 80%<br/>Wired earbuds - 10%<br/>Random Linux install media - 1%</td>
<td style="white-space:nowrap;">1-3 bags of Doritos - 80% <br>Wired earbuds - 10% <br>Random Linux install media - 1%</td>
</tr>
<tr>
<td>Efficiency rating</td>

@ -104,7 +104,7 @@
<td>Go back</td>
</tr>
<tr>
<td nowrap><a href="EnchantedToolsPack v1.zip">EnchantedToolsPack v1.zip</a></td>
<td nowrap><a href="EnchantedToolsPack_v1.zip">EnchantedToolsPack v1.zip</a></td>
<td>A custom resource pack I made for Minecraft that uses the <a href="https://optifine.net/home">Optifine mod</a>'s custom texture functionality to add custom textures for enchanted tools and weapons. Works as of 1.19.</td>
</tr>
<tr>

@ -1,8 +1,9 @@
:root {
--stdfont: mono, monospace;
--bgcolor: #222222;
--bodywidth: 43rem;
--bodywidth: min(90vw, 43rem);
--stddropshadow: 4px 4px 8px black;
--navbarheight: 2.5rem;
}
html, body {
height: 100%;
@ -14,24 +15,15 @@ body {
color: gainsboro;
max-width: var(--bodywidth);
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
padding-top: var(--navbarheight);
padding-bottom: 1rem;
overflow-x: hidden;
text-shadow: 1px 1px 3px black;
}
body#centeredcontent {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0;
margin-bottom: 0;
box-sizing: border-box;
}
header {
width: 100%;
}
nav {
margin-bottom: 1rem;
}
#leftsidebg, #rightsidebg {
position: fixed;
z-index: -10;
@ -106,9 +98,11 @@ nav {
max-width: 100%;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
nav a, nav span {
margin: 0 0.7rem;
nav > * {
margin: 0;
padding: 0 .5em;
}
a {
color: #df1955;
@ -116,6 +110,28 @@ a {
a:hover {
color: #00ffd5;
}
input#navtoggle {
display: none;
}
label[for='navtoggle'] {
display: none;
}
#main-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--navbarheight);
}
#main-nav > div {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
#main-nav > div > * {
padding: 0 1em;
}
.buttons {
text-align: center;
font-size: 0;
@ -165,7 +181,7 @@ code {
padding: 0.7rem;
border: 1px solid #00ffd5;
}
:is(main,body) > code > h4 {
:is(main,body) > code > span.codetitle {
margin: -0.7rem;
margin-top: -0.4rem;
margin-bottom: 0.7rem;
@ -257,11 +273,11 @@ blockquote .attr {
91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
}
@media only screen and (hover: none) {
body {
font-size: 1.65vh;
--bodywidth: 90vw;
:root {
font-size: 1rem;
}
h1 {
font-size: 4em;
padding-left: unset;
padding-right: unset;
}
@ -272,20 +288,84 @@ blockquote .attr {
:is(main,body) > code {
border-width: .1rem;
}
.buttons > * {
width: 19%;
}
.buttons > a > img {
width: 100%;
@media (max-width: 43rem) {
.buttons > * {
width: 24%;
}
.buttons > a > img {
width: 100%;
}
}
code {
font-size: 0.8em;
}
#leftsidebg, #rightsidebg {
top: 0; left: 0; right: 0; bottom: 0;
box-shadow: 100vw 0 0 #00000088 inset;
box-shadow: 100vw 0 0 #000000bb inset;
}
tr:hover {
background-color: initial;
}
td {
display: block;
}
#main-nav {
position: fixed;
left: 0;
right: 0;
top: calc(-.2rem - (3rem * var(--rowcount)));
z-index: 75;
background-color: #222222;
transition-duration: .5s;
box-shadow: none;
height: fit-content;
}
#main-nav > * {
height: 3rem;
width: 100%;
border-bottom: 1px solid #ffffff22;
}
#main-nav > *:last-child {
border-bottom: none;
}
label[for='navtoggle'] {
display: block;
z-index: 100;
filter: drop-shadow(2px 2px 6px black);
position: fixed;
top: 0;
left: 0;
padding: .5em;
}
#navtoggle:checked ~ #main-nav {
top: 0;
box-shadow: 0 0 5rem 1rem black;
}
#navtoggle ~ label[for='navtoggle'] > svg {
transition-duration: .5s;
}
#navtoggle:checked ~ label[for='navtoggle'] > svg {
transform: rotate(90deg);
}
#greenhouselink {
display: none;
}
@media (prefers-contrast: more) {
#leftsidebg, #rightsidebg {
display: none;
}
}
}
@media (prefers-contrast: more) {
body {
color: white;
background-color:#111111;
}
#leftsidebg, #rightsidebg {
display: none;
/*box-shadow: 100vw 0 0 #000000ee inset;*/
}
a {
color: #00ffd5;
}
}
Loading…
Cancel
Save