As this site is a side project, I find myself slipping in and out of the code as an idea strikes me. To prevent this from becoming a lost project, I set up issues to track.
Not only does this help me retain my focus on whatever specific feature, or content, I am working on during that time, working in branches for each issue keeps my site functional.
Until it isn’t
Previously, I mentioned that I was working on refactoring the theme to use TailwindCSS. So far, I have modified 3 files. 🎉🎉
I was showing the site to a friend of mine, Ray, who was checking out the new transitions I added for the title and images of the blog posts. Can I just say how much I love the new Astro View Transitions?
Being the rock star that he is, he wanted to see the effect on mobile.
Polypane, Desktops, and Mobile Oh My!
When developing the visuals of a site, I absolutely love working with Polypane. Having the ability to see all viewports in one go is just 👩🍳💋. Due to Polypane I knew there was a visual bug with how the menu was scrunching in on itself. I accepted this issue since I knew I would revisit it when I had a chance.
Ray’s comment, “Erm, where’s the text?”, however made me stop and question my sanity.
When working with TailwindCSS I take a mobile first approach and then modify it for different viewports. I did not this time and boy did that bite me.
At this point, I’d made changes to the header component which displays the menu, but nothing too big. The mobile version of this site has all kinds of style and build issues!
- The header links are squished to the right, but you see no text. Not even the site title.
- The blog listing has zero title or date under the images.
- The blog posts themselves have some text showing, others not. Tags are empty and there is nothing in them.
To name a few.
Wut?
So what happened? In the case of text not showing right, it’s probably a style issue. In the case of missing copy…I have no idea! 🤷♀️ The text shows in Polypane, Chrome, Firefox, and Opera on desktop. It doesn’t matter if I force dark mode or not.
New problem to solve! Man I love my hobbies. I live for puzzles like these. This particular puzzle now has me exploring how to use developer tools on mobile devices by connecting my phone to my PC. Intriguing! 🤔