Mercurial > dottes

view dottes.html.tune @ 738:69a7499817c8 build-default-284

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
On Nook and A5 prints, start a new page with each tune and centre vertically.. A5 mostly did, but ran into trouble with longer comments on a tune. This may give blank space after tunes where a long comment overflows onto another page, but I think for now it's better to have each tune at the top of the page. Or rather, and this is the other change, in the middle of the page. Centre the page content for A5 and Nook.
author Jim Hague <jim.hague@acm.org>
date Thu, 12 Oct 2017 14:50:51 +0100
parents 772402f5f8ea
children 3ba2e11466cd
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 - ${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">
        <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>
              <h3>${tradition}</h3>
            </div>
            <div class="dottes-tune-header-composer">
              <em>${composer}</em>
            </div>
          </div>
        </div>
        <img class="dottes-png" src="${name}.png" alt="${title} dots">
        <div class="dottes-notes-${notesvisibility}">
          ${notes}
        </div>
        <div class="dottes-history-${historyvisibility}">
          ${history}
        </div>
        <div class="dottes-tune-footer">
          <div class="dottes-tune-footer-links-column"></div>
          <div class="dottes-tune-footer-play-column"></div>
          <div class="dottes-tune-footer-last-column"></div>
          <div class="dottes-tune-footer-row">
            <div class="dottes-tune-footer-links">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-pdf" download
                       href="${name}.pdf">PDF</a></li>
                <li><a class="dottes-link-tune dottes-midi" download
                       href="../${masterbooke}/${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/${name}.ogg">OGG</a></li>
                <li><a class="dottes-link-tune dottes-abc" download
                       href="${name}.abc">ABC</a></li>
                <li><a class="dottes-link-tune dottes-xml" download
                       href="${name}.xml">XML</a></li>
              </ul>
            </div>
            <div class="dottes-tune-footer-play">
              <audio controls>
                <source src="../${masterbooke}/${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-footer-last">
              Last changed ${lastchanged}
            </div>
          </div>
          <div class="dottes-tune-footer-row">
            <div class="dottes-tune-footer-prev">
              <a href="${prevpage}">${prevfulltitle}</a>
            </div>
            <div class="dottes-tune-footer-booke">
                <a class="dottes-tune-icon-link" href="learner-${name}.html">
                  <img class="dottes-tune-header-image" src="../img/learner.png"
                       alt="Learner tune page" title="Go to learner page for ${fulltitle}">
                </a>
                <a class="dottes-tune-icon-link" href="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-next">
              <a href="${nextpage}">${nextfulltitle}</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>