book2.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"/>

<%block name="extra_head">
    ${parent.extra_head()}

    ## Get the Gentium Basic font from Google
    <link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
    <style>
        .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;
            ## Use Gentium for the text
            font-family: 'Gentium Book Basic', serif;
            color: #2d2e2e;
            font-weight: 500;
        }
        div.frame {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
        div.scrolling-cont {
            overflow-x: scroll;
            padding: 0;
            margin: 0;
        }
        ## The document uses a smallcaps role/class. This makes it actual smallcaps.
        .smallcaps {
            font-variant: small-caps;
        }
        ## Titles in bold, centered, very black Gentium
        h1, h2, h3, h4 {
            text-align: center;
            width: 100%;
            font-family: 'Gentium Book Basic', serif;
            font-size: 120%;
            font-weight: 900;
        }
        h1 {
            font-size: 150%;
        }
        .subtitle {
            text-align: center;
            width: 100%;
        }

        ## Images in figures are as large as they can be
        ## respecting aspect ratio
        .bookfig {
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }

        ## Figures are slightly smaller than a page, so they
        ## will use one fully.
        div.figure {
            height: 88vh;
            margin: 0;
        }

        ## Minor tweak
        div.topic {
            margin: 0;
        }

        ## Follow paragraph typesetting conventions from the original book.
        div.section > p {
            text-indent: 1em;
            margin-bottom: 0;
            text-align: justify;
        }
    </style>
</%block>

<%block name="content">
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
    <div class="frame">
    <div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
    <div class="e-content entry-content chapter" itemprop="articleBody text">
    <h1>${post.title()}</h1>
    ${post.text()}
    </div>
    </div>
    </div>
</article>
</%block>

## The extra_js block goes always at the end, right before closing the <body> tag.
<%block name="extra_js">
    ## Load FlowType.JS and apply it to the main text.
    <script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
    <script>
        $('#scrolling-cont').flowtype({
            minimum: 500,
            maximum: 1200,
            minFont: 20,
            maxFont: 40,
            fontRatio: 50
        });
    </script>
</%block>