Tufte style link/citations/asides for codepen.io blog posts.

tufteize-codepen.less

.tufteize(@gutter, @gap) {
	> p { margin-right: @gutter + @gap; }
  
  .newthought { font-variant: small-caps; }
	
  p>strong,
  p>a:not([href^='#'])::before, 
  p>a[href^='#'] + * { 
    width: @gutter;
    margin-right: -(@gutter + @gap);
  }
  
}

.post-body { 
  position: relative;
  counter-reset: cite 0;
  
  h1,h2,h3,h4 { clear: right; }
  iframe, .cp_embed_iframe { clear: right; }
  
  p>a[href] {
    counter-increment: cite;
  }
  
  p>a[href]::after { 
  	content: counter(cite);
    font-size: 0.5em;
    vertical-align: super;
  }
  
  strong { font-weight: normal; }
  
  p>strong,
  p>a:not([href^='#'])::before,
  p>a[href^='#'] + * { 
    display: block;
    float: right;
    font-size: 0.6em;
    clear: right;
    margin-bottom: 0.5em;
  }
  
  p>a[href^='#'] + *::before {
    content: counter(cite) ".\00A0";
  }
  
  p>a:not([href^='#'])::before {
  	content: counter(cite) ".\00A0" attr(href);
    overflow: hidden;
    word-wrap: break-word;
  }
  
  .tufteize(120px, 10px);
}