Keyboard Input: Celestial Blue

<div style="padding: var(--size-4);">
  <h1>KBD</h1>
  <hr>

  <h3 class="celestial-blue">Size Modifiers</h3>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <div>
      <kbd class="{{#if modifier}}{{modifier}} {{/if}}">Default Size</kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}} {{/if}} size-1">size-1</kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}} {{/if}} size-2">size-2</kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}} {{/if}} size-3">size-3</kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}} {{/if}} size-4">size-4</kbd>
    </div>
  </div>

  <hr class="surface-3"/>

  <h3 class="celestial-blue">Modifier Keys</h3>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>CTRL</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrow-big-up"></i> SHIFT</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>ALT</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrow-big-down"></i> CAPS LOCK</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-brand-windows"></i> WINDOWS</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-command"></i> COMMAND</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrows-left-right"></i> TAB</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-corner-down-left"></i> RETURN</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrow-left"></i> BACKSPACE</kbd>
    </div>
  </div>

  <hr class="surface-3"/>

  <h3 class="celestial-blue">Alpha Keys</h3>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>A</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>S</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>D</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>F</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>G</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>H</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>J</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>K</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>L</kbd>
    </div>
  </div>

  <hr class="surface-3"/>

  <h3 class="celestial-blue">Number Keys</h3>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>0</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>1</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>2</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>3</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>4</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>5</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>6</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>7</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>8</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>9</kbd>
    </div>
  </div>

  <hr class="surface-3"/>

  <h3 class="celestial-blue">Keyboard Shortcuts</h3>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));">
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>CTRL</kbd>
      +
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>K</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>SHIFT</kbd>
      +
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>B</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>ALT</kbd>
      +
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>F5</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>RSHIFT</kbd>
      +
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>O</kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>LCTRL</kbd>
      +
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>RSHIFT</kbd>
      +
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}>Z</kbd>
    </div>
  </div>

  <hr class="surface-3"/>

  <h3 class="celestial-blue">Arrow Keys</h3>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrow-left"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrow-right"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrow-up"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-arrow-down"></i></kbd>
    </div>
  </div>

  <hr class="surface-3"/>

  <h3 class="celestial-blue">Keys with Icons</h3>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-brand-github"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-brand-facebook"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-brand-youtube"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-brand-mastodon"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-brand-debian"></i></kbd>
    </div>
    <div>
      <kbd {{#if modifier}}class="{{modifier}}"{{/if}}><i class="ti ti-key"></i></kbd>
    </div>
  </div>

  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));">
    <div>
      <kbd class="{{#if modifier}}{{modifier}}{{/if}} size-4"><i class="ti ti-brand-github"></i></kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}}{{/if}} size-4"><i class="ti ti-brand-facebook"></i></kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}}{{/if}} size-4"><i class="ti ti-brand-youtube"></i></kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}}{{/if}} size-4"><i class="ti ti-brand-mastodon"></i></kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}}{{/if}} size-4"><i class="ti ti-brand-debian"></i></kbd>
    </div>
    <div>
      <kbd class="{{#if modifier}}{{modifier}}{{/if}} size-4"><i class="ti ti-key"></i></kbd>
    </div>
  </div>

</div>