diff --git a/code/keebs.js b/code/keebs.js index 2bd5d9b7..8fa27a30 100644 --- a/code/keebs.js +++ b/code/keebs.js @@ -1,16 +1,14 @@ /** *
- * - *

- * powered by x-keyboard - * géométrie : - * - *

+ *
+ * + *
+ *
+ *
…
+ *
…
+ *
* - * + * * * *
@@ -54,7 +52,7 @@ for (const keeb of document.querySelectorAll('.keyboard')) { const dialog = keeb.querySelector('dialog'); const keyboard = keeb.querySelector('x-keyboard'); const preview = keeb.querySelector('object'); - const input = keeb.querySelector('input'); + const input = keeb.querySelector('input[placeholder]'); const form = keeb.querySelector('form'); const geometry = keeb.querySelector('select') || document.getElementById('geometry'); const button = keeb.querySelector('button'); @@ -101,15 +99,15 @@ for (const keeb of document.querySelectorAll('.keyboard')) { /** * Open/Close modal */ - if (button) button.onclick = () => { + button?.addEventListener('click', () => { dialog?.showModal(); input.value = ''; input.focus(); - } - input.onblur = () => { + }); + input.addEventListener('blur', () => { keyboard.clearStyle() dialog?.close(); - } + }); /** * Keyboard highlighting & layout emulation @@ -119,7 +117,7 @@ for (const keeb of document.querySelectorAll('.keyboard')) { const pressedKeys = {}; // highlight keyboard keys and emulate the selected layout - input.onkeydown = event => { + input.addEventListener('keydown', event => { pressedKeys[event.code] = true; const value = keyboard.keyDown(event); @@ -131,7 +129,7 @@ for (const keeb of document.querySelectorAll('.keyboard')) { return true; // don't intercept special keys or key shortcuts } return false; // event has been consumed, stop propagation - }; + }); input.addEventListener('keyup', event => { if (pressedKeys[event.code]) { diff --git a/code/x-keyboard.js b/code/x-keyboard.js index e6b7c545..bcafb6ef 100644 --- a/code/x-keyboard.js +++ b/code/x-keyboard.js @@ -960,7 +960,7 @@ const themes = ` .dk .level4 { display: none; } @media (prefers-color-scheme: dark) { - rect, path { stroke: #777; fill: #444; } + rect, path { stroke: #777; fill: #4d4d4d; } .specialKey, .specialKey rect, .specialKey path { fill: #333; } g:target rect, .press rect, g:target path, .press path { fill: #558; } text { fill: #bbb; } diff --git a/www/assets/css/keebs.css b/www/assets/css/keebs.css index c43e87e9..e2340a5c 100644 --- a/www/assets/css/keebs.css +++ b/www/assets/css/keebs.css @@ -39,6 +39,10 @@ * ╰───────────────────────────────────────────────────────────────╯ **/ +.keyboard [hidden] { + visibility: hidden; +} + .keyboard form { display: flex; justify-content: right; @@ -79,6 +83,11 @@ cursor: pointer; } +.keyboard form input:hover { + background-color: var(--bg-accent); + opacity: 1; +} + .keyboard form input:checked { background-image: linear-gradient(180deg, var(--bg-letter), var(--bg-home)); background-color: var(--bg-normal); diff --git a/www/layouts/shortcodes/x-keyboard.html b/www/layouts/shortcodes/x-keyboard.html index 74b175dc..3b82acc4 100644 --- a/www/layouts/shortcodes/x-keyboard.html +++ b/www/layouts/shortcodes/x-keyboard.html @@ -32,14 +32,6 @@ - - {{ if $name }} {{ with .Get "data" }} diff --git a/www/static/img/bepolar.svg b/www/static/img/bepolar.svg index 38a91b5f..640d85e2 100644 --- a/www/static/img/bepolar.svg +++ b/www/static/img/bepolar.svg @@ -312,7 +312,10 @@ ¬ ₍ - ~ + + ◌ + ˜ + @@ -322,7 +325,7 @@ # ₁ ¹ - & + & @@ -332,7 +335,7 @@ « ₂ ² - < + < @@ -342,7 +345,7 @@ » ₃ ³ - > + > @@ -352,7 +355,7 @@ ( ₄ ⁴ - ( + ( @@ -362,7 +365,7 @@ ) ₅ ⁵ - ) + ) @@ -374,7 +377,7 @@ @ ₆ ⁶ - @ + @ @@ -384,7 +387,7 @@ + ₇ ⁷ - ± + ± @@ -394,7 +397,10 @@ ^ ₈ ⁸ - ^ + + ◌ + ^ + @@ -404,7 +410,7 @@ / ₉ ⁹ - \ + \ @@ -414,17 +420,20 @@ * ₀ ⁰ - ° + ° = - α + + ﹍ + α + ₎ - ≠ + ≠ @@ -435,7 +444,7 @@ § - ‰ + ‰ @@ -469,7 +478,7 @@ B @ - â + â @@ -479,7 +488,7 @@ M < ≤ - û + û @@ -489,7 +498,7 @@ P > ≥ - î + î @@ -498,8 +507,11 @@ O $ - ¤ - ô + + ﹍ + ¤ + + ô @@ -509,7 +521,7 @@ W % ‰ - œ + œ @@ -520,8 +532,11 @@ Z ^ - ^ - + + ◌ + ^ + + @@ -530,8 +545,8 @@ V & - - ŭ + + ŭ @@ -541,7 +556,7 @@ D * × - + @@ -550,8 +565,11 @@ L ' - ´ - + + ◌ + ´ + + @@ -560,8 +578,11 @@ J ` - ` - + + ◌ + ` + + @@ -571,7 +592,7 @@ { - + @@ -582,7 +603,7 @@ } - + @@ -591,9 +612,12 @@ $ € - ¤ + + ﹍ + ¤ + - ¢ + ¢ @@ -613,7 +637,7 @@ A { - à + à @@ -623,7 +647,7 @@ U ( ⁽ - ù + ù @@ -633,7 +657,7 @@ I ) ⁾ - é + é @@ -643,7 +667,7 @@ E } - è + è @@ -653,7 +677,7 @@ ; = ≠ - ê + ê @@ -664,8 +688,11 @@ C \ - / - ç + + ◌ + / + + ç @@ -675,7 +702,7 @@ T + ± - ™ + ™ @@ -685,7 +712,7 @@ S - — - ß + ß @@ -695,7 +722,7 @@ R / ÷ - ® + ® @@ -704,8 +731,11 @@ N " - ¨ - ñ + + ◌ + ¨ + + ñ @@ -715,7 +745,7 @@ " - ` + ` @@ -747,7 +777,7 @@ \ - | + | @@ -756,8 +786,11 @@ - ! ~ - ~ - — + + ◌ + ˜ + + — @@ -767,7 +800,7 @@ Y [ - ŷ + ŷ @@ -777,7 +810,7 @@ X ] - _ + _ @@ -787,7 +820,7 @@ : _ – - … + … @@ -797,7 +830,7 @@ K # - æ + æ @@ -805,11 +838,17 @@ - ★ + + ﹍ + ★ + ? | ¦ - ¨ + + ◌ + ¨ + @@ -819,7 +858,7 @@ Q ! ¬ - – + – @@ -828,8 +867,11 @@ G ; - ¸ - µ + + ◌ + ¸ + + µ @@ -839,7 +881,7 @@ H : - © + © @@ -849,7 +891,7 @@ F ? - + @@ -913,16 +955,16 @@ insécable fine - espace - espace + espace + espace - espace insécable - insécable + espace insécable + insécable - apostrophe typo (’) - apostrophe (’) + apostrophe typo (’) + apostrophe (’) diff --git a/www/static/img/colemak-french-touch.svg b/www/static/img/colemak-french-touch.svg index 52d915d8..c2c6d8bc 100644 --- a/www/static/img/colemak-french-touch.svg +++ b/www/static/img/colemak-french-touch.svg @@ -312,7 +312,7 @@ ~ - + @@ -322,7 +322,7 @@ € ₁ ¹ - + @@ -332,7 +332,7 @@ @ ₂ ² - + @@ -342,7 +342,7 @@ # ₃ ³ - + @@ -352,7 +352,7 @@ $ ₄ ⁴ - + @@ -362,7 +362,7 @@ % ₅ ⁵ - + @@ -374,7 +374,7 @@ ^ ₆ ⁶ - + @@ -384,7 +384,7 @@ & ₇ ⁷ - + @@ -394,7 +394,7 @@ * ₈ ⁸ - + @@ -404,7 +404,7 @@ « ₉ ⁹ - + @@ -414,7 +414,7 @@ » ₀ ⁰ - ° + ° @@ -424,7 +424,7 @@ _ - + @@ -435,7 +435,7 @@ + - + @@ -469,7 +469,7 @@ Q @ - + @@ -479,7 +479,7 @@ W < ≤ - + @@ -489,7 +489,7 @@ F > ≥ - à + à @@ -498,8 +498,11 @@ P $ - ¤ - ù + + ﹍ + ¤ + + ù @@ -509,7 +512,7 @@ G % ‰ - + @@ -520,8 +523,11 @@ J ^ - ^ - + + ◌ + ^ + + @@ -530,8 +536,8 @@ L & - - œ + + œ @@ -541,17 +547,26 @@ O * × - ô + ô - ★ + + ﹍ + ★ + ! ' - ´ - ¨ + + ◌ + ´ + + + ◌ + ¨ + @@ -561,7 +576,7 @@ Y ` ` - î + î @@ -571,7 +586,7 @@ { - + @@ -582,7 +597,7 @@ } - + @@ -593,7 +608,7 @@ | - + @@ -613,7 +628,7 @@ A { - â + â @@ -623,7 +638,7 @@ R ( ⁽ - é + é @@ -633,7 +648,7 @@ S ) ⁾ - è + è @@ -643,7 +658,7 @@ T } - + @@ -653,7 +668,7 @@ D = ≠ - – + – @@ -664,8 +679,11 @@ M \ - / - ( + + ◌ + / + + ( @@ -675,7 +693,7 @@ N + ± - ) + ) @@ -685,7 +703,7 @@ E - — - ê + ê @@ -695,7 +713,7 @@ I / ÷ - + @@ -704,8 +722,11 @@ U " - ¨ - û + + ◌ + ¨ + + û @@ -715,7 +736,7 @@ " - + @@ -747,7 +768,7 @@ > - + @@ -756,8 +777,11 @@ Z ~ - ~ - æ + + ◌ + ˜ + + æ @@ -767,7 +791,7 @@ X [ - + @@ -777,7 +801,7 @@ C ] - ç + ç @@ -787,7 +811,7 @@ V _ – - _ + _ @@ -797,7 +821,7 @@ B # - — + — @@ -809,7 +833,7 @@ K | ¦ - “ + “ @@ -819,7 +843,7 @@ H ! ¬ - ” + ” @@ -828,8 +852,11 @@ - ? ; - ¸ - … + + ◌ + ¸ + + … @@ -839,7 +866,7 @@ ; : - + @@ -849,7 +876,7 @@ : ? - · + · @@ -913,16 +940,16 @@ insécable fine - espace - espace + espace + espace - espace insécable - insécable + espace insécable + insécable - apostrophe typo (’) - apostrophe (’) + apostrophe typo (’) + apostrophe (’) diff --git a/www/static/img/erglace.svg b/www/static/img/erglace.svg index 177aae49..12535649 100644 --- a/www/static/img/erglace.svg +++ b/www/static/img/erglace.svg @@ -312,8 +312,8 @@ ~ - - + + @@ -323,8 +323,8 @@ ! ₁ ¹ - - + + @@ -334,8 +334,8 @@ @ ₂ ² - - + + @@ -345,8 +345,8 @@ # ₃ ³ - - + + @@ -356,8 +356,8 @@ $ ₄ ⁴ - - + + @@ -367,8 +367,8 @@ % ₅ ⁵ - € - + € + @@ -380,8 +380,8 @@ ^ ₆ ⁶ - - + + @@ -391,8 +391,8 @@ & ₇ ⁷ - - + + @@ -402,8 +402,8 @@ * ₈ ⁸ - „ - + „ + @@ -413,8 +413,8 @@ ( ₉ ⁹ - “ - « + “ + « @@ -424,8 +424,8 @@ ) ₀ ⁰ - ” - » + ” + » @@ -435,8 +435,8 @@ _ - - + + @@ -447,8 +447,8 @@ + - - + + @@ -482,19 +482,25 @@ Y @ - - + + - ★ + + ﹍ + ★ + < ≤ - ¨ - + + ◌ + ¨ + + @@ -504,8 +510,8 @@ O > ≥ - ô - + ô + @@ -514,9 +520,12 @@ F $ - ¤ - è - + + ﹍ + ¤ + + è + @@ -526,8 +535,8 @@ K % ‰ - ù - + ù + @@ -538,9 +547,12 @@ V ^ - ^ - – - + + ◌ + ^ + + – + @@ -549,9 +561,9 @@ P & - - - + + + @@ -561,8 +573,8 @@ L * × - - + + @@ -571,9 +583,12 @@ C ' - ´ - ç - + + ◌ + ´ + + ç + @@ -582,9 +597,12 @@ Q ` - ` - - + + ◌ + ` + + + @@ -594,8 +612,8 @@ { - - + + @@ -606,8 +624,8 @@ } - - + + @@ -618,8 +636,8 @@ | - - + + @@ -639,8 +657,8 @@ I { - î - + î + @@ -650,8 +668,8 @@ A ( ⁽ - æ - + æ + @@ -661,8 +679,8 @@ E ) ⁾ - ê - + ê + @@ -672,8 +690,8 @@ U } - é - + é + @@ -683,8 +701,8 @@ ; = ≠ - û - + û + @@ -695,9 +713,15 @@ G \ - / - α - + + ◌ + / + + + ﹍ + α + + @@ -707,8 +731,8 @@ T + ± - à - + à + @@ -718,8 +742,8 @@ N - — - â - + â + @@ -729,8 +753,8 @@ S / ÷ - _ - + _ + @@ -739,9 +763,12 @@ R " - ¨ - œ - + + ◌ + ¨ + + œ + @@ -751,8 +778,8 @@ " - - + + @@ -784,8 +811,8 @@ > - - + + @@ -794,9 +821,12 @@ J ~ - ~ - - + + ◌ + ˜ + + + @@ -806,8 +836,8 @@ : [ - … - + … + @@ -817,8 +847,8 @@ ? ] - ‑ - + ‑ + @@ -828,8 +858,8 @@ H _ – - - + + @@ -839,8 +869,8 @@ Z # - - + + @@ -852,8 +882,8 @@ B | ¦ - — - + — + @@ -863,8 +893,8 @@ D ! ¬ - · - + · + @@ -873,9 +903,12 @@ M ; - ¸ - - + + ◌ + ¸ + + + @@ -885,8 +918,8 @@ W : - - + + @@ -896,8 +929,8 @@ X ? - - + + @@ -961,16 +994,16 @@ insécable fine - espace - espace + espace + espace - espace insécable - insécable + espace insécable + insécable - apostrophe typo (’) - apostrophe (’) + apostrophe typo (’) + apostrophe (’) diff --git a/www/static/img/ergol_1dfh.svg b/www/static/img/ergol_1dfh.svg index ebf9d2fe..bceb2645 100644 --- a/www/static/img/ergol_1dfh.svg +++ b/www/static/img/ergol_1dfh.svg @@ -10,13 +10,13 @@ --fg-normal: #333; --bg-normal: #fff; /* special keys */ - --fg-level3: green; - --fg-level5: blue; + --fg-level3: blue; + --fg-level5: green; --fg-deadkey: red; --fg-special: #555; --bg-special: #e4e4e4; /* 'reach' theme */ - --bg-number: hsl( 42, 100%, 95%); + --bg-number: hsl(295, 100%, 95%); --bg-letter: hsl(222, 100%, 95%); --bg-home: hsl(222, 100%, 90%); } @@ -33,9 +33,9 @@ --fg-special: #888; --bg-special: #333; /* 'reach' theme */ - --bg-number: hsl( 80, 10%, 35%); + --bg-number: hsl(280, 10%, 34%); --bg-letter: hsl(220, 15%, 35%); - --bg-home: hsl(230, 30%, 30%); + --bg-home: hsl(225, 30%, 30%); }} rect, path { @@ -96,35 +96,35 @@ Q - â + â C - ç + ç O - œ + œ P - ô + ô W - + @@ -133,35 +133,35 @@ J - + M - µ + µ D - _ + _ ★ - ¨ + ¨ F - û + û @@ -181,28 +181,28 @@ A - à + à S - é + é E - è + è N - ê + ê @@ -210,7 +210,7 @@ , ; - · + · @@ -219,35 +219,35 @@ L - + R - + T - î + î I - ï + ï U - ù + ù @@ -267,14 +267,14 @@ Z - æ + æ X - + @@ -282,21 +282,21 @@ - ? - + V - + B - + @@ -306,35 +306,35 @@ . : - … + … H - + G - + α Y - + K - + diff --git a/www/static/img/ergol_1dk.svg b/www/static/img/ergol_1dk.svg index 50d48699..9916fa9f 100644 --- a/www/static/img/ergol_1dk.svg +++ b/www/static/img/ergol_1dk.svg @@ -1,4 +1,3 @@ - @@ -499,7 +502,10 @@ O ' - ´ + + ◌ + ´ + œ @@ -624,10 +630,19 @@ - ★ + + ﹍ + ★ + " - ¨ - ¨ + + ◌ + ¨ + + + ◌ + ¨ + @@ -671,7 +686,10 @@ Z ~ - ~ + + ◌ + ˜ + â @@ -680,7 +698,10 @@ X ` - ` + + ◌ + ` + @@ -731,7 +752,10 @@ , ; # - , + + ◌ + ¸ + · @@ -813,16 +837,16 @@ insécable fine - espace - espace + espace + espace - espace insécable - insécable + espace insécable + insécable - apostrophe typo (’) - apostrophe (’) + apostrophe typo (’) + apostrophe (’)