tutorial/layout.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Build a query parser (using Ruby, Parslet, and Elasticsearch)</title>
    <style>
     body {
       font-family: Helvetica;
       font-size: 20px;
       line-height: 1.2;
       min-width: 320px;
       width: 100%;
       margin: 0;
       padding: 0;
     }

     #content {
       max-width: 920px;
       margin-left: auto;
       margin-right: auto;
       padding-left: 5px;
       padding-right: 5px;
     }

     code {
       font-family: "Source Code Pro", Consolas, Monaco, monospace;
     }

     h1.title {
       margin-bottom: 0;
     }

     h2.subtitle {
       margin-top: 0;
       margin-bottom: 0;
       font-style: italic;
       font-size: 130%;
       font-weight: 300;
       color: #666;
     }

     div.toc h2 {
       margin-bottom: 10px;
     }

     div.toc ul {
       list-style-type: none;
       margin: 0;
       padding-left: 0;
     }

     div.toc ul ul {
       padding-left: 15px;
     }

     svg {
       max-width: 100%;
     }

     div.aside {
       font-size: 80%;
       background: aliceblue;
       padding: 20px 20px 0px 20px;
     }

     div.aside h3 {
       margin: 0;
     }

     @media screen and (max-width: 600px) {
       div.aside {
         width: 100%;
         box-sizing: border-box;
         padding-bottom: 1px;
       }
     }

     @media screen and (min-width: 600px) {
       div.aside {
         min-width: 300px;
         max-width: 400px;
         float: right;
         margin-left: 20px;
       }
     }

     span.query-string {
       background: aliceblue;
       font-family: "Source Code Pro", Consolas, Monaco, monospace;
       border: 1px dotted lightgrey;
       border-radius: 5px;
       padding-left: 2px;
       padding-right: 2px;
     }

     p.generated_at {
       font-style: italic;
       font-size: 80%;
       color: #999;
     }

     pre {
       overflow: auto;
     }

     .highlight table td { padding: 5px; }
     .highlight table pre { margin: 0; }
     .highlight .cm {
       color: #999988;
       font-style: italic;
     }
     .highlight .cp {
       color: #999999;
       font-weight: bold;
     }
     .highlight .c1 {
       color: #999988;
       font-style: italic;
     }
     .highlight .cs {
       color: #999999;
       font-weight: bold;
       font-style: italic;
     }
     .highlight .c, .highlight .cd {
       color: #999988;
       font-style: italic;
     }

     .highlight .gd {
       color: #000000;
       background-color: #ffdddd;
     }
     .highlight .ge {
       color: #000000;
       font-style: italic;
     }
     .highlight .gr {
       color: #aa0000;
     }
     .highlight .gh {
       color: #999999;
     }
     .highlight .gi {
       color: #000000;
       background-color: #ddffdd;
     }
     .highlight .go {
       color: #888888;
     }
     .highlight .gp {
       color: #555555;
     }
     .highlight .gs {
       font-weight: bold;
     }
     .highlight .gu {
       color: #aaaaaa;
     }
     .highlight .gt {
       color: #aa0000;
     }
     .highlight .kc {
       color: #000000;
       font-weight: bold;
     }
     .highlight .kd {
       color: #000000;
       font-weight: bold;
     }
     .highlight .kn {
       color: #000000;
       font-weight: bold;
     }
     .highlight .kp {
       color: #000000;
       font-weight: bold;
     }
     .highlight .kr {
       color: #000000;
       font-weight: bold;
     }
     .highlight .kt {
       color: #445588;
       font-weight: bold;
     }
     .highlight .k, .highlight .kv {
       color: #000000;
       font-weight: bold;
     }
     .highlight .mf {
       color: #009999;
     }
     .highlight .mh {
       color: #009999;
     }
     .highlight .il {
       color: #009999;
     }
     .highlight .mi {
       color: #009999;
     }
     .highlight .mo {
       color: #009999;
     }
     .highlight .m, .highlight .mb, .highlight .mx {
       color: #009999;
     }
     .highlight .sb {
       color: #d14;
     }
     .highlight .sc {
       color: #d14;
     }
     .highlight .sd {
       color: #d14;
     }
     .highlight .s2 {
       color: #d14;
     }
     .highlight .se {
       color: #d14;
     }
     .highlight .sh {
       color: #d14;
     }
     .highlight .si {
       color: #d14;
     }
     .highlight .sx {
       color: #d14;
     }
     .highlight .sr {
       color: #009926;
     }
     .highlight .s1 {
       color: #d14;
     }
     .highlight .ss {
       color: #990073;
     }
     .highlight .s {
       color: #d14;
     }
     .highlight .na {
       color: #008080;
     }
     .highlight .bp {
       color: #999999;
     }
     .highlight .nb {
       color: #0086B3;
     }
     .highlight .nc {
       color: #445588;
       font-weight: bold;
     }
     .highlight .no {
       color: #008080;
     }
     .highlight .nd {
       color: #3c5d5d;
       font-weight: bold;
     }
     .highlight .ni {
       color: #800080;
     }
     .highlight .ne {
       color: #990000;
       font-weight: bold;
     }
     .highlight .nf {
       color: #990000;
       font-weight: bold;
     }
     .highlight .nl {
       color: #990000;
       font-weight: bold;
     }
     .highlight .nn {
       color: #555555;
     }
     .highlight .nt {
       color: #000080;
     }
     .highlight .vc {
       color: #008080;
     }
     .highlight .vg {
       color: #008080;
     }
     .highlight .vi {
       color: #008080;
     }
     .highlight .nv {
       color: #008080;
     }
     .highlight .ow {
       color: #000000;
       font-weight: bold;
     }
     .highlight .o {
       color: #000000;
       font-weight: bold;
     }
     .highlight .w {
       color: #bbbbbb;
     }

     svg.railroad-diagram {
       background-color: hsl(30,20%,95%);
     }
     svg.railroad-diagram path {
       stroke-width: 3;
       stroke: black;
       fill: rgba(0,0,0,0);
     }
     svg.railroad-diagram text {
       font: bold 14px monospace;
       text-anchor: middle;
     }
     svg.railroad-diagram text.diagram-text {
       font-size: 12px;
     }
     svg.railroad-diagram text.diagram-arrow {
       font-size: 16px;
     }
     svg.railroad-diagram text.label {
       text-anchor: start;
     }
     svg.railroad-diagram text.comment {
       font: italic 12px monospace;
     }
     svg.railroad-diagram g.non-terminal text {
       /*font-style: italic;*/
     }
     svg.railroad-diagram rect {
       stroke-width: 3;
       stroke: black;
       fill: hsl(120,100%,90%);
     }
     svg.railroad-diagram path.diagram-text {
       stroke-width: 3;
       stroke: black;
       fill: white;
       cursor: help;
     }
     svg.railroad-diagram g.diagram-text:hover path.diagram-text {
       fill: #eee;
     }
    </style>
  </head>
  <body>
    <div id="content">{{CONTENT}}</div>
    <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

     ga('create', 'UA-13262353-1', 'auto');
     ga('send', 'pageview');
    </script>
  </body>
</html>