Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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 contains side&shy;notes (that become foot&shy;notes on narrow screens), as well as auto&shy;matically renders 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>
              
            
!

CSS

              
                @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;
    }
  }
}
              
            
!

JS

              
                // 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);

              
            
!
999px

Console