not expander

_includes/header.html

@@ -1,4 +1,4 @@
-<header id="header" class="f5 pa3 flex bb b--dark-green bg-washed-green justify-between sticky top-0 w-100 items-baseline z-1">
+<header id="header" class="f5 pa3 flex bb b--dark-green bg-washed-green justify-between sticky top-0 w-100 items-baseline z-3">
   {%- assign default_paths = site.pages | map: "path" -%}
   {%- assign page_paths = site.header_pages | default: default_paths -%}
   {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}

_includes/link-previews.html

@@ -1,6 +1,6 @@
 <!-- That file is not particularly elegant. This will need a refactor at some point. -->
 <div class="hide-child links-dark-green">
-  <div id='tooltip-wrapper' class="bg-white br4 shadow-solid-accent lh-copy dn o-0 pa3 w6 f6 absolute child">
+  <div id='tooltip-wrapper' class="bg-white br4 shadow-solid-accent lh-copy dn o-0 pa3 w6 f6 absolute z-2 child">
     <div id='tooltip-content' class="relative overflow-hidden note-contents">
     </div>
     <div id="tooltip-source" class="f7 light-silver"></div>

_layouts/note.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 <div class="flex">
-  <article class="w-50 pa3 pr0">
+  <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 justify-between">
@@ -49,6 +49,7 @@ layout: default
         {% endif %}
       </aside>
     </div>
+    <button id="note-expand" class="absolute top-1 pointer nr4 right-0 bg-washed-green button-reset bn dark-green o-50">→</button>
   </article>
 
   <div class="fixed top-0 right-0 w-50 vh-100">

assets/js/scripts.js

@@ -368,3 +368,14 @@ if (typeof window.graphData !== 'undefined') {
     return str.substr(0, str.lastIndexOf(separator, maxLen)) + '...'
   }
 }
+
+// Note expander
+
+const noteExpander = document.querySelector('#note-expand')
+
+if (noteExpander) {
+  noteExpander.addEventListener('click', (event) => {
+    document.querySelector('#note-container').classList.toggle('w-two-thirds')
+    event.target.classList.toggle('rotate-180')
+  })
+}