Mercurial > dottes

changeset 224:db569ede2165

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Give in to my inner OCD and make the tune list a DIV with CSS, not a table.
author Jim Hague <jim.hague@acm.org>
date Fri, 22 Feb 2013 23:20:06 +0000
parents 0ef955669a9a
children acadddb1df88
files dottes.html.footer dottes.html.header dottes.html.tuneindex web/css/dottes.css
diffstat 4 files changed, 35 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/dottes.html.footer	Fri Feb 22 01:09:37 2013 +0000
+++ b/dottes.html.footer	Fri Feb 22 23:20:06 2013 +0000
@@ -1,4 +1,4 @@
-</table>
+</div>
 </div>
 </body>
 </html>
--- a/dottes.html.header	Fri Feb 22 01:09:37 2013 +0000
+++ b/dottes.html.header	Fri Feb 22 23:20:06 2013 +0000
@@ -37,4 +37,4 @@
 
     <div class="grid_12 dottes-body">
       <h1>The tunes</h1>
-      <table class="dottes-tune-table">
+      <div class="dottes-tune-list">
--- a/dottes.html.tuneindex	Fri Feb 22 01:09:37 2013 +0000
+++ b/dottes.html.tuneindex	Fri Feb 22 23:20:06 2013 +0000
@@ -1,4 +1,9 @@
-<tr>
-<td><a class="dottes-tune-link" href="@TUNE@.html">@TITLE@</a></td>
-<td><img class="dottes-tune-table-image" src="firstline-@TUNE@.png" alt="@TITLE@ first line"></td>
-</tr>
+<div class="dottes-tune-list-item">
+  <div class="dottes-tune-list-item-link">
+    <a class="dottes-tune-link" href="@TUNE@.html">@TITLE@</a>
+  </div>
+  <div class="dottes-tune-list-item-image">
+    <img class="dottes-tune-table-image" src="firstline-@TUNE@.png"
+         alt="@TITLE@ first line">
+  </div>
+</div>
--- a/web/css/dottes.css	Fri Feb 22 01:09:37 2013 +0000
+++ b/web/css/dottes.css	Fri Feb 22 23:20:06 2013 +0000
@@ -126,17 +126,7 @@
 {
     font-size: 20px;
     position: relative;
-    top: 10px;
-}
-
-table.dottes-tune-table
-{
-    margin: 10px;
-}
-
-table.dottes-tune-table td
-{
-    vertical-align: middle;
+    top: 12px;
 }
 
 ul.tune-type-list
@@ -168,3 +158,26 @@
     display: inline;
     margin: 10px;
 }
+
+div.dottes-tune-list
+{
+    display: table;
+    margin: 10px;
+}
+
+div.dottes-tune-list-item
+{
+    display: table-row;
+}
+
+div.dottes-tune-list-item-link
+{
+    display: table-cell;
+    vertical-align: middle;
+}
+
+div.dottes-tune-list-item-image
+{
+    display: table-cell;
+    vertical-align: middle;
+}