-header-panel>

  <core-media-query id="mquery" query="min-width: 600px"></core-media-query>

  <script>

    // toggle fixed header based on screen size
    var panel = document.querySelector('core-scroll-header-panel');
    var mquery = document.querySelector('#mquery');
    mquery.addEventListener('core-media-change', function() {
      panel.fixed = mquery.queryMatches;
    });

    // custom transformation: scale header's title
    var titleStyle = document.querySelector('.title').style;
    addEventLi