Sort out the tunes and transposition displayed on the front page.

This commit is contained in:
Jim Hague 2013-02-19 16:26:16 +00:00
parent e705f35e5e
commit ccb8de1185
2 changed files with 48 additions and 33 deletions

View File

@ -95,21 +95,31 @@ div.dottes-container
margin: 10px;
}
div.dottes-container h1
{
padding: 0px;
}
div.dottes-transpose-instrument
{
display: table;
width: 100%;
}
div.dottes-transpose-how
div.dottes-transpose-instrument-item
{
display: table-cell;
vertical-align: middle;
}
div.dottes-transpose-tunes
div.dottes-transpose-instrument-name
{
width: 15%;
}
div.dottes-transpose-instrument-how
{
width: 55%;
}
div.dottes-transpose-tune-types
{
width: 30%;
}
a.dottes-tune-link
@ -132,11 +142,12 @@ table.dottes-tune-table td
ul.tune-type-list
{
list-style-type: none;
margin: 0;
}
ul.tune-type-list li
{
display: inline;
display: inline-block;
}
img.dottes-png

View File

@ -34,14 +34,15 @@
<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">
<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="grid_5">
<div class="dottes-transpose-instrument-item dottes-transpose-how">
<p>The tunes are separated into tune collections.
</div>
<div class="grid_4 omega">
<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>
@ -49,6 +50,7 @@
</div>
</div>
</div>
</div>
<div class="grid_12 dottes-body">
<h1>But my instrument isn't suited for treble clef concert pitch!</h1>
@ -62,15 +64,16 @@
simple method.
<p>I hope you find them useful.
<div class="grid_11 dottes-container">
<div class="grid_2 alpha dottes-transpose-instrument">
<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="grid_5 dottes-transpose-how">
<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="grid_4 omega dottes-transpose-tunes">
<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>
@ -78,6 +81,7 @@
</div>
</div>
</div>
</div>
</div>
</body>