Mobile-friendly CSS for VoidTools Everything

voidtools-everything-mobile-css.md

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;
}