PICO-8 devkit keyboard

PICO-8-devkit-keyboard.kbd.json

[
  {
    "backcolor": "#C2C3C7",
    "name": "PICO-8 devkit keyboard",
    "author": "tobiasvl",
    "switchMount": "cherry",
    "switchBrand": "cherry",
    "switchType": "MX1A-G1xx"
  },
  [
    {
      "c": "#83769C",
      "t": "#FFF1E8"
    },
    "Esc",
    {
      "c": "#5F574F"
    },
    "F1",
    "F2",
    "F3",
    "F4",
    "F5",
    "F6",
    "F7",
    "F8\n\n\n<span class=\"rec\"></span>",
    "F9\n\n\n<span class=\"stop\"></span>",
    "F10",
    "F11",
    "F12",
    "PrS",
    "Ins",
    "Del"
  ],
  [
    {
      "c": "#FFF1E8",
      "t": "#000000"
    },
    "§\n|",
    "!\n1",
    {
      "a": 0
    },
    "\"\n2\n\n@\nC#",
    "#\n3\n\n£\nD#",
    {
      "a": 4
    },
    "¤\n4\n\n$",
    {
      "a": 0
    },
    "%\n5\n\n\nF#",
    "&\n6\n\n\nG#",
    "/\n7\n\n{\nA#",
    {
      "a": 4
    },
    "(\n8\n\n[",
    ")\n9\n\n]",
    "=\n0\n\n}",
    "?\n+",
    "`\n\\\n\n'",
    {
      "c": "#5F574F",
      "t": "#FFF1E8",
      "a": 6,
      "f": 2,
      "w": 2
    },
    "Backspace",
    "Ê"
  ],
  [
    {
      "f": 3,
      "w": 1.5
    },
    "Tab",
    {
      "c": "#FFF1E8",
      "t": "#000000",
      "a": 0
    },
    "Q\n\n\n\nC",
    "W\n\n\n\nD",
    "E\n\n\n\nE",
    "R\n\n\n\nF",
    "T\n\n\n\nG",
    "Y\n\n\n\nA",
    "U\n\n\n\nB",
    {
      "a": 4
    },
    "I",
    "O",
    "P",
    "a",
    "^\n\"\n\n~",
    {
      "x": 0.25,
      "c": "#5F574F",
      "t": "#FFF1E8",
      "w": 1.25,
      "h": 2,
      "w2": 1.5,
      "h2": 1,
      "x2": -0.25
    },
    "<span class=\"custom-glyph-1\"></span>",
    "End"
  ],
  [
    {
      "a": 6,
      "w": 1.25,
      "w2": 1.75,
      "l": true
    },
    "Aa",
    {
      "x": 0.5,
      "c": "#FFF1E8",
      "t": "#000000",
      "a": 4
    },
    "A",
    {
      "a": 0
    },
    "S\n\n\n\nC#",
    "D\n\n\n\nD#",
    {
      "a": 4,
      "n": true
    },
    "F",
    {
      "a": 0
    },
    "G\n\n\n\nF#",
    "H\n\n\n\nG#",
    {
      "n": true
    },
    "J\n\n\n\nA#",
    {
      "a": 4
    },
    "K",
    "L",
    "o",
    "ae",
    "*\n'",
    {
      "x": 1.25,
      "c": "#5F574F",
      "t": "#FFF1E8"
    },
    "PgUp"
  ],
  [
    {
      "a": 6,
      "w": 1.25
    },
    "",
    {
      "c": "#FFF1E8",
      "t": "#000000",
      "a": 4
    },
    ">\n<",
    {
      "c": "#FF004D",
      "t": "#FFF1E8",
      "a": 0
    },
    "Z\n\n\n\nC\n\n\nÎ",
    "X\n\n\n\nD\n\n\n×",
    {
      "c": "#FFF1E8",
      "t": "#000000"
    },
    "C\n\n\n\nE",
    "V\n\n\n\nF",
    "B\n\n\n\nG",
    "N\n\n\n\nA",
    "M\n\n\n\nB",
    {
      "a": 4
    },
    ";\n,",
    ":\n.",
    "_\n-",
    {
      "c": "#5F574F",
      "t": "#FFF1E8",
      "a": 6,
      "w": 1.75
    },
    "",
    {
      "c": "#FF004D",
      "a": 7
    },
    "Ô",
    {
      "c": "#5F574F"
    },
    "PgDn"
  ],
  [
    {
      "w": 1.25
    },
    "Æ",
    "Ï",
    {
      "a": 6,
      "w": 1.25
    },
    "Alt",
    {
      "c": "#83769C",
      "a": 7,
      "w": 6
    },
    "",
    {
      "c": "#5F574F",
      "f": 2,
      "w": 1.25
    },
    "Å",
    {
      "f": 3
    },
    "Menu",
    {
      "w": 1.25
    },
    "Æ",
    {
      "c": "#FF004D"
    },
    "Ë",
    "Ã",
    "Ñ"
  ]
]

PICO-8-devkit-keyboard.style.css

@font-face {
  font-family: 'PICO-8';
  src: url(https://thespug.net/stuff/pico-8_wide.ttf) format('truetype');
}

* { font-family: 'PICO-8'; }

.custom {}
.custom-glyph-1:after { 
  /* Set the background for this glyph to your image */
  background-image: url('https://thespug.net/stuff/pico-8_enter.png'); 
  background-repeat: no-repeat;
  background-position: center;

  /* Content is required for it to appear; this is a non-breaking-space */
  content:''; 
  display:inline-block; 

  /* Sizing in EMs allows the glyph to scale with the font-size */
  width: 1.5em; 
  height: 2em; 
  background-size: 1.5em; 
}

.rec:after { 
  /* Set the background for this glyph to your image */
  background-image: url('https://thespug.net/stuff/pico-8_rec.png'); 
  background-repeat: no-repeat;
  background-position: center;

  /* Content is required for it to appear; this is a non-breaking-space */
  content:''; 
  display:inline-block; 

  /* Sizing in EMs allows the glyph to scale with the font-size */
  width: 1em; 
  height: 1em; 
  background-size: 1em; 
}

.stop:after { 
  /* Set the background for this glyph to your image */
  background-image: url('https://thespug.net/stuff/pico-8_stop.png'); 
  background-repeat: no-repeat;
  background-position: center;

  /* Content is required for it to appear; this is a non-breaking-space */
  content:''; 
  display:inline-block; 

  /* Sizing in EMs allows the glyph to scale with the font-size */
  width: 1em; 
  height: 1em; 
  background-size: 1em; 
}