GirlBossRush · November 22, 2014 15:47
diff --git a/keyboard-labels.html b/keyboard-labels.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>ErgoDox Keycaps Print set.</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>

  <body>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        background-color: #000;

        font-family: "Futura", sans-serif;
        font-size: 16px;
        color: #fff;

        -webkit-font-smoothing: subpixel-antialiased;
        text-rendering: optimizeLegibility;
      }

      .container {
        width: 1020px;
      }

      .key {
        display: inline-block;
        vertical-align: top;

        border: 1px solid #222;

        margin: 2px;

        line-height: 1;
        text-align: center;

        height: 80px;
        width: 80px;

        text-transform: uppercase;
      }

      .key .symbol {
        display: block;

        margin-top: 25px;
      }

      .key.with-child .symbol {
        margin-top: 15px;
      }

      .key .child {
        display: block;
        margin: 11px;
      }

      .unicode {
        font-family: sans-serif;
      }
    </style>

    <section class="container">
      <div class="keymap"></div>
    </section>

  <script type="text/javascript">
    "use strict";
    var $keymap = $('.keymap'),
        keys = [
          { symbol: 'q' },
          { symbol: 'w' },
          { symbol: 'e' },
          { symbol: 'r' },
          { symbol: 't' },
          { symbol: 'y' },
          { symbol: 'u' },
          { symbol: 'i' },
          { symbol: 'o' },
          { symbol: 'p' },
          { symbol: '{', child: '[' },
          { symbol: '}', child: ']' },
          { symbol: '|', child: '\\' },
          { symbol: 'a' },
          { symbol: 's' },
          { symbol: 'd' },
          { symbol: 'f' },
          { symbol: 'g' },
          { symbol: 'h' },
          { symbol: 'j' },
          { symbol: 'k' },
          { symbol: 'l' },
          { symbol: ';', child: ':' },
          { symbol: '\'', child: '\"' },
          { symbol: 'z' },
          { symbol: 'x' },
          { symbol: 'c' },
          { symbol: 'v' },
          { symbol: 'b' },
          { symbol: 'n' },
          { symbol: 'm' },
          { symbol: 'ESC' },
          { symbol: 'Page', child: '&#8648;' },
          { symbol: 'Page', child: '&#8650;' },
          { symbol: 'CTRL' },
          { symbol: 'CTRL' },
          { symbol: 'Vol &#8722;', style: "font-size: 0.8em;" },
          { symbol: 'Vol &#43;', style: "font-size: 0.8em;" },
          { symbol: '&#9664;&#9664;', style: 'letter-spacing: -6px;' },
          { symbol: '&#9654;II' },
          { symbol: '&#9654;&#9654;', style: 'letter-spacing: -6px;' },
          { symbol: 'Home', style: "font-size: 0.8em;"},
          { symbol: 'End', style: "font-size: 0.8em;"},
          { symbol: 'ALT'},
          { symbol: 'ALT'},
          { symbol: '&lt;', child: ',' },
          { symbol: '&gt;', child: '.' },
          { symbol: '?', child: '\/' },
          { symbol: '~', child: '`' },
          { symbol: '!', child: '1'},
          { symbol: '@', child: '2'},
          { symbol: '#', child: '3'},
          { symbol: '$', child: '4'},
          { symbol: '%', child: '5'},
          { symbol: '^', child: '6'},
          { symbol: '&amp;', child: '7'},
          { symbol: '*', child: '8'},
          { symbol: '(', child: '9'},
          { symbol: ')', child: '0'},
          { symbol: '_', child: '-'},
          { symbol: '+', child: '='},
          { symbol: '&#9679;' },
          { symbol: '&#8258;' }
        ];


    keys.forEach(function (set) {
      $keymap.append('<div class="key">');
      var $key = $keymap.children(':last-child');

      $key.append('<span class="symbol" style="' + set.style + '">' + set.symbol + '</span>');

      if (set.unicode) {
        $key.addClass('unicode', set.unicode);
      }

      if (set.child) {
        $key
          .addClass('with-child')
          .append('<span class="child">' + set.child + '</span>');
      };
    });

  </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>ErgoDox Keycaps Print set.</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>

	<body>
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	background-color: #000;

	font-family: "Futura", sans-serif;
	font-size: 16px;
	color: #fff;

	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: optimizeLegibility;
	}

	.container {
	width: 1020px;
	}

	.key {
	display: inline-block;
	vertical-align: top;

	border: 1px solid #222;

	margin: 2px;

	line-height: 1;
	text-align: center;

	height: 80px;
	width: 80px;

	text-transform: uppercase;
	}

	.key .symbol {
	display: block;

	margin-top: 25px;
	}

	.key.with-child .symbol {
	margin-top: 15px;
	}

	.key .child {
	display: block;
	margin: 11px;
	}

	.unicode {
	font-family: sans-serif;
	}
	</style>

	<section class="container">
	<div class="keymap"></div>
	</section>

	<script type="text/javascript">
	"use strict";
	var $keymap = $('.keymap'),
	keys = [
	{ symbol: 'q' },
	{ symbol: 'w' },
	{ symbol: 'e' },
	{ symbol: 'r' },
	{ symbol: 't' },
	{ symbol: 'y' },
	{ symbol: 'u' },
	{ symbol: 'i' },
	{ symbol: 'o' },
	{ symbol: 'p' },
	{ symbol: '{', child: '[' },
	{ symbol: '}', child: ']' },
	{ symbol: '\|', child: '\\' },
	{ symbol: 'a' },
	{ symbol: 's' },
	{ symbol: 'd' },
	{ symbol: 'f' },
	{ symbol: 'g' },
	{ symbol: 'h' },
	{ symbol: 'j' },
	{ symbol: 'k' },
	{ symbol: 'l' },
	{ symbol: ';', child: ':' },
	{ symbol: '\'', child: '\"' },
	{ symbol: 'z' },
	{ symbol: 'x' },
	{ symbol: 'c' },
	{ symbol: 'v' },
	{ symbol: 'b' },
	{ symbol: 'n' },
	{ symbol: 'm' },
	{ symbol: 'ESC' },
	{ symbol: 'Page', child: '⇈' },
	{ symbol: 'Page', child: '⇊' },
	{ symbol: 'CTRL' },
	{ symbol: 'CTRL' },
	{ symbol: 'Vol −', style: "font-size: 0.8em;" },
	{ symbol: 'Vol +', style: "font-size: 0.8em;" },
	{ symbol: '◀◀', style: 'letter-spacing: -6px;' },
	{ symbol: '▶II' },
	{ symbol: '▶▶', style: 'letter-spacing: -6px;' },
	{ symbol: 'Home', style: "font-size: 0.8em;"},
	{ symbol: 'End', style: "font-size: 0.8em;"},
	{ symbol: 'ALT'},
	{ symbol: 'ALT'},
	{ symbol: '<', child: ',' },
	{ symbol: '>', child: '.' },
	{ symbol: '?', child: '\/' },
	{ symbol: '~', child: '`' },
	{ symbol: '!', child: '1'},
	{ symbol: '@', child: '2'},
	{ symbol: '#', child: '3'},
	{ symbol: '$', child: '4'},
	{ symbol: '%', child: '5'},
	{ symbol: '^', child: '6'},
	{ symbol: '&', child: '7'},
	{ symbol: '*', child: '8'},
	{ symbol: '(', child: '9'},
	{ symbol: ')', child: '0'},
	{ symbol: '_', child: '-'},
	{ symbol: '+', child: '='},
	{ symbol: '●' },
	{ symbol: '⁂' }
	];


	keys.forEach(function (set) {
	$keymap.append('<div class="key">');
	var $key = $keymap.children(':last-child');

	$key.append('<span class="symbol" style="' + set.style + '">' + set.symbol + '</span>');

	if (set.unicode) {
	$key.addClass('unicode', set.unicode);
	}

	if (set.child) {
	$key
	.addClass('with-child')
	.append('<span class="child">' + set.child + '</span>');
	};
	});

	</script>
	</body>
	</html>