Okay, so I'm not super tech-savvy when it comes to designing websites. In fact, much of my web design is borrowed code from places like W3 Schools, SoloLearn, and even other websites by using their source code. I don't use JavaScript in my Rock Band Customs Project website because I want it to be simple to use without all the frustrating scripts that slow down your browser. So, it's very exhilarating when I can achieve something using only HTML5 and CSS that, normally, people suggest using JavaScript to do it because it's "easier".
Like a sliding sidebar for smartphone compatibility. Ever since a year ago when I had launched the website part of the project, I had actually completed basic HTML, CSS, and JavaScript training, and I even made some local websites for myself, but not only did I keep having to re-learn everything, I found that things kept breaking because I was using links that expired too quickly due to moved web pages, and JavaScript security was tightened to the point that it was near impossible to use iFrames with JavaScript embedded in them.
So, when I designed the Rock Band Customs Project GitLab website while it was still under the cover of the PROJECT DELUXE placeholder name, I decided to completely make the site from scratch using only HTML and CSS - no JavaScript, because I didn't want there to be issues. I still like JavaScript, but it does tend to slow down even local web pages, and can cause problems with a web page if it relies too heavily on JavaScript and then something in JS breaks (which was often).
The Rock Band Customs Project website as it can currently be seen on a desktop, using a monitor of AT LEAST 1200px wide.
This led to compatibility issues. I tried accessing the site via a smartphone, and it was horrible in landscape mode. All the boxes, images, and everything was squished, and font is barely readable due to staying a static size that doesn't scale up for smartphone screens.
So, this year, I thought I'd work on that issue a little more. I knew I could use CSS to make the sidebar hide away, but I had trouble doing so. I tried using a toggle button with a sandwich menu icon, but that hardly worked with the sidebar, which is an HTML document displayed via iFrame -
the guide I followed built a menu from scratch within the current HTML document, which I didn't want because that would mean I would have to inject and update the sidebar on EVERY WEBPAGE, which I was doing at first when I created the site, but I hated it and switched to a separate HTML doc.
Ironically, the solution was right in front of me: by using transition properties and the
:hover tag, I was finally able to make a hideaway sidebar:

The hidden sidebar, seen on mobile screens and any display smaller than 1100px wide - hidden (left) and revealed on cursor hover or finger/stylus tap (right).
Now, the feature is still new, and I haven't ironed out all the kinks yet - fonts still appear small on some devices, for instance - but at least I tackled one glaring problem already! I'll try to fix the others soon enough, but for now, I already like where this is going!