tiny works

This page will showcase all works that aren't big enough to be in the top-level pages, or are non-standard works.

Writings

I like to write sometimes. Most of the time, my literature is part of one universe formulating inside my brain. But I do sometimes write things that are completely unique. Here are some of those smaller writing projects.

Campfire

Campfire is a very short story once written as a Nexusbøund story in a little notebook. This digital version has had names changed and is removed from that canon. It isn't super NSFW, only featuring undressing, but nonetheless I've tagged it as such. It is licensed under CC BY-SA 4.0 International.

Software

I'll admit it. I'm a bit of a nerd. I haven't written a ton of software, but nonetheless I'll share those smaller programs here.

swatch.sh

swatch.sh is a bash program based off code from okatotf on Github that, using the current date, calculates the current Swatch Internet Time, a.k.a. .beat time.

Web Development (HTML, CSS, and JS tricks)

When making a website by scratch, you'll ultimately do some pretty nifty things. Now I will admit, most of the nifty things I'll share here are from other resources. But that's the cool thing about indie web development, I think. So, here are some things that I have done with my webmastering experience.

Time-based CSS with JavaScript

I've made a whole page dedicated to styling web elements based on the current hour.

Code Blocks

Scanline Effect

This block has scanlines, like an old monitor!
We can achieve an effect like this with pure CSS -- no need for images or @keyframes!
Here is the CSS code for this:
pre {
  color: lightgreen;
  border: 2px solid darkgreen;
  border-radius: 4px;
  padding: 0.5em;
  overflow: scroll;
  background: repeating-linear-gradient(rgba(17,142,61,0.25) 1px, #000 2px, #000 3px, #000 4px, #000 5px);
}

Language Display

In the previous block, you might have noticed it said CSS in the corner.
It says TXT in the corner of this block! You can do this with the following code:
pre[data-language] {
  position: relative;
}

pre[data-language]::after {
  color: white;
  content: attr(data-language);
  padding: 2px 4px;
  position: absolute;
  right: 0;
  top: 0;
  text-transform: uppercase;
}
In the HTML, make sure you format your opening tag like this:
<pre data-language="lang">