Updated to be responsive.

This commit is contained in:
Jonathan Bernard
2017-02-13 23:43:02 -06:00
parent 75286cbc10
commit 4f93b3132a
8 changed files with 313 additions and 63 deletions

View File

@ -5,11 +5,7 @@
<title>Directory Listing</title>
<style type=text/css>
body {
font-family: Cantarell, sans;
margin: 2vw auto;
width: 50vw;
}
body { font-family: Cantarell, sans; }
#loading { text-align: center; }
@ -26,7 +22,7 @@ a {
a:hover { color: orange; }
#navigation {
font-size: large;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 2rem;
border-bottom: solid thin darkgray;
@ -39,6 +35,56 @@ footer {
text-align: center;
margin-top: 2rem;
}
#content h1 { font-size: 2.4rem; }
#content h2 { font-size: 2rem; }
#content h3 { font-size: 1.5rem; }
#content h4 { font-size: 1.35rem; }
#content h5 {
font-size: 1.35rem;
font-weight: normal;
text-decoration: underline;
}
#content h6 {
font-size: 1rem;
font-weight: normal;
font-variant: small-caps;
}
/* xsmall */
@media screen and (max-width: 320px) {
html { font-size: 10px; }
#content h1 { font-size: 2rem; }
#content h2 { font-size: 1.67rem; }
table tr th:nth-child(2), table tr th:nth-child(3),
table tr td:nth-child(2), table tr td:nth-child(3) { display: none; }
}
/* small */
@media screen and (min-width: 321px) and (max-width: 640px) {
html { font-size: 12px; }
#content h1 { font-size: 2rem; }
#content h2 { font-size: 1.67rem; }
table tr th:nth-child(3), table tr td:nth-child(3) { display: none; }
}
/* medium */
@media screen and (min-width: 641px) and (max-width: 1200px) {
html { font-size: 16px; }
}
/* large */
@media screen and (min-width: 1201px) {
html { font-size: 1.1vw; }
body {
margin: 2vw auto;
width: 70vw;
}
}
</style>
@ -174,6 +220,7 @@ function render(dirInfo) {
$("#listing tbody").append(renderRow(f)); });
$("#listing table").DataTable({
autoWidth: false,
paging: false,
info: false
});