Small Demos

dabblet.css

/**
 * Small Demos
 */

head, body { padding:0; margin:0 }
header menu { text-indent:-30em; display:inline-block;
  background:url(http://f.cl.ly/items/2b2D430f0I362O0B1B1I/511%20white.png) no-repeat 50% black;
  background-size:contain; margin:0;
  width:100%; height:3em }
  
header nav { font-size:32px }
header nav a { text-indent:-10em; display:inline-block;
  background:url(symbols.png?) no-repeat;
  width:1em; height:1em }
  
  a[href="/books"] { background-position:-59px -1693px }
  a[href="/people"] { background-position:-204px -156px }
  a[href="/places"] { background-position:-108px -1165px }
  a[href="/things"] { background-position:-109px -1404px }
  a[href="/contribute"] { background-position:-58px -734px }

dabblet.html

<header>
<menu>Small Demos</menu>
<nav>
  <a href=/books>Books</a>
  <a href=/people>People</a>
  <a href=/places>Places</a>
  <a href=/things>Things</a>
  <a href=/contribute>Contribute</a>
</nav>
<form><input placeholder=search name=q></form>
</header>

dabblet.js

$('header nav a').each(console.debug);

nav.js

$('header nav a').each(console.debug);

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}