Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
Line 1: Line 1:
<templatestyles src=":skyHow/styles.css" />
<templatestyles src=":Main Page/styles.css" />
__NOTOC__
__NOTOC__
<div class="main-page-header" style="font-size: 3rem; font-weight: 500; text-align: center; padding: 0.5rem;">A free, open how-to manual to <div class="tasks-group">
<div class="main-page-header" style="font-size: 3rem; font-weight: 500; text-align: center; padding: 0.5rem;">Welcome to the <span style="border-radius: 4px; font-weight: bold; border-radius: 4px; background-image: linear-gradient(10deg, var(--color-primary-lighter1), var(--color-primary-lighter2)); padding: 0.2em;">free,&nbsp;open</span> how-to manual!</div>
<div class="task-element task-cooking">
{{material icon|cooking|size=1.1em}}<span> cook</span></div>
<div class="task-element task-crafting">
{{material icon|draw_collage|size=1.1em}}<span> craft</span></div>
<div class="task-element task-solving">
{{material icon|troubleshoot|size=1.1em}}<span> solve</span></div>
<div class="task-element task-building">
{{material icon|construction|size=1.1em}}<span> build</span></div>
</div> anything!</div>


<div class="main-page-in-numbers" style="display: flex; text-align: center; flex-wrap: wrap;">
<div class="main-page-in-numbers" style="display: flex; text-align: center; flex-wrap: wrap;">
Line 68: Line 59:


See also: [[skyHow:Why skyHow?]]
See also: [[skyHow:Why skyHow?]]
== Follow us on ==
* [[File:YouTube full-color icon (2024).svg|32px]] [https://www.youtube.com/@skyHow-wiki Our official YouTube channel]


== skyHow in other languages ==
== skyHow in other languages ==
* [https://howtoes.wikioasis.org Spanish version]
* [https://howtoes.wikioasis.org Spanish version]


[[es:skyHow]]
== 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)
Please note that all contributions to skyHow are considered to be released under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) (see skyHow:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!
Cancel Editing help (opens in new window)

Templates used on this page:

Retrieved from "https://howto.wikioasis.org/wiki/SkyHow"
Retrieved from "https://howto.wikioasis.org/wiki/SkyHow"