darkwiiplayer
/
.profile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch colours around and reduce saturation somewhat

This commit is contained in:
Talia 2022-10-11 09:52:26 +02:00
parent 51a998e20b
commit 7702ca2ac4
1 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
templates/palette.html
View File

@ -11,39 +11,33 @@
</section> </section>
<!-- TODO: Change the base hue and offset here --> <!-- TODO: Change the base hue and offset here -->
<section style="--base-hue: 280deg; --saturation: 50%; --offset: calc(360deg / 6)"> <section style="--base-hue: 280deg; --saturation: 40%; --offset: calc(360deg / 6)">
<h2>Primary</h2> <h2>Primary</h2>
<!-- Only override values here for slight tweaking --> <colour-palette name="primary" style="--hue: calc(var(--base-hue) - var(--offset));"></colour-palette>
<colour-palette name="primary" style="--hue: var(--base-hue);"></colour-palette>
<section class="hint box"> <section class="info box">
Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br> The main colour of the scheme. Should be used for the majority of the content.
Usage of a separate color picker tool for this step might be preferable.<br>
</section> </section>
<h2>Secondary</h2> <h2>Secondary</h2>
<colour-palette name="secondary" style="--hue: calc(var(--base-hue) + var(--offset));"></colour-palette> <colour-palette name="secondary" style="--hue: var(--base-hue); --saturation: 30%;"></colour-palette>
<section class="hint box"> <section class="info box">
You can copy any colour to the clipboard by just clicking on its box. A secondary colour to provide some contrast to the primary colour without drawing too much attention.
By default colours are copied as HSLA values.
This can be changed in the script block at the bottom of the document.
</section> </section>
<h2>Tertiary</h2> <h2>Contrast</h2>
<colour-palette name="tertiary" style="--hue: calc(var(--base-hue) - var(--offset));"></colour-palette> <colour-palette name="contrast" style="--hue: calc(var(--base-hue) + var(--offset)); --saturation: 50%;"></colour-palette>
<section class="hint box"> <section class="info box">
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated. This colour is intended to provide a lot more contrast to the primary colour for elements that require user attention.
This makes it easier and quicker to make adjustments.
</section> </section>
<h2>Neutral</h2> <h2>Neutral</h2>
<colour-palette name="neutral" style="--hue: 210deg; --saturation: 5%;"></colour-palette> <colour-palette name="neutral" style="--hue: 210deg; --saturation: 5%;"></colour-palette>
<section class="hint box"> <section class="info box">
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated. Just a more neutral scale of gray tones
This makes it easier and quicker to make adjustments.
</section> </section>
</section> </section>
@ -168,7 +162,7 @@
box-shadow: .0em .1em .2em inset #0006; box-shadow: .0em .1em .2em inset #0006;
} }
.hint, .info { --color: hsla(calc( 280deg - calc(360deg / 6)), 50%, 50%, 1) } .hint, .info { --color: hsl(220deg, 40%, 50%) }
.box::after { .box::after {
display: block; display: block;
@ -196,7 +190,7 @@
border-radius: 1.8em; border-radius: 1.8em;
font-weight: bold; font-weight: bold;
background-color: hsl(340deg, 50%, 40%); background-color: hsl(340deg, 50%, 40%);
color: hsl(210deg, 5%, 95%); color: hsl(340deg, 50%, 95%);
margin: .4em; margin: .4em;
} }