docs: Make vitepress components css files more readable and simply

[PatrykKuniczak]

Overview

This pull request focuses on improving the visual consistency and maintainability of the documentation site's components by refactoring and standardizing styles, updating class names, and enhancing accessibility. The changes include a major CSS overhaul to use more semantic class names and CSS variables, improved component structure, and minor accessibility improvements.

Component and Style Refactoring:

• Refactored all .css files of components, to use new native nesting and remove unnecessary props.
• Fixed path of assets for Artemis II img

Accessibility Improvements:

• Added alt text to author avatar images in BlogLayout.vue for better accessibility.

Documentation Content:

• Removed inline color styling from the main index page heading for a cleaner look.

noinspection

• Added CssUnresolvedCustomProperty to ignore missing reference error on IDE, for build time css vars.

Manual Testing

Let's run docs:dev

Related Issue

Part of #2014

[netlify]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	1299230
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/69e20b14c4963400082e5301
😎 Deploy Preview	https://deploy-preview-2272--creative-fairy-df92c4.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 project configuration.

[pkg-pr-new]

Open in StackBlitz

@wxt-dev/analytics

npm i https://pkg.pr.new/@wxt-dev/analytics@2272

@wxt-dev/auto-icons

npm i https://pkg.pr.new/@wxt-dev/auto-icons@2272

@wxt-dev/browser

npm i https://pkg.pr.new/@wxt-dev/browser@2272

@wxt-dev/i18n

npm i https://pkg.pr.new/@wxt-dev/i18n@2272

@wxt-dev/is-background

npm i https://pkg.pr.new/@wxt-dev/is-background@2272

@wxt-dev/module-react

npm i https://pkg.pr.new/@wxt-dev/module-react@2272

@wxt-dev/module-solid

npm i https://pkg.pr.new/@wxt-dev/module-solid@2272

@wxt-dev/module-svelte

npm i https://pkg.pr.new/@wxt-dev/module-svelte@2272

@wxt-dev/module-vue

npm i https://pkg.pr.new/@wxt-dev/module-vue@2272

@wxt-dev/runner

npm i https://pkg.pr.new/@wxt-dev/runner@2272

@wxt-dev/storage

npm i https://pkg.pr.new/@wxt-dev/storage@2272

@wxt-dev/unocss

npm i https://pkg.pr.new/@wxt-dev/unocss@2272

@wxt-dev/webextension-polyfill

npm i https://pkg.pr.new/@wxt-dev/webextension-polyfill@2272

wxt

npm i https://pkg.pr.new/wxt@2272

commit: 1299230

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.53%. Comparing base (e64058b) to head (1299230).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2272      +/-   ##
==========================================
- Coverage   79.69%   79.53%   -0.16%     
==========================================
  Files         130      130              
  Lines        3811     3811              
  Branches      864      864              
==========================================
- Hits         3037     3031       -6     
- Misses        689      694       +5     
- Partials       85       86       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[PatrykKuniczak]

@aklinker1 In addiction, let's tell me if it's possible to add some props to docs config, to enforce run browser automatically on docs:dev like it's for wxt-demo, i was trying with webExt: {startUrls: }, but it wasn't working.

[PatrykKuniczak]

@aklinker1 Css props of main page in custom.css isn't intuitive, this should be exported somewhere else, but not in that PR.