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 2 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 😄

[aklinker1]

You gotta stop force pushing... now I have to re-review the entire PR instead of just looking at what changed since my last comment.

[aklinker1]

Last time I reviewed it running the docs locally, didn't notice any changes... but this time I reviewed it against the Netlify preview and saw lots of differences. Maybe I didn't run your PR or something last time 🤔

So some requested changes:

In all recordings, the left tab is the current wxt.dev site, right is from your PR on netlify.

• Blog homepage has changed significantly
  • "Blog" font style (size and weight) changed - Make it look like it did before
  • New dividers added - please remove them
  • Padding is excessive compared to before - use the same amount of padding as before
  • I prefer not having a hover background - remove it

Screencast_20260510_113951.webm

• Blog layout broken
  • Header missing most formatting - make it look like it did before
  • MD content not styled correctly - revert whatever change broke this

Screencast_20260510_114333.webm

• Entrypoint patterns look the same, good.

Screencast_20260510_114618.webm

• Examples
  • I like your sidebar better - but can you add rounded corners to all four corners of each of the 3 filter sections?
  • I also like that you got rid of the extra padding of the final paragraph in each example description.

Screencast_20260510_115132.webm

[PatrykKuniczak]

You gotta stop force pushing... now I have to re-review the entire PR instead of just looking at what changed since my last comment.

Ok, i though it's problem only when i was doing it here.
On local i always rebasing from main then i need to --force-with-lease, but i can start merging