_layouts/default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chrome Debugging Protocol Viewer{% if page.title %} - {{ page.title }}{% endif %}</title>

  <meta name="theme-color" content="#303F9F">

  <script src="{{ site.baseurl }}/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

  <link rel="import" href="{{ site.baseurl }}/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-styles/paper-styles-classes.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-menu/paper-menu.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-listbox/paper-listbox.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-item/paper-item.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-material/paper-material.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/paper-drawer-panel/paper-drawer-panel.html">
  <link rel="import" href="{{ site.baseurl }}/bower_components/iron-icons/iron-icons.html">

  <link rel="import" href="{{ site.baseurl }}/elements/cr-search-control/cr-search-control.html">

  <link href="{{ site.baseurl }}/styles/protocol.css" rel="stylesheet">
  <link rel="import" href="{{ site.baseurl }}/styles/app-theme.html">
</head>
<body unresolved class="fullbleed layout vertical">

<paper-drawer-panel id="paperDrawerPanel">
  <paper-header-panel drawer>
    {% include navigation.html %}
  </paper-header-panel>

  <paper-header-panel main mode="waterfall">
    <paper-toolbar id="mainToolbar">
      <paper-icon-button id="paperToggle"
          icon="menu" paper-drawer-toggle></paper-icon-button>
      <div class="top title">
        Chrome Debugging Protocol Viewer
        {% if page.version %}
          - {{ page.version }}
        {% endif %}
      </div>
      {% if page.category %}
      <cr-search-control id="searchButton"
          protocol-src="{{ site.baseurl }}/search_index/{{ page.category }}.json"></cr-search-control>
      {% endif %}
    </paper-toolbar>

    <div class="content">
      {% if page.idx %}
        {% assign domain = site.data[page.category].protocol.domains[page.idx] %}
        {% include domain.html domain=domain %}
      {% else %}
        <paper-material elevation="1" class="home-page-content">
          {% include github-badge.html %}
          {{ content }}
        </paper-material>
      {% endif %}
    </div>
  </paper-header-panel>
</paper-drawer-panel>
<script>
window.addEventListener('load', function() {
  var btn = document.getElementById('searchButton');
  var toolbar = document.getElementById('mainToolbar');
  btn.addEventListener('active', function() {
    toolbar.classList.add('search-active');
  }, false);
  btn.addEventListener('inactive', function() {
    toolbar.classList.remove('search-active');
  }, false);
});
</script>
</body>
</html>