Responsive and Accessible Blogr Landing Page

What did I implement?

• Responsive design (sass + css variables).
• Aim to match the design (used Polypane browser).
• Modified the mobile menu design slightly and added vertical scrollbar.
• I tried the :has selector in this challenge. It wasn't strictly neccessary, and it looks like it only works correctly in Chrome as of now, but I wanted to try it anyway.
• Images - Tried to use pseudo elements with background images for illustratory images, instead of the <img /> HTML element.
• Accessible - Tried to implement the disclosure pattern recommended by W3C for the menu button and also the submenu links. Tested with NVDA screen reader.
• MVC Architecture - Implemented the navigation submenus using the MVC pattern. The "state" in the model is the single source of truth.

What can be done better?

• I had a hard time identifying the right colors, so I didn't use all of the colors provided in the style guide.
• Background image of hero section - it doesn't exactly look like in the design.
• Implement focus trapping within the mobile menu.

Any feedback, specifically on the MVC implementation, is much appreciated. Thank you!