css: attach icons to the <td>, not the <a>.

This has the downside that they are no longer clickable.

It slightly alters both the vertical alignment of the icon and the
link text; the link is now alligned with the other row text (though
because of the space between them, it wasn't really perceptible).

The icon is now actually aligned with a 4px vertical padding, which is
what I always wanted.

1 files changed, 19 insertions, 21 deletions

diff --git a/style.css b/style.css
index 1521b48..03a5bec 100644
--- a/style.css
+++ b/style.css
@@ -23,33 +23,31 @@ tr:hover {
 	box-shadow: inset 0 0 0 1px #bcd;
 }
 
-/* Make room for a 16x16 icon on the left, with 4px padding between it
- * and the text. */
-td a:first-of-type {
+/* Make room for a 16x16 icon on the left, with 4px padding on either
+ * side */
+tr td:first-of-type {
+	padding-left: 24px;
+	background-size: 16px 16px;
+	background-repeat: no-repeat;
+	background-position: 4px 4px;
 	margin-left: 20px;
 }
-td a:first-of-type::before {
-	width: 16px;
-	height: 16px;
-	margin-left: -20px;
-	margin-right: 4px;
-}
 
 /* generic inode information ---------------------------------------- */
 tr.hidden { /*opacity: 0.5;*/ display: none; }
 tr.dir a::after { content: "/"; }
-tr.dir          a:first-of-type::before { content: url("dir.png"); }
-tr.dir.parent   a:first-of-type::before { content: url("parent.png"); }
-tr.link         a:first-of-type::before { content: url("link.png"); }
-tr.file         a:first-of-type::before { content: url("file.png"); }
+tr.dir          td:first-of-type { background-image: url("dir.png"); }
+tr.dir.parent   td:first-of-type { background-image: url("parent.png"); }
+tr.link         td:first-of-type { background-image: url("link.png"); }
+tr.file         td:first-of-type { background-image: url("file.png"); }
 /* domain-specific information -------------------------------------- */
-tr.dir.repo     a:first-of-type::before { content: url("repo.png"); }
-tr.arch td { background:#7fc3e5; }
-tr.para td { background:#9fa6e3; }
+tr.dir.repo     td:first-of-type { background-image: url("repo.png"); }
+tr.arch td { background-color:#7fc3e5; }
+tr.para td { background-color:#9fa6e3; }
 tr.community { /* TODO: we should indicate this somehow */ }
 /* file extension information --------------------------------------- */
-tr.file.pkg.tar a:first-of-type::before { content: url("pkg.png"); }
-tr.file.iso     a:first-of-type::before { content: url("iso.png"); }
-tr.file.tar     a:first-of-type::before { content: url("tar.png"); }
-tr.file.txt     a:first-of-type::before { content: url("txt.png"); }
-tr.file.torrent a:first-of-type::before { content: url("torrent.png"); }
+tr.file.pkg.tar td:first-of-type { background-image: url("pkg.png"); }
+tr.file.iso     td:first-of-type { background-image: url("iso.png"); }
+tr.file.tar     td:first-of-type { background-image: url("tar.png"); }
+tr.file.txt     td:first-of-type { background-image: url("txt.png"); }
+tr.file.torrent td:first-of-type { background-image: url("torrent.png"); }