Update README with expanded feature descriptions

- Add detailed descriptions for each feature (Autocorrect, Combos, Home Row Mods, Repeat/Magic Keys)
- Resize and center images for better display on wide layouts
- Make keymap image collapsible by default
- Move Magic Sturdy reference to feature section
This commit is contained in:
♥ Minnie ♥ 2025-10-14 18:21:10 +08:00
parent e0bfafecc7
commit 837808e4c1
Signed by: jasmine
GPG key ID: 8563E358D4E8040E
5 changed files with 164 additions and 117 deletions

View file

@ -1,4 +1,4 @@
<svg width="732" height="1411" viewBox="0 0 732 1411" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="1464" height="734" viewBox="0 0 1464 734" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>/* inherit to force styles through use tags */
svg path {
fill: inherit;
@ -181,17 +181,16 @@ path.combo { stroke: #7f7f7f; }
<g transform="translate(28, 137)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">c</text>
<text x="0" y="24" class="key hold">Shift</text>
</g>
<g transform="translate(84, 102)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">r</text>
<text x="0" y="24" class="key hold">Ctrl</text>
<text x="0" y="24" class="key hold">Alt</text>
</g>
<g transform="translate(140, 84)" class="key keypos-12">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">s</text>
<text x="0" y="24" class="key hold">Alt</text>
<text x="0" y="24" class="key hold">Shift</text>
</g>
<g transform="translate(196, 100)" class="key keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -214,17 +213,16 @@ path.combo { stroke: #7f7f7f; }
<g transform="translate(532, 84)" class="key keypos-17">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">e</text>
<text x="0" y="24" class="key hold">Alt</text>
<text x="0" y="24" class="key hold">Shift</text>
</g>
<g transform="translate(588, 102)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">i</text>
<text x="0" y="24" class="key hold">Ctrl</text>
<text x="0" y="24" class="key hold">Alt</text>
</g>
<g transform="translate(644, 137)" class="key keypos-19">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">a</text>
<text x="0" y="24" class="key hold">Shift</text>
</g>
<g transform="translate(28, 193)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -233,6 +231,7 @@ path.combo { stroke: #7f7f7f; }
<g transform="translate(84, 158)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">j</text>
<text x="0" y="24" class="key hold">Sym</text>
</g>
<g transform="translate(140, 140)" class="key keypos-22">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -241,7 +240,7 @@ path.combo { stroke: #7f7f7f; }
<g transform="translate(196, 156)" class="key keypos-23">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">d</text>
<text x="0" y="24" class="key hold">Sym</text>
<text x="0" y="24" class="key hold">Ctrl</text>
</g>
<g transform="translate(252, 164)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -254,7 +253,7 @@ path.combo { stroke: #7f7f7f; }
<g transform="translate(476, 156)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">h</text>
<text x="0" y="24" class="key hold">Sym</text>
<text x="0" y="24" class="key hold">Ctrl</text>
</g>
<g transform="translate(532, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -263,6 +262,7 @@ path.combo { stroke: #7f7f7f; }
<g transform="translate(588, 158)" class="key keypos-28">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">,</text>
<text x="0" y="24" class="key hold">Sym</text>
</g>
<g transform="translate(644, 193)" class="key keypos-29">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -287,104 +287,80 @@ path.combo { stroke: #7f7f7f; }
<text x="0" y="24" class="key hold">Num</text>
</g>
<g class="combo combopos-0">
<rect rx="6" ry="6" x="98" y="24" width="28" height="26" class="combo"/>
<text x="112" y="37" class="combo tap">Lead</text>
</g>
<g class="combo combopos-1">
<rect rx="6" ry="6" x="490" y="23" width="28" height="26" class="combo"/>
<text x="504" y="36" class="combo tap">[</text>
</g>
<g class="combo combopos-2">
<rect rx="6" ry="6" x="546" y="24" width="28" height="26" class="combo"/>
<text x="560" y="37" class="combo tap">]</text>
</g>
<g class="combo combopos-3">
<rect rx="6" ry="6" x="14" y="96" width="28" height="26" class="combo"/>
<text x="28" y="109" class="combo tap">1</text>
</g>
<g class="combo combopos-4">
<g class="combo combopos-1">
<rect rx="6" ry="6" x="70" y="61" width="28" height="26" class="combo"/>
<text x="84" y="74" class="combo tap">2</text>
</g>
<g class="combo combopos-5">
<g class="combo combopos-2">
<rect rx="6" ry="6" x="126" y="43" width="28" height="26" class="combo"/>
<text x="140" y="56" class="combo tap">3</text>
</g>
<g class="combo combopos-6">
<g class="combo combopos-3">
<rect rx="6" ry="6" x="182" y="59" width="28" height="26" class="combo"/>
<text x="196" y="72" class="combo tap">4</text>
</g>
<g class="combo combopos-7">
<g class="combo combopos-4">
<rect rx="6" ry="6" x="238" y="67" width="28" height="26" class="combo"/>
<text x="252" y="80" class="combo tap">5</text>
</g>
<g class="combo combopos-8">
<g class="combo combopos-5">
<rect rx="6" ry="6" x="406" y="67" width="28" height="26" class="combo"/>
<text x="420" y="80" class="combo tap">6</text>
</g>
<g class="combo combopos-9">
<g class="combo combopos-6">
<rect rx="6" ry="6" x="462" y="59" width="28" height="26" class="combo"/>
<text x="476" y="72" class="combo tap">7</text>
</g>
<g class="combo combopos-10">
<g class="combo combopos-7">
<rect rx="6" ry="6" x="518" y="43" width="28" height="26" class="combo"/>
<text x="532" y="56" class="combo tap">8</text>
</g>
<g class="combo combopos-11">
<g class="combo combopos-8">
<rect rx="6" ry="6" x="574" y="61" width="28" height="26" class="combo"/>
<text x="588" y="74" class="combo tap">9</text>
</g>
<g class="combo combopos-12">
<g class="combo combopos-9">
<rect rx="6" ry="6" x="630" y="96" width="28" height="26" class="combo"/>
<text x="644" y="109" class="combo tap">0</text>
</g>
<g class="combo combopos-13">
<g class="combo combopos-10">
<rect rx="6" ry="6" x="98" y="80" width="28" height="26" class="combo"/>
<text x="112" y="93" class="combo tap">Tab</text>
</g>
<g class="combo combopos-14">
<g class="combo combopos-11">
<rect rx="6" ry="6" x="154" y="79" width="28" height="26" class="combo"/>
<text x="168" y="92" class="combo tap">C-w</text>
</g>
<g class="combo combopos-15">
<g class="combo combopos-12">
<rect rx="6" ry="6" x="490" y="79" width="28" height="26" class="combo"/>
<text x="504" y="92" class="combo tap">Esc</text>
</g>
<g class="combo combopos-16">
<g class="combo combopos-13">
<rect rx="6" ry="6" x="546" y="80" width="28" height="26" class="combo"/>
<text x="560" y="93" class="combo tap">Ent</text>
</g>
<g class="combo combopos-17">
<g class="combo combopos-14">
<rect rx="6" ry="6" x="98" y="136" width="28" height="26" class="combo"/>
<text x="112" y="149" class="combo tap">:</text>
</g>
<g class="combo combopos-18">
<g class="combo combopos-15">
<rect rx="6" ry="6" x="154" y="135" width="28" height="26" class="combo"/>
<text x="168" y="148" class="combo tap">M-a</text>
</g>
<g class="combo combopos-19">
<rect rx="6" ry="6" x="210" y="147" width="28" height="26" class="combo"/>
<text x="224" y="160" class="combo tap">
<tspan x="224" dy="-0.6em">OS</tspan><tspan x="224" dy="1.2em">Shift</tspan>
</text>
</g>
<g class="combo combopos-20">
<rect rx="6" ry="6" x="434" y="147" width="28" height="26" class="combo"/>
<text x="448" y="160" class="combo tap">
<tspan x="448" dy="-0.6em">OS</tspan><tspan x="448" dy="1.2em">Shift</tspan>
</text>
</g>
<g class="combo combopos-21">
<g class="combo combopos-16">
<rect rx="6" ry="6" x="490" y="135" width="28" height="26" class="combo"/>
<text x="504" y="148" class="combo tap">M1-a</text>
</g>
<g class="combo combopos-22">
<g class="combo combopos-17">
<rect rx="6" ry="6" x="546" y="136" width="28" height="26" class="combo"/>
<text x="560" y="149" class="combo tap">\</text>
</g>
</g>
</g>
<g transform="translate(30, 339)" class="layer-NAV">
<g transform="translate(762, 0)" class="layer-NAV">
<text x="0" y="28" class="label" id="NAV">NAV:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 81)" class="key keypos-0">
@ -437,20 +413,17 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(28, 137)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Shift</tspan>
</text>
</g>
<g transform="translate(84, 102)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Ctrl</tspan>
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Alt</tspan>
</text>
</g>
<g transform="translate(140, 84)" class="key keypos-12">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Alt</tspan>
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Shift</tspan>
</text>
</g>
<g transform="translate(196, 100)" class="key keypos-13">
@ -492,12 +465,18 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(84, 158)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Sym</tspan>
</text>
</g>
<g transform="translate(140, 140)" class="key keypos-22">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(196, 156)" class="key keypos-23">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Ctrl</tspan>
</text>
</g>
<g transform="translate(252, 164)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -507,6 +486,7 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(476, 156)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Tab</text>
</g>
<g transform="translate(532, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -537,7 +517,7 @@ path.combo { stroke: #7f7f7f; }
</g>
</g>
</g>
<g transform="translate(30, 678)" class="layer-NUM">
<g transform="translate(30, 339)" class="layer-NUM">
<text x="0" y="28" class="label" id="NUM">NUM:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 81)" class="key keypos-0">
@ -565,18 +545,19 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(476, 44)" class="key keypos-6">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">*</text>
<text x="0" y="0" class="key tap">+</text>
</g>
<g transform="translate(532, 28)" class="key keypos-7">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">%</text>
<text x="0" y="0" class="key tap">-</text>
</g>
<g transform="translate(588, 46)" class="key keypos-8">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">/</text>
<text x="0" y="0" class="key tap">*</text>
</g>
<g transform="translate(644, 81)" class="key keypos-9">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">/</text>
</g>
<g transform="translate(28, 137)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -596,7 +577,7 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(252, 108)" class="key keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">.</text>
<text x="0" y="0" class="key tap">=</text>
</g>
<g transform="translate(420, 108)" class="key keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -610,24 +591,21 @@ path.combo { stroke: #7f7f7f; }
<g transform="translate(532, 84)" class="key keypos-17">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Alt</tspan>
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Shift</tspan>
</text>
</g>
<g transform="translate(588, 102)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Ctrl</tspan>
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Alt</tspan>
</text>
</g>
<g transform="translate(644, 137)" class="key keypos-19">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Shift</tspan>
</text>
</g>
<g transform="translate(28, 193)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">&lt;</text>
<text x="0" y="0" class="key tap">,</text>
</g>
<g transform="translate(84, 158)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -643,22 +621,25 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(252, 164)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">&gt;</text>
<text x="0" y="0" class="key tap">.</text>
</g>
<g transform="translate(420, 164)" class="key keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(476, 156)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">+</text>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Ctrl</tspan>
</text>
</g>
<g transform="translate(532, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">=</text>
</g>
<g transform="translate(588, 158)" class="key keypos-28">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">-</text>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">OS</tspan><tspan x="0" dy="1.2em">Sym</tspan>
</text>
</g>
<g transform="translate(644, 193)" class="key keypos-29">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -683,7 +664,7 @@ path.combo { stroke: #7f7f7f; }
</g>
</g>
</g>
<g transform="translate(30, 1016)" class="layer-SYM">
<g transform="translate(762, 339)" class="layer-SYM">
<text x="0" y="28" class="label" id="SYM">SYM:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 81)" class="key keypos-0">
@ -726,7 +707,7 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(28, 137)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">!</text>
<text x="0" y="0" class="key tap">|</text>
</g>
<g transform="translate(84, 102)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -766,7 +747,7 @@ path.combo { stroke: #7f7f7f; }
</g>
<g transform="translate(28, 193)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">|</text>
<text x="0" y="0" class="key tap">!</text>
</g>
<g transform="translate(84, 158)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Before After
Before After