Some post layout scribbles

index.html

<article>
  <header>
    <h1>Aliquid voluptas facilis odio</h1>
    <p class="abstract">Look at this glorious layout. Beautiful side&shy;bars on wide screens: One for navi&shy;gat&shy;ing between and inside of articles; and one that render side&shy;notes (that become foot&shy;notes on narrow screens), as well as auto&shy;matically shows side&shy;notes for links (showing their titles). And let's not forget the brilliant typo&shy;graphy.</p>
    <p class="meta">Written by <a href="#">Pascal Hertleif</a> on June&nbsp;20, 2020. Published in <a href="#">Typography</a>, <a href="#">Webshit</a>, and <a href="#">Code</a>.</p>
     <!--<nav class="series">
      <a href="#" class="pre">
        <span class="label">Previous post</span>
        <span class="title">Lorem ipsum secundus</span>
      </a>
      <span class="next is-latest">
        <span class="label">Next post</span>
        <span class="title">This is the latest post right now!</span>
      </span>
    </nav>-->
  </header>
  <nav class="sidebar">
    <section class="series">
      <header>
        <span class="label">In this series</span>
        <span class="title">Aut animi</span>
      </header>
      <ol>
        <li><a href="#">Magnam laborum</a></li>
        <li><a href="#">Possimus rerum minimaque voluptatum</a></li>
        <li><a href="#">Tempore possimus</a></li>
        <li><span class="current">Aliquid voluptas facilis odio</span> <em>(this post)</em></li>
      </ol>
    </section>
    <section class="toc">
      <header>
        <span class="label">In this post</span>
        <span class="title">Table of contents</span>
      </header>
      <ol>
        <li><a href="#">Consectetur adipisicing</a></li>
        <li>
          <a href="#">Adipisicing Elit</a>
            <ol>
              <li><a href="#">Accusantium</a></li>
            </ol>
          </li>
        <li><a href="#">Formatting examples</a></li>
      </ol>
    </section>
  </nav>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> elit. Aut animi consequatur odit natus suscipit eligendi modi reiciendis quod hic minus id architecto facilis odio earum aliquid
      voluptas ipsum, explicabo aperiam! Lorem <a href="https://google.com/" title="Doloremque inventore minima">ipsum dolor sit</a> amet, consectetur adipisicing elit. Doloremque<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> inventore minima voluptatum magnam laborum tempore possimus rerum corporis
      ipsum quasi qui quos, quae, perspiciatis fuga, labore voluptates quas at. Nisi.</p>
    <p>Aut animi consequatur odit natus suscipit eligendi modi reiciendis<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> quod hic minus id architecto facilis odio earum
      aliquid voluptas ipsum, explicabo aperiam!</p>
    <h2>Consectetur adipisicing</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi consequatur odit natus suscipit eligendi <a href="http://pascalhertleif.de/" title="Lorem ipsum dolor">modi reiciendis quod</a> hic minus id architecto facilis odio earum aliquid
      voluptas ipsum, explicabo aperiam!</p>
    <h2>Adipisicing Elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut animi consequatur odit natus suscipit eligendi modi reiciendis quod hic minus id architecto facilis odio earum aliquid voluptas ipsum, explicabo aperiam! Lorem ipsum dolor sit amet, consectetur
      <a href="https://medium.com/@killercup" title="Adipisicing et.al.">adipisicing</a> elit. Eaque veritatis quasi cupiditate dicta tempore sapiente quas eos excepturi et, quo facilis amet. Nam voluptates facilis vero, repellendus architecto alias explicabo.</p>
    <h3>Accusantium</h3>
    <p>Quia, ab excepturi laudantium, rerum earum voluptates accusantium atque vero, aliquam inventore eaque, aperiam sapiente. <a href="https://twitter.com/killercup" title="Illuminati">Illum</a>, animi, accusantium! Ratione blanditiis corrupti officia.</p>
    
    <h2>Formatting examples</h2>
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
    <p>An abbreviation: <abbr title="attribute">attr</abbr></p>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
    <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Nulla volutpat aliquam velit
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc
        <ol>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
        </ol>
      </li>
    </ul>

    <hr class="footnotes-sep" />
    <section class="footnotes">
      <ol class="footnotes-list">
        <li id="fn1" class="footnote-item">
          <p>Expedita est, perferendis, quidem iusto, ipsam, quia repellendus architecto ullam sapiente tenetur odio. <a href="#fnref1" class="footnote-backref">↩</a></p>
        </li>
        <li id="fn2" class="footnote-item">
          <p>Fugiat vero perferendis iure qui voluptates natus odio nulla. Nisi corrupti, laborum fuga reiciendis optio, tempore maiores culpa porro. <a href="#fnref2" class="footnote-backref">↩</a></p>
        </li>
        <li id="fn3" class="footnote-item">
          <p>Ea praesentium, harum, eos quibusdam omnis earum temporibus? <a href="#fnref3" class="footnote-backref">↩</a></p>
        </li>
      </ol>
    </section>
  </div>
