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	e178885
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/69f5ad0a36deaa000814d54a
😎 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.
🤖 Make changes	Run an agent on this branch

---

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: e178885

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.65%. Comparing base (e75e534) to head (e178885).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2272      +/-   ##
==========================================
- Coverage   79.73%   79.65%   -0.08%     
==========================================
  Files         131      131              
  Lines        3804     3804              
  Branches      861      861              
==========================================
- Hits         3033     3030       -3     
- Misses        686      690       +4     
+ Partials       85       84       -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.

[aklinker1]

Thanks, these were good changes. Much easier to review when it's just these changes in the PR.

One change

[PatrykKuniczak]

@aklinker1 Done 😄