From 1ccf8444aee677239f3b0c2aff544980ba308f15 Mon Sep 17 00:00:00 2001 From: Fabien Cazenave Date: Wed, 27 Dec 2023 22:13:28 +0100 Subject: [PATCH] Dark mode + ortholinear geometry adjustments (#24) --- index.html | 15 +++++++++ src/constants.js | 2 +- src/content.js | 49 ++++++++++++++++------------ src/style.js | 83 ++++++++++++++++++++++++++++++------------------ 4 files changed, 97 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index aa3239b..4b44eeb 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,21 @@ footer a { color: brown; } + input, select { color-scheme: light dark; } + @media (prefers-color-scheme: dark) { + html { + background-color: #333; + } + body { + background-color: #222; + border-color: #111; + box-shadow: 0px 1px 10px #111; + color: #ccc; + } + h1, h2, header, footer a { color: #e74; } + h1, h2, footer { border-color: #e74; } + h1 + p { color: #e74b; } + } diff --git a/src/constants.js b/src/constants.js index 7c86989..6f50a95 100644 --- a/src/constants.js +++ b/src/constants.js @@ -2,7 +2,7 @@ * Styling: colors & dimensions */ -export const KEY_BG = '#fff'; +export const KEY_BG = '#f8f8f8'; export const SPECIAL_KEY_BG = '#e4e4e4'; export const KEY_COLOR = '#333'; export const KEY_COLOR_L3 = 'blue'; diff --git a/src/content.js b/src/content.js index a36e10b..f623498 100644 --- a/src/content.js +++ b/src/content.js @@ -168,12 +168,13 @@ export function drawDK(element, keyMap, deadKey) { const numberRow = g('left', [ gKey('specialKey', 'l5', 0, 'Escape', [ - rect('ergo'), + rect('ergo', { width: 1.25 }), text('⎋', 'ergo'), ]), gKey('pinkyKey', 'l5', 0, 'Backquote', [ - rect('specialKey jis'), - rect('ansi alt iso ergo'), + rect('specialKey jis', { width: 1 }), + rect('ansi alt iso', { width: 1 }), + rect('ol60', { width: 1.25 }), text('半角', 'jis', { x: 0.5, y: 0.4 }), // half-width (hankaku) text('全角', 'jis', { x: 0.5, y: 0.6 }), // full-width (zenkaku) text('漢字', 'jis', { x: 0.5, y: 0.8 }), // kanji @@ -191,12 +192,16 @@ const numberRow = g('left', [ gKey('numberKey', 'r4', 9, 'Digit9'), gKey('numberKey', 'r5', 10, 'Digit0'), gKey('pinkyKey', 'r5', 11, 'Minus'), - gKey('pinkyKey', 'r5', 12, 'Equal'), + gKey('pinkyKey', 'r5', 12, 'Equal', [ + rect('ansi', { width: 1.00 }), + rect('ol60', { width: 1.25 }), + g('key'), + ]), gKey('pinkyKey', 'r5', 13, 'IntlYen'), gKey('specialKey', 'r5', 13, 'Backspace', [ - rect('ansi', { width: 2 }), - rect('ol60', { height: 2, y: -1 }), - rect('ol40 ol50'), + rect('ansi', { width: 2 }), + rect('ol60', { width: 1.25, height: 2, y: -1 }), + rect('ol40 ol50', { width: 1.25 }), rect('alt', { x: 1 }), text('⌫', 'ansi'), text('⌫', 'ergo'), @@ -207,7 +212,7 @@ const numberRow = g('left', [ const letterRow1 = g('left', [ gKey('specialKey', 'l5', 0, 'Tab', [ rect('', { width: 1.5 }), - rect('ergo'), + rect('ergo', { width: 1.25 }), text('↹'), text('↹', 'ergo'), ]), @@ -223,7 +228,11 @@ const letterRow1 = g('left', [ gKey('letterKey', 'r4', 9.5, 'KeyO'), gKey('letterKey', 'r5', 10.5, 'KeyP'), gKey('pinkyKey', 'r5', 11.5, 'BracketLeft'), - gKey('pinkyKey', 'r5', 12.5, 'BracketRight'), + gKey('pinkyKey', 'r5', 12.5, 'BracketRight', [ + rect('ansi', { width: 1.00 }), + rect('ol60', { width: 1.25 }), + g('key'), + ]), gKey('pinkyKey', 'r5', 13.5, 'Backslash', [ rect('ansi', { width: 1.5 }), rect('iso ol60'), @@ -252,9 +261,9 @@ const letterRow2 = g('left', [ gKey('specialKey', 'r5', 12.75, 'Enter', [ path('alt', altEnterPath), path('iso', isoEnterPath), - rect('ansi', { width: 2.25 }), - rect('ol60', { height: 2, y: -1 }), - rect('ol40 ol50'), + rect('ansi', { width: 2.25 }), + rect('ol60', { width: 1.25, height: 2, y: -1 }), + rect('ol40 ol50', { width: 1.25 }), text('⏎', 'ansi alt ergo'), text('⏎', 'iso', { translateX: 1 }), ]), @@ -264,8 +273,8 @@ const letterRow3 = g('left', [ gKey('specialKey', 'l5', 0, 'ShiftLeft', [ rect('ansi alt', { width: 2.25 }), rect('iso', { width: 1.25 }), - rect('ol50 ol60', { height: 2, y: -1 }), - rect('ol40'), + rect('ol50 ol60', { width: 1.25, height: 2, y: -1 }), + rect('ol40', { width: 1.25 }), text('⇧'), text('⇧', 'ergo'), ]), @@ -285,8 +294,8 @@ const letterRow3 = g('left', [ gKey('specialKey', 'r5', 12.25, 'ShiftRight', [ rect('ansi', { width: 2.75 }), rect('abnt', { width: 1.75, x: 1 }), - rect('ol50 ol60', { height: 2, y: -1 }), - rect('ol40'), + rect('ol50 ol60', { width: 1.25, height: 2, y: -1 }), + rect('ol40', { width: 1.25 }), text('⇧', 'ansi'), text('⇧', 'ergo'), text('⇧', 'abnt', { translateX: 1 }), @@ -297,7 +306,7 @@ const nonIcon = { x: 0.25, 'text-anchor': 'start' }; const baseRow = g('left', [ gKey('specialKey', 'l5', 0, 'ControlLeft', [ rect('', { width: 1.25 }), - rect('ergo'), + rect('ergo', { width: 1.25 }), text('Ctrl', 'win gnu', nonIcon), text('⌃', 'mac'), ]), @@ -324,8 +333,8 @@ const baseRow = g('left', [ ]), ]) + gKey('homeKey', 'm1', 3.75, 'Space', [ rect('ansi', { width: 6.25 }), - rect('ol60', { width: 5.00, x: -1 }), - rect('ol50 ol40', { width: 4.00 }), + rect('ol60', { width: 5.50, x: -1 }), + rect('ol50 ol40', { width: 4.50 }), rect('ks', { width: 4.25, x: 1 }), rect('jis', { width: 3.25, x: 1 }), ]) + g('right', [ @@ -364,7 +373,7 @@ const baseRow = g('left', [ ]), gKey('specialKey', 'r5', 13.75, 'ControlRight', [ rect('', { width: 1.25 }), - rect('ergo'), + rect('ergo', { width: 1.25 }), text('Ctrl', 'win gnu', nonIcon), text('⌃', 'mac'), ]), diff --git a/src/style.js b/src/style.js index f15eb82..ad4048f 100644 --- a/src/style.js +++ b/src/style.js @@ -46,7 +46,7 @@ const classicGeometry = ` #row_AB ${translate(0, 3, true)} #row_AA ${translate(0, 4, true)} - /* Backslash & Enter */ + /* Backslash + Enter */ #Enter path.alt, #Enter .iso, #Backslash .iso, @@ -62,19 +62,19 @@ const classicGeometry = ` .iso #Backslash ${translate(12.75, 1)} .alt #Backslash ${translate(13.0, -1)} - /* Backspace & IntlYen */ + /* Backspace + IntlYen */ #IntlYen, #Backspace .alt, .intlYen #Backspace .ansi { display: none; } .intlYen #Backspace .alt, .intlYen #IntlYen { display: block; } - /* ShiftLeft & IntlBackslash */ + /* ShiftLeft + IntlBackslash */ #IntlBackslash, #ShiftLeft .iso, .intlBackslash #ShiftLeft .ansi { display: none; } .intlBackslash #ShiftLeft .iso, .intlBackslash #IntlBackslash { display: block; } - /* ShiftRight & IntlRo */ + /* ShiftRight + IntlRo */ #IntlRo, #ShiftRight .abnt, .intlRo #ShiftRight .ansi { display: none; } .intlRo #ShiftRight .abnt, @@ -83,13 +83,16 @@ const classicGeometry = ` // ortholinear geometry: TypeMatrix (60%), OLKB (50%, 40%) const orthoGeometry = ` - .specialKey .ergo, - .specialKey .ol60, - .specialKey .ol50, - .specialKey .ol40, - #Space .ol60, - #Space .ol50, - #Space .ol40, + .specialKey .ergo, + .specialKey .ol60, + .specialKey .ol50, + .specialKey .ol40, + #Space .ol60, + #Space .ol50, + #Space .ol40, + #Backquote .ol60, + #BracketRight .ol60, + #Equal .ol60, .ergo #CapsLock, .ergo #Space rect, .ergo #Backslash rect, @@ -97,14 +100,17 @@ const orthoGeometry = ` .ergo .specialKey text { display: none; } .ol50 #Escape, .ol40 #Escape, - .ol60 #Space .ol60, - .ol50 #Space .ol50, - .ol40 #Space .ol40, - .ol60 #Backslash .ol60, - .ol60 .specialKey .ol60, - .ol50 .specialKey .ol50, - .ol40 .specialKey .ol40, - .ergo .specialKey .ergo { display: block; } + .ol60 #Space .ol60, + .ol50 #Space .ol50, + .ol40 #Space .ol40, + .ol60 #Backquote .ol60, + .ol60 #BracketRight .ol60, + .ol60 #Backslash .ol60, + .ol60 #Equal .ol60, + .ol60 .specialKey .ol60, + .ol50 .specialKey .ol50, + .ol40 .specialKey .ol40, + .ergo .specialKey .ergo { display: block; } .ol50 .pinkyKey, .ol50 #ContextMenu, .ol40 .pinkyKey, .ol40 #ContextMenu, @@ -115,28 +121,33 @@ const orthoGeometry = ` .ergo #row_AC ${translate(0.75, 2, true)} .ergo #row_AB ${translate(0.25, 3, true)} - .ergo #Tab ${translate(0.50)} - .ergo #ShiftLeft ${translate(1.25)} - .ergo #ControlLeft ${translate(1.50)} + .ergo #Tab ${translate(0.25)} + .ergo #ShiftLeft ${translate(1.00)} + .ergo #ControlLeft ${translate(1.25)} .ergo #MetaLeft ${translate(2.50)} .ergo #AltLeft ${translate(4.00)} - .ergo #Space ${translate(5.50)} + .ergo #Space ${translate(5.25)} .ergo #AltRight ${translate(9.00)} .ergo #MetaRight ${translate(10.5)} .ergo #ControlRight ${translate(12.5)} - .ol60 .left ${translate(-1.00)} + .ergo .left ${translate(-0.25)} + .ergo .right ${translate(0.25)} + + .ol60 .left ${translate(-1.25)} .ol60 #ControlRight ${translate(13.50)} + .ol60 #Backquote ${translate(-0.25)} .ol60 #ShiftRight ${translate(13.25)} .ol60 #ContextMenu ${translate(12.50)} .ol60 #Backslash ${translate(11.50, 2)} - .ol60 #Backspace ${translate(5.00, 1)} - .ol60 #Enter ${translate(5.75, 1)} + .ol60 #Backspace ${translate(4.625, 1)} + .ol60 #Enter ${translate(5.375, 1)} + .ol50 #Escape ${translate(-0.25)} .ol50 #Backspace ${translate(11.00)} .ol50 #Enter ${translate(11.75, -1)} - .ol40 #Escape ${translate(0, 2)} + .ol40 #Escape ${translate(-0.25, 2)} .ol40 #Backspace ${translate(11.00, 1)} .ol40 #Enter ${translate(11.75, 0)} @@ -163,7 +174,7 @@ const orthoGeometry = ` .ergo #AltRight ${translate(11.0)} `; -// Korean & Japanese input systems +// Korean + Japanese input systems const cjkKeys = ` #NonConvert, #Convert, #KanaMode, #Lang1, #Lang2, @@ -254,8 +265,8 @@ const themes = ` fill: white; } - /* dimmed AltGr & bold dead keys */ - .level3, .level4 { fill: ${KEY_COLOR_L3}; opacity: .4; } + /* dimmed AltGr + bold dead keys */ + .level3, .level4 { fill: ${KEY_COLOR_L3}; opacity: .5; } .level5, .level6 { fill: ${KEY_COLOR_L5}; } .deadKey { fill: ${DEAD_KEY_COLOR}; @@ -270,13 +281,23 @@ const themes = ` .level4 { display: none; } .altgr .level4 { display: block; } - /* highlight AltGr & Dead Keys */ + /* highlight AltGr + Dead Keys */ .dk .level1, .altgr .level1, .dk .level2, .altgr .level2 { opacity: 0.25; } .dk .level5, .altgr .level3, .dk .level6, .altgr .level4 { opacity: 1; } .dk .level3, .dk .level4 { display: none; } + + @media (prefers-color-scheme: dark) { + rect, path { stroke: #777; fill: #444; } + .specialKey, .specialKey rect, .specialKey path { fill: #333; } + g:target rect, .press rect, g:target path, .press path { fill: #558; } + text { fill: #999; } + .level3, .level4 { fill: #99f; } + .level5, .level6 { fill: #6d6; } + .deadKey { fill: #f44; } + } `; // export full stylesheet