initial rerendering of dirlist

assets/css/butter-dir-listing.css

@@ -18,7 +18,6 @@ a:focus {
 }
 
 body {
-    background-color: #FFDF3F;
 }
 
 h2 {
@@ -58,14 +57,56 @@ tbody tr.d:first-of-type
 }
 
 div.list {
-    background-color: white;
-    border-top: 1px solid #646464;
-    border-bottom: 1px solid #646464;
-    padding-top: 10px;
-    padding-bottom: 14px;
+    /* Hide the builtin listing, we're going to render our own. */
+    display: none;
 }
 
 div.foot {
     /* No need to display the lighttpd version; this is user-facing. */
     display: none;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 30px;
+    box-sizing: border-box;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+}
+
+.logo-container img {
+    width: 20px;
+    height: 20px;
+}
+
+.text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-grow: 1;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.text-container .upper-text {
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.text-container .lower-text {
+    font-size: 12px;
+    color: gray;
+}
+
+.empty-block {
+    width: 30px;
+    height: 30px;
 }