Polythene Header Panel

HTML

<script scr="https://raw.githubusercontent.com/lhorie/mithril/next/mithril.min.js"></script>
<script src="https://rawgit.com/ArthurClemens/Polythene/master/polythene-standalone.js"></script>

CSS

body,
html,
.app {
    height: 100%;
    margin: 0;
    padding: 0;
}
.app {
    background: #fff;
}

.app .pe-header {
    height: 100px;
}

.app .pe-header-panel .pe-toolbar {
    background-color: #3f51b5;
}

.app .pe-header-panel .pe-title {
    font-size: 27.69px; // 18 / 0.65
}

.app .pe-header-panel-content {
    padding: 16px 16px 36px 16px;
    max-width: 700px;
    margin: 0 auto;
}

Babel + JSX

import m from 'mithril';
import headerPanel from 'polythene/header-panel/header-panel';

// toolbar with icons

import iconBtn from 'polythene/icon-button/icon-button';
import 'polythene/layout/theme/theme'; // for .flex classes

const iconArrowBack = m.trust('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');

const iconSearch = m.trust('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');

const toolbarRow = () => ([
    m.component(iconBtn, {
        icon: {
            msvg: iconArrowBack
        }
    }),
    m('.flex'),
    m.component(iconBtn, {
        icon: {
            msvg: iconSearch
        }
    }),
]);

// end toolbar

const MIN_SCALE = 0.65;
let titleStyle;

// transform title font size when scrolling
const onHeaderTransform = (e) => {
    titleStyle = titleStyle || document.querySelector('.pe-header-panel .pe-title').style;
    const h = e.height - e.condensedHeight;
    const scale = Math.max(MIN_SCALE, (h - e.y) / (h / (1 - MIN_SCALE)) + MIN_SCALE);
    titleStyle.transform = titleStyle.webkitTransform = 'scale(' + scale + ') translateZ(0)';
};

const app = {};
app.view = () => {
    return m('.app',
        m.component(headerPanel, {
            class: 'header-panel--fit pe-dark-theme',
            mode: 'waterfall-tall',
            condenses: true,
            transform: onHeaderTransform,
            header: {
                toolbar: {
                    topBar: toolbarRow(),
                    bottomBar: m('.pe-toolbar__title--indent.pe-title', 'Condenses')
                }
            },
            content: m('.pe-header-panel-content', [1,...