index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!</title>
  <meta name="viewport" content="width=device-width; initial-scale=0.45">
  <link href="http://fonts.googleapis.com/css?family=Maiden+Orange" rel="stylesheet">
  <link href="atom.xml" type="application/atom+xml" rel="alternate" title="Microjs ATOM feed">

  <style type="text/css">

  html {
    min-height: 100%;
  }
  body {
    -webkit-text-size-adjust: none;
    text-align: center;
    margin: 0;
    background: #333;
    background: -webkit-gradient(radial, center top, 0, center top, 600, color-stop(0, #2A2E30), color-stop(1, #111414));
    background: -webkit-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
    background: -moz-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
    background: -ms-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
    background: -o-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
    background: radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
    color: #fff;
    font: 15px/19px Helvetica, Arial;
    min-height: 100%;
  }
  ul {
    width: 650px;
    margin: 20px auto;
    list-style-type: none;
    padding: 0;
  }
  h1, h2, h3, p.footer strong, .clue strong {
    font-family: 'Maiden Orange', arial, sans-serif;
    font-weight: normal;
  }
  #header {
    position: relative;
  }
  h1 {
    padding-top: 50px;
    color: #fff;
    margin: 0;
    font-size: 136px;
    line-height: 130px;
    font-weight: normal;
    text-shadow: 0px -1px 9px rgba(0,0,0,0.4);
  }
  h1.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-mask-image: -webkit-gradient(linear, left top,
      left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    text-shadow: none;
  }
  h1.overlay span {
    color: #fff !important;
  }
  h1 span:nth-child(6n+1) { color: #A839B2; }
  h1 span:nth-child(6n+2) { color: #FF0071; }
  h1 span:nth-child(6n+3) { color: #ACD030; }
  h1 span:nth-child(6n+4) { color: #58AA00; }
  h1 span:nth-child(6n+5) { color: #00AA78; }
  h1 span:nth-child(6n+6) { color: #0074AE; }
  h2 {
    color: #fff;
    margin: 0;
    font-size: 26px;
    line-height: 30px;
    font-weight: normal;
    text-shadow: 0px -1px 5px rgba(0,0,0,0.4);
  }
  select {
    font-size: 25px;
    background: #000;
    color: #fff;
    padding: 3px;
  }
  option {
    background: #000;
  }
  @-webkit-keyframes appear {
    from { 
      opacity: 0;
      -webkit-transform: scale(0);
    }
    to { 
      opacity: 1; 
      -webkit-transform: scale(1);
    }
  }
  li a {
    height: 60px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    margin: 0 0 10px 0;
    -webkit-font-smoothing: antialiased;
    text-rendering:optimizeLegibility;
    overflow: hidden;
    padding-bottom: 10px;
    text-overflow: ellipsis;
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 20px;
    -webkit-animation: appear 0.2s;
  }
  li:nth-child(6n+1) a {
    background: #791982;
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
      -webkit-gradient(linear, left top, left bottom, from(#A839B2), to(#6c1075));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -webkit-linear-gradient(#a839b2, #6c1075);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -moz-linear-gradient(#a839b2, #6c1075);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -ms-linear-gradient(#a839b2, #6c1075);
    background:
      -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -o-linear-gradient(#a839b2, #6c1075);
    background:
      linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      linear-gradient(#a839b2, #6c1075);
  }
  li:nth-child(6n+2) a {
    background: #C4004D;
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
      -webkit-gradient(linear, left top, left bottom, from(#ff0071), to(#bb0047));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -webkit-linear-gradient(#ff0071, #bb0047);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -moz-linear-gradient(#ff0071, #bb0047);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -ms-linear-gradient(#ff0071, #bb0047);
    background:
      -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -o-linear-gradient(#ff0071, #bb0047);
    background:
      linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      linear-gradient(#ff0071, #bb0047);
  }
  li:nth-child(6n+3) a {
    background: #81A02C;
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
      -webkit-gradient(linear, left top, left bottom, from(#acd030), to(#6f9113));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -webkit-linear-gradient(#acd030, #6f9113);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -moz-linear-gradient(#acd030, #6f9113);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -ms-linear-gradient(#acd030, #6f9113);
    background:
      -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -o-linear-gradient(#acd030, #6f9113);
    background:
      linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      linear-gradient(#acd030, #6f9113);
  }
  li:nth-child(6n+4) a {
    background: #4A8419;
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
      -webkit-gradient(linear, left top, left bottom, from(#58aa00), to(#337100));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -webkit-linear-gradient(#58aa00, #337100);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -moz-linear-gradient(#58aa00, #337100);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -ms-linear-gradient(#58aa00, #337100);
    background:
      -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -o-linear-gradient(#58aa00, #337100);
    background:
      linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      linear-gradient(#58aa00, #337100);
  }
  li:nth-child(6n+5) a {
    background: #18946D;
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
      -webkit-gradient(linear, left top, left bottom, from(#00aa78), to(#05603e));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -webkit-linear-gradient(#00aa78, #05603e);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -moz-linear-gradient(#00aa78, #05603e);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -ms-linear-gradient(#00aa78, #05603e);
    background:
      -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -o-linear-gradient(#00aa78, #05603e);
    background:
      linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      linear-gradient(#00aa78, #05603e);
  }
  li:nth-child(6n+6) a {
    background: #1E577F;
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
      -webkit-gradient(linear, left top, left bottom, from(#0074ae), to(#073c66));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -webkit-linear-gradient(#0074ae, #073c66);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -moz-linear-gradient(#0074ae, #073c66);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -ms-linear-gradient(#0074ae, #073c66);
    background:
      -o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      -o-linear-gradient(#0074ae, #073c66);
    background:
      linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
      linear-gradient(#0074ae, #073c66);
  }

  li a:hover, li a:focus {
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
      -webkit-gradient(linear, left top, left bottom, from(#3a3e40), to(#2a2e30));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -webkit-linear-gradient(#3a3e40, #2a2e30);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -moz-linear-gradient(#3a3e40, #2a2e30);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -ms-linear-gradient(#3a3e40, #2a2e30);
    background:
      -o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -o-linear-gradient(#3a3e40, #2a2e30);
    background:
      linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      linear-gradient(#3a3e40, #2a2e30);
    text-shadow:0 0 15px rgba(255,255,255,0.4);
    -moz-box-shadow:0 0 50px rgba(255,255,255,0.15);
    -webkit-box-shadow:0 0 100px rgba(255,255,255,0.15);
  }
  li:nth-child(6n+1) a:hover, li:nth-child(6n+1) a:focus {
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
      -webkit-gradient(linear, left top, left bottom, from(#A839B2), to(#6c1075));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -webkit-linear-gradient(#A839B2, #6c1075);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -moz-linear-gradient(#A839B2, #6c1075);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -ms-linear-gradient(#A839B2, #6c1075);
    background:
      -o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -o-linear-gradient(#A839B2, #6c1075);
    background:
      linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      linear-gradient(#A839B2, #6c1075);
  }
  li:nth-child(6n+2) a:hover, li:nth-child(6n+2) a:focus {
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
      -webkit-gradient(linear, left top, left bottom, from(#ff0071), to(#bb0047));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -webkit-linear-gradient(#ff0071, #bb0047);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -moz-linear-gradient(#ff0071, #bb0047);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -ms-linear-gradient(#ff0071, #bb0047);
    background:
      -o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -o-linear-gradient(#ff0071, #bb0047);
    background:
      linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      linear-gradient(#ff0071, #bb0047);
  }
  li:nth-child(6n+3) a:hover, li:nth-child(6n+3) a:focus {
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
      -webkit-gradient(linear, left top, left bottom, from(#acd030), to(#6f9113));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -webkit-linear-gradient(#acd030, #6f9113);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -moz-linear-gradient(#acd030, #6f9113);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -ms-linear-gradient(#acd030, #6f9113);
    background:
      -o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -o-linear-gradient(#acd030, #6f9113);
    background:
      linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      linear-gradient(#acd030, #6f9113);
  }
  li:nth-child(6n+4) a:hover, li:nth-child(6n+4) a:focus {
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
      -webkit-gradient(linear, left top, left bottom, from(#58aa00), to(#337100));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -webkit-linear-gradient(#58aa00, #337100);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -moz-linear-gradient(#58aa00, #337100);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -ms-linear-gradient(#58aa00, #337100);
    background:
      -o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -o-linear-gradient(#58aa00, #337100);
    background:
      linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      linear-gradient(#58aa00, #337100);
  }
  li:nth-child(6n+5) a:hover, li:hover:nth-child(6n+5) a:focus {
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
      -webkit-gradient(linear, left top, left bottom, from(#00aa78), to(#05603e));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -webkit-linear-gradient(#00aa78, #05603e);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -moz-linear-gradient(#00aa78, #05603e);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -ms-linear-gradient(#00aa78, #05603e);
    background:
      -o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -o-linear-gradient(#00aa78, #05603e);
    background:
      linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      linear-gradient(#00aa78, #05603e);
  }
  li:nth-child(6n+6) a:hover, li:nth-child(6n+6) a:focus {
    background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
      -webkit-gradient(linear, left top, left bottom, from(#0074ae), to(#073c66));
    background:
      -webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -webkit-linear-gradient(#0074ae, #073c66);
    background:
      -moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -moz-linear-gradient(#0074ae, #073c66);
    background:
      -ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -ms-linear-gradient(#0074ae, #073c66);
    background:
      -o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      -o-linear-gradient(#0074ae, #073c66);
    background:
      linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
      linear-gradient(#0074ae, #073c66);
  }
  li .title {
    float: left;
    margin: 0 30px 0 0;
    border-right: 1px solid rgba(255,255,255,1.0);
    padding: 0 20px 0 0;
    height: 60px;
  }
  li h3 {
    display: inline;
    line-height: 56px;
    font-size: 40px;
  }
  .title .stat {
    margin-top: -14px;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    height: 19px;
    opacity: 0.5;
  }
  .title .stat span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABeCAYAAAAqoZR9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAupJREFUeNrsmM9rE0EUx3e1Vq3Gxh/k4K9EKkhBMN4FA5689SAlUNB4y0lUFFEQFPQovRU8pTd7MqJ/QIo3Rehq8WZJWlCwIIn2oIjt+n363fA6O7tZWws97INP2Z197zuT92ZnuuP6vu+sx7ZY2srAA6LcIT7byiFvGQHJgDrogCrIq2d5tnXokwmeaQF5MA3KRrAWOUufuikgQQtUrvl/TRw9hdgD+iwwpivgcYiOErBZjT5VxjguqyB/9jAt33ok/jSYo18hqEITLIGhBJUbpG9TCwQ2l0CgZSujr0pTTpCDDO/zwQjegjFQ430BPFT9PAMlcJn3Y4yZt5UxqLOnep42JlyojHoiBROmrgQ8NZlWTSSdxIugzaENG4mTElf5rE3f0Lugf45nSaAXDFvjxrzOebCX1+0/CbOYuxHrQSqQCqQC/1HgFJgAM2SCbU7c5iocBi+4gHwCd8ANMA9WwFNwSMfo4AvgC4Pfg35wHAyDnWBWCY+YAnfZQ2CXwAl1fxLcVve/wE2J7eMvGZDVyciNyz1zhVuZtq3gu5mDUbDIHt6BXfwJB8EAaPHZZ3DelgNhCDyh40fwiAS5mTKTGLWoyhY+Cs6AHeAVeAxm01U5FUgFUoH1CuTAD/B8rQIHwDawuBYBCZ7i9cteO5NJliv0Mrhm84kL3qeCr0T5RQXnjOB+jiaRQM7S8xvwmptNT4HrDL6l2ia5H1ZNf7MKR8BRXn8A+7lHBlXYzXJGViHoXVgCJXAOfGXbT/7PELu1LXNXFuuztG3nfeREyilHR23/Ysd0cLo3pgKpwGYSSGR4YyugAcbjnK7KCmRpL6rvhKZ8bEQJjCunimpvWM5TKjaBkuHU5NBt1u6uSEqgwC+0bMLUyBFpq1sF13XlkG3yH3JbDHXGhDX8ZFaKSuZIguBadyLxiK+gNLKhM8PVJsfE981hzyQctlSmaBu2bN33pDwxgTLRQhVybfPBPAJlhZzNeZb2W4ABABjYikWzwWlLAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
    display: inline-block;
    padding: 1px 8px 0 24px;
  }
  .title .stat .w {
    background-position: 4px -24px;
  }
  .title .stat .f {
    background-position: 4px -50px;
  }
  .title .stat .t {
    background-position: 4px -75px;
  }
  li div.size {
    float: right;
    margin: 0 0 0 30px;
    padding: 0 0 0 20px;
    line-height: 66px;
    height: 60px;
    font-size: 40px;
    font-weight: normal;
    -x-border-left: 1px solid rgba(255,255,255,1.0);
    font-family: 'Maiden Orange', arial, serif;
    width: 100px;
    white-space: nowrap;
  }
/*  li h3 a {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-transform: scale(0.9) translate3d(0,0,0);
  }
  li h3 a:hover {
    -webkit-transition: all 0.3s;
    -webkit-transform: scale(1.0) translate3d(0,0,0);
  }*/
  p.footer {
    width: 450px;
    padding: 20px 0 40px 0;
    border-top: 1px solid #58AA00;
    color: #fff;
    margin: 0 auto;
    line-height: 20px;
  }
  p.footer strong {
    font-size: 21px;
  }
  p.footer a {
    color: #fff;
  }
  p.footer span.asterisk {
    color: #00AA78;
    padding: 0 10px;
  }
  p.footer span.links {
    display: block;
    color: #fff;
    margin-top: 8px;
    font-size: 12px;
  }
  .clue {
    margin-top: 40px;
    border-top: 1px solid #A839B2;
    padding: 30px 0;
    width: 450px;
    margin: 40px auto;
  }
  div.clue p {
    width: 450px;
    color: rgb(255,255,255);
    margin: 10px auto 0 auto;
    line-height: 20px;
  }
  div.clue p strong {
    font-size: 30px;
    line-height: 32px;
    display: block;
    color: #0074AE;
  }
  .clue strong span:nth-child(6n+1) { color: #A839B2; }
  .clue strong span:nth-child(6n+2) { color: #FF0071; }
  .clue strong span:nth-child(6n+3) { color: #ACD030; }
  .clue strong span:nth-child(6n+4) { color: #58AA00; }
  .clue strong span:nth-child(6n+5) { color: #00AA78; }
  .clue strong span:nth-child(6n+6) { color: #0074AE; }
  .clue a {
    color: #FF0071;
  }
  p {
    -webkit-font-smoothing: antialiased;
    text-rendering:optimizeLegibility;
  }
  p.promotejs {
    margin: 0 auto 40px auto;
  }
  pre {
    font-size: 8pt;
    line-height: 100%;
    text-align: left;
  }
  #ineed {
    margin: 10px auto;
    font-size: 25px;
    width: 650px;
    position: relative;
  }
  #ineed > span {
    display: inline-block;
    width: 125px;
  }
  #ineed_text {
    border: solid 1px #555;
    margin: 0 15px 0 0;
    font-size: 25px;
    background: black;
    color: white;
    padding: 3px;
    width: 502px;
  }
  #ineed_select {
    position: absolute;
    right: 15px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 508px;
    text-align: left;
    background: #000;
    border: solid 1px #555;
    cursor: pointer;
    z-index: 1;
  }
  #ineed_select > div {
    height: 28px;
    padding: 4px 6px 0px 6px;
    line-height: 90%;
  }
  #ineed_select > div:hover, #ineed_select > div.selected {
    background-color: #555;
  }

  </style>
  </head>
  <body>

  <div id="header">
    <h1>
      <span>m</span><span>i</span><span>c</span><span>r</span><span>o</span><span>j</span><span>s</span>
    </h1>
    <h1 class="overlay">
      <span>m</span><span>i</span><span>c</span><span>r</span><span>o</span><span>j</span><span>s</span>
    </h1>
  </div>

  <div id="ineed" style="display: none;">
    <span>I need ...</span><input type="text" id="ineed_text">
    <div id="ineed_select" style="display: none;"></div>
  </div>

  <p>
    <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://microjs.com/" data-count="horizontal" data-via="thomasfuchs">Tweet</a><script src="http://platform.twitter.com/widgets.js"></script>
  </p>

  <ul id="results"></ul>

  <div class="clue">
    <p><strong><span>Fantastic</span><span> Micro</span><span>-</span><span>Frameworks</span><span> and</span><br>
      <span>Micro</span><span>-</span><span>Libraries</span><span> for</span><span> Fun</span>
      <span>and</span><span> Profit</span><span>!</span></strong>
    </p>
    <p>How much library code do you really need — 50K? 100K? 150K? More? How
    much of that do you really use?</p>

    <p>Sure, we all love our favorite monolithic frameworks, and sometimes we
    even use them fully. But how often do we reach for the ride-on John
    Deere tractor with air conditioning and six-speaker sound system, when
    a judiciously applied pocketknife would do the trick better, faster,
    slicker?</p>

    <p>Micro-frameworks are definitely the pocketknives of the JavaScript
    library world: short, sweet, to the point. And at 5k and under,
    micro-frameworks are very very portable. A micro-framework does one
    thing and one thing only — and does it well. No cruft, no featuritis,
    no feature creep, no excess anywhere.</p>

    <p>Microjs.com helps you discover the most compact-but-powerful
    microframeworks, and makes it easy for you to pick one that’ll work
    for you.</p>

    <p>Want to add your own?
    <a href="https://github.com/madrobby/microjs.com">Fork this site on GitHub</a>,
    add your framework to data.js and submit a pull request.</p>

    <p style="margin-top:30px">
      <strong><span>Can't</span> <span>get</span> <span>enough</span><span>?</span></strong>
    </p>
    <p>
      <a href="http://140byt.es/">140byt.es</a> provides tweet-sized JavaScript goodness!
    </p>

    <p>
      Want to master the JavaScripts?<br>Grab a seat at the <a href="http://javascriptmasterclass.com/">JavaScript Master Class</a>. 
    </p>
  </div>

  <p class="footer">
    <strong>microjs</strong> — a micro-site for micro-frameworks
    <span class="links">
    © 2011-2012 <a href="//mir.aculo.us/">Thomas Fuchs</a> <span class="asterisk">✻</span>
    <a href="https://github.com/madrobby/microjs.com">source on GitHub</a> <span class="asterisk">✻</span>
    sizes minified &amp; gzipped
    </span>
  </p>

  <p class="promotejs">
    <a href='https://developer.mozilla.org/en/JavaScript' title='JavaScript'><img src='http://static.jsconf.us/promotejsh.gif' height='150' width='180' alt='JavaScript'/></a>
  </p>

  <script src="data-min.js"></script>
  <script type="text/javascript" id="scr">
/* Micro-Framework-Listing-Site-Microlib
 * Now with extra-chocolatey easter eggs!
 * Copyright (c) 2011-2012 @madrobby, @rvagg & other contributors
 * Licenced under the MIT open source licence - http://www.opensource.org/licenses/mit-license.html
 */

(function () {
  var $ = function (s) { return document.getElementById(s) }
    , $ineed = $('ineed')
    , $ineedText = $('ineed_text')
    , $ineedSelect = $('ineed_select')
    , $results = $('results')
      // micro-templating
    , t = function (s, d){
        for (var p in d) s = s.replace(new RegExp('{' + p + '}', 'g'), d[p])
        return s
      }
    , render = function (results){
        var html = [], i = results.length, r
        while (i--) {
          if (!(r = results[i])._rendered) {
            r.stat =
                '<div class="stat">'
              + (r.ghwatchers ? t('<span class="w">{ghwatchers}</span><span class="f">{ghforks}</span>', r) : '')
              + (r.tweets ? t('<span class="t">{tweets}</span>', r) : '')
              + '</div>'
            r._rendered = t('<li><a href="{url}"><div class="size">{size}</div><div class="title"><h3>{name}</h3>{stat}</div>{description}</a></li>', r)
          }
          html.push(results[i]._rendered)
        }
        $results.innerHTML = html.join('')
      }

  MicroJS.sort(function () { return 0.5 - Math.random() })

// mini feature-detect for some of the stuff we use with fallback for garbage browsers
;Array.prototype.forEach && Array.prototype.filter && document.documentElement.addEventListener && document.querySelector ?
(function () {
  // list of options to show in the pseudo-select box
  var options = [
          { tag: 'base', label: 'a base framework.' }
        , { tag: 'dom', label: 'a DOM utility.' }
        , { tag: 'templating', label: 'templating.' }
        , { tag: 'animation', label: 'CSS animation.' }
        , { tag: 'jsanimation', label: 'JavaScript animation.' }
        , { tag: 'css', label: 'a CSS selector engine.' }
        , { tag: 'data', label: 'data manipulation.' }
        , { tag: 'class', label: 'a Class system.' }
        , { tag: 'functional', label: 'functional programming.' }
        , { tag: 'loader', label: 'a JavaScript loader.' }
        , { tag: 'json', label: 'JSON.' }
        , { tag: 'ajax', label: 'AJAX.' }
        , { tag: 'testing', label: 'to test stuff (e.g. unit testing).' }
        , { tag: 'validation', label: 'to validate stuff.' }
        , { tag: 'games', label: 'to write a game.' }
        , { tag: 'canvas', label: 'to do CANVAS/2D graphics!' }
        , { tag: 'color', label: 'to convert colors.' }
        , { tag: 'list', label: 'to create searchable & sortable lists.' }
        , { tag: 'spa', label: 'single page apps.' }
        , { tag: 'storage', label: 'persistent storage.' }
        , { tag: 'mvc', label: 'client-side MVC.' }
        , { tag: 'feature', label: 'feature/browser detection.' }
        , { tag: 'events', label: 'events!' }
        , { tag: 'webkit', label: 'WebKit-specific libraries.' }
        , { tag: 'mobile', label: 'mobile-specific libraries.' }
        , { tag: 'responsive', label: 'libraries for responsive designs.' }
        , { tag: 'polyfill', label: 'polyfills.' }
        , { tag: 'analytics', label: 'analytics.' }
        , { tag: 'hyphenation', label: 'hyphenation.' }
        , { tag: 'async', label: 'asynchronous programming' }
        , { tag: 'compose', label: 'to compose my own framework!' }
        , { tag: 'micro', label: 'to code a site listing micro-frameworks!' }
      ]
    , selectBoxOptions = {
          itemHeight: 32 // how high is each item in the list?
        , maxItems: options.length // max items to show
        , minItems: 5 // min items to show
        , boxBorder: 2 // how many px is the border of the select box
      }
    , lastSearch
    , selectedItem = function () { return $ineedSelect.querySelector('div.selected') }
      // show drop-down box
    , showopt = function (opt) {
        if ($ineedSelect.style.display === '') return
        var s = '', height
        ;(opt || options).forEach(function (option) { s += '<div>' + option.label + '</div>' })
        $ineedSelect.innerHTML = s
        $ineedSelect.style.display = ''
        // how much space do we have to spare for the select box?
        height = roundToItemHeight(
            window.innerHeight - offsetTop($ineedSelect) + document.body.scrollTop + selectBoxOptions.boxBorder)
        // decide how big we should make the box
        height = Math.max(
            selectBoxOptions.itemHeight * selectBoxOptions.minItems
          , Math.min(selectBoxOptions.itemHeight * selectBoxOptions.maxItems, height))
        $ineedSelect.style.height = height + 'px'
      }
      // given x, round it to the nearest number of select box items we can fit in, - 1
    , roundToItemHeight = function (x) {
        return (Math.round(x / selectBoxOptions.itemHeight) - 1) * selectBoxOptions.itemHeight
      }
    , offsetTop = function (e) {
        var ot = 0
        while (e && e !== document) {
          ot += e.offsetTop
          e = e.offsetParent
        }
        return ot
      }
      // hide drop-down box
    , hideopt = function () {
        var si = selectedItem()
        if (si) si.className = ''
        $ineedSelect.style.display = 'none'
      }
      // here's a microlib right here, this little beauty is uber-helpful - @rvagg
      // delay invocation of arg1 by arg2 milliseconds, but push back that delay
      // each time we get another call before invocation, great for key-events
    , cumulativeDelayed = function() {
        var tid, args = Array.prototype.slice.call(arguments)
          , fn = args.shift(), timeout = args.shift()
        return function() {
          var _args = args.concat(Array.prototype.slice.call(arguments))
          if (tid) clearTimeout(tid)
          tid = setTimeout(function() { fn.apply(null, _args) }, timeout)
        }
      }
    , blurListener = cumulativeDelayed(function (e) { hideopt()}, 200)
    , focusListener = function (e) { showopt(); search() }
    , selectListener = function (e, el) { // click events
        if (e) el = e.target
        $ineedText.value = el.textContent || el.innerText
        e && keydownListener({ keyCode: 13 })
      }
    , keydownDelayed = cumulativeDelayed(function () { search() }, 250)
    , showsearch = function () { showopt(); search() }
      // make our pseudo-select box work as if it was a real select box
    , keydownListener = function (e) {
        switch (e.keyCode) {
          case 38: //up
            showsearch(); selectUp()
            break;
          case 40: //down
            showsearch(); selectDown()
            break;
          case 13: //return
            hideopt(); search()
            break;
          default:
            hideopt(); keydownDelayed()
        }
      }
      // arrow-up
    , selectUp = function (e) {
        var si = selectedItem()
        if (si && si != $ineedSelect.firstChild) {
          si.className = ''
          ;(si = si.previousSibling).className = 'selected'
          if (si.offsetTop < $ineedSelect.scrollTop) $ineedSelect.scrollTop -= si.offsetHeight
          selectListener(null, si)
        }
      }
      // arrow-down
    , selectDown = function (e) {
        var si = selectedItem()
        if (!si) $ineedSelect.firstChild.className = 'selected'
        else if (si != $ineedSelect.lastChild) {
          si.className = ''
          ;(si = si.nextSibling).className = 'selected'
          if (si.offsetTop + si.offsetHeight > $ineedSelect.offsetHeight + $ineedSelect.scrollTop)
            $ineedSelect.scrollTop += si.offsetHeight
          selectListener(null, si)
        }
      }
    , search = cumulativeDelayed(function () {
        var i, libMatches, kw = $ineedText.value
        if (kw == lastSearch) return
        lastSearch = kw
        // special case for when text == an option, in which case search by tag
        for (i = 0; i < options.length; i++) {
          if (kw == options[i].label) { kw = options[i].tag; break; }
        }
        location.href = location.href.replace(/(#.*$)|($)/, '#' + (kw || ''))
        if (kw == 'micro') {
          $results.innerHTML = '<pre>' + $('scr').innerHTML
            .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
            .replace(/ /g, '&nbsp;').replace(/\n/g, '<br>') + '</pre>'
          return
        }
        kw = kw.split(/\s+/)
        libMatches = searchArray(MicroJS, kw)
        render(libMatches)
      }, 200)
    , searchArray = function (arr, kw) {
        if (!kw || !kw.length) return arr
        var kwre = [], l, i
        // turn keywords into matchers
        kw.forEach(function (k) { kwre.push(new RegExp(' [^ ]*' + k.replace(/[^\w\-\.]/g, '') + '[^ ]* ')) })
        l = kwre.length
        // perform an AND search for all keywords
        return arr.filter(function (el) {
          for (i = 0; i < l; i++)
            if (!kwre[i].test(el._ss)) return false
          return true
        })
      }

  // prepare the libs for search, make a search string that's space-separated with tags, name, description & url
  MicroJS.forEach(function (mj) { mj._ss = ' ' + mj.tags.concat([ mj.name, mj.description, mj.url, '' ]).join(' ') })

  $ineedText.addEventListener('focus', focusListener, false)
  $ineedText.addEventListener('click', focusListener, false)
  $ineedText.addEventListener('blur', blurListener, false)
  $ineedText.addEventListener('keydown', keydownListener, false)
  $ineedSelect.addEventListener('click', selectListener, false)

  ;(function(kw) {
    if (!kw) return
    for (var i = 0; i < options.length; i++) {
      if (kw == options[i].tag) { kw = options[i].label; break; }
    }
    $ineedText.value = kw
  }(location.href.split('#')[1]))

  search()
  $ineed.style.display = ''

})() : render(MicroJS) // fallback for old browsers, you don't deserve the sweetness!

})()

  </script>

<script>
  var _gauges = _gauges || [];
  (function() {
    var t   = document.createElement('script');
    t.type  = 'text/javascript';
    t.async = true;
    t.id    = 'gauges-tracker';
    t.setAttribute('data-site-id', '4f99af6f613f5d5267000080');
    t.src = '//secure.gaug.es/track.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(t, s);
  })();
</script>
  

  </body>
</html>