view dottes.html @ 369:e5f59f0e7dd5

Add audio player to tune web page. Add an <audio> tag to the bottom centre of the tune web page. Give it options for MP3 and OGG files. Most browsers will play MP3, and the ones that won't (Firefox) will play OGG. Since we now have to generate OGGs, add a download link as well.
author Jim Hague <jim.hague@acm.org>
date Wed, 28 Aug 2013 11:54:45 +0100
parents e4d6a612c755
children f1c4abe4fc75
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cry Havoc tunes - @TITLE@</title>
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="../css/text.css" />
  <link rel="stylesheet" href="../css/960.css" />
  <link rel="stylesheet" href="../css/dottes.css" />

  <link href='http://fonts.googleapis.com/css?family=Pirata+One|Oswald'
        rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="container_12">
    <a href="/">
      <div class="grid_12 header-strip banner">
        <h1>Ye Crie Havock Booke of Dottes</h1>
      </div>
    </a>

    <div class="grid_12 dottes-body">
      <h1>@SUBTITLE@</h1>
      <!--#include file="intro.html" -->
      <p>You can download a PDF with a booklet of these tunes. There is an
        <a href="@BOOK@-A5.pdf">A5 landscape book</a> with one
        tune per page, a <a href="@BOOK@-Nook.pdf">4x5in portrait book</a>
        suitable for use with an eReader like a Kindle, Nook, Kobo etc.,
        and an <a href="@BOOK@-A4.pdf">A4 book</a> with two or
        more tunes per page.
      <p>If you have a printer that can do duplex (i.e. print on both sides
        of the paper), you might like the
        <a href="@BOOK@-A5bookletA4.pdf">A5 booklet</a>.
        Print this onto A4 paper using both sides of the paper, and fold in half
        to make an A5 booklet.
      <p>When changes to this site are made, the issue number is incremented.
        This is issue @BUILD@.
    </div>

    <div class="grid_12 dottes-body">
      <h1>The tunes</h1>
      <div class="dottes-tune-list">
        <!--#include file="tunelist.html" -->
      </div>
    </div>
  </div>
</body>
</html>