Swap to icon grid instead of individual icons

saves like 3kb :p

private/directory.html

@@ -8,12 +8,16 @@
     <link rel="icon" href="/private/favicon.png?v={{ .Version }}">
     <title>Browser: {{ .Path }}</title>
     <style>
-        a.entry[data-type="directory"] div.icon {
-            background-image: url("/private/icon_folder.png?v={{ .Version }}");
+        div.pattern {
+            background-image: url("/private/bg_pattern.png?v={{ .Version }}");
         }
 
-        a.entry[data-type="directory"]:hover div.icon {
-            background-image: url("/private/icon_folder_open.png?v={{ .Version }}");
+        div.graphic {
+            background-image: url("/private/bg_graphic.png?v={{ .Version }}");
+        }
+
+        a.entry div.icon {
+            background-image: url("/private/icon_grid.png?v={{ .Version }}");
         }
     </style>
 </head>
@@ -45,20 +49,20 @@
 
             {{ if .Parent }}
             <a class="entry" data-type="directory" data-ignore="true" href="{{ .Parent }}">
-                <div class="icon"></div>
+                <div class="icon icon-directory"></div>
                 <span class="filename">../</span>
             </a>
             {{ end }}
 
             {{ range .Item }}
             {{ if .IsDir }}
-            <a class="entry" data-type="directory" href="{{ EncodeURI .Name }}/" title="{{ .Name }}&#10;Modified: {{ .ModTime.Format "2006-01-02 15:04" }}">
-                <div class="icon"></div>
+            <a class="entry" data-type="directory" href="{{ EncodeURI .Name }}/" title="{{ .Name }}&#10;Modified: {{ .ModTime.Format " 2006-01-02 15:04" }}">
+                <div class="icon icon-directory"></div>
                 <span class="filename">{{ .Name }}</span>
             </a>
             {{ else }}
-            <a class="entry" data-type="file" href="{{ EncodeURI .Name }}" title="Name: {{ .Name }}&#10;Size: {{ GetEntrySizeHuman .Size }}&#10;Modified: {{ .ModTime.Format "2006-01-02 15:04" }}">
-                <img class="icon" src="/private/{{ GetEntryIcon .Name .IsDir }}?v={{ $.Version }}">
+            <a class="entry" data-type="file" href="{{ EncodeURI .Name }}" title="Name: {{ .Name }}&#10;Size: {{ GetEntrySizeHuman .Size }}&#10;Modified: {{ .ModTime.Format " 2006-01-02 15:04" }}">
+                <div class="icon {{ GetEntryIcon .Name .IsDir }}"></div>
                 <span class="filename">{{ .Name }}</span>
             </a>
             {{ end }}

private/styles.css

@@ -1,3 +1,5 @@
+/* Layout */
+
 body {
     margin: 0;
 }
@@ -26,13 +28,11 @@ div.foreground {
 }
 
 div.pattern {
-    background: url("/private/bg_pattern.png?v={{ .Version }}");
     background-repeat: repeat-x;
     height: 152px;
 }
 
 div.graphic {
-    background: url("/private/bg_graphic.png?v={{ .Version }}");
     width: 256px;
     height: 259px;
     position: absolute;
@@ -56,12 +56,6 @@ div.directory {
     flex-wrap: wrap;
 }
 
-a.entry[data-type="directory"] div.icon {
-    background-size: 32px 32px;
-    height: 32px;
-    width: 32px;
-}
-
 a.entry {
     display: inline-flex;
     flex-direction: column;
@@ -73,7 +67,7 @@ a.entry {
     color: inherit;
 }
 
-a.entry img.icon {
+a.entry div.icon {
     height: 32px;
     width: 32px;
 }
@@ -87,7 +81,6 @@ a.entry span.filename {
 }
 
 @media (max-width: 600px) {
-
     a.entry {
         padding: 4px;
         width: 100%;
@@ -96,14 +89,57 @@ a.entry span.filename {
         gap: 8px;
     }
 
-    a.entry img.icon,
-    a.entry[data-type="directory"] div.icon {
-        background-size: 1em 1em;
-        height: 1em;
-        width: 1em;
-    }
-
     a.entry span.filename {
         font-size: 1em;
     }
 }
+
+/* Icons */
+
+.icon-archive {
+    background-position: 0 0;
+}
+
+.icon-audio {
+    background-position: -32px 0;
+}
+
+.icon-config {
+    background-position: -64px 0;
+}
+
+.icon-document {
+    background-position: -96px 0;
+}
+
+a.entry[data-type="directory"] .icon-directory {
+    background-position: 0 -32px;
+}
+
+a.entry[data-type="directory"]:hover .icon-directory {
+    background-position: -32px -32px;
+}
+
+.icon-generic {
+    background-position: -64px -32px;
+}
+
+.icon-photo {
+    background-position: -96px -32px;
+}
+
+.icon-program {
+    background-position: 0 -64px;
+}
+
+.icon-redirect {
+    background-position: -32px -64px;
+}
+
+.icon-script {
+    background-position: -64px -64px;
+}
+
+.icon-video {
+    background-position: -96px -64px;
+}