---
layout: default
---
<div class="flex">
  <article id="note-container"  class="w-50 pa3 pr0 relative z-1">
    <div class="container bg-white min-vh-100-header-comp pa3 br4 flex flex-column justify-between">
      <header>
        <div class="note-meta flex f7 justify-between code items-center">
          {% if page.date_created %}
            <time class="ml3 flex-auto" datetime="{{ page.date_created | date_to_xmlschema }}">{% if page.type != 'pages' %}
              Created on {{ page.date_created | date: "%B %-d, %Y" }}
              {% endif %}
            </time>
          {% endif %}
          <time datetime="{{ page.last_modified_at | date_to_xmlschema }}">{% if page.type != 'pages' %}
            Last updated on {{ page.last_modified_at | date: "%B %-d, %Y" }}
            {% endif %}
          </time>
        </div>
        <h1 class="note-title normal relative work-sans-light f-5 mb4 lh-solid">{{ page.title }}</h1>
      </header>

      <div id="notes-entry-container" class="flex-auto">
        <div class="note-contents f5 lh-copy">
          {{ content }}
        </div>
      </div>

      <aside class="bt b--background bw1 nl3 nr3 ph3 mt5">
        <h3 class="normal f1 mt5 work-sans-light mb4">Notes mentioning this note</h3>
        {% if page.backlinks.size > 0 %}
        <div class="flex flex-wrap">
        {% for backlink in page.backlinks %}
          <div class="w-50 flex">
            <div class="shadow-solid-accent mb2 mr2 br4 pa3 flex flex-column">
              <h4 class="mt0  mb2"><a class="internal-link" href="{{ backlink.url | relative_url }}{%- if site.use_html_extension -%}.html{%- endif -%}">{{ backlink.title }}</a></h4>
              <div class="f7 lh-copy mb3 flex-auto">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
              <div class="f7 light-silver">{{ backlink.url }}</div>
            </div>
          </div>
        {% endfor %}
        </div>
        {% else %}
        <div>
          <p class="f7">
            There are no notes linking to this note.
          </p>
        </div>
        {% endif %}
      </aside>
    </div>
    <button id="note-expand" class="absolute top-1 pointer nr4 mt3 right-0 bg-background button-reset bn foreground-text ">→</button>
  </article>

  <div class="fixed top-0 right-0 w-50 vh-100">
    {% include notes_graph.html %}
  </div>
</div>