Tokyo by bike

dabblet.css

/*
 * Tokyo by bike
 */
html {
  background: url(http://people.mozilla.org/~bbirtles/soi/yakei.jpg);
  background-size: cover;
}
body {
  border: 1px solid black;
  border-radius: 35px;
  padding: 1em;
  margin: 2em;
  box-shadow: 5px 5px 10px black;
  background: rgba(255,255,255,0.8);
}
h1 {
  text-align: center;
}
p {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
figure {
  text-align: center;
  margin: 1em 0;
}
figure img, figure video {
  border: 1px solid black;
  max-width: 100%;
}

dabblet.html

<h1>The ride home</h1>
<p>Recently I have been riding to work. It takes about 35 minutes and goes
   past Toyko central station and the Imperial palace.</p>
<figure class="map">
  <img src="http://people.mozilla.org/~bbirtles/soi/ride-home-map.png">
  <figcaption>The route home starting from Koujimachi, past the Imperial palace
  and then through Ginza</figcaption>
</figure>
<figure>
  <!-- Put video in here:
     The URL is http://people.mozilla.org/~bbirtles/soi/ride-home.webm
     (For the H.264 version which we will talk about later, it's
      http://people.mozilla.org/~bbirtles/soi/ride-home.mp4)
   -->
  <figcaption>The view from my bicycle basket.</figcaption>
</figure>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}