Mercurial > dottes

diff web/css/dottes.css @ 319:cbe9c10b5a3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Render tune title, subtitle and composer in Latex/HTML and not in the image. This way the titles remains a constant size even if the image needs to be scaled. And we have that text appearance under our control. I can't find a way of switching off the tune title in abcm2ps, and have worked around by setting the title format to Y0. Y is not a defined ABC header and is not found in any Dottes tune.
author Jim Hague <jim.hague@acm.org>
date Tue, 16 Jul 2013 16:35:07 +0100
parents 1e4443d58177
children 27f29e8aafea
line wrap: on
line diff
--- a/web/css/dottes.css	Tue Jul 16 16:27:49 2013 +0100
+++ b/web/css/dottes.css	Tue Jul 16 16:35:07 2013 +0100
@@ -11,7 +11,6 @@
 
 h1 {
     background: white;
-    font-weight: normal;
     text-align: center;
     font-size: 25px;
     font-weight: bold;
@@ -121,6 +120,56 @@
     width: 30%;
 }
 
+div.dottes-tune-display
+{
+    margin: 10px;
+}
+
+div.dottes-tune-header
+{
+    display: table;
+    width: 100%;
+}
+
+div.dottes-tune-header-row
+{
+    display: table-row;
+}
+
+div.dottes-tune-header-left
+{
+    display: table-cell;
+    width: 25%;
+}
+
+div.dottes-tune-header-middle
+{
+    display: table-cell;
+}
+
+div.dottes-tune-header-middle h1
+{
+    font-size: 25px;
+    font-weight: bold;
+    text-align: center;
+    margin: 0px;
+}
+
+div.dottes-tune-header-middle h2
+{
+    font-size: 15px;
+    font-weight: normal;
+    text-align: center;
+    margin: 0px;
+}
+
+div.dottes-tune-header-right
+{
+    display: table-cell;
+    text-align: right;
+    width: 25%;
+}
+
 a.dottes-tune-link
 {
     font-size: 20px;
@@ -143,19 +192,21 @@
 {
     display: block;
     width: 100%; /* Make image fill width */
-    /* margin-left: auto; /* Centre image */
-    /* margin-right: auto; */
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 ul.tune-data-list
 {
     list-style-type: none;
+    margin: 0px;
 }
 
 ul.tune-data-list li
 {
     display: inline;
-    margin: 10px;
+    margin-left: 0;
+    margin-right: 20px;
 }
 
 div.dottes-tune-list
@@ -188,8 +239,6 @@
 
 div.dottes-change-yes
 {
-    display: block;
-    margin: 10px;
 }
 
 div.dottes-change-link