img/navigation.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">

  <style>
    :root {
      color-scheme: light dark;
    }
    rect {
      fill: #f8f8f8;
      stroke: #666;
      stroke-width: .5px;
    }
    text {
      fill: #bbb;
      font: normal 20px sans-serif;
      text-align: center;
      text-anchor: middle;
    }
    .dualKey { fill: #ddd; transform: translateY(26px); }

    #row_AD { transform: translate(64px,  64px); }
    #row_AC { transform: translate(64px, 124px); }
    #row_AB { transform: translate(64px, 184px); }
    #row_AA { transform: translate(64px, 244px); }
    .left   { transform: translate(-15px, 0); }
    .right  { transform: translate(+15px, 0); }

    .shortcut { font-size: 10px; transform: translate(-3px,  -1px); }
    .layerSym { font-weight: normal; }
    .layerMod { font-weight: bold; font-size: 14px; }
    .layerNav { font-weight: bold; }
    .right .layerNav { font-weight: normal; }

    .layerMod, .colorMod { fill: #333; }
    .layerSym, .colorSym { fill: blue; }
    .layerNav, .colorNav { fill: #e83; }
    #row_AA    .level2   { fill: #333; }

    @media (prefers-color-scheme: dark) {
      text                 { fill: #666; }
      rect                 { fill: #444; }
      .dualKey             { fill: #666; }
      .layerMod, .colorMod { fill: #eee; }
      .layerSym, .colorSym { fill: #99f; }
      .layerNav, .colorNav { fill: #e83; }
      #row_AA .level2      { fill: #ccc; }
    }
  </style>

  <g id="row_AD">
    <g class="left">
      <g transform="translate(90)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="12.8" y="20.6" class="level2">Q</text>
        <text x="38.0" y="20.6" class="layerNav">↹</text>
      </g>
      <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="20.6" class="layerNav">⇱</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="20.6" 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="20.6" class="layerNav">⇲</text>
      </g>
      <g transform="translate(330)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="12.8" y="20.6" class="level2">T</text>
        <text x="38.0" y="20.6" class="layerNav">⇞</text>
      </g>
    </g>
    <g class="right">
      <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="20.6" 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="20.6" class="layerNav">7</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="20.6" class="layerNav">8</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="20.6" class="layerNav">9</text>
      </g>
      <g transform="translate(630)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="12.8" y="20.6" class="level2">P</text>
      </g>
    </g>
  </g>

  <g id="row_AC">
    <g class="left">
      <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="20.6" class="layerNav shortcut">all</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="20.6" class="layerNav">←</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="20.6" 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="20.6" class="layerNav">→</text>
      </g>
      <g transform="translate(330)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="12.8" y="20.6" class="level2">G</text>
        <text x="38.0" y="20.6" class="layerNav">⇟</text>
      </g>
    </g>
    <g class="right">
      <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="20.6" 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="20.6" class="layerNav">4</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="20.6" class="layerNav">5</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="20.6" class="layerNav">6</text>
      </g>
      <g transform="translate(630)">
        <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="38.0" y="20.6" class="layerNav">0</text>
      </g>
    </g>
  </g>

  <g id="row_AB">
    <g class="left">
      <g transform="translate(90)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g>
          <text x="12.8" y="20.6" class="level2">Z</text>
          <text x="38.0" y="20.6" class="layerNav shortcut">undo</text>
        </g>
      </g>
      <g transform="translate(150)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g>
          <text x="12.8" y="20.6" class="level2">X</text>
          <text x="38.0" y="20.6" class="layerNav shortcut">cut</text>
        </g>
      </g>
      <g transform="translate(210)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g>
          <text x="12.8" y="20.6" class="level2">C</text>
          <text x="38.0" y="20.6" class="layerNav shortcut">copy</text>
        </g>
      </g>
      <g transform="translate(270)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g>
          <text x="12.8" y="20.6" class="level2">V</text>
          <text x="38.0" y="20.6" class="layerNav shortcut">paste</text>
        </g>
      </g>
      <g transform="translate(330)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g>
          <text x="12.8" y="20.6" class="level2">B</text>
          <text x="38.0" y="20.6" class="layerNav">⇤</text>
        </g>
      </g>
    </g>
    <g class="right">
      <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="38.0" y="20.6" 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="38.0" y="20.6" class="layerNav">1</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">&lt;</text>
        <text x="38.0" y="20.6" class="layerNav">2</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">&gt;</text>
        <text x="38.0" y="20.6" class="layerNav">3</text>
      </g>
      <g transform="translate(630)">
        <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="38.0" y="20.6" class="layerNav">.</text>
      </g>
    </g>
  </g>

  <g id="row_AA">
    <g transform="translate(180)">
      <rect width="82" height="52" rx="5" ry="5"/>
      <text x="61.5" y="20.6" class="layerNav" style="font-size: 14px;">⌦</text>
    </g>
    <g transform="translate(270)">
      <rect width="232" height="52" rx="5" ry="5" class="colorNav"/>
      <text x="20.5" y="42.8" class="layerMod">nav</text>
    </g>
    <g transform="translate(510)">
      <rect width="82" height="52" rx="5" ry="5"/>
      <text x="61.5" y="20.6" class="layerNav" style="font-weight: normal;">⎋</text>
    </g>
  </g>

</svg>