Mercurial > dottes

view dottes.html.tune @ 646:1658f8c41117 build-default-255

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Set minimum size for learner icon in tune list. Otherwise it vanishes completely at small screen sizes.
author Jim Hague <jim.hague@acm.org>
date Tue, 08 Nov 2016 20:26:01 +0000
parents 2d436a8e3dd2
children 763c6916cc7d
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">
      </div>
    </a>

    <div class="dottes-body">
      <div class="dottes-tune-display">
        <div class="dottes-tune-header">
          <div class="dottes-tune-header-icons-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-icons">
              <a class="dottes-tune-icon-link" href="learner-${name}.html">
                <img class="dottes-tune-header-image" src="../img/learner.png"
                     alt="Learner">
              </a>
              <a class="dottes-tune-icon-link" href="index.html">
                <img class="dottes-tune-header-image" src="../img/book.png"
                     alt="Tune index">
              </a>
            </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>
        <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" />
                <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
                  <param name="FileName" value="${name}.mp3" />
                  <param name="autoStart" value="false" />
                  <param name="autoplay" value="false" />
                  <object type="audio/mpeg" data="${name}.mp3">
                    <param name="controller" value="true" />
                    <param name="autoplay" value="false" />
                  </object>
                </object>
              </audio>
            </div>
            <div class="dottes-tune-footer-last">
              Last changed ${lastchanged}
            </div>
          </div>
        </div>
      </div>
    </div>

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