Breaking down the new layout
The site turned one year old on September 26 and I didn't prepare anything. I wanted to do a big celebration but couldn't come up with anything. Coincidentally, in the same week I started working on a layout I was planning to release only in 2026 with the domain purchase, but I got so excited and happy with the result that I used the site's anniversary as an excuse and put it online two days later.
Being real, I liked the previous layout, but it didn't feel like me, if that makes sense. I'd look at the site and think it was cute, pretty, but it didn't feel like it was mine. I love purple, lilac, and all that, but my vibe is totally different. When I started working on the layout I already knew I wanted something more like dark mode, darker colors, and I really wanted a header with a dithering effect (it was so hard to find out the name of that effect btw, took me days but I finally did it).
At first I kinda got lost, used a light gray background and it looked pretty, but it wasn't it. Then I started looking for dark mode color palettes and found this one:
I didn't use the exact colors in it, but it was a really good base for the project. Finding the right image for the header also gave me a headache, I couldn't find one that looked the way I imagined after applying the effect in Photoshop. Again, it took me hours but I got there.
I think the most exhausting part was checking page by page, because even tho I use Eleventy and the same CSS across multiple pages, I still needed to check the final state of each one. I have like 15+ CSS files in my site and idk how many pages. It was a weekend's work that felt like it lasted a whole week.
For the vibe I chose, I wanted something round (?) idk how to explain it, but almost everything has 8px rounded corners, the bullet points that used to be an 8-pointed star (✷) turned into the default circle, some images also have rounded corners, and the font I picked (Nunito) has a rounded feel too. So yeah, that was the vibe.
I checked every corner of the site, but I still feel like I missed some mistake somewhere. I'm trying to let go of that and accept I'll probably only find them after some time with the new layout online. Some pages I didn't change the layout because honestly I like that they're different from the main palette, like the books page, games, shrines... I think they have their own charm.
I also chose not to use a custom cursor this time, I feel like this layout needed the default one. I changed the favicon and it kinda hurt my heart, but the little purple butterfly I used before didn't make sense anymore with the new layout.
My old layout had lots of little Pokémon stuff and I only removed them in this one because I thought it didn't match, but I was really sad about it because I liked them, especially the code that would show one of my fav Pokémon randomly.
One thing I learned is that using :root in CSS makes things a lot easier, especially if you're coding in VS Code. I think if I were more organized with my files I could've finished this layout faster, but whatever, the important thing is it's done. I hope people like it as much as I liked how it turned out.