picnic/web/documentation.html.jade

A lighweight CSS library with nice defaults and many plugins to kickstart your projects

extends layout

block title
  title Documentation - Picnic CSS

block head
  style.
    aside a.top {
      font-size: 0;
      position: fixed;
      bottom: 0;
      font-weight: bold;
      width: 180px;
      padding: .6em 0;
      margin-bottom: 0;
      border-radius: .3em .3em 0 0;
      transition: all .3s ease;
    }

    aside a.top.visible {
      font-size: 1em;
    }

    aside .links a.button {
      text-align: left;
    }

    @media all and (max-width: 1000px) {
      aside a.pseudo.top {
        background: rgba(255, 255, 255, .8);
        width: 100%;
        left: 0;
        text-align: center;
        z-index: 100;
      }
    }

    .documentation article > h2 {
      margin: -2em 0 .6em;
      padding: 3em 0 0;
      line-height: 1;
    }

    .documentation article > h3 {
      margin-bottom: .6em;
    }

    .documentation aside h2 {
      margin-top: 0;
      padding: 1.25em 0;
      line-height: 1;
    }

    .documentation aside a.pseudo {
      color: #0074D9;
      margin: 0;
    }

    .documentation > section {
      background: #fff;
      text-align: left;
      width: 90%;
      max-width: 960px;
      margin: 0 auto;
      padding: 80px 0 0;
    }

    .documentation article > h1 {
      margin: 0;
      padding: 0.6em 0;
      font-size: 2em;
      line-height: 1.5;
    }

    .documentation aside a.button {
      display: block;
    }

    .documentation pre[class*="language-"] {
      margin-top: 10px;
      margin-bottom: 40px;
    }

    .documentation .index pre {
      margin: 0;
      font-size: .9em;
    }

block content
  main.documentation#home
    section.flex.five
      aside.full.fifth-1000
        h2 Contents
        div.links.flex.two.three-500.five-800.one-1000
        a.top.pseudo.button(href="#home" tabindex="-1") ▲ Up you go ▲
      article.full.four-fifth-1000
        include:markdown ../temp/readme.md
  
  script(src="https://cdn.jsdelivr.net/umbrella/2.6/umbrella.min.js")
  
  //- Color for the code snippets
  script(src="web/prism.js")
    /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
    
  
  script.
    
    u('h2[id]').each(function(node){
      u(node).attr('id', u(node).attr('id').replace(/-/g, ''));
    });
    
    u('aside .links').append(function(node){
      return u('<div>').append(u('<a>')
        .addClass('pseudo button')
        .attr('href', '#' + node.id)
        .html(node.innerHTML));
    }, u('article h2'));
    
    u('pre .lang-html').each(function(node){
      // The <div> is needed because otherwise, `.before()` removes whitespaces
      u(node).parent().before(u('<div>').html(u(node).parent().text()));
    });
    
    u('pre .lang-css').each(function(node){
      u(node).parent().before(u('<style>').html(u(node).parent().text()));
    });
    
    
    u('aside a').on('click', function(e){
      try {
        var to = u(e.currentTarget).attr('href');
        u(to).first().scrollIntoView({behavior: "smooth"});
        e.preventDefault();
        history.replaceState(null, '', to);
      } catch(err) {}
    });
  
    u([window]).on('scroll', function(){
      var top = this.scrollY || document.documentElement.scrollTop;
      u('.top').toggleClass('visible', top > 1000);
    }).trigger('scroll');