notes and colophon

_layouts/note.html

@@ -29,11 +29,14 @@ layout: default
       <aside class="bt b--washed-green 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">
+        <div class="flex flex-wrap">
         {% for backlink in page.backlinks %}
-          <div class="w-50 mr2 pa3 ba b--moon-gray br4">
-            <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">{{ backlink.excerpt | strip_html | truncatewords: 20 | remove: '[[' | remove: ']]' }}</div>
+          <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>

_layouts/page.html

@@ -1,11 +1,16 @@
 ---
 layout: default
 ---
-<article class="measure-wide">
+<article class="measure-wide ml3">
   <header>
     <h1 class="f-6 normal anthony">{{ page.title | escape }}</h1>
   </header>
-  <div class="lh-copy f5">
+  <div class="lh-copy f5 z-1 mb6 relative">
     {{ content }}
   </div>
+  {% if page.url == "/colophon/" %}
+    <div class="fixed top-0 right-0 w-100 vh-100 o-20">
+      {% include notes_graph.html %}
+    </div>
+  {% endif %}
 </article>