index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Human and Mammalian Brain Atlas v0.5</title>
<meta name="description" content="A cross-species whole-brain single-cell RNA-seq taxonomy spanning human, macaque, and marmoset, referenced to the mouse and human whole-brain taxonomies (Yao et al., Langlieb et al. and Siletti et al.).">

<style>
:root {
  --bg: #ffffff;
  --bg-alt: #f6f8fa;
  --bg-sunken: #eef1f5;
  --fg: #1f2328;
  --fg-muted: #59636e;
  --border: #d8dee4;
  --accent: #0b6bcb;
  --accent-soft: #e7f0fb;
  --header-from: #16406b;
  --header-to: #0b6bcb;
  --sidebar-w: 17rem;
  --content-w: 54rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --bg-alt: #161b22;
    --bg-sunken: #1c2128;
    --fg: #e6edf3;
    --fg-muted: #9198a1;
    --border: #30363d;
    --accent: #6cb0ff;
    --accent-soft: #10243e;
    --header-from: #0a1a2b;
    --header-to: #123a63;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* ---------- masthead ---------- */

.masthead {
  position: relative;
  background: linear-gradient(135deg, var(--header-from), var(--header-to));
  color: #fff;
  padding: 3.25rem 1.5rem 3rem;
  text-align: center;
}

/* HMBA mark: portrait, so it is sized by height. */
.masthead .logo {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  height: 15rem;
  width: auto;
}

/* Allen Institute wordmark: wide, so it is sized by width. */
.masthead .logo-ai {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  width: 22.5rem;
  height: auto;
}

.masthead h1 {
  margin: 0 0 .18rem;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.masthead .network {
  margin: 0 auto 1.25rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  /* Offset the trailing letter-space so the text optically centres. */
  text-indent: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.masthead p {
  margin: 0 auto 1.5rem;
  max-width: 47rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}

.masthead .badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.masthead .badges a,
.masthead .badges span {
  display: inline-block;
  padding: .35rem .85rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  font-size: .85rem;
  text-decoration: none;
  background: rgba(255, 255, 255, .08);
}

.masthead .badges a:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .6);
}

/* ---------- layout ---------- */

.shell {
  max-width: calc(var(--sidebar-w) + var(--content-w) + 6rem);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 3rem;
}

/* ---------- table of contents ---------- */

.toc {
  align-self: start;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 2.5rem 0;
  font-size: .875rem;
}

.toc h2 {
  margin: 0 0 .75rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.toc ul { list-style: none; margin: 0; padding: 0; }

.toc a {
  display: block;
  padding: .28rem .7rem;
  border-left: 2px solid var(--border);
  color: var(--fg-muted);
  text-decoration: none;
  line-height: 1.4;
}

.toc a:hover { color: var(--fg); background: var(--bg-alt); }

.toc a.lvl-3 { padding-left: 1.5rem; font-size: .825rem; }

.toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* ---------- content ---------- */

.content {
  min-width: 0;
  padding-top: 2.5rem;
}

.content > h1:first-child { display: none; }

.content h2 {
  margin: 3rem 0 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.6rem;
  letter-spacing: -.015em;
  scroll-margin-top: 1rem;
}

.content h3 {
  margin: 2.25rem 0 .75rem;
  font-size: 1.2rem;
  scroll-margin-top: 1rem;
}

.content h4 { margin: 1.5rem 0 .5rem; font-size: 1rem; }

.content p, .content li { color: var(--fg); }

.content a { color: var(--accent); text-decoration: none; }
.content a:hover { text-decoration: underline; }

.content hr {
  margin: 3rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.content img {
  display: block;
  margin: 1.75rem auto;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.content code {
  padding: .15em .4em;
  border-radius: 5px;
  background: var(--bg-sunken);
  font-size: .875em;
}

.content pre {
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  overflow-x: auto;
  line-height: 1.5;
}

.content pre code { padding: 0; background: none; font-size: .85rem; }

.content blockquote {
  margin: 1.5rem 0;
  padding: .85rem 1.15rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--accent-soft);
  color: var(--fg);
}

.content blockquote > :first-child { margin-top: 0; }
.content blockquote > :last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; margin: 1.25rem 0; }

.content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.content th, .content td {
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.content th { background: var(--bg-alt); font-weight: 600; }
.content tbody tr:nth-child(even) { background: var(--bg-alt); }
.content td:first-child code { white-space: nowrap; }

.img-missing {
  margin: 1.75rem auto;
  padding: 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--fg-muted);
  font-size: .875rem;
  text-align: center;
}

.status {
  padding: 4rem 0;
  color: var(--fg-muted);
  text-align: center;
}

/* ---------- narrow screens ---------- */

/* Scale the marks back before they crowd the centred title block. */
@media (max-width: 92rem) {
  .masthead .logo { height: 11rem; }
  .masthead .logo-ai { width: 16.5rem; }
}

@media (max-width: 56rem) {
  /* Not enough room to flank the title; stack them above it instead. */
  .masthead .logo,
  .masthead .logo-ai {
    position: static;
    display: block;
    margin: 0 auto 1.25rem;
    transform: none;
  }
  .masthead .logo { height: 9rem; }
  .masthead .logo-ai { width: 18rem; }
}

@media (max-width: 60rem) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .toc {
    position: static;
    max-height: none;
    padding: 2rem 0 0;
    border-bottom: 1px solid var(--border);
  }
  .content { padding-top: 1.5rem; }
}
</style>
</head>

<body>

<header class="masthead">
  <img class="logo-ai" src="docs/AI_medium_white.png" alt="Allen Institute" onerror="this.remove()">
  <img class="logo" src="docs/hmba-logo.png" alt="HMBA logo" onerror="this.remove()">
  <h1>Human and Mammalian Brain Atlas</h1>
  <p class="network">BRAIN Initiative Cell Atlas Network (BICAN)</p>
  <p>A cross-species whole-brain single-cell RNA-seq taxonomy spanning human, macaque, and marmoset, referenced to the mouse and human whole-brain taxonomies (Yao et&nbsp;al., Langlieb et&nbsp;al, Siletti et&nbsp;al.).</p>
  <div class="badges">
    <span>Version 0.5</span>
    <span>~21M cells</span>
    <a href="https://github.com/AllenInstitute/HMBA_WB_Atlas">View on GitHub</a>
  </div>
</header>

<div class="shell">
  <nav class="toc" id="toc" aria-label="Table of contents">
    <h2>On this page</h2>
    <ul id="toc-list"></ul>
  </nav>
  <main class="content" id="content">
    <p class="status">Loading documentation…</p>
  </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
<script>
(function () {
  var content = document.getElementById('content');
  var tocList = document.getElementById('toc-list');

  // GitHub-compatible heading slugs, so anchors written in README.md resolve.
  function slugify(text) {
    return text.trim().toLowerCase()
      .replace(/[^\w\- ]+/g, '')
      .replace(/ /g, '-');
  }

  function fail(message) {
    content.innerHTML = '<p class="status">' + message + '</p>';
  }

  fetch('README.md', { cache: 'no-cache' })
    .then(function (res) {
      if (!res.ok) throw new Error('HTTP ' + res.status);
      return res.text();
    })
    .then(render)
    .catch(function (err) {
      fail('Could not load README.md (' + err.message + '). ' +
           'When previewing locally, serve the folder over HTTP rather than ' +
           'opening the file directly.');
    });

  function render(markdown) {
    content.innerHTML = marked.parse(markdown, { gfm: true, breaks: false });

    // The README's title and network sub-line are already in the masthead.
    var lead = content.querySelector('h1:first-child + p > sub:only-child');
    if (lead) lead.parentNode.remove();

    // The README carries its own "Contents" list; the sidebar replaces it.
    var contentsHeading = Array.prototype.find.call(
      content.querySelectorAll('h2'),
      function (h) { return h.textContent.trim().toLowerCase() === 'contents'; }
    );
    if (contentsHeading) {
      var node = contentsHeading.nextElementSibling;
      while (node && node.tagName !== 'H2' && node.tagName !== 'HR') {
        var next = node.nextElementSibling;
        node.remove();
        node = next;
      }
      if (node && node.tagName === 'HR') node.remove();
      contentsHeading.remove();
    }

    // Assign ids and build the sidebar.
    var used = Object.create(null);
    var headings = content.querySelectorAll('h2, h3');

    Array.prototype.forEach.call(headings, function (h) {
      var base = slugify(h.textContent);
      var id = base;
      if (used[base] !== undefined) { used[base] += 1; id = base + '-' + used[base]; }
      else { used[base] = 0; }
      h.id = id;

      var a = document.createElement('a');
      a.href = '#' + id;
      a.textContent = h.textContent;
      a.className = 'lvl-' + h.tagName.charAt(1);

      var li = document.createElement('li');
      li.appendChild(a);
      tocList.appendChild(li);
    });

    // Tables scroll horizontally instead of forcing the page to.
    Array.prototype.forEach.call(content.querySelectorAll('table'), function (table) {
      var wrap = document.createElement('div');
      wrap.className = 'table-scroll';
      table.parentNode.insertBefore(wrap, table);
      wrap.appendChild(table);
    });

    // Images hosted outside the repo may not resolve for every visitor.
    Array.prototype.forEach.call(content.querySelectorAll('img'), function (img) {
      img.addEventListener('error', function () {
        var note = document.createElement('div');
        note.className = 'img-missing';
        note.textContent = 'Not available: ' + (img.getAttribute('alt') || 'image');
        img.replaceWith(note);
      });
    });

    // External links open in a new tab.
    Array.prototype.forEach.call(content.querySelectorAll('a[href^="http"]'), function (a) {
      a.target = '_blank';
      a.rel = 'noopener noreferrer';
    });

    highlightOnScroll(headings);

    // Honour a deep link now that ids exist.
    if (location.hash) {
      var target = document.getElementById(location.hash.slice(1));
      if (target) target.scrollIntoView();
    }
  }

  function highlightOnScroll(headings) {
    var list = Array.prototype.slice.call(headings);
    if (!list.length) return;

    var links = {};
    Array.prototype.forEach.call(tocList.querySelectorAll('a'), function (a) {
      links[a.getAttribute('href').slice(1)] = a;
    });

    var THRESHOLD = 120;   // px below the viewport top that counts as "here"
    var current = null;
    var lockedUntil = 0;
    var queued = false;

    function activate(heading) {
      var link = heading ? links[heading.id] : null;
      if (link === current) return;
      if (current) current.classList.remove('active');
      current = link;
      if (current) current.classList.add('active');
    }

    function update() {
      queued = false;
      if (Date.now() < lockedUntil) return;

      // The final sections are shorter than a viewport, so the page runs out
      // of scroll before their headings can reach THRESHOLD. Once the bottom
      // is reached, the last heading is the one being read.
      var scrollBottom = window.pageYOffset + window.innerHeight;
      if (scrollBottom >= document.documentElement.scrollHeight - 2) {
        activate(list[list.length - 1]);
        return;
      }

      var active = list[0];
      for (var i = 0; i < list.length; i++) {
        if (list[i].getBoundingClientRect().top > THRESHOLD) break;
        active = list[i];
      }
      activate(active);
    }

    function onScroll() {
      if (queued) return;
      queued = true;
      window.requestAnimationFrame(update);
    }

    // A clicked link wins over whatever the scroll position implies, so that
    // targets sitting in the last screenful still highlight.
    tocList.addEventListener('click', function (event) {
      var a = event.target.closest('a');
      if (!a) return;
      lockedUntil = Date.now() + 700;
      activate(document.getElementById(a.getAttribute('href').slice(1)));
    });

    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
  }
})();
</script>

</body>
</html>