Had been wanting to revamp the site for a while - I really liked the UX of Andy Matuschak's notes & wanted to do something similar. Spent 2 hours this morning building out the layout template & transferring things over. The behaviour itself is 40 lines of js

function applyLinkOpenerBehavior(div) {
  var links = div.querySelectorAll('a');
  links.forEach(function(link) {
    link.addEventListener('click', function() {
      var href = this.getAttribute('href');
      fetch(href)
        .then(response => response.text())
        .then(data => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(data, 'text/html');
          const primary = doc.getElementById('primary').innerHTML;

          const currentContentColumn = this.closest('.ui-content-column');
          const contentColumns = document.querySelectorAll('.ui-content-column');
          contentColumns.forEach(function(contentColumn) {
            // only remove if not the current content column 
            if (contentColumn !== currentContentColumn) {
              contentColumn.remove();
            }
          });

          // create a new div with a class of .ui-content-column 
          var newDiv = document.createElement('div');
          newDiv.classList.add('ui-content-column');
          // put the content of the #primary div inside the new div 
          newDiv.innerHTML = primary;
          // append the new div to the #main-scroller div 
          var mainScroller = document.getElementById('main-scroller');
          mainScroller.appendChild(newDiv); 
          applyLinkOpenerBehavior(newDiv);
        });
      // prevent the default action of the link 
      // add the current url in the url bar 
      window.history.pushState({}, '', href);
      event.preventDefault();
    });
  });
}

Implement horizontal layout