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; margin: 10px;
} }
div.dottes-container h1
{
padding: 0px;
}
div.dottes-transpose-instrument 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 a.dottes-tune-link
@ -132,11 +142,12 @@ table.dottes-tune-table td
ul.tune-type-list ul.tune-type-list
{ {
list-style-type: none; list-style-type: none;
margin: 0;
} }
ul.tune-type-list li ul.tune-type-list li
{ {
display: inline; display: inline-block;
} }
img.dottes-png img.dottes-png

View File

@ -34,18 +34,20 @@
<p>The tunes we play tend to vary over time. So this collection is <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, 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> but at some stage may get round to marking some as less used.</p>
<div class="grid_11 dottes-container"> <div class="dottes-container">
<div class="grid_2 alpha"> <div class="dottes-transpose-instrument">
<h1>Tunes</h1> <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
</div> <h1>Tunes</h1>
<div class="grid_5"> </div>
<p>The tunes are separated into tune collections. <div class="dottes-transpose-instrument-item dottes-transpose-how">
</div> <p>The tunes are separated into tune collections.
<div class="grid_4 omega"> </div>
<ul class="tune-type-list"> <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
<li><a href="Morris">Morris</a></li> <ul class="tune-type-list">
<li><a href="Session">Session</a></li> <li><a href="Morris">Morris</a></li>
</ul> <li><a href="Session">Session</a></li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -62,19 +64,21 @@
simple method. simple method.
<p>I hope you find them useful. <p>I hope you find them useful.
<div class="grid_11 dottes-container"> <div class="dottes-container">
<div class="grid_2 alpha dottes-transpose-instrument"> <div class="dottes-transpose-instrument">
<h1>Cello</h1> <div class="dottes-transpose-instrument-item dottes-transpose-instrument-name">
</div> <h1>Cello</h1>
<div class="grid_5 dottes-transpose-how"> </div>
<p>Transpose down one or two octaves depending on the range in the <div class="dottes-transpose-instrument-item dottes-transpose-how">
tune, and use the bass clef. <p>Transpose down one or two octaves depending on the range in the
</div> tune, and use the bass clef.
<div class="grid_4 omega dottes-transpose-tunes"> </div>
<ul class="tune-type-list"> <div class="dottes-transpose-instrument-item dottes-transpose-tune-types">
<li><a href="Morris-Cello">Morris</a></li> <ul class="tune-type-list">
<li><a href="Session-Cello">Session</a></li> <li><a href="Morris-Cello">Morris</a></li>
</ul> <li><a href="Session-Cello">Session</a></li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>