Mercurial > dottes

changeset 213:8e6105d2bf59

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Sort out the tunes and transposition displayed on the front page.
author Jim Hague <jim.hague@laicatc.com>
date Tue, 19 Feb 2013 16:26:16 +0000
parents 9502f4883006
children a8f8718d2cf7
files web/css/dottes.css web/index.html
diffstat 2 files changed, 48 insertions(+), 33 deletions(-) [+]
line wrap: on
line diff
--- a/web/css/dottes.css	Mon Feb 18 22:37:46 2013 +0000
+++ b/web/css/dottes.css	Tue Feb 19 16:26:16 2013 +0000
@@ -95,21 +95,31 @@
     margin: 10px;
 }
 
-div.dottes-container h1
-{
-    padding: 0px;
-}
-
 div.dottes-transpose-instrument
 {
+    display: table;
+    width: 100%;
+}
+
+div.dottes-transpose-instrument-item
+{
+    display: table-cell;
+    vertical-align: middle;
 }
 
-div.dottes-transpose-how
+div.dottes-transpose-instrument-name
 {
+    width: 15%;
 }
 
-div.dottes-transpose-tunes
+div.dottes-transpose-instrument-how
 {
+    width: 55%;
+}
+
+div.dottes-transpose-tune-types
+{
+    width: 30%;
 }
 
 a.dottes-tune-link
@@ -132,11 +142,12 @@
 ul.tune-type-list
 {
     list-style-type: none;
+    margin: 0;
 }
 
 ul.tune-type-list li
 {
-    display: inline;
+    display: inline-block;
 }
 
 img.dottes-png
--- a/web/index.html	Mon Feb 18 22:37:46 2013 +0000
+++ b/web/index.html	Tue Feb 19 16:26:16 2013 +0000
@@ -34,18 +34,20 @@
       <p>The tunes we play tend to vary over time. So this collection is
         not static, but will change over time. I'll probably not delete tunes,
         but at some stage may get round to marking some as less used.</p>
-      <div class="grid_11 dottes-container">
-        <div class="grid_2 alpha">
-          <h1>Tunes</h1>
-        </div>
-        <div class="grid_5">
-          <p>The tunes are separated into tune collections.
-        </div>
-        <div class="grid_4 omega">
-          <ul class="tune-type-list">
-            <li><a href="Morris">Morris</a></li>
-            <li><a href="Session">Session</a></li>
-          </ul>
+      <div class="dottes-container">
+        <div class="dottes-transpose-instrument">
+          <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
+            <h1>Tunes</h1>
+          </div>
+          <div class="dottes-transpose-instrument-item dottes-transpose-how">
+            <p>The tunes are separated into tune collections.
+          </div>
+          <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
+            <ul class="tune-type-list">
+              <li><a href="Morris">Morris</a></li>
+              <li><a href="Session">Session</a></li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
@@ -62,19 +64,21 @@
         simple method.
       <p>I hope you find them useful.
 
-        <div class="grid_11 dottes-container">
-          <div class="grid_2 alpha dottes-transpose-instrument">
-            <h1>Cello</h1>
-          </div>
-          <div class="grid_5 dottes-transpose-how">
-            <p>Transpose down one or two octaves depending on the range in the
-              tune, and use the bass clef.
-          </div>
-          <div class="grid_4 omega dottes-transpose-tunes">
-            <ul class="tune-type-list">
-              <li><a href="Morris-Cello">Morris</a></li>
-              <li><a href="Session-Cello">Session</a></li>
-            </ul>
+        <div class="dottes-container">
+          <div class="dottes-transpose-instrument">
+            <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
+              <h1>Cello</h1>
+            </div>
+            <div class="dottes-transpose-instrument-item dottes-transpose-how">
+              <p>Transpose down one or two octaves depending on the range in the
+                tune, and use the bass clef.
+            </div>
+            <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
+              <ul class="tune-type-list">
+                <li><a href="Morris-Cello">Morris</a></li>
+                <li><a href="Session-Cello">Session</a></li>
+              </ul>
+            </div>
           </div>
         </div>
     </div>