404.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>libdense / not on this map</title>
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
<script>
  /* Paths that name a section of the site open that tab. */
  (function () {
    var BASE = "/";
    var p = location.pathname.indexOf(BASE) === 0 ? location.pathname.slice(BASE.length) : location.pathname.replace(/^\//, "");
    var m = /^(viewer|docs|support)(\/.*)?$/i.exec(p.replace(/\/index\.html$/i, "").replace(/\/+$/, ""));
    if (m) location.replace(BASE + "#/" + m[1].toLowerCase() + (m[2] || ""));
  })();
</script>
<style>
  @font-face { font-family: "Dense Plate Serif"; font-style: normal; font-weight: 400; src: url("/assets/fonts/dps-regular.woff2") format("woff2"); }
  @font-face { font-family: "Dense Plate Serif"; font-style: italic; font-weight: 400; src: url("/assets/fonts/dps-italic.woff2") format("woff2"); }
  html, body { margin: 0; min-height: 100%; background: #1c1a16; }
  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; box-sizing: border-box;
    font-family: "Dense Plate Serif", "Liberation Serif", "Tinos", "Times New Roman", serif; color: #1c1a16; }
  .plate { background: #e9e2d2; border: 4px double #1c1a16; box-shadow: 0 0 0 3px #e9e2d2, 0 0 0 4px #1c1a16;
    max-width: 560px; width: 100%; text-align: center; padding: 10px 14px 26px; }
  .head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-align: left; }
  h1 { display: table; margin: 22px auto 6px; padding: 0 0.6em 6px; font-weight: 400; font-size: 30px; letter-spacing: 0.22em; border-bottom: 1px solid #1c1a16; }
  p { font-style: italic; color: #3b3832; }
  a.btn { display: inline-block; margin-top: 8px; padding: 9px 14px; font-size: 13px; letter-spacing: 1.6px; color: #e9e2d2; background: #1c1a16; border: 1px solid #1c1a16; text-decoration: none; font-style: normal; }
  a.btn:hover { background: #2f4f45; }
</style>
</head>
<body>
  <div class="plate">
    <div class="head"><span>DENSE / 404</span><span>WORLD / TOP-DOWN</span></div>
    <h1>NOT ON THIS MAP</h1>
    <p>No page lives at this address. The viewer, the docs and support are all on the front page.</p>
    <a class="btn" href="/">LIBDENSE.GITHUB.IO</a>
  </div>
</body>
</html>