Well it's far from perfect and not responsive, but it meets my needs.
Just set up the internal HTTP server and replace main.css with that:
* {
padding: 0px;
margin: 0px;
}
html {
font-size: calc((2vh + 2vw)/2);
/* font-size: clamp(14px, 3vw, 5vmin); */
font-family: Arial, sans-serif;
background-color: #eee;
}
table {
width: 100% !important;
table-layout: fixed;
}
/* Lower <br> before and after logo */
center > br {
line-height: .15em;
}
/* The folder already takes up a
lot of screen space */
.file, .folder { font-size: 2rem; }
.sizedata, .modifieddata, .pathdata { font-size: 1rem; }
/* Important for wrapping long lines */
nobr { white-space: normal; }
/* Directories */
a > nobr { color: brown; }
/*
Can't exclude headers because columns
will be limited.
'anywhere' is better than 'break-word'
*/
td {
display: table-row;
overflow-wrap: anywhere;
}
a {
text-decoration: none;
}
form {
width: 100% ;
text-align: center;
font-size: 1rem;
}
.indexof, .numresults {
font-weight: bold;
color: green;
font-size: 1rem;
}
/*
Specific nowrap for search results only.
No need to wrap 'Index of ...'
*/
td .numresults { white-space: nowrap; }
.updir {
text-align: left;
}
.sizeheader, .modifiedheader, .nameheader, .pathheader {
font-weight: bold;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
font-size: 2rem;
}
.sizeheader a, .modifiedheader a, .nameheader a , .pathheader a {
color: black;
}
tr.trdata1:hover, tr.trdata2:hover {
background-color: #eee;
}
.icon { vertical-align: middle; }
/* Sort by column icon */
.updown {
margin-left: .1rem;
vertical-align: middle;
width: 1rem;
}
.logo { display: none; }
.searchbox {
font-size: 2rem;
padding: .2rem;
}
.nav {
padding-left: .5rem;
padding-right: .5rem;
font-size: 2rem;
}
.prevnext {
font-weight: bold;
padding-left: .5rem;
padding-right: .5rem;
font-size: 1.5rem;
}