A few days ago I started messing with audio tags and CSS flexbox. Honestly flexbox is surprisingly easy to use when you know what's going on. I am still not very good at it but I'm sure that with practice I'll get better.
I've improved the entrance a lot. I actually used some proper CSS flexbox so that's great. The text slightly overflows on my phone but it's still legible. My phone is quite old and in turn has a lower resolution than most phones today. So I'm sure it's fine.
Now there's an info section on how to enable audio on my website and a short explanation of what a transformer even is. There's also a message in Danish for the people in my life who visit my website.
I've made my Archive less messy by using CSS flexbox. I also figured out how to make the Javascript generate the symbol I wanted before each post to better show where the titles start and end. (⏹)
I've made a page for my favourite albums. In case any of you want some music recommendations or to marvel at my poor taste.
I've added audio on different parts of the site. They do have a slight delay which is extremely annoying. If someone knows how to make audio play when clicking an image without any delay, I'd love to hear how. I'll try my best to find a solution in the meantime. The only reason why the button in the entrance has no delay is because I'm using a website to generate it, but it won't share how it actually makes the button and just provides you with an iframe link.
Javascript is very cryptic and seemingly has innumerous solutions to any problems I have, so it's very difficult for me to understand how it works. In general I am very happy with how much I've learned so far and I feel like I can make almost everything I want on this website.
Upcoming pages:
- Gallery of all Transformers characters and a list of terms and lore you need to know before getting into the franchise.
- Individual pages where I talk more about my favourite albums.
- Iron Lung page. I should be setting it up already to be honest so that I'm ready when it can be streamed. (I need high-quality images)
Update from a few days later:
THE DECEPTICONS POISONED MY CODE.
Okay not really. I found out why the text was overflowing. It was funny how it was only the section about Transformers that broke.
For some reason the lines with "/" somewhere in them made the <´details´> section completely ignore my padding instructions??? So the text overflowed horribly on mobile. Usually I wouldn't give a shit but it's pretty important at the entrance since that's where I try to convince people to open my website on a PC.
Did the slash just confuse the code somehow? I don't see how. There was zero difference between the other <´details´> sections and they worked just fine. I even tried putting the Transformers text into one of the working sections and then that made it magically break. I only found out by testing the section line by line.
Really strange.