Hey, welcome to the forum.
Like the colors and the content! Maybe you could make the code more readable, like tidy the css (if it was originally sass/scss you can add those in the codepen css field as well.) Maybe add some comments to give some hints what you javascript does …
I inserted non-minimized CSS and added comments to JS as you suggested.
Just to clarify: the style was written on one file of vanilla CSS, which was then put through autoprefixer and csso. Initially, I tried to follow BEM methodology.
About halfway through tablet layout scrolling back and forth for each tiny element became tedious (to put it politely). So I said “screw it” and wrote a bunch crutches, basically.
I’m getting a bit of an old school Myspace vibe from that page. The design is pretty retro and seems to be in keeping with the band style.
I do like that there are distinct differences between the different layouts and switching from one “static” layout to another is one way of doing it that is perfectly valid. It does, however, make your life a bit harder not using any fluid design at all (letting elements shrink/grow, using non media query layout switching like flex wrapping, minmax grids, etc.).
I think the almost 600 lines of CSS may point to this and you are changing a lot of styles in the media queries. Some of the CSS is vendor prefixing, and some may just be a side effect of using SCSS/BEM, but it still feels like a lot of CSS for that page. Anyway, that is really more about ease of extensibility/maintainability and speed at which you can code such a page. And as we only have the compiled CSS it is hard to really gauge.
Don’t really have much to critique. I would like the album hover effect to return back to its original state by transitioning back. Using transitions instead of animations can make that a bit easier and for most simple hover effects I would suggest using transitions instead.
You definitely put a lot of effort into the page and that is great to see and I think you did a great job. Keep it up!
