This is my solution to the Blogr landing page challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
As an extra challenge I'll do the following things:
- Use fluid typography
- Improve keyboard accessibility for header & footer navigation so that users can use arrow keys and esc key
- Create custom focus state using sass mixin
- Make the website as accessible as I can
- Astro - Static Site Generator
- Semantic HTML5 markup
- SCSS
- Vanilla CSS
- Vanilla JavaScript
- I learned of the getBoundingClientRect() method and how it works. More specifically I used the width property of it to be able to make the main navigation responsive with JavaScript and not by using the css media query. Also, I used it to prevent dropdown menu to go outside the viewport. This method is used in Navigation.astro and ButtonDropdown.astro components.
- I learned about Location Interface and how by using window.location.pathname it's possible to make the link of a current page active. This method is used in Navigation.astro component.
- Fluid Typography - Smashing Magazine
- Accessible Astro Starter by Mark Teekman - This was my starting point for creating accessible navigation in Astro. I did the HTML structure a bit different, as I tried to make it more simple from mine point of view. The JavaScript code is mainly the same, but I did some minor changes.