book1.tmpl (Source)

## -*- coding: utf-8 -*-
<%namespace name="helper" file="post_helper.tmpl"/>
<%namespace name="pheader" file="post_header.tmpl"/>
<%namespace name="comments" file="comments_helper.tmpl"/>
<%inherit file="post.tmpl"/>
## This redefines the extra_head block which goes at the end of <head>
<%block name="extra_head">
    ${parent.extra_head()}
    <style>
        ## This shows the content in columns with a height
        ## somewhat smaller than the viewport height (90vh)
        ## to give a "book" feeling instead of a wall of text.
        .chapter {
            width: 100%;
            padding: 10px;
            -webkit-column-gap: 40px;
               -moz-column-gap: 40px;
                    column-gap: 40px;
            -webkit-column-width: 400px;
               -moz-column-width: 400px;
                    column-width: 400px;
            -webkit-column-count: 2;
               -moz-column-count: 2;
                    column-count: 2;
            -webkit-column-rule: 1px solid #ddd;
               -moz-column-rule: 1px solid #ddd;
                    column-rule: 1px solid #ddd;
            height: 90vh;
            font-color: #2d2e2e;
            font-weight: 500;
        }
        ## A wrapper that hides most of the columns
        div.frame {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
        ## A wrapper to let you scroll across columns
        div.scrolling-cont {
            overflow-x: scroll;
            padding: 0;
            margin: 0;
        }
    </style>
</%block>
<%block name="content">
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
    ## Wrap the post's text in the needed divs
    <div class="frame">
    <div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
    <div class="e-content entry-content chapter" itemprop="articleBody text">
    ## Moved the title inside the flow of the book
    <h1>${post.title()}</h1>
    ${post.text()}
    </div>
    </div>
    </div>
</article>
</%block>