diff web/index.html @ 192:fd0bcf094cf8

First go at some contemporary HTML/CSS stuff for the Booke.
author Jim Hague <jim.hague@acm.org>
date Fri, 15 Feb 2013 20:32:21 +0000
parents 9836536b67cc
children 0e5a72b8894f
line wrap: on
line diff
--- a/web/index.html	Sun Feb 10 18:27:29 2013 +0000
+++ b/web/index.html	Fri Feb 15 20:32:21 2013 +0000
@@ -1,20 +1,87 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<title>Ye Crie Havock Booke of Dottes</title>
+  <meta charset="utf-8" />
+  <title>Ye Crie Havock Booke of Dottes</title>
+  <link rel="stylesheet" href="css/reset.css" />
+  <link rel="stylesheet" href="css/text.css" />
+  <link rel="stylesheet" href="css/960.css" />
+  <link rel="stylesheet" href="css/dottes.css" />
+
+  <link href='http://fonts.googleapis.com/css?family=Pirata+One|Oswald' rel='stylesheet' type='text/css'>
 </head>
 <body>
-<h1>Ye Crie Havock Booke of Dottes</h1>
-<p>
-<center>
-<img src="buzzard.jpg" alt="Buzzard logo"/>
-</center>
-<p>
-The music of Cry Havoc, a reference.
-<p>
-<a href="Morris/index.html">Dance tunes</a>
-<a href="Session/index.html">Session tunes</a>
-<p>
-<a href="Morris-Cello/index.html">Dance tunes automatically transposed for cello</a>
-<a href="Session-Cello/index.html">Session tunes automatically transposed for cello</a>
+  <div class="container_12">
+    <a href="/">
+      <div class="grid_12 header-strip banner">
+        <h1>Ye Crie Havock Booke of Dottes</h1>
+      </div>
+    </a>
+
+    <div class="clear"></div>
+
+    <div class="grid_12 dottes-body">
+      <h1>The music of Cry Havoc, a reference.</h1>
+      <p>After every practice or dance-out, the musicians of Cry Havoc
+        Botley Morris like to have a little session.
+      <p>Havoc musicians come in all shades of experience and ability.
+        This collection is intended to help those like me who are inexpert with
+        instrument and folk music generally, but have a little musical
+        background.</p>
+      <p>Being folk tunes, many of the tunes herein have many variations.
+        The music presented here is my attempt at reflecting what is actually
+        played at Havoc sessions. I'm in no way suggesting that they are
+        in any way <em>correct</em>. This is just how we go about them.</p>
+      <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>
+      </div>
+    </div>
+
+    <div class="clear"></div>
+
+    <div class="grid_12 dottes-body">
+      <h1>But my instrument isn't suited for treble clef concert pitch!</h1>
+      <p>Of course, not all instruments are suited to playing music written
+        in concert pitch in the treble clef.
+      <p>To help those with such instruments get started, I've done some
+        simple transpositions for requested instruments. These are
+        <strong>not</strong> proper arrangements; I lack the time and the
+        knowledge or ability to do that. Instead, they are automatically
+        generated from the concert pitch originals using a typically very
+        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>
+        </div>
+    </div>
+
+  </div>
 </body>
 </html>