Skip to content

Commit

Permalink
Dark mode + ortholinear geometry adjustments (#24)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabi1cazenave
fabi1cazenave authored Dec 27, 2023
1 parent b8f1e86 commit 1ccf844
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 52 deletions.
15 changes: 15 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
}
</style>
<script src="main.js" type="module"></script>
<script src="demo.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion src/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
49 changes: 29 additions & 20 deletions src/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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'),
Expand All @@ -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'),
]),
Expand All @@ -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'),
Expand Down Expand Up @@ -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 }),
]),
Expand All @@ -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'),
]),
Expand All @@ -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 }),
Expand All @@ -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'),
]),
Expand All @@ -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', [
Expand Down Expand Up @@ -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'),
]),
Expand Down
83 changes: 52 additions & 31 deletions src/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -83,28 +83,34 @@ 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,
.ergo .specialKey rect,
.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,
Expand All @@ -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)}
Expand All @@ -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,
Expand Down Expand Up @@ -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};
Expand All @@ -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
Expand Down

0 comments on commit 1ccf844

Please sign in to comment.