Commodore VIC-20

commodore-vic20.kbd.json

[
  {
    "backcolor": "#e8e1ca"
  },
  [
    {
      "x": 0.25,
      "c": "#413c2c",
      "t": "#f1ecda",
      "p": "SA R1",
      "a": 7,
      "f": 7
    },
    "←",
    {
      "a": 5
    },
    "!\n1\n\n\nBLK",
    {
      "f": 9,
      "fa": [
        0,
        7,
        0,
        0,
        7
      ]
    },
    "\"\n2\n\n\nWHT",
    {
      "f": 5
    },
    "#\n3\n\n\nRED",
    "$\n4\n\n\nCYN",
    {
      "f": 7
    },
    "%\n5\n\n\nPUR",
    {
      "f": 6,
      "fa": [
        0,
        7,
        0,
        0,
        7
      ]
    },
    "&\n6\n\n\nGRN",
    {
      "f": 9
    },
    "’\n7\n\n\nBLU",
    {
      "f": 7
    },
    "(\n8\n\n\nYEL",
    ")\n9\n\n\nRVS ON",
    "\n0\n\n\nRVS OFF",
    {
      "a": 7,
      "f": 9
    },
    "+\n\n\n\n<i class='petscii petscii-halftone'></i> <i class='petscii petscii-cross'></i>",
    "-\n\n\n\n<i class='petscii petscii-halftone-left'></i> <i class='petscii petscii-bar-vert-4'></i>",
    "£\n\n\n\n<i class='petscii petscii-halftone-bottom'></i> <i class='petscii petscii-diag-bottom-top-filled'></i>",
    {
      "a": 5,
      "f": 5
    },
    "CLR\nHOME",
    "INST\nDEL",
    {
      "x": 1.25,
      "c": "#e9bf69",
      "a": 7,
      "f": 9,
      "w": 1.5
    },
    "f 1\n\n\n\nf 2"
  ],
  [
    {
      "x": 0.25,
      "c": "#413c2c",
      "p": "SA R2",
      "f": 4,
      "w": 1.5
    },
    "C T R L",
    {
      "f": 7
    },
    "Q\n\n\n\n<i class='petscii petscii-tbar-right'></i> <i class='petscii petscii-circle-filled'></i>",
    "W\n\n\n\n<i class='petscii petscii-tbar-left'></i> <i class='petscii petscii-circle-open'></i>",
    "E\n\n\n\n<i class='petscii petscii-tbar-up'></i> <i class='petscii petscii-bar-horz-1'></i>",
    "R\n\n\n\n<i class='petscii petscii-tbar-down'></i> <i class='petscii petscii-bar-horz-6'></i>",
    "T\n\n\n\n<i class='petscii petscii-bar-horz-0'></i> <i class='petscii petscii-bar-vert-1'></i>",
    "Y\n\n\n\n<i class='petscii petscii-block-horz-1'></i> <i class='petscii petscii-bar-vert-6'></i>",
    "U\n\n\n\n<i class='petscii petscii-block-horz-2'></i> <i class='petscii petscii-corner-round-bottom-right'></i>",
    "I\n\n\n\n<i class='petscii petscii-block-horz-3'></i> <i class='petscii petscii-corner-round-bottom-left'></i>",
    "O\n\n\n\n<i class='petscii petscii-block-horz-4'></i> <i class='petscii petscii-bar-top-left'></i>",
    "P\n\n\n\n<i class='petscii petscii-block-horz-5'></i> <i class='petscii petscii-bar-top-right'></i>",
    "@\n\n\n\n<i class='petscii petscii-bar-horz-7'></i> <i class='petscii petscii-bar-bottom-right'></i>",
    {
      "f": 9
    },
    "*\n\n\n\n<i class='petscii petscii-diag-top-bottom-filled'></i> <i class='petscii petscii-bar-horz-4'></i>",
    {
      "f": 7
    },
    "↑\n\n\n\nπ",
    {
      "f": 4,
      "w": 1.5
    },
    "RESTORE",
    {
      "x": 1.25,
      "c": "#e9bf69",
      "f": 9,
      "w": 1.5
    },
    "f 3\n\n\n\nf 4"
  ],
  [
    {
      "c": "#413c2c",
      "p": "SA R4",
      "f": 3
    },
    "RUN STOP",
    "SHIFT LOCK",
    {
      "f": 7
    },
    "A\n\n\n\n<i class='petscii petscii-corner-square-bottom-right'></i> <i class='petscii petscii-spade'></i>",
    "S\n\n\n\n<i class='petscii petscii-corner-square-bottom-left'></i> <i class='petscii petscii-heart'></i>",
    "D\n\n\n\n<i class='petscii petscii-corner-square-bottom-right-filled'></i> <i class='petscii petscii-bar-horz-2'></i>",
    "F\n\n\n\n<i class='petscii petscii-corner-square-bottom-left-filled'></i> <i class='petscii petscii-bar-horz-5'></i>",
    "G\n\n\n\n<i class='petscii petscii-bar-vert-0'></i> <i class='petscii petscii-bar-vert-2'></i>",
    "H\n\n\n\n<i class='petscii petscii-block-vert-1'></i> <i class='petscii petscii-bar-vert-5'></i>",
    "J\n\n\n\n<i class='petscii petscii-block-vert-2'></i> <i class='petscii petscii-corner-round-top-right'></i>",
    "K\n\n\n\n<i class='petscii petscii-block-vert-3'></i> <i class='petscii petscii-corner-round-top-left'></i>",
    "L\n\n\n\n<i class='petscii petscii-block-vert-4'></i> <i class='petscii petscii-bar-bottom-left'></i>",
    {
      "a": 5,
      "f": 6
    },
    "[\n:",
    "]\n;",
    {
      "a": 7,
      "f": 7
    },
    "=",
    {
      "f": 4,
      "w": 2
    },
    "RETURN",
    {
      "x": 1.5,
      "c": "#e9bf69",
      "f": 9,
      "w": 1.5
    },
    "f 5\n\n\n\nf6"
  ],
  [
    {
      "c": "#413c2c",
      "p": "SA R5",
      "f": 7
    },
    "C=",
    {
      "f": 4,
      "w": 1.5
    },
    "S H I F T",
    {
      "f": 7
    },
    "Z\n\n\n\n<i class='petscii petscii-corner-square-top-right'></i> <i class='petscii petscii-diamond'></i>",
    "X\n\n\n\n<i class='petscii petscii-corner-square-top-left'></i> <i class='petscii petscii-club'></i>",
    "C\n\n\n\n<i class='petscii petscii-corner-square-top-right-filled'></i> <i class='petscii petscii-bar-horz-3'></i>",
    "V\n\n\n\n<i class='petscii petscii-corner-square-top-left-filled'></i> <i class='petscii petscii-cross-diag'></i>",
    "B\n\n\n\n<i class='petscii petscii-checkerboard'></i> <i class='petscii petscii-bar-vert-3'></i>",
    "N\n\n\n\n<i class='petscii petscii-block-vert-5'></i> <i class='petscii petscii-diag-bottom-top'></i>",
    "M\n\n\n\n<i class='petscii petscii-bar-vert-7'></i> <i class='petscii petscii-diag-top-bottom'></i>",
    {
      "a": 5,
      "f": 6
    },
    "<\n,",
    ">\n.",
    "?\n/",
    {
      "a": 7,
      "f": 4,
      "w": 1.5
    },
    "S H I F T",
    {
      "a": 5,
      "f": 3
    },
    "&#x021d1;\n&#x021d3;\n\n\n\n\nCRSR",
    "&#x021d0;\n&#x021d2;\n\n\n\n\nCRSR",
    {
      "x": 1.5,
      "c": "#e9bf69",
      "a": 7,
      "f": 9,
      "w": 1.5
    },
    "f 7\n\n\n\nf 8"
  ],
  [
    {
      "x": 2.75,
      "c": "#413c2c",
      "p": "SA SPACE",
      "f": 3,
      "w": 9
    },
    ""
  ]
]

