Mercurial > dottes

diff dottes.html.learnertune @ 619:2fe68733ec17 build-default-248

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fix learner tune CSS. Broken during tune page CSS revision. Give the main display its own CSS.
author Jim Hague <jim.hague@acm.org>
date Sun, 06 Nov 2016 08:24:22 +0000
parents afc031477784
children dfeb781e5196
line wrap: on
line diff
--- a/dottes.html.learnertune	Sat Nov 05 15:57:32 2016 +0000
+++ b/dottes.html.learnertune	Sun Nov 06 08:24:22 2016 +0000
@@ -31,8 +31,11 @@
     <div class="grid_12 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-left">
+            <div class="dottes-tune-header-icons">
               <a class="dottes-tune-icon-link" href="${name}.html">
                 <img class="dottes-tune-table-image" src="../img/music.png"
                      alt="Dottes">
@@ -42,22 +45,25 @@
                      alt="Tune index">
               </a>
             </div>
-            <div class="dottes-tune-header-middle">
+            <div class="dottes-tune-header-title">
               <h1>${title}</h1>
               <h2>${subtitle}</h2>
             </div>
-            <div class="dottes-tune-header-right">
+            <div class="dottes-tune-header-composer">
               <em>${composer}</em>
             </div>
           </div>
         </div>
         <p>${title} is in the key of ${key}.
-        <div class="dottes-tune-footer">
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+        <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-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" />
@@ -74,7 +80,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/${name}.mp3">MP3</a></li>
@@ -83,11 +89,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Slightly slower
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" />
@@ -104,7 +110,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
@@ -113,11 +119,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Slow
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" />
@@ -134,7 +140,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
@@ -143,11 +149,11 @@
               </ul>
             </div>
           </div>
-          <div class="dottes-tune-footer-row">
-            <div class="dottes-tune-footer-left">
+          <div class="dottes-tune-learner-row">
+            <div class="dottes-tune-learner-speed">
               <p>Very slow
             </div>
-            <div class="dottes-tune-footer-centre">
+            <div class="dottes-tune-learner-play">
               <audio controls loop>
                 <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" />
                 <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" />
@@ -164,7 +170,7 @@
                 </object>
               </audio>
             </div>
-            <div class="dottes-tune-footer-right">
+            <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
                        href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>