Another Door

One more thing:

If you somehow manage to screw up your theme to the point where the whole pub won't load correctly, including the forms necessary to (re)set said theme (yes, you've guessed it: I am speaking from experience:), here's an easy way back:

curl -b midn="$(cat ~/.config/.midnight)"\
	 -F theme=""\
	 https://midnight.pub/theme/update

Of course you'll need a valid session token in "~/.config/.midnight", if you don't have that, just login via curl and store the cookie:

curl -c ~/.config/.midnight\
	 -F name=<your nick>\
	 -F "password=<your password>"\
	 https://midnight.pub/check-login

To use that cookie the way it was intended by m15o you'll have to strip it down so the file "~/.config/.midnight" only contains the token/base64 string or modify the curl command, to reset the theme:

curl -b ~/.config/.midnight"\
	 -F theme=""\
	 https://midnight.pub/theme/update

More information on this topic can be found here:

Ok, to put the cart before the horse, so to speak, you now have the option to limit your choice of logos.

If there is a sign that does not correspond to your taste at all: just exclude it!

Check out ~euromancer's site for detailed instructions:

Thanks bro:D

I can't believe I missed this, it's so cool! These logos are stunning!

I pasted this in my theme but nothing happened :(

That's actually quite funny, smolweb adopting bloatweb's JS

That idea with misusing user styles never occured to me!

Indeed, this looks damn good! I love it.

Although there is an issue with indices: the provided script's object's keys start at 1, not 0, so sometimes we get undefined instead of a logo.

I let myself do the fix and maybe clean up the code?

</style>
<script type="text/javascript" src="https://she12.midnight.pub/logos"></script>
<script type="text/javascript">
  function randomizeLogo() {
    const logo_container = document.getElementsByTagName('pre')[0];

    let first_sign_set = false;
    let first_sign = 0;
    let last_sign = 0;

    for (logo_key in logos) {
      // Logo container provided by the script loaded above
      // actually starts from 1, not 0, so sometimes the logo
      // is undefined.

      // We do this so we get the first sign right no matter
      // of the starting index.

      // Just in case ~she12 decides to fix the issue or
      // if any new logos are added.

      last_sign = logo_key;

      if (!first_sign_set) {
        // Set the first sign exactly once.

        first_sign = logo_key;
        first_sign_set = true;
      }
    }

    function getRandomIntInclusive(min, max) {
      const min = Math.ceil(min);
      const max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function setLogo(logo_key) {
      logo_container.innerHTML = logos[logo_key];
    }

    let current_sign_key = getRandomIntInclusive(first_sign, last_sign);

    setLogo(current_sign_key);

    logo_container.onclick = function() {
      current_sign_key++;

      if (current_sign_key > last_sign) {
        current_sign_key -= (last_sign - first_sign);
      }

      setLogo(current_sign_key);
    };
  }

  if (window.location == "https://midnight.pub/") {
    window.onload = randomizeLogo;
  }
</script>
<style type="text/css">

That's some creative use of user styles. Now endless possibilities of scripting opened to me! I guess I have quite a space to be toying around now. Never thought about it since the one cannot install GreaseMonkey on mobile Safari.

Edit: Whoopsie, don't mind me. I missed the part about default logo and pasted the script as it is. Didn't test it much the way you intended it to be used. I guess it was throwing undefined error because of me not paying enough attention. Even though, enjoy my script! Although it won't let you set the default preferred logo.

Edit 2:

Now it does support preferred logos. I also got rid of comments since they can be seen above.

</style>
<script type="text/javascript" src="https://she12.midnight.pub/logos"></script>
<script type="text/javascript">
  function randomizeLogo() {
    const logoContainer = document.getElementsByTagName('pre')[0];
    const preferredLogo = null;
    let firstSignSet = false;
    let firstSign = 0;
    let lastSign = 0;

    for (const logoKey in logos) {
      lastSign = logoKey;
      if (!firstSignSet) { firstSign = logoKey; firstSignSet = true; }
    }

    function getRandomSignKey() {
      const min = Math.ceil(firstSign);
      const max = Math.floor(lastSign);
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    const setLogo = (logoKey) => logoContainer.innerHTML = logos[logoKey];
    currentSignKey = typeof preferredLogo == 'number' ? preferredLogo : getRandomSignKey();
    setLogo(currentSignKey);

    logoContainer.onclick = function() {
      currentSignKey++;
      if (currentSignKey > lastSign) { currentSignKey -= (lastSign - firstSign + 1); }
      setLogo(currentSignKey);
    };
  }

  if (window.location == "https://midnight.pub/") { window.onload = randomizeLogo; }
</script>
<style type="text/css">

Just change the value of preferredLogo somewhere at the top from null to the index you prefer!

My favorite one is 11. It got some underground vibe.

Edit 3:

logoContainer.classList.add('logo');
.logo { overflow: hidden; }

Add these lines at appropriate places so too wide logos won't make you suffer the horizontal scroll bar on narrow clients! Had to do it on mobile Safari.

Or just

@media only screen and (max-width: 900px) { pre { overflow-x: scroll; } }

It made browsing on phone much better while not changing desktop experience.

I'm a huge fan of what you've done and your art! This all makes me excited. Crazy how letters of a screen and simple tricks seem much more impressive than all the rest of the web I've seen in the last few days. I must say the web is an incredible platform when leverage for good! The line when you talk about mining crypto really made me laugh. :) Thanks for what you've done, this new theme looks just perfect on my page!

she12! I can't believe what I'm seeing. I can't recall when was the last time I was genuinely excited to look at JavaScript. I would've never thought about using the custom CSS theme to pass a <script> tag. And now I can't help but think about the world of possibilities this opens! A little jukebox? Maye a <markee> tag prompting news from Nightfall City...

<marquee>NFC News: HoloBrain AI Concert Sold Out. Line getting out of hands on Main Street.</marquee>

Thinking about it, the logos you've created really add to the world building and make the place even more cozy. I was already a fan when I read the comics you wrote! Bartender, next round on me!

Thanks she12!