commodore-vic20.style.css

@font-face {
  font-family: 'C64ProMono';
  src: url("/fonts/C64_Pro_Mono-STYLE.eot");
  src: url("/fonts/C64_Pro_Mono-STYLE.eot?#iefix") format('embedded-opentype'),
       url("/fonts/C64_Pro_Mono-STYLE.woff") format('woff'),
       url("/fonts/C64_Pro_Mono-STYLE.ttf") format('truetype'),
       url("/fonts/C64_Pro_Mono-STYLE.svg#C64ProMono") format('svg');
  font-weight: normal;
  font-style: normal;
}

.petscii {
  display: inline-block;
  font: normal normal normal 14px/1 C64ProMono;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  border: solid 1px;
}
.keylabel9 .petscii , .keylabel10 .petscii , .keylabel11 .petscii {
  font-size: 6px !important;
}
  
.petscii-bar-bottom-left:after { content: "\0ee4c"; }
.petscii-bar-bottom-right:after { content: "\0ee7a"; }
.petscii-bar-horz-0:after { content: "\0ee63"; } 
.petscii-bar-horz-1:after { content: "\0ee45"; }
.petscii-bar-horz-2:after { content: "\0ee44"; }
.petscii-bar-horz-3:after { content: "\0ee43"; }
.petscii-bar-horz-4:after { content: "\0ee46"; }
.petscii-bar-horz-5:after { content: "\0ee46"; }
.petscii-bar-horz-6:after { content: "\0ee52"; }
.petscii-bar-horz-7:after { content: "\0ee64"; } 
.petscii-bar-top-left:after { content: "\0ee4f"; }
.petscii-bar-top-right:after { content: "\0ee50"; }
.petscii-bar-vert-0:after { content: "\0ee65"; } 
.petscii-bar-vert-1:after { content: "\0ee54"; }
.petscii-bar-vert-2:after { content: "\0ee47"; }
.petscii-bar-vert-3:after { content: "\0ee42"; }
.petscii-bar-vert-4:after { content: "\0ee42"; }
.petscii-bar-vert-5:after { content: "\0ee48"; }
.petscii-bar-vert-6:after { content: "\0ee59"; }
.petscii-bar-vert-7:after { content: "\0ee67"; } 
.petscii-block-horz-0:after { content: "\0ee63"; } 
.petscii-block-horz-1:after { content: "\0ee77"; } 
.petscii-block-horz-2:after { content: "\0ee78"; } 
.petscii-block-horz-3:after { content: "\0ee62"; } 
.petscii-block-horz-4:after { content: "\0ee79"; } 
.petscii-block-horz-5:after { content: "\0ee6f"; } 
.petscii-block-horz-6:after { content: "\0ee64"; } 
.petscii-block-vert-0:after { content: "\0ee65"; } 
.petscii-block-vert-1:after { content: "\0ee74"; } 
.petscii-block-vert-2:after { content: "\0ee75"; } 
.petscii-block-vert-3:after { content: "\0ee61"; } 
.petscii-block-vert-4:after { content: "\0ee76"; } 
.petscii-block-vert-5:after { content: "\0ee6a"; } 
.petscii-block-vert-6:after { content: "\0ee67"; } 
.petscii-checkerboard:after { content: "\0ee7f"; } 
.petscii-circle-filled:after { content: "\0ee51"; }
.petscii-circle-open:after { content: "\0ee57"; }
.petscii-club:after { content: "\0ee58"; }
.petscii-corner-round-bottom-left:after { content: "\0ee49"; }
.petscii-corner-round-bottom-right:after { content: "\0ee55"; }
.petscii-corner-round-top-left:after { content: "\0ee4b"; }
.petscii-corner-round-top-right:after { content: "\0ee4a"; }
.petscii-corner-square-bottom-left-filled:after { content: "\0ee7b"; } 
.petscii-corner-square-bottom-left:after { content: "\0ee6e"; } 
.petscii-corner-square-bottom-right-filled:after { content: "\0ee6c"; } 
.petscii-corner-square-bottom-right:after { content: "\0ee70"; } 
.petscii-corner-square-top-left-filled:after { content: "\0ee7e"; } 
.petscii-corner-square-top-left:after { content: "\0ee7d"; } 
.petscii-corner-square-top-right-filled:after { content: "\0ee7c"; } 
.petscii-corner-square-top-right:after { content: "\0ee6d"; } 
.petscii-cross-diag:after { content: "\0ee56"; }
.petscii-cross:after { content: "\0ee5b"; }
.petscii-diag-bottom-top-filled:after { content: "\0ee69"; }
.petscii-diag-bottom-top:after { content: "\0ee4e"; }
.petscii-diag-top-bottom-filled:after { content: "\0ee5f"; } 
.petscii-diag-top-bottom:after { content: "\0ee4d"; }
.petscii-diamond:after { content: "\0ee5a"; }
.petscii-halftone-bottom:after { content: "\0ee68"; } 
.petscii-halftone-left:after { content: "\0ee5c"; }
.petscii-halftone:after { content: "\0ee66"; }
.petscii-heart:after { content: "\0ee53"; }
.petscii-spade:after { content: "\0ee41"; }
.petscii-tbar-down:after { content: "\0ee72"; } 
.petscii-tbar-left:after { content: "\0ee73"; } 
.petscii-tbar-right:after { content: "\0ee6b"; } 
.petscii-tbar-up:after { content: "\0ee71"; }