Cleaned up the VIC-20 sample, added C64 font to render PETSCII box-drawing characters

-- C64 font from http://style64.org/c64-truetype

README.md

@@ -270,6 +270,11 @@ ___Version 0.1:___ Sept 18, 2013
 
 Contributors
 ------------
-Special thanks to the following contributors:
-* [gcolic](https://github.com/gcollic): for WASD color preset file
-* [domgetter](https://github.com/domgetter), [rswiernik](https://github.com/rswiernik): for various keyboard-layout samples
+Special thanks to:
+* [gcolic](https://github.com/gcollic), for providing WASD color presets
+* [Style64.org](https://www.style64.org), for their [C64 TrueType](http://style64.org/c64-truetype) font
+
+Special thanks to the following users who have provided sample keyboard layouts:
+* [domgetter](https://github.com/domgetter)
+* [rswiernik](https://github.com/rswiernik)
+* [BlueNalgene](https://github.com/BlueNalgene)

kb.css

@@ -8,6 +8,22 @@
 	font-weight: normal;
 	font-style: normal;
 }
+@font-face {
+	 font-family: "C64 Pro Mono";
+   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-face {
+	 font-family: "C64 Pro";
+   src: url('fonts/C64_Pro-STYLE.eot');
+   src: url('fonts/C64_Pro-STYLE.eot?#iefix') format('embedded-opentype'),
+		 url('fonts/C64_Pro-STYLE.woff') format('woff'),
+		 url('fonts/C64_Pro-STYLE.ttf') format('truetype'),
+		 url('fonts/C64_Pro-STYLE.svg#C64Pro') format('svg');
+}
 
 html, body {
 	height: 100%;
@@ -147,6 +163,17 @@ html, body {
 	background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.1) 100%);
 	background-repeat: no-repeat;
 }
+.PETSCII .keyfg .keylabel5 {
+	font-family: "C64 Pro Mono";
+	font-size: 6px !important;
+	z-index: 999;
+}
+span.box { 
+	border: solid 1px;
+	letter-spacing: 0px;
+	padding: 0;
+	margin: 0;
+ }
 
 /* Key labels */
 .keylabels { display: table; }

layouts.json

@@ -72,6 +72,7 @@
 		"Symbolics PN 364000" : "/samples/symbolics-364000",
 		"Default 60%" : "/samples/60-percent",
 		"Keycool 84" : "/samples/keycool84",
-		"Leopold FC660m" : "/samples/fc660m"
+		"Leopold FC660m" : "/samples/fc660m",
+		"Commodore VIC-20" : "/samples/commodore-vic20"
 	}	
 }

samples/commodore-vic20

@@ -1,8 +1,108 @@
 [
-{backcolor:"#e8e1ca"},
-[{x:0.25,c:"#413c2c",t:"#f1ecda",p:"SA R1",a:5,f:7},"\n\n\n\n\n\n←","!\n1\n\n\nBLK",{f:9,f2:7},"\"\n2\n\n\nWHT",{f:5,f2:7},"#\n3\n\n\nRED","$\n4\n\n\nCYN",{f:7},"%\n5\n\n\nPUR",{f:6,f2:7},"&\n6\n\n\nGRN",{f:9,f2:7},"’\n7\n\n\nBLU",{f:7},"(\n8\n\n\nYEL",")\n9\n\n\nRVS ON","\n0\n\n\nRVS OFF",{f:9},"\n\n\n\n■ □\n\n+","\n\n\n\n□ □\n\n-","\n\n\n\n□ □\n\n£",{f:5},"CLR\nHOME","INST\nDEL",{x:1.25,c:"#e9bf69",f:9,w:1.5},"\n\n\n\nf 2\n\nf 1"],
-[{x:0.25,c:"#413c2c",p:"SA R2",f:4,w:1.5},"\n\n\n\n\n\nC T R L",{f:7},"\n\n\n\n□ ■\n\nQ","\n\n\n\n□ □\n\nW","\n\n\n\n□ □\n\nE","\n\n\n\n□ □\n\nR","\n\n\n\n□ □\n\nT","\n\n\n\n□ □\n\nY","\n\n\n\n□ □\n\nU","\n\n\n\n□ □\n\nI","\n\n\n\n□ □\n\nO","\n\n\n\n□ □\n\nP","\n\n\n\n□ □\n\n@",{f:9},"\n*\n\n\n□ □",{f:7},"\n\n\n\nπ\n\n↑",{f:4,w:1.5},"\n\n\n\n\n\nRESTORE",{x:1.25,c:"#e9bf69",f:9,w:1.5},"\n\n\n\nf 4\n\nf 3"],
-[{c:"#413c2c",p:"SA R4",f:3},"RUN\nSTOP","SHIFT\nLOCK",{f:7},"\n\n\n\n□ ♠\n\nA","\n\n\n\n□ ♥\n\nS","\n\n\n\n□ □\n\nD","\n\n\n\n□ □\n\nF","\n\n\n\n□ □\n\nG","\n\n\n\n□ □\n\nH","\n\n\n\n□ □\n\nJ","\n\n\n\n□ □\n\nK","\n\n\n\n□ □\n\nL",{f:6},"[\n:","]\n;",{f:7},"\n\n\n\n\n\n=",{f:4,w:2},"\n\n\n\n\n\nRETURN",{x:1.5,c:"#e9bf69",f:9,w:1.5},"\n\n\n\nf6\n\nf 5"],
-[{c:"#413c2c",p:"SA R5",f:7},"\n\n\n\n\n\nC=",{f:4,w:1.5},"\n\n\n\n\n\nS H I F T",{f:7},"\n\n\n\n□ ♦\n\nZ","\n\n\n\n□ ♣\n\nX","\n\n\n\n□ □\n\nC","\n\n\n\n□ □\n\nV","\n\n\n\n□ □\n\nB","\n\n\n\n□ □\n\nN","\n\n\n\n□ □\n\nM",{f:6},"<\n,",">\n.","?\n/",{f:4,w:1.5},"\n\n\n\n\n\nS H I F T",{f:3},"↑\n↓\n\n\n\n\nCRSR","←\n→\n\n\n\n\nCRSR",{x:1.5,c:"#e9bf69",f:9,w:1.5},"\n\n\n\nf 8\n\nf 7"],
-[{x:2.75,c:"#413c2c",p:"SA SPACE",a:4,f:3,w:9},""]
+{"backcolor":"#e8e1ca"},
+[ 
+	{"x":0.25,"c":"#413c2c","t":"#f1ecda","p":"SA R1","a":5,"f":7},
+  "\n\n\n\n\n\n←",
+  "!\n1\n\n\nBLK",
+  {"f":9,"f2":7},
+  "\"\n2\n\n\nWHT",
+  {"f":5,"f2":7},
+  "#\n3\n\n\nRED",
+  "$\n4\n\n\nCYN",
+  {"f":7},
+  "%\n5\n\n\nPUR",
+  {"f":6,"f2":7},
+  "&\n6\n\n\nGRN",
+  {"f":9,"f2":7},
+  "’\n7\n\n\nBLU",
+  {"f":7},
+  "(\n8\n\n\nYEL",
+  ")\n9\n\n\nRVS ON",
+	"\n0\n\n\nRVS OFF",
+	{"f":9,"p":"SA R1 PETSCII"},
+	"\n\n\n\n<span class='box'>&#x0ee66;</span> <span class='box'>&#x0ee5b;</span>\n\n+",
+	"\n\n\n\n<span class='box'>&#x0ee5c;</span> <span class='box'>&#x0ee42;</span>\n\n-",
+	"\n\n\n\n<span class='box'>&#x0ee68;</span> <span class='box'>&#x0ee69;</span>\n\n£",
+	{"f":5,"p":"SA R1"},
+	"CLR\nHOME",
+	"INST\nDEL",
+	{"x":1.25,"c":"#e9bf69","f":9,"w":1.5},
+	"\n\n\n\nf 2\n\nf 1"
+],
+[
+	{"x":0.25,"c":"#413c2c","p":"SA R2","f":4,"w":1.5},
+	"\n\n\n\n\n\nC T R L",
+	{"f":7,"p":"SA R2 PETSCII"},
+	"\n\n\n\n<span class='box'>&#x0ee6b;</span> <span class='box'>&#x0ee51;</span>\n\nQ",
+	"\n\n\n\n<span class='box'>&#x0ee73;</span> <span class='box'>&#x0ee57;</span>\n\nW",
+	"\n\n\n\n<span class='box'>&#x0ee71;</span> <span class='box'>&#x0ee45;</span>\n\nE",
+	"\n\n\n\n<span class='box'>&#x0ee72;</span> <span class='box'>&#x0ee52;</span>\n\nR",
+	"\n\n\n\n<span class='box'>&#x0ee63;</span> <span class='box'>&#x0ee54;</span>\n\nT",
+	"\n\n\n\n<span class='box'>&#x0ee77;</span> <span class='box'>&#x0ee59;</span>\n\nY",
+	"\n\n\n\n<span class='box'>&#x0ee78;</span> <span class='box'>&#x0ee55;</span>\n\nU",
+	"\n\n\n\n<span class='box'>&#x0ee62;</span> <span class='box'>&#x0ee49;</span>\n\nI",
+	"\n\n\n\n<span class='box'>&#x0ee79;</span> <span class='box'>&#x0ee4f;</span>\n\nO",
+	"\n\n\n\n<span class='box'>&#x0ee6f;</span> <span class='box'>&#x0ee50;</span>\n\nP",
+	"\n\n\n\n<span class='box'>&#x0ee64;</span> <span class='box'>&#x0ee7a;</span>\n\n@",
+	{"f":9},
+	"\n*\n\n\n<span class='box'>&#x0ee5f;</span> <span class='box'>&#x0ee46;</span>",
+	{"f":7,"p":"SA R2"},
+	"\n\n\n\nπ\n\n↑",
+	{"f":4,"w":1.5},
+	"\n\n\n\n\n\nRESTORE",
+	{"x":1.25,"c":"#e9bf69", "f":9, "w":1.5},
+	"\n\n\n\nf 4\n\nf 3"
+],
+[
+	{"c":"#413c2c","p":"SA R4","f":3},
+	"RUN\nSTOP",
+	"SHIFT\nLOCK",
+	{"f":7,"p":"SA R4 PETSCII"},
+	"\n\n\n\n<span class='box'>&#x0ee70;</span> <span class='box'>&#x0ee41;</span>\n\nA",
+	"\n\n\n\n<span class='box'>&#x0ee6e;</span> <span class='box'>&#x0ee53;</span>\n\nS",
+	"\n\n\n\n<span class='box'>&#x0ee6c;</span> <span class='box'>&#x0ee44;</span>\n\nD",
+	"\n\n\n\n<span class='box'>&#x0ee7b;</span> <span class='box'>&#x0ee46;</span>\n\nF",
+	"\n\n\n\n<span class='box'>&#x0ee65;</span> <span class='box'>&#x0ee47;</span>\n\nG",
+	"\n\n\n\n<span class='box'>&#x0ee74;</span> <span class='box'>&#x0ee48;</span>\n\nH",
+	"\n\n\n\n<span class='box'>&#x0ee75;</span> <span class='box'>&#x0ee4a;</span>\n\nJ",
+	"\n\n\n\n<span class='box'>&#x0ee61;</span> <span class='box'>&#x0ee4b;</span>\n\nK",
+	"\n\n\n\n<span class='box'>&#x0ee76;</span> <span class='box'>&#x0ee4c;</span>\n\nL",
+	{"f":6,"p":"SA R4"},
+	"[\n:",
+	"]\n;",
+	{"f":7},
+	"\n\n\n\n\n\n=",
+	{"f":4,"w":2},
+	"\n\n\n\n\n\nRETURN",
+	{"x":1.5,"c":"#e9bf69","f":9,"w":1.5},
+	"\n\n\n\nf6\n\nf 5"
+],
+[{"c":"#413c2c","p":"SA R5","f":7},
+	"\n\n\n\n\n\nC=",
+	{"f":4,"w":1.5},
+	"\n\n\n\n\n\nS H I F T",
+	{"f":7,"p":"SA R5 PETSCII"},
+	"\n\n\n\n<span class='box'>&#x0ee6d;</span> <span class='box'>&#x0ee5a;</span>\n\nZ",
+	"\n\n\n\n<span class='box'>&#x0ee7d;</span> <span class='box'>&#x0ee58;</span>\n\nX",
+	"\n\n\n\n<span class='box'>&#x0ee7c;</span> <span class='box'>&#x0ee43;</span>\n\nC",
+	"\n\n\n\n<span class='box'>&#x0ee7e;</span> <span class='box'>&#x0ee56;</span>\n\nV",
+	"\n\n\n\n<span class='box'>&#x0ee7f;</span> <span class='box'>&#x0ee42;</span>\n\nB",
+	"\n\n\n\n<span class='box'>&#x0ee6a;</span> <span class='box'>&#x0ee4e;</span>\n\nN",
+	"\n\n\n\n<span class='box'>&#x0ee67;</span> <span class='box'>&#x0ee4d;</span>\n\nM",
+	{"f":6,"p":"SA R5"},
+	"<\n,",
+	">\n.",
+	"?\n/",
+	{"f":4,"w":1.5},
+	"\n\n\n\n\n\nS H I F T",
+	{"f":3},
+	"&#x021d1;\n&#x021d3;\n\n\n\n\nCRSR",
+	"&#x021d0;\n&#x021d2;\n\n\n\n\nCRSR",
+	{"x":1.5,"c":"#e9bf69","f":9,"w":1.5},
+	"\n\n\n\nf 8\n\nf 7"
+],
+[
+	{"x":2.75,"c":"#413c2c","p":"SA SPACE PETSCII","a":4,"f":3,"w":9},
+	""
+]
 ]