|
@@ -20,15 +20,13 @@
|
|
|
.left { transform: translate(-15px, 0); }
|
|
|
.right { transform: translate(+15px, 0); }
|
|
|
|
|
|
- .layer { font-size: 14px; }
|
|
|
+ .layer { font-size: 14px; font-weight: bold; }
|
|
|
+ .layerNav { fill: #e83; font-weight: bold; }
|
|
|
.shortcut { font-size: smaller; }
|
|
|
- .level3 { fill: #e83; font-weight: bold; }
|
|
|
- .active { fill: #ddd; }
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
text { fill: #888; }
|
|
|
rect { fill: #444; }
|
|
|
- .active { fill: #666; }
|
|
|
}
|
|
|
</style>
|
|
|
|
|
@@ -41,17 +39,17 @@
|
|
|
<g transform="translate(150)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">W</text>
|
|
|
- <text x="38.0" y="43.4" class="level3 shortcut">^w</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav shortcut">^w</text>
|
|
|
</g>
|
|
|
<g transform="translate(210)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">E</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⎗</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⎗</text>
|
|
|
</g>
|
|
|
<g transform="translate(270)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">R</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⎘</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⎘</text>
|
|
|
</g>
|
|
|
<g transform="translate(330)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
@@ -62,22 +60,22 @@
|
|
|
<g transform="translate(390)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">Y</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⇱</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⇱</text>
|
|
|
</g>
|
|
|
<g transform="translate(450)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">U</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⇟</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⇟</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">I</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⇞</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⇞</text>
|
|
|
</g>
|
|
|
<g transform="translate(570)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">O</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⇲</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⇲</text>
|
|
|
</g>
|
|
|
<g transform="translate(630)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
@@ -91,22 +89,22 @@
|
|
|
<g transform="translate(90)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">A</text>
|
|
|
- <text x="38.0" y="43.4" class="level3 shortcut">^a</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav shortcut">^a</text>
|
|
|
</g>
|
|
|
<g transform="translate(150)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">S</text>
|
|
|
- <text x="38.0" y="43.4" class="level3 shortcut">^s</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav shortcut">^s</text>
|
|
|
</g>
|
|
|
<g transform="translate(210)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">D</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⇤</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⇤</text>
|
|
|
</g>
|
|
|
<g transform="translate(270)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">F</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">⇥</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">⇥</text>
|
|
|
</g>
|
|
|
<g transform="translate(330)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
@@ -117,22 +115,22 @@
|
|
|
<g transform="translate(390)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">H</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">←</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">←</text>
|
|
|
</g>
|
|
|
<g transform="translate(450)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">J</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">↓</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">↓</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">K</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">↑</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">↑</text>
|
|
|
</g>
|
|
|
<g transform="translate(570)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">L</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">→</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">→</text>
|
|
|
</g>
|
|
|
<g transform="translate(630)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
@@ -147,22 +145,22 @@
|
|
|
<g transform="translate(90)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">Z</text>
|
|
|
- <text x="38.0" y="43.4" class="level3 shortcut">^z</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav shortcut">^z</text>
|
|
|
</g>
|
|
|
<g transform="translate(150)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">X</text>
|
|
|
- <text x="38.0" y="43.4" class="level3 shortcut">^x</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav shortcut">^x</text>
|
|
|
</g>
|
|
|
<g transform="translate(210)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">C</text>
|
|
|
- <text x="38.0" y="43.4" class="level3 shortcut">^c</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav shortcut">^c</text>
|
|
|
</g>
|
|
|
<g transform="translate(270)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">V</text>
|
|
|
- <text x="38.0" y="43.4" class="level3 shortcut">^v</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav shortcut">^v</text>
|
|
|
</g>
|
|
|
<g transform="translate(330)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
@@ -173,28 +171,28 @@
|
|
|
<g transform="translate(390)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">N</text>
|
|
|
- <text x="30.0" y="43.4" class="level3">🖰</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">←</text>
|
|
|
+ <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">←</text>
|
|
|
</g>
|
|
|
<g transform="translate(450)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2">M</text>
|
|
|
- <text x="30.0" y="43.4" class="level3">🖰</text>
|
|
|
- <text x="42.0" y="43.4" class="level3">↓</text>
|
|
|
+ <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
+ <text x="42.0" y="43.4" class="layerNav">↓</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="43.4" class="level1">,</text>
|
|
|
<text x="12.8" y="20.6" class="level2"><</text>
|
|
|
- <text x="30.0" y="43.4" class="level3">🖰</text>
|
|
|
- <text x="42.0" y="43.4" class="level3">↑</text>
|
|
|
+ <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
+ <text x="42.0" y="43.4" class="layerNav">↑</text>
|
|
|
</g>
|
|
|
<g transform="translate(570)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="43.4" class="level1">.</text>
|
|
|
<text x="12.8" y="20.6" class="level2">></text>
|
|
|
- <text x="30.0" y="43.4" class="level3">🖰</text>
|
|
|
- <text x="38.0" y="43.4" class="level3">→</text>
|
|
|
+ <text x="30.0" y="43.4" class="layerNav">🖰</text>
|
|
|
+ <text x="38.0" y="43.4" class="layerNav">→</text>
|
|
|
</g>
|
|
|
<g transform="translate(630)">
|
|
|
<rect width="52" height="52" rx="5" ry="5"/>
|
|
@@ -208,16 +206,16 @@
|
|
|
<g transform="translate(180)">
|
|
|
<rect width="82" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="20.6" class="level2" style="font-size: 14px;">⌫</text>
|
|
|
- <text x="64.8" y="42.8" class="level3" style="font-size: 14px;">⌦</text>
|
|
|
+ <text x="64.8" y="42.8" class="layerNav" style="font-size: 14px;">⌦</text>
|
|
|
</g>
|
|
|
<g class="homeKey" transform="translate(270)">
|
|
|
- <rect width="232" height="52" rx="5" ry="5" class="active"/>
|
|
|
- <text x="58.0" y="42.8" class="layer level3">navigation</text>
|
|
|
+ <rect width="232" height="52" rx="5" ry="5" class="layerNav"/>
|
|
|
+ <text x="58.0" y="42.8" class="layer">navigation</text>
|
|
|
</g>
|
|
|
<g transform="translate(510)">
|
|
|
<rect width="82" height="52" rx="5" ry="5"/>
|
|
|
<text x="12.8" y="23.6" class="level2">⏎</text>
|
|
|
- <text x="64.8" y="42.8" class="level3">⎋</text>
|
|
|
+ <text x="64.8" y="42.8" class="layerNav">⎋</text>
|
|
|
</g>
|
|
|
</g>
|
|
|
|