Mercurial > dottes

view dottes.html.learnertune @ 956:c52d237f99d5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Encourage A4 to page break before a tune. This enourages page breaks to happen before tune start, and not between the tune image and any following wording. Also move the vfill to the tune start. That way, if the break does not happen, the vfill will, and the following tune will be spaced down to the bottom of the page if it's the only other tune on the page. Otherwise everything tends to clump at the top of the page.
author Jim Hague <jim.hague@acm.org>
date Wed, 07 Aug 2019 00:01:44 +0100
parents d6e2a281cceb
children
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cry Havoc tunes - learning ${title}</title>
  <link rel="stylesheet" href="../../css/dottes.css" />

  <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
        rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="container">
    <a href="/">
      <div class="header-strip banner">
        <img src="../../img/banner.png" alt="Havoc banner image">
      </div>
    </a>

    <div class="dottes-body">
      <div class="dottes-tune-display">
        <img src="../../img/learner.png" alt="Learner tune image">
        Work out the melody or play along
        with these audio players. They play the melody repeatedly. There's
        a variety of speeds to choose from. You can also download the
        audio files.
      </div>
    </div>

    <div class="dottes-body">
      <div class="dottes-tune-display">
        <div class="dottes-tune-header">
          <div class="dottes-tune-header-parts-column"></div>
          <div class="dottes-tune-header-title-column"></div>
          <div class="dottes-tune-header-composer-column"></div>
          <div class="dottes-tune-header-row">
            <div class="dottes-tune-header-parts">
              <p>
                ${parts}
              </p>
            </div>
            <div class="dottes-tune-header-title">
              <h1>${title}</h1>
              <h2>${subtitle}</h2>
            </div>
            <div class="dottes-tune-header-composer">
              <em>${composer}</em>
            </div>
          </div>
        </div>
        <p>${fulltitle} is in the key of ${key}.
        <div class="dottes-tune-learner">
          <div class="dottes-tune-learner-speed-column"></div>
          <div class="dottes-tune-learner-play-column"></div>
          <div class="dottes-tune-learner-download-column"></div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Normal speed
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../../${mastertunedir}/${name}/normal-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/normal-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-midi" download
                       href="../../${mastertunedir}/${name}/${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Slightly slower
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../../${mastertunedir}/${name}/littleslow-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/littleslow-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/littleslow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/littleslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/littleslow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Slow
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../../${mastertunedir}/${name}/slow-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/slow-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/slow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/slow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/slow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Very slow
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../../${mastertunedir}/${name}/veryslow-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/veryslow-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/veryslow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/veryslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/veryslow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="dottes-tune-footer-learner">
          <div class="dottes-tune-footer-learner-prev-column"></div>
          <div class="dottes-tune-footer-learner-booke-column"></div>
          <div class="dottes-tune-footer-learner-next-column"></div>
          <div class="dottes-tune-footer-learner-row">
            <div class="dottes-tune-footer-learner-prev">
              <a href="../${prevpage}/learner.html">${prevfulltitle}</a>
            </div>
            <div class="dottes-tune-footer-learner-booke">
              <a class="dottes-tune-icon-link" href="index.html">
                <img class="dottes-tune-header-image" src="../../img/music.png"
                     alt="Tune dottes page" title="Go to dottes page for ${fulltitle}">
              </a>
              <a class="dottes-tune-icon-link" href="../../${booke}/index.html">
                <img class="dottes-tune-header-image" src="../../img/book.png"
                     alt="Tune booke index" title="Go to tune booke index">
              </a>
            </div>
            <div class="dottes-tune-footer-learner-next">
              <a href="../${nextpage}/learner.html">${nextfulltitle}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>