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

Tweak colour template

Browse source
This commit is contained in:
Talia 2020-09-30 08:58:05 +02:00
parent a4ac07de22
commit c6e7e759b2
1 changed files with 67 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
templates/palette.html
View file

@ -10,58 +10,73 @@
<h2>Primary</h2> <h2>Primary</h2>
<!-- Only override values here for slight tweaking --> <!-- Only override values here for slight tweaking -->
<div class="colors" style="--hue: var(--base-hue);"> <div class="colors" style="--hue: var(--base-hue);">
<span style="--lightness: 10%"></span> <span style="--lightness: 05%"></span>
<span style="--lightness: 20%"></span> <span style="--lightness: 15%"></span>
<span style="--lightness: 30%"></span> <span style="--lightness: 30%"></span>
<span style="--lightness: 40%"></span> <span style="--lightness: 40%"></span>
<span style="--lightness: 50%"></span> <span style="--lightness: 50%"></span>
<span style="--lightness: 60%"></span> <span style="--lightness: 60%"></span>
<span style="--lightness: 70%"></span> <span style="--lightness: 70%"></span>
<span style="--lightness: 80%"></span> <span style="--lightness: 80%"></span>
<span style="--lightness: 90%"></span> <span style="--lightness: 95%"></span>
</div> </div>
<section class="info box"> <section class="hint box">
<b>Hint:</b>
Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br> Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br>
Usage of a separate color picker tool for this step might be preferable.<br> Usage of a separate color picker tool for this step might be preferable.<br>
</section> </section>
<h2>Secondary</h2> <h2>Secondary</h2>
<div class="colors" style="--hue: calc(var(--base-hue) + var(--offset));"> <div class="colors" style="--hue: calc(var(--base-hue) + var(--offset));">
<span style="--lightness: 10%"></span> <span style="--lightness: 05%"></span>
<span style="--lightness: 20%"></span> <span style="--lightness: 15%"></span>
<span style="--lightness: 30%"></span> <span style="--lightness: 30%"></span>
<span style="--lightness: 40%"></span> <span style="--lightness: 40%"></span>
<span style="--lightness: 50%"></span> <span style="--lightness: 50%"></span>
<span style="--lightness: 60%"></span> <span style="--lightness: 60%"></span>
<span style="--lightness: 70%"></span> <span style="--lightness: 70%"></span>
<span style="--lightness: 80%"></span> <span style="--lightness: 80%"></span>
<span style="--lightness: 90%"></span> <span style="--lightness: 95%"></span>
</div> </div>
<section class="info box"> <section class="hint box">
<b>Hint:</b>
You can copy any colour to the clipboard by just clicking on its box. You can copy any colour to the clipboard by just clicking on its box.
By default colours are copied as HSLA values. By default colours are copied as HSLA values.
This can be changed in the script block at the bottom of the document. This can be changed in the script block at the bottom of the document.
</section> </section>
<h2>Secondary</h2> <h2>Tertiary</h2>
<div class="colors" style="--hue: calc(var(--base-hue) - var(--offset));"> <div class="colors" style="--hue: calc(var(--base-hue) - var(--offset));">
<span style="--lightness: 10%"></span> <span style="--lightness: 05%"></span>
<span style="--lightness: 20%"></span> <span style="--lightness: 15%"></span>
<span style="--lightness: 30%"></span> <span style="--lightness: 30%"></span>
<span style="--lightness: 40%"></span> <span style="--lightness: 40%"></span>
<span style="--lightness: 50%"></span> <span style="--lightness: 50%"></span>
<span style="--lightness: 60%"></span> <span style="--lightness: 60%"></span>
<span style="--lightness: 70%"></span> <span style="--lightness: 70%"></span>
<span style="--lightness: 80%"></span> <span style="--lightness: 80%"></span>
<span style="--lightness: 90%"></span> <span style="--lightness: 95%"></span>
</div> </div>
<section class="info box"> <section class="hint box">
<b>Hint:</b> By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
This makes it easier and quicker to make adjustments.
</section>
<h2>Neutral</h2>
<div class="colors" style="--hue: var(--base-hue); --saturation: 5%;">
<span style="--lightness: 05%"></span>
<span style="--lightness: 15%"></span>
<span style="--lightness: 30%"></span>
<span style="--lightness: 40%"></span>
<span style="--lightness: 50%"></span>
<span style="--lightness: 60%"></span>
<span style="--lightness: 70%"></span>
<span style="--lightness: 80%"></span>
<span style="--lightness: 95%"></span>
</div>
<section class="hint box">
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated. By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
This makes it easier and quicker to make adjustments. This makes it easier and quicker to make adjustments.
</section> </section>
@ -75,16 +90,15 @@
<!-- ======================================== --> <!-- ======================================== -->
<style> <style>
:root { :root {
font-size: 1em; font-size: 1em;
color: hsl(220deg, 8%, 20%); color: hsl(220deg, 8%, 20%);
color: hsl(220deg, 8%, 20%); font-family: "Open Sans", sans-serif;
font-family: "Open Sans", sans-serif; }
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
code { code {
font-family: "Hack", monospace; font-family: "Hack", monospace;
@ -94,7 +108,7 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;
background: white; background: hsl(200deg, 5%, 95%);
} }
/* The following only does font size shenanigans! */ /* The following only does font size shenanigans! */
@ -122,7 +136,7 @@
width: calc((3rem + .6rem * 2) * 9); width: calc((3rem + .6rem * 2) * 9);
font-style: italic; font-style: italic;
border-radius: var(--radius); border-radius: var(--radius);
background-color: hsl(220deg, 14%, 96%); background: hsla(200deg, 5%, 92%, 1);
box-shadow: .0em .1em .2em inset hsl(220deg, 8%, 80%); box-shadow: .0em .1em .2em inset hsl(220deg, 8%, 80%);
padding: 1em 2em; padding: 1em 2em;
@ -130,11 +144,9 @@
margin: 2em 0em; margin: 2em 0em;
} }
.info, .success, .accept { --color: rgb(102, 204, 51); } .hint, .info { --color: hsla(calc( 200deg - calc(360deg / 3)), 80%, 50%, 1) }
.warning, .acknowledge { --color: rgb(230, 182, 25); }
.error, .cancel { --color: rgb(204, 51, 77); }
.box::before { .box::after {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
@ -146,6 +158,12 @@
content: ''; content: '';
} }
.box.hint::before {
content: "Hint: ";
display: inline-block;
font-weight: bold;
}
div.colors { div.colors {
--separation2: .6em; /* Halved separation */ --separation2: .6em; /* Halved separation */