</article>

script.typescript

// This expects a modern browser, but does not require any libraries. (Yes, it does not use jQuery.)

// Enable some array methods for results of DOM selectors:
NodeList.prototype.__proto__ = Array.prototype;

function addSidenotes(content) {
  const footnotesConverted = content.querySelectorAll('.footnote-ref > a')
  .map(function convertFootnoteToSidenote(ref) {
    const footnote = document.querySelectorAll(ref.getAttribute('href'))[0];
    if (!footnote) { return; }

    ref.parentNode.insertAdjacentHTML('afterend',`<span class="sidenote">
      <span class="sidenote-number">${ref.textContent}</span>
      ${footnote.innerHTML}
    </span>`);

    return 1;
  })
  .filter((x) => !!x).length;

  const linksConverted = content.querySelectorAll('a[title]')
  .map(function convertLinkToSidenote(link) {
    if (link.href[0] === '#') { return; }
    if (link.matches('.sidenote a')) { return; }

    const title = link.getAttribute('title');
    const hostname = link.hostname;

    link.insertAdjacentHTML('afterend', `<span class="sidenote">
      <span class="sidenote-title">${title}</span> &ndash;
      <a href="${link.href}">${hostname}</a>
    </span>`);

    return 1;
  })
  .filter((x) => !!x).length;

  if (0 < (footnotesConverted + linksConverted)) {
    content.classList.add('has-sidenotes');
  }
}

document.querySelectorAll('article .content').map(addSidenotes);

some-post-layout-scribbles.markdown

Some post layout scribbles

A Pen by Pascal on CodePen.

License.

style.scss

@mixin serif {
  font-family: 'Alegreya', serif;
}
@mixin sans {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 300;
}
@mixin slab {
  font-family: 'Bitter', serif;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 18px;
}

@mixin clearfix {
  *zoom: 1;

  &:before, &:after {
    display: table;
    content: "";
  }

  &:after {
    clear: both;
  }
}

a {
  color: #666;
  text-decoration: underline;

  &:hover {
    color: #000;
    background-color: yellow;
  }
}

