💄 style(error): enhance visibility of Zola errors

[welpo]

Summary

This PR introduces minimal CSS styling to enhance the visibility of Zola error messages during development. It centers the error messages both vertically and horizontally on the screen and applies consistent styling using theme variables.

CSS specificity should target only Zola errors and not affect user content.

Changes

• Added a new SCSS file zola-error.scss to style Zola error messages
• Positioned error messages in the center of the viewport
• Applied theme-consistent colors using existing CSS variables
• Improved readability of error messages

Accessibility

The changes improve the visibility of error messages, which enhances the overall accessibility of the development process. The centered position and improved contrast make the messages easier to notice and read for all users.

Screenshots

Before

Hard to see, at the very bottom of the page, below the footer:

After

Floating, centered:

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this change
• I have updated theme.toml with a sane default for the feature
• I have made corresponding changes to the documentation:
  • Updated config.toml comments
  • Updated theme.toml comments
  • Updated "Mastering tabi" post in English
  • (Optional) Updated "Mastering tabi" post in Spanish
  • (Optional) Updated "Mastering tabi" post in Catalan

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	fff8e65
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/66a1406e301e5800084544f3
😎 Deploy Preview	https://deploy-preview-359--tabi-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.