my blinking cursor title code

12 Aug, 2024

I talked about wanting to change my blog design and just in case I'll remove the blinking cursor design from my title and for anyone that is interested, I thought I should share the code here.

Things to know:

• Font is JetBrains Mono.
• Fallback fonts: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
• The title is actually the h2; I display: none; the title h1. This is because applying the cursor blinking animation to the h1 title would have caused the blinking effect to be applied to any other h1 such as the each blog post title.
• The code adds a blinking 'a' with a changing background (color depending on whether darkmode or lightmode is used). It's been so long I actually forgot why I solved it this way, I guess because it was hard to define to just apply it to the last letter of the title. So instead, it appends the last letter, in my case the 'a', to the title.
• Disadvantage to that approach is that my blog title will show up everywhere else as "hi, this is av" in the meta description of embeds, but I think it's a little funny. Might be a dealbreaker for you, though.

Here is the relevant part.

        .lightmodeblink {
            --c: #444;
        }

        .darkmodeblink {
            --c: white;
        }

        @keyframes cursor-blink {
            50% {
                content: "a";
                color: var(--c);
                background: none;
            }

            100% {
                content: "a";
                color: white;
                background: darkgray;
            }
        }

        h2::after {
            content: "a";
            color: white;
            width: 20px;
            height: 35px;
            border-radius: 3px;
            background: darkgray;
            display: inline-block;
            animation: cursor-blink 1.0s steps(1) infinite;
}

You might have to adjust other CSS in your code.

#webdev