// grid layout fun
@media screen and (min-width: 80rem) {
  article {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-row-gap: 1rem;

    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;

    > header {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    > nav {
      max-width: 18em;
    }

    > header, > .content {
      max-width: 32rem;
      margin-left: auto;
      margin-right: auto;
    }
  }
}


// generic article styles
$article-vertical-rythm: 1.5;

article {
  @include serif;
  font-size: 1rem;
  line-height: $article-vertical-rythm;
  color: #222;
  margin-top: 1rem;
  margin-bottom: 1rem;
  
  p, ul, ol, pre, blockquote {
    margin-bottom: 1/2 * $article-vertical-rythm * 1rem;
  }
  
  ul, ol {
    ul, ol {
      margin-left: 1rem;
      margin-bottom: 0;
    }
  }
  
  h1, h2, h3, h4 {
    @include slab;
    font-weight: bold;
  }
  
  h1 {
    font-size: 1.8rem;
    line-height: 2 * $article-vertical-rythm * 1rem;
  }
  
  h2 {
    font-size: 1.4rem;
    line-height: 2 * $article-vertical-rythm * 1rem;
  }
  
  h3 {
    font-size: 1.2rem;
    line-height: 2 * $article-vertical-rythm * 1rem;
  }

  h3 {
    font-size: 1rem;
    line-height: $article-vertical-rythm * 1rem;
  }
  
  header {
    h1 {
      margin-bottom: 0.4rem;
    }
    
    @media screen and (max-width: 79.999em) {
      padding: 1rem;

      p {
        max-width: 32em;
      }
    }

    .meta {
      @include sans;
    }
  }
  
  .content {
    @media screen and (max-width: 79.999em) {
      padding: 1rem;
    }
  }
  
  blockquote {
    border-left: 5px solid #eee;
    margin: 0.2em;
    padding: 0 1em;
    
    footer {
      margin-left: 1em;
      color: #444;
    }
  }
}

// nav at the side
nav.sidebar {
  @include sans;
  line-height: $article-vertical-rythm * 1rem;
  
  @media screen and (max-width: 79.999em) {
    padding: 0 1rem;
    
    @media screen and (min-width: 30rem) {
      display: flex;

      section {
        max-width: 50%;

        &:first-child {
          margin-right: 1em;
        }
      }
    }
  }
  
  @media screen and (min-width: 80rem) {
    section + section {
      margin-top: 1rem;
    }
  }

  header {
    .label {
      display: block;
      text-transform: uppercase;
      font-size: 0.8rem;
      line-height: $article-vertical-rythm * 1rem;
    }
    
    .title {
      display: block;
      font-weight: 700;
      line-height: $article-vertical-rythm * 1rem;
      margin-top: -1/3 * $article-vertical-rythm * 1rem;
      margin-bottom: 1/3 * $article-vertical-rythm * 1rem;
    }
  }
  
  ol {
    padding-left: 0;
    list-style-position: inside;
    
    @media screen and (min-width: 80em) {
      list-style-position: outside;
    }
    
    li {
      // disable onum (Oldstyle Figures)
      font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "sups" 0;
    }
  }
}

// series prev/next
nav.series {
  @include sans;
  display: flex;
  
  > a, > span {
    display: block;
    border: 1px solid #ddd;
    background: #fff;
    padding: 0.4em;
    width: 50%;
    color: #000;
    
    &.is-latest {
      border-color: #eee;
    }
  }
  
  > a {
    text-decoration: none;

    &:hover {
      background-color: #f9f9f9;
      border-color: #ccc;
    }
  }
  
  .pre {
    margin-right: 0.2em;
  }
  
  .next {
    margin-left: .2em;
  }
  
  .label {
    display: block;
    text-transform: uppercase;
    font-size: 0.8em;
  }
  
  .is-latest {
    .title {
      font-style: italic;
    }
  }
}

// some good typography choices
.footnote-ref {
  @include sans;
  // disable onum (Oldstyle Figures)
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 0, "sups" 0;
  display: inline-block;
  position: relative;
  margin-top: -0.2em;

  a {
    text-decoration: none;
  }
}

// - - -
// Sidenote fun follow
// - - -

$sidenote-spacing: 0.6em;
$sidenote-color: #666 !default;

$footnote-font-size: 0.8rem;
$footnote-line-height: 2/3 * $article-vertical-rythm * 1rem;

.sidenote {
  // First, disable all this stuff on small devices
  display: none;

  padding-bottom: $sidenote-spacing;

  @include sans;
  font-size: $footnote-font-size;
  line-height: $footnote-line-height;

  color: $sidenote-color;

  .footnote-backref {
    display: none;
  }

  .sidenote-title {
    &:before {
      $rarr: "\2192";
      $nbsp: "\00a0";
      content: "#{$rarr}";
      margin-right: $sidenote-spacing;
      font-weight: bold;
    }
  }

  .sidenote-number {
    margin-right: $sidenote-spacing;
    display: inline-block;
    float: left;
    font-weight: 700;
  }

  p {
    margin-top: 0;
    margin-bottom: 0;

    & + p {
      margin-top: $sidenote-spacing / 2;
    }
  }
}

.content.has-sidenotes {
  a, .footnote-ref {
    &:hover + .sidenote {
      .sidenote-title:before,
      .sidenote-number {
        background-color: yellow;
      }
    }
  }
}

@media screen and (min-width: 45em) {
  $article-with-sidenotes-with: 60em;
  $article-width: 70%;
  $gutter: 5%;

  /**
   * Layout:
   *
   * | ------------------------------------ | | ---------------- |
   * | lorem ipsum dolor .................. | | side note ...... |
   * | ------------------------------------ | | ---------------- |
   *
   * based on the sizes:
   *
   * | ----- $article-width --------------- | | - $side-width -- |
   *                               $gutter --^
   *
   * where `$side` and $gutter are in percent relative to `$article-width`, but
   * only `$article-width` and `$gutter` are given.
   */
  $side-width: ((100% - $article-width) * 100% / $article-width);

  .content.has-sidenotes {
    max-width: $article-with-sidenotes-with;
    @include clearfix();

    > *:not(.sidenote) {
      width: $article-width;
      box-sizing: border-box;
    }

    .sidenote {
      display: block;
      float: right;
      clear: right;

      margin-right: -1 * $side-width;
      width: $side-width - $gutter;

      vertical-align: baseline;
      position: relative;
      top: 1rem - $footnote-font-size;
    }

    .footnotes,
    .footnotes-sep {
      display: none;
    }
  }
}

styles

<link href="https://cdn.rawgit.com/kennethormandy/normalize-opentype.css/a8f85affbcf7978622edf0b34c38a1968add9fe6/normalize-opentype.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,300;0,700;1,300;1,700&amp;family=Alegreya:ital,wght@0,400;0,700;1,400;1,700&amp;family=Bitter&amp;display=swap" rel="stylesheet" />