/*
  luma: styles for the directory-listing pages only (posts use /style.css).

  A listing should still look like a real "Index of /" page, so colours are
  left to the browser; beyond the site's Readerly typeface this only adds
  breathing room, a visible focus ring, and phone fixes.
*/

body {
  font-family: Readerly, Georgia, serif;
  margin: 1.5rem 2rem;
}
h1 {
  margin-block: 0 1.25rem;
}

/* Cells: Apache's defaults are ~1px of padding, which crams the date against
   the size and the header links against each other. */
table.autoindex {
  border-spacing: 0;
}
table.autoindex th,
table.autoindex td {
  padding: 0.3rem 0.75rem;
  line-height: 1.4;
  vertical-align: top;
}
table.autoindex th:first-child,
table.autoindex td:first-child {
  padding-left: 0;
  padding-right: 0.35rem;
}
table.autoindex th[colspan] {
  padding-block: 0.15rem;
}
table.autoindex td:nth-child(3) {
  white-space: nowrap;
}
table.autoindex img {
  display: block;
}

pre.autoindex {
  line-height: 1.6;
}

/* Keyboard focus: always the opposite of the page background. */
:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: 2px;
}
[data-scheme="dark"] :focus-visible {
  outline-color: #fff;
}
@media (prefers-color-scheme: dark) {
  [data-scheme="light-dark"] :focus-visible {
    outline-color: #fff;
  }
}

/* The Apache "back" arrow is black-on-transparent; flip it on dark pages. */
[data-scheme="dark"] img.back {
  filter: invert(1);
}
@media (prefers-color-scheme: dark) {
  [data-scheme="light-dark"] img.back {
    filter: invert(1);
  }
}

/* Phones: keep Name / Last modified / Size, drop Description. */
@media (max-width: 40em) {
  body {
    margin: 1rem;
  }
  table.autoindex th,
  table.autoindex td {
    padding-inline: 0.4rem;
  }
  table.autoindex th:nth-child(5),
  table.autoindex td:nth-child(5) {
    display: none;
  }
  pre.autoindex {
    overflow-x: auto;
  }
}

/* An _index.md shown under a listing. */
.readme {
  max-width: 46em;
  margin-top: 1.5rem;
}
.readme img {
  max-width: 100%;
  height: auto;
}
.readme pre {
  overflow-x: auto;
}