enable color on zoomed image tiles

index.html

@@ -76,6 +76,7 @@
       node['url'] = url
     }
     node['image'] = tiles.get_tile_path(z, y, x);
+    node['class'] = "iz"+z;
     if (z < maxzoom) {
       kids = [];
       ref = [0, 1];

styles.css

@@ -1,14 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins');
 
-@font-face {
-      font-family: "Libertinage x";
-      src: url("fonts/Libertinage-x.ttf");
-}
-
 body {
     margin: 5em;
-    font-family: "Libertinage x", serif;
-    font-size: 1.1em;
     color: #2d2020;
     background: #f2eee8;
 }
@@ -31,6 +24,10 @@ div.tile img.imagetile {
 div.tile img.imagetile:hover {
     filter: none;
 }
+/* enable color on tiles once the image is zoomed beyond a single tile (iz >= 1) */
+div.tile.iz1 img.imagetile, div.tile.iz2 img.imagetile, div.tile.iz3 img.imagetile, div.tile.iz4 img.imagetile {
+  filter:none;
+}
 div.tile div.text {
     position: absolute;
     left: 0; top: 0;