SkyHow: Difference between revisions
Page last edited 3 months ago by Xeverything11
→skyHow in other languages: spanish |
→Improved color palette!: new section Tag: Reverted |
||
| Line 62: | Line 62: | ||
== skyHow in other languages == | == skyHow in other languages == | ||
* [https://howtoes.wikioasis.org Spanish version] | * [https://howtoes.wikioasis.org Spanish version] | ||
== Improved color palette! == | |||
As you may have noticed, skyHow has implemented the new color palette, based on Tailwind v4. It takes advantage of OKLCH colors, which covers the P3 color gamut for supported devices, for brighter and punchier colors. It degrades gracefully to HEX colors in older browsers. | |||
skyHow has also implemented these variables in error, warning, success, info and neutral types. | |||
You can use the variables to set colors for text, backgrounds and borders. | |||
{| class="wikitable" | |||
! Lightness | |||
! Error | |||
! Warning | |||
! Success | |||
! Info | |||
! Neutral (New!) | |||
|- | |||
| rowspan=2 | Lightest | |||
| style="background: var(--color-error-lightest1);" |color-red-100 | |||
| style="background: var(--color-warning-lightest1);" |color-yellow-100 | |||
| style="background: var(--color-success-lightest1);" |color-green-100 | |||
| style="background: var(--color-info-lightest1);" |color-blue-100 | |||
| style="background: var(--color-neutral-lightest1);" |color-gray-50 | |||
|- | |||
| style="background: var(--color-error-lightest2);" |color-rose-100 | |||
| style="background: var(--color-warning-lightest2);" |color-amber-100 | |||
| style="background: var(--color-success-lightest2);" |color-emerald-100 | |||
| style="background: var(--color-info-lightest2);" |color-indigo-100 | |||
| style="background: var(--color-neutral-lightest2);" |color-stone-50 | |||
|- | |||
| rowspan=2 | Lighter | |||
| style="background: var(--color-error-lighter1);" |color-red-300 | |||
| style="background: var(--color-warning-lighter1);" |color-yellow-300 | |||
| style="background: var(--color-success-lighter1);" |color-green-300 | |||
| style="background: var(--color-info-lighter1);" |color-blue-300 | |||
| style="background: var(--color-neutral-lighter1);" |color-gray-200 | |||
|- | |||
| style="background: var(--color-error-lighter2);" |color-rose-300 | |||
| style="background: var(--color-warning-lighter2);" |color-amber-300 | |||
| style="background: var(--color-success-lighter2);" |color-emerald-300 | |||
| style="background: var(--color-info-lighter2);" |color-indigo-300 | |||
| style="background: var(--color-neutral-lighter2);" |color-stone-200 | |||
|- | |||
| rowspan=2 | Light<br>''(Passes WCAG AA on dark backgrounds)'' | |||
| style="background: var(--color-error-light1);" |color-red-400 | |||
| style="background: var(--color-warning-light1);" |color-yellow-400 | |||
| style="background: var(--color-success-light1);" |color-green-400 | |||
| style="background: var(--color-info-light1);" |color-blue-400 | |||
| style="background: var(--color-neutral-light1);" |color-gray-400 | |||
|- | |||
| style="background: var(--color-error-light2);" |color-rose-400 | |||
| style="background: var(--color-warning-light2);" |color-amber-400 | |||
| style="background: var(--color-success-light2);" |color-emerald-400 | |||
| style="background: var(--color-info-light2);" |color-indigo-400 | |||
| style="background: var(--color-neutral-light2);" |color-stone-400 | |||
|- | |||
| rowspan=2 | Regular<br>''(Passes WCAG AA on light backgrounds)'' | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error1);" |color-red-600 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning1);" |color-yellow-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success1);" |color-green-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info1);" |color-blue-600 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral1);" |color-gray-500 | |||
|- | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error2);" |color-rose-600 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning2);" |color-amber-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success2);" |color-emerald-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info2);" |color-indigo-600 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral2);" |color-stone-500 | |||
|- | |||
| rowspan=2 | Dark | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error-dark1);" |color-red-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning-dark1);" |color-yellow-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success-dark1);" |color-green-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info-dark1);" |color-blue-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral-dark1);" |color-gray-600 | |||
|- | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error-dark2);" |color-rose-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning-dark2);" |color-amber-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success-dark2);" |color-emerald-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info-dark2);" |color-indigo-700 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral-dark2);" |color-stone-600 | |||
|- | |||
| rowspan=2 | Darker | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error-darker1);" |color-red-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning-darker1);" |color-yellow-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success-darker1);" |color-green-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info-darker1);" |color-blue-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral-darker1);" |color-gray-800 | |||
|- | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error-darker2);" |color-rose-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning-darker2);" |color-amber-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success-darker2);" |color-emerald-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info-darker2);" |color-indigo-800 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral-darker2);" |color-stone-800 | |||
|- | |||
| rowspan=2 | Darkest | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error-darkest1);" |color-red-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning-darkest1);" |color-yellow-950 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success-darkest1);" |color-green-950 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info-darkest1);" |color-blue-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral-darkest1);" |color-gray-950 | |||
|- | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-error-darkest2);" |color-rose-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-warning-darkest2);" |color-amber-950 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-success-darkest2);" |color-emerald-950 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-info-darkest2);" |color-indigo-900 | |||
| style="color: var(--color-neutral-lightest1); background: var(--color-neutral-darkest2);" |color-stone-950 | |||
|} | |||
skyHow hopes that everyone will have a better experience when browsing skyHow. | |||
Let us know if you have any questions. | |||
[[User:Xeverything11|Xeverything11]] ([[User talk:Xeverything11|talk]]) 19:44, 3 May 2025 (UTC) | |||
Revision as of 19:44, 3 May 2025
Page Main Page/styles.css has no content.
Welcome to the free, open how-to manual!
35
articles
1
quizzes
3,702
edits
25
users
Useful links: skyHow:Policy
Why skyHow over wikiHow?
| Wiki | skyHow | wikiHow |
|---|---|---|
| MediaWiki version | 1.43.3 Latest version, supported |
1.33.0 Unsupported, obsolete version, 2019 |
| Content license | CC BY-SA 4.0 Free, reuse allowed even for commercial use |
Non-free Reuse prohibited outside wikiHow |
| Page creation | Unregistered IPs and registered users | Only autoconfirmed users |
| New pages available after creation | Immediately No quality review needed |
Few days to several weeks Available when approved via quality review |
| Ads? | No | Yes for unregistered users |
| Quizzes? | Yes Editing allowed by all users |
Yes Editing restricted to admins only |
| Pricing | Free All content |
Free Paid for some features |
| Open source? | Yes (mostly) Except for fair use images |
No (mostly) Most content not open-source |
See also: skyHow:Why skyHow?
skyHow in other languages
Improved color palette!
As you may have noticed, skyHow has implemented the new color palette, based on Tailwind v4. It takes advantage of OKLCH colors, which covers the P3 color gamut for supported devices, for brighter and punchier colors. It degrades gracefully to HEX colors in older browsers.
skyHow has also implemented these variables in error, warning, success, info and neutral types.
You can use the variables to set colors for text, backgrounds and borders.
| Lightness | Error | Warning | Success | Info | Neutral (New!) |
|---|---|---|---|---|---|
| Lightest | color-red-100 | color-yellow-100 | color-green-100 | color-blue-100 | color-gray-50 |
| color-rose-100 | color-amber-100 | color-emerald-100 | color-indigo-100 | color-stone-50 | |
| Lighter | color-red-300 | color-yellow-300 | color-green-300 | color-blue-300 | color-gray-200 |
| color-rose-300 | color-amber-300 | color-emerald-300 | color-indigo-300 | color-stone-200 | |
| Light (Passes WCAG AA on dark backgrounds) |
color-red-400 | color-yellow-400 | color-green-400 | color-blue-400 | color-gray-400 |
| color-rose-400 | color-amber-400 | color-emerald-400 | color-indigo-400 | color-stone-400 | |
| Regular (Passes WCAG AA on light backgrounds) |
color-red-600 | color-yellow-700 | color-green-700 | color-blue-600 | color-gray-500 |
| color-rose-600 | color-amber-700 | color-emerald-700 | color-indigo-600 | color-stone-500 | |
| Dark | color-red-700 | color-yellow-800 | color-green-800 | color-blue-700 | color-gray-600 |
| color-rose-700 | color-amber-800 | color-emerald-800 | color-indigo-700 | color-stone-600 | |
| Darker | color-red-800 | color-yellow-900 | color-green-900 | color-blue-800 | color-gray-800 |
| color-rose-800 | color-amber-900 | color-emerald-900 | color-indigo-800 | color-stone-800 | |
| Darkest | color-red-900 | color-yellow-950 | color-green-950 | color-blue-900 | color-gray-950 |
| color-rose-900 | color-amber-950 | color-emerald-950 | color-indigo-900 | color-stone-950 |
skyHow hopes that everyone will have a better experience when browsing skyHow.
Let us know if you have any questions.
Xeverything11 (talk) 19:44, 3 May 2025 (UTC)
