picnic/web/layout.jade

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

doctype html
html(lang="en")
  head
    block title
      title Picnic CSS
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    meta(name="keywords" content="css, library, picnic, picnicss, light")
    meta(name="description" content="A lightweight CSS library")
    block facebook
      //- meta(property="og:image" content="http://picnicss.com/web/preview.png?1")
      //- meta(property="og:url" content="http://picnicss.com/")
      //- meta(property="og:title" content="Picnic CSS - A beautiful CSS library to kickstart your projects")
      //- meta(property="og:description" content="Includes buttons, cards, flexbox-based grid, responsive builder with a lot of options")
    link(rel='stylesheet' href='web/style/style.min.css')
    link(rel="icon", href="web/img/basket.png", type="image/png")
    link(rel='stylesheet' media='bogus')
    block head
  body
    nav
      a.brand(href="/")
        span Picnic CSS

      //- responsiveness
      input#bmenu.show(type="checkbox")
      label.burger.toggle.pseudo.button(for="bmenu") menu

      div.menu
        a.pseudo.button.icon-help-circled(href="/tests") Test
        a.pseudo.button.icon-g(href="https://github.com/franciscop/picnic" target="_blank") GitHub
        a.button.icon-file-code(href="/documentation") Documentation

    block content

    script.
      window.onload = function(){

        // Dropimage handler
        [].forEach.call(document.querySelectorAll('.dropimage'), function(img){
          img.onchange = function(e){
            var inputfile = this, reader = new FileReader();
            reader.onloadend = function(){
              inputfile.style['background-image'] = 'url('+reader.result+')';
              }
            reader.readAsDataURL(e.target.files[0]);
            }
          });
        };

    script(src="/web/tracking.js" defer async)