Skip to content
Permalink
Browse files

rewritten

  • Loading branch information
ralsina committed Sep 14, 2015
1 parent ab06a49 commit bdac3a23356a35a8c2e43bb1e3f57e043238b0a9
Showing with 51 additions and 47 deletions.
  1. +10 −0 listings/book1.tmpl
  2. +11 −44 stories/creating-a-custom-page.rst
  3. +10 −0 templates/book1.tmpl
  4. +20 −3 templates/book2.tmpl
@@ -4,9 +4,13 @@
<%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;
@@ -18,11 +22,15 @@
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;
@@ -33,9 +41,11 @@

<%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>
@@ -66,24 +66,11 @@ template metadata in the page to use it::

.. template:: book.tmpl

Here is my new ``book.tmpl``:

Here is my new ``book.tmpl`` with comments:

.. listing:: book1.tmpl html+mako

And here is `the resulting page <link://slug/dr-nikola-v2>`__

What has changed?

1) I added a ``extra_head`` block. That goes, surprisingly, inside the ``HEAD`` element of the page, so
it's a good place to add CSS that's specific to this page.

2) I removed unneeded parts of the content block, and moved the content around a little.

3) To create the nice responsive 1-or-2 column layout, I had to wrap the content in a few divs, one
with columns, one that scrolls, one that has overflow hidden.

It's better, but it's far from awesome. So, let's continue!
And here is `the resulting page <link://slug/dr-nikola-v2>`__ It's better, but it's far from awesome. So, let's continue!

Typesetting
-----------
@@ -118,30 +105,15 @@ tag at the end of the page.

For that, the template offers the ``extra_js`` block. Since the bootstrap3 theme we are using already
loads JQuery, there is no need to do that, so it's just a matter of loading FlowType.JS and
initializing it:

.. code:: javascript+mako

<%block name="extra_js">
<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>
initializing it.

Figures: figures and multicolumn layout don't go along very well, they may even get split between columns!
The easiest solution is to make them fit in a "page", so, some more CSS for that.

Also, minor things like styling titles, subtitles, making the 1st word in the section smallcaps, and so on,
but hey, this is just CSS tweaking, we could do this forever.

So, here is our second attempt at a "book-like" template:
So, here is our second attempt at a "book-like" template with comments about all the above:

.. listing:: book2.tmpl html+mako

@@ -160,13 +132,6 @@ So, let's fix that with a little more JS at the end of the template:

.. code:: javascript
$('#scrolling-cont').flowtype({
minimum: 500,
maximum: 1200,
minFont: 20,
maxFont: 40,
fontRatio: 50
});
$(document).ready(function() {
var elem = $('#scrolling-cont');
elem.click(function(event) {
@@ -186,20 +151,22 @@ If you click on the right half of the book, it moves 2 pages to the right. If yo
it moves two pages to the left. Improvements are left as exercise to the reader, but please share!

And here's the final result: `A Bid For Fortune; Or; Dr. Nikola's Vendetta <link://slug/dr-nikola-final>`__
and the template I used: `book.tmpl </listings/book.tmpl.html>`__

Final Note
----------

Eventually, you will find something Nikola simply doesn't let you do. For example, while doing this, I found that
`enabling typogrify from a page's metadata did not work well. <https://github.com/getnikola/nikola/issues/2064>`__
and, while there is a way around it, file a feature request about `not double-loading JQuery. <https://github.com/getnikola/nikola/issues/2062>`__
`enabling typogrify from a page's metadata did not work well, <https://github.com/getnikola/nikola/issues/2064>`__
that `using magic links to listings is buggy <https://github.com/getnikola/nikola/issues/2080>`__
and, while there is a way around it, filed a feature request about `not double-loading JQuery. <https://github.com/getnikola/nikola/issues/2062>`__

And you know what happened? I fixed the bug, and I will implement the feature request! And if you try to do
And you know what happened? I fixed the bugs, and I will implement the feature request! And if you try to do
cool crazy stuff with Nikola, you will find bugs, and will ask for features, and there is a pretty good
chance we will fix them, or find workarounds. After all we have already done it
chance we will fix them, or find workarounds. After all we have already done it at least
`1179 times. <https://github.com/getnikola/nikola/issues?q=is%3Aissue+is%3Aclosed>`__

So, please experiment, and communicate. Everyone wins.
So, please enjoy, experiment, and communicate. Everyone wins.

------------

@@ -4,9 +4,13 @@
<%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;
@@ -18,11 +22,15 @@
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;
@@ -33,9 +41,11 @@

<%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>
@@ -6,11 +6,10 @@

<%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>
.smallcaps {
font-variant: small-caps;
}
.chapter {
width: 100%;
padding: 10px;
@@ -19,6 +18,7 @@
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #ddd;
height: 90vh;
## Use Gentium for the text
font-family: 'Gentium Book Basic', serif;
color: #2d2e2e;
font-weight: 500;
@@ -33,6 +33,11 @@
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%;
@@ -47,19 +52,29 @@
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;
@@ -81,7 +96,9 @@
</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({

0 comments on commit bdac3a2

Please sign in to comment.
You can’t perform that action at this time.