The answer is no, but goodness does this look good? Now a few days ago, I talked about the themes that I added to the site. You can still see them if you’re on desktop, there’s a little menu in the lower right side. My favorite so far has been ayu, but they’re all pretty damn good. What’s your favorite?

With that customization done, though, there were a few sore spots. First, I wanted to make sure that the scroll barmatched the theme. Now it does. Even on mobile, you get a nice colored scrollbar. It should work in all browsers, even, so job done. It looks amazing, and I’m more than a little proud of it.

 /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-secondary);
  }

Then came the comments. I had someone comment about how the default I was using didn’t look that great and was in fact unreadable when you were logged out. Given that most of my commenters don’t ever log in, that was a problem. I spent some time in the Hyvor back end to see if their default tools could make it look good, but I was only partially satisfied. It was readable, but it still stood out, since it didn’t match the theme.

Now, Hyvor offers some ability to customize with CSS, but it’s very limited. So, after some Googling, I manged to figure out how to make the comment section match the chosen theme with some javascript injection:

  function updateHyvorStyles(comments) {
    const styles = getComputedStyle(document.documentElement);

    const cssVars = `
      :host {
        --ht-color-text: ${styles.getPropertyValue('--text-primary').trim()};
        --ht-color-accent: ${styles.getPropertyValue('--accent').trim()};
        --ht-color-accent-text: ${styles.getPropertyValue('--bg-primary').trim()};
        --ht-color-box: ${styles.getPropertyValue('--bg-secondary').trim()};
        --ht-color-box-text: ${styles.getPropertyValue('--text-primary').trim()};
        --ht-color-box-text-light: ${styles.getPropertyValue('--text-secondary').trim()};
        --ht-color-input: ${styles.getPropertyValue('--bg-tertiary').trim()};
        --ht-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        --ht-box-radius: 4px;
        --ht-box-border: 1px solid ${styles.getPropertyValue('--border').trim()};
        --ht-button-radius: 4px;
      }
    `;

    comments.setAttribute('custom-css', cssVars);
  }

I’m not sure if that’s the best way to do it, as I’m a noob when it comes to js, but it works really well. Now when you switch themes, the comment section changes too. It looks amazing.

After that, I got the /images sub-post type integrated into the main feed. That was a bit of a redo, since I had spent time separating them when I created it, but I like it better this way. All images are styled a bit differently, just like link posts, so they stand out. I’ve also done some more tweaking on that special style so that more parts of it match. Little things, but it all looks better.

I know that I’ve been doing a lot of these posts lately. This is like the third one this week, but goodness, I’m having a blast. I have more to do too, so it’s not over yet. Though, I do think that the big stuff is done. I may make some more special posts, but if every post stands out, then they’re not that special. I am thinking about some ways to make the book journal better. I know a lot of people put in the book cover and book info, but I think I like it a bit more minimal. I’m not sure where I will go with that yet.

Anyway, that’s it for this one. I’ll try to slow down on the posts about this, but I’m just too happy with how this is going not to share.