Homestuck

Hi! This is a website that I made with the specific intent to emulate the style of MSPAMicroSoft Paint Adventures, Andrew Hussie's website that hosts his works.

However, I also added lots of new things. For example, I wrote in different variables and page formats, so you can customize the website using your own CSS file with your own colours. Just make sure that you include your stylesheet AFTER the default style.css file. Like so:

<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<link href="/main-palette.css" rel="stylesheet" type="text/css" media="all">

Another thing that I added was the tooltips. Try hovering over any text like thisThese were pretty hard to make, especially considering since you can't make triangles in CSS, so technically the tail to this message is a 0x0 rectangle with one bordered side. Gimicky, but it works! Pretty neat, huh? to see what it says.

The last change I made was making the 'console commands'By which I'm referring to '> Enter name.' below easier to make. I did this by making a custom CSS class to handle the hyperlink element in HTML, prefixed with a ::before pseudo-element for the '>'. One issue that you'll notice is that original Homestuck doesn't really have this, and has to type out different elements for the link, the text, everything else.

You can see how this simplifies the process of making the next command, which originally would've looked like this in the DOM tree:

<div data-v-c8c019be="" class="nextArrow">
  <div data-v-c8c019be="">
    <p data-v-c8c019be="">
      " > "
      <a data-v-c8c019be="" href="/homestuck/4179" class="nextArrowLink">
        Jake: Take comics.
      </a>
    </p>
  </div>
</div>

Which in my version, just looks like this:

<a href="/homestuck/4179" class="console-command">Jake: Take comics.</a>

I'm using Prism for my syntax highlighting (aka what formats my code demonstrations here). However, I made this theme custom on my own, and it's dynamic (i.e., uses variables so if I change the accent colours of the page, the code will adapt and color accordingly). If I had the time, I definitely would've had fun making my own syntax highlighter from scratch. It wouldn't be too much different from my Homestuck text formatting extension on Obsidian, would've used regexShort for 'regular expressions', describes using sequences of characters used to search for text patterns to find, then format.

Enter name.