🐛 fix(home-banner): allow missing image & correct spacing

[welpo]

Summary

This PR introduces a series of enhancements and fixes related to the home banner. Specifically, it addresses issues with image path formatting, responsive design, and CSS optimisation.

---

Changes

1. Optional image for home banner

   • The theme now gracefully handles missing images for the home banner.
   • Resolves issue Can't seem to not have an image on the front page? #122.

2. Spacing and alignment fixes

   • Corrected the right padding in the entire header on mobile views.
   • Center aligned the image on mobile for a more polished look.
   • See the gif below.

3. Improved image path handling

   • Removed the necessity for $BASE_URL in specifying home banner images.
   • This $BASE_URL replacement will be deprecated in future updates.

4. CSS cleanup and optimisation

   • Replaced pixel values with rem for better scalability.
   • Employed SCSS nesting for more maintainable and readable code.

---

GIF

Before this PR, the entire banner had right padding. After this PR, the text takes up the proper width and the image is centered:

---

Additional Notes

Please note that the $BASE_URL placeholder for image paths will be deprecated and removed in future updates. Update your configurations accordingly.

Old example. Still works, but will throw an error in the future:

header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" }

Proper format:

header = {title = "Hello! I'm tabi~", img = "img/main.webp" }