Skip to content

Commit 0ef83ce

Browse files
ralsinaralsina
committedSep 12, 2015
New custom page tutorial
1 parent 36d86f5 commit 0ef83ce

15 files changed

+1199
-0
lines changed
 

‎images/frontispiece.jpg

78.9 KB
Loading

‎images/illus_001.jpg

153 KB
Loading

‎listings/book.tmpl

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
## -*- coding: utf-8 -*-
2+
<%namespace name="helper" file="post_helper.tmpl"/>
3+
<%namespace name="pheader" file="post_header.tmpl"/>
4+
<%namespace name="comments" file="comments_helper.tmpl"/>
5+
<%inherit file="post.tmpl"/>
6+
7+
<%block name="extra_head">
8+
${parent.extra_head()}
9+
<script src="/assets/js/jquery.min.js"></script>
10+
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
11+
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
12+
<style>
13+
.smallcaps {
14+
font-variant: small-caps;
15+
}
16+
.chapter {
17+
width: 100%;
18+
padding: 10px;
19+
-webkit-column-gap: 40px;
20+
-webkit-column-width: 400px;
21+
-webkit-column-count: 2;
22+
-webkit-column-rule: 1px solid #ddd;
23+
height: 90vh;
24+
font-family: 'Gentium Book Basic', serif;
25+
font-color: #2d2e2e;
26+
font-weight: 500;
27+
}
28+
div.frame {
29+
overflow: hidden;
30+
padding: 0;
31+
margin: 0;
32+
}
33+
div.scrolling-cont {
34+
overflow-x: scroll;
35+
padding: 0;
36+
margin: 0;
37+
}
38+
h1,
39+
h2,
40+
h3,
41+
h4 {
42+
text-align: center;
43+
width: 100%;
44+
font-family: 'Gentium Book Basic', serif;
45+
font-size: 120%;
46+
font-weight: 900;
47+
}
48+
h1 {
49+
font-size: 150%;
50+
}
51+
.subtitle {
52+
text-align: center;
53+
width: 100%;
54+
}
55+
.figure {
56+
height: 88vh;
57+
margin: 0;
58+
}
59+
.illus1,
60+
.front {
61+
margin-left: auto;
62+
margin-right: auto;
63+
max-width: 100%;
64+
max-height: 100%;
65+
height: auto;
66+
}
67+
div.topic {
68+
margin: 0;
69+
}
70+
div.section>p {
71+
text-indent: 1em;
72+
margin-bottom: 0;
73+
text-align: justify;
74+
}
75+
</style>
76+
</%block>
77+
78+
<%block name="content">
79+
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
80+
<div class="frame">
81+
<div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
82+
<div class="e-content entry-content chapter" itemprop="articleBody text">
83+
<h1>${post.title()}</h1>
84+
${post.text()}
85+
</div>
86+
</div>
87+
</div>
88+
<script>
89+
$('#scrolling-cont').flowtype({
90+
minimum: 500,
91+
maximum: 1200,
92+
minFont: 20,
93+
maxFont: 40,
94+
fontRatio: 50
95+
});
96+
$(document).ready(function() {
97+
var elem = $('#scrolling-cont');
98+
elem.click(function(event) {
99+
var x1 = elem.position().left;
100+
var pw = elem.width() + 20;
101+
var x2 = event.pageX;
102+
if (x2 - x1 < pw / 2) {
103+
pw = -pw;
104+
}
105+
elem.animate({
106+
scrollLeft: '+=' + pw
107+
}, 500)
108+
});
109+
});
110+
</script>
111+
</article>
112+
113+
</%block>

‎listings/book1.tmpl

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
## -*- coding: utf-8 -*-
2+
<%namespace name="helper" file="post_helper.tmpl"/>
3+
<%namespace name="pheader" file="post_header.tmpl"/>
4+
<%namespace name="comments" file="comments_helper.tmpl"/>
5+
<%inherit file="post.tmpl"/>
6+
7+
<%block name="extra_head">
8+
${parent.extra_head()}
9+
<style>
10+
.chapter {
11+
width: 100%;
12+
padding: 10px;
13+
-webkit-column-gap: 40px;
14+
-webkit-column-width: 400px;
15+
-webkit-column-count: 2;
16+
-webkit-column-rule: 1px solid #ddd;
17+
height: 90vh;
18+
font-color: #2d2e2e;
19+
font-weight: 500;
20+
}
21+
div.frame {
22+
overflow: hidden;
23+
padding: 0;
24+
margin: 0;
25+
}
26+
div.scrolling-cont {
27+
overflow-x: scroll;
28+
padding: 0;
29+
margin: 0;
30+
}
31+
</style>
32+
</%block>
33+
34+
<%block name="content">
35+
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
36+
<div class="frame">
37+
<div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
38+
<div class="e-content entry-content chapter" itemprop="articleBody text">
39+
<h1>${post.title()}</h1>
40+
${post.text()}
41+
</div>
42+
</div>
43+
</div>
44+
</article>
45+
</%block>

‎listings/book2.tmpl

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
## -*- coding: utf-8 -*-
2+
<%namespace name="helper" file="post_helper.tmpl"/>
3+
<%namespace name="pheader" file="post_header.tmpl"/>
4+
<%namespace name="comments" file="comments_helper.tmpl"/>
5+
<%inherit file="post.tmpl"/>
6+
7+
<%block name="extra_head">
8+
${parent.extra_head()}
9+
<script src="/assets/js/jquery.min.js"></script>
10+
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
11+
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
12+
<style>
13+
.smallcaps {
14+
font-variant: small-caps;
15+
}
16+
.chapter {
17+
width: 100%;
18+
padding: 10px;
19+
-webkit-column-gap: 40px;
20+
-webkit-column-width: 400px;
21+
-webkit-column-count: 2;
22+
-webkit-column-rule: 1px solid #ddd;
23+
height: 90vh;
24+
font-family: 'Gentium Book Basic', serif;
25+
font-color: #2d2e2e;
26+
font-weight: 500;
27+
}
28+
div.frame {
29+
overflow: hidden;
30+
padding: 0;
31+
margin: 0;
32+
}
33+
div.scrolling-cont {
34+
overflow-x: scroll;
35+
padding: 0;
36+
margin: 0;
37+
}
38+
h1,
39+
h2,
40+
h3,
41+
h4 {
42+
text-align: center;
43+
width: 100%;
44+
font-family: 'Gentium Book Basic', serif;
45+
font-size: 120%;
46+
font-weight: 900;
47+
}
48+
h1 {
49+
font-size: 150%;
50+
}
51+
.subtitle {
52+
text-align: center;
53+
width: 100%;
54+
}
55+
.figure {
56+
height: 88vh;
57+
margin: 0;
58+
}
59+
.illus1,
60+
.front {
61+
margin-left: auto;
62+
margin-right: auto;
63+
max-width: 100%;
64+
max-height: 100%;
65+
height: auto;
66+
}
67+
div.topic {
68+
margin: 0;
69+
}
70+
div.section>p {
71+
text-indent: 1em;
72+
margin-bottom: 0;
73+
text-align: justify;
74+
}
75+
</style>
76+
</%block>
77+
78+
<%block name="content">
79+
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
80+
<div class="frame">
81+
<div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
82+
<div class="e-content entry-content chapter" itemprop="articleBody text">
83+
<h1>${post.title()}</h1>
84+
${post.text()}
85+
</div>
86+
</div>
87+
</div>
88+
</article>
89+
<script>
90+
$('#scrolling-cont').flowtype({
91+
minimum: 500,
92+
maximum: 1200,
93+
minFont: 20,
94+
maxFont: 40,
95+
fontRatio: 50
96+
});
97+
</script>
98+
</%block>

‎listings/story.tmpl

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
## -*- coding: utf-8 -*-
2+
<%namespace name="helper" file="post_helper.tmpl"/>
3+
<%namespace name="pheader" file="post_header.tmpl"/>
4+
<%namespace name="comments" file="comments_helper.tmpl"/>
5+
<%inherit file="post.tmpl"/>
6+
7+
<%block name="content">
8+
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
9+
<header>
10+
${pheader.html_title()}
11+
${pheader.html_translations(post)}
12+
</header>
13+
<div class="e-content entry-content" itemprop="articleBody text">
14+
${post.text()}
15+
</div>
16+
%if site_has_comments and enable_comments and not post.meta('nocomments'):
17+
<section class="comments">
18+
<h2>${messages("Comments")}</h2>
19+
${comments.comment_form(post.permalink(absolute=True), post.title(), post.base_path)}
20+
</section>
21+
%endif
22+
${helper.mathjax_script(post)}
23+
</article>
24+
</%block>

‎stories/creating-a-custom-page.rst

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
.. title: Creating a Custom Page
2+
.. slug: creating-a-custom-page
3+
.. date: 2015-09-12 16:20:30 UTC
4+
.. tags: tutorial
5+
.. type: text
6+
.. author: Roberto Alsina
7+
8+
The Nikola team tries very hard to make Nikola be simple, in a very specific way:
9+
10+
Once the user has things setup, doing the same thing again should take no work.
11+
So, if you have done one image gallery, doing a second one should be just creating
12+
a folder and putting images in it. If you have written a blog post, writing a new
13+
one is running one command and editing the text you want to publish. And so on.
14+
15+
But sometimes, you don't want to do the same thing you have been doing. Sometimes you
16+
want to make a one-off, a special thing, and Nikola should not get in the way
17+
of you doing that, either, and should let you get your hands as dirty as you want.
18+
19+
So, this tutorial is about how to do a page that is totally different from all the
20+
other pages in your site. A custom page.
21+
22+
Our goal for today is to make a page where it's nice to read a book. Specifically,
23+
a book of late victorian fiction called "Dr. Nikola's Vendetta" [1]_ because, how
24+
could we resist using that one, right? And to make it maintain, within reason,
25+
the "style" of the original book.
26+
27+
It's the first in a series of five books about Dr. Nikola, one of the first
28+
recognizable archvillains, and ... well, they are not all that great, but they
29+
are available at `Project Gutenberg <http://www.gutenberg.org/ebooks/author/3587>`__
30+
and `Open Library <https://openlibrary.org/search?q=guy+boothby>`__ if you
31+
want to read them.
32+
33+
The Open Library has `a lovely scan <https://archive.org/stream/bidforfortunenov00bootiala#page/n9/mode/2up>`__
34+
of the original book we can use for some design guidance. On the other hand,
35+
Project Gutenberg has `the text <http://www.gutenberg.org/ebooks/21640>`__
36+
we can use for actual content!
37+
38+
So, I took the prologue of the book, did some very light editing to turn it into
39+
reStructured Text, added a picture of Dr. Nikola himself I fund in Wikipedia,
40+
and put it here for display. `Behold! <link://slug/dr-nikola-v1>`__
41+
42+
That is very... bad? While Nikola does the job, the default template is simply not
43+
meant for this sort of thing.
44+
45+
The problems are many, from a book-reading point of view:
46+
47+
1) The column is too wide
48+
2) The typesetting is all wrong
49+
3) The sans-serif font is a very wrong idea for book material
50+
4) it's so ... long!
51+
52+
So, let's fix them!
53+
54+
Custom Template
55+
---------------
56+
57+
Like all pages, that one is shown using ``story.tmpl``:
58+
59+
.. listing:: story.tmpl html+mako
60+
61+
That has a lot of code in it that we don't really need. We know there will be no math here, and
62+
I don't want comments on a book. Also, I saw a `nice tutorial about columns in CSS <https://css-tricks.com/guide-responsive-friendly-css-columns/>`__ so I want to style things up a little.
63+
64+
So, I will create a ``templates/book.tmpl`` in my site, and make this story use that by setting the
65+
template metadata in the page to use it::
66+
67+
.. template:: book.tmpl
68+
69+
Here is my new ``book.tmpl``:
70+
71+
72+
.. listing:: book1.tmpl html+mako
73+
74+
And here is `the resulting page <link://slug/dr-nikola-v2>`__
75+
76+
What has changed?
77+
78+
1) I added a ``extra_head`` block. That goes, surprisingly, inside the ``HEAD`` element of the page, so
79+
it's a good place to add CSS that's specific to this page.
80+
81+
2) I removed unneeded parts of the content block, and moved the content around a little.
82+
83+
3) To create the nice responsive 1-or-2 column layout, I had to wrap the content in a few divs, one
84+
with columns, one that scrolls, one that has overflow hidden.
85+
86+
It's better, but it's far from awesome. So, let's continue!
87+
88+
Typesetting
89+
-----------
90+
91+
Paragraph layout: Fiction books that are not fully justified feel wrong to me. So we should set
92+
``text-align: justified`` in the CSS. But to achieve proper justification, you also need hyphenation.
93+
To have that in Nikola, you need to either enable it for the whole site (maybe not a great idea) or
94+
just for this page using the hyphenate metadata::
95+
96+
.. hyphenate: yes
97+
98+
Also, the original book has no space between paragraphs, and has bleeding in the first line, so more
99+
CSS tweaks.
100+
101+
Proper quotes! Nice, curly quotes are a must. Nikola has the typogrify filter to achieve that. Again,
102+
you can enable it for your whole site, or just for this page using metadata::
103+
104+
.. filters: filters.typogrify
105+
106+
Choosing the right font for a page or a site is an art. One I suck at, so I just went with a font that
107+
was similar to the one used in the original book. There are a number of those, but I chose
108+
`Gentium Basic <https://www.google.com/fonts/specimen/Gentium+Basic>`__. You can, of course, choose whatever
109+
you want. Using it via Google Fonts is very simple.
110+
111+
Even with the nicer font, and the dual columns, the font size is too small, there is too many letters
112+
per line. We *could* tweak that using CSS font sizes, but let's go crazy and use a Javascript solution:
113+
`FlowType.JS <http://simplefocus.com/flowtype/>`__
114+
115+
Why FlowType.JS? It dynamically adjust the font size so that columns always have the right font size for
116+
their width. That's just nice. To do that, we need to add JQuery and run a little JS in a ``<script>``
117+
tag at the end of the template.
118+
119+
Figures: figures and multicolumn layout don't go along very well, they may even get split between columns!
120+
The easiest solution is to make them fit in a "page", so, some more CSS for that.
121+
122+
Also, minor things like styling titles, subtitles, making the 1st word in the section smallcaps, and so on,
123+
but hey, this is just CSS tweaking, we could do this forever.
124+
125+
So, here is our second attempt at a "book-like" template:
126+
127+
.. listing:: book2.tmpl html+mako
128+
129+
And here's our `much more nicely typeset book <link://slug/dr-nikola-v3>`__.
130+
131+
Interaction
132+
-----------
133+
134+
Pages are not just text anymore. They need to interact with the user in the right way.
135+
In this case, the scrolling horizontally to read another page is horrible:
136+
137+
* It's hard to stop at the right place
138+
* You end up between pages 99% of the time
139+
140+
So, let's fix that with a little more JS at the end of the template:
141+
142+
.. code:: javascript
143+
144+
$('#scrolling-cont').flowtype({
145+
minimum: 500,
146+
maximum: 1200,
147+
minFont: 20,
148+
maxFont: 40,
149+
fontRatio: 50
150+
});
151+
$(document).ready(function() {
152+
var elem = $('#scrolling-cont');
153+
elem.click(function(event) {
154+
var x1 = elem.position().left;
155+
var pw = elem.width() + 20;
156+
var x2 = event.pageX;
157+
if (x2 - x1 < pw / 2) {
158+
pw = -pw;
159+
}
160+
elem.animate({
161+
scrollLeft: '+=' + pw
162+
}, 500)
163+
});
164+
});
165+
166+
If you click on the right half of the book, it moves 2 pages to the right. If you click on the left half
167+
it moves two pages to the left. Improvements are left as exercise to the reader, but please share!
168+
169+
And here's the final result: `A Bid For Fortune; Or; Dr. Nikola's Vendetta <link://slug/dr-nikola-final>`__
170+
171+
------------
172+
173+
.. [1] Sadly, the title is actually "A Bid For Fortune" and "Dr. Nikola's Vendetta"
174+
is the subtitle, but it works for me.

‎stories/dr-nikola-final.rst

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.. title: A BID FOR FORTUNE OR; DR. NIKOLA'S VENDETTA
2+
.. template: book.tmpl
3+
.. hyphenate: yes
4+
.. filters: filters.typogrify
5+
6+
.. include:: stories/dr-nikola.inc

‎stories/dr-nikola-v1.rst

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.. title: A BID FOR FORTUNE OR; DR. NIKOLA'S VENDETTA
2+
3+
.. include:: stories/dr-nikola.inc
4+

‎stories/dr-nikola-v2.rst

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.. title: A BID FOR FORTUNE OR; DR. NIKOLA'S VENDETTA
2+
.. template: book1.tmpl
3+
4+
.. include:: stories/dr-nikola.inc
5+

‎stories/dr-nikola-v3.rst

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.. title: A BID FOR FORTUNE OR; DR. NIKOLA'S VENDETTA
2+
.. template: book2.tmpl
3+
.. hyphenate: yes
4+
.. filters: filters.typogrify
5+
6+
.. include:: stories/dr-nikola.inc
7+

‎stories/dr-nikola.inc

+467
Large diffs are not rendered by default.

‎templates/book.tmpl

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
## -*- coding: utf-8 -*-
2+
<%namespace name="helper" file="post_helper.tmpl"/>
3+
<%namespace name="pheader" file="post_header.tmpl"/>
4+
<%namespace name="comments" file="comments_helper.tmpl"/>
5+
<%inherit file="post.tmpl"/>
6+
7+
<%block name="extra_head">
8+
${parent.extra_head()}
9+
<script src="/assets/js/jquery.min.js"></script>
10+
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
11+
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
12+
<style>
13+
.smallcaps {
14+
font-variant: small-caps;
15+
}
16+
.chapter {
17+
width: 100%;
18+
padding: 10px;
19+
-webkit-column-gap: 40px;
20+
-webkit-column-width: 400px;
21+
-webkit-column-count: 2;
22+
-webkit-column-rule: 1px solid #ddd;
23+
height: 90vh;
24+
font-family: 'Gentium Book Basic', serif;
25+
font-color: #2d2e2e;
26+
font-weight: 500;
27+
}
28+
div.frame {
29+
overflow: hidden;
30+
padding: 0;
31+
margin: 0;
32+
}
33+
div.scrolling-cont {
34+
overflow-x: scroll;
35+
padding: 0;
36+
margin: 0;
37+
}
38+
h1,
39+
h2,
40+
h3,
41+
h4 {
42+
text-align: center;
43+
width: 100%;
44+
font-family: 'Gentium Book Basic', serif;
45+
font-size: 120%;
46+
font-weight: 900;
47+
}
48+
h1 {
49+
font-size: 150%;
50+
}
51+
.subtitle {
52+
text-align: center;
53+
width: 100%;
54+
}
55+
.figure {
56+
height: 88vh;
57+
margin: 0;
58+
}
59+
.illus1,
60+
.front {
61+
margin-left: auto;
62+
margin-right: auto;
63+
max-width: 100%;
64+
max-height: 100%;
65+
height: auto;
66+
}
67+
div.topic {
68+
margin: 0;
69+
}
70+
div.section>p {
71+
text-indent: 1em;
72+
margin-bottom: 0;
73+
text-align: justify;
74+
}
75+
</style>
76+
</%block>
77+
78+
<%block name="content">
79+
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
80+
<div class="frame">
81+
<div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
82+
<div class="e-content entry-content chapter" itemprop="articleBody text">
83+
<h1>${post.title()}</h1>
84+
${post.text()}
85+
</div>
86+
</div>
87+
</div>
88+
<script>
89+
$('#scrolling-cont').flowtype({
90+
minimum: 500,
91+
maximum: 1200,
92+
minFont: 20,
93+
maxFont: 40,
94+
fontRatio: 50
95+
});
96+
$(document).ready(function() {
97+
var elem = $('#scrolling-cont');
98+
elem.click(function(event) {
99+
var x1 = elem.position().left;
100+
var pw = elem.width() + 20;
101+
var x2 = event.pageX;
102+
if (x2 - x1 < pw / 2) {
103+
pw = -pw;
104+
}
105+
elem.animate({
106+
scrollLeft: '+=' + pw
107+
}, 500)
108+
});
109+
});
110+
</script>
111+
</article>
112+
113+
</%block>

‎templates/book1.tmpl

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
## -*- coding: utf-8 -*-
2+
<%namespace name="helper" file="post_helper.tmpl"/>
3+
<%namespace name="pheader" file="post_header.tmpl"/>
4+
<%namespace name="comments" file="comments_helper.tmpl"/>
5+
<%inherit file="post.tmpl"/>
6+
7+
<%block name="extra_head">
8+
${parent.extra_head()}
9+
<style>
10+
.chapter {
11+
width: 100%;
12+
padding: 10px;
13+
-webkit-column-gap: 40px;
14+
-webkit-column-width: 400px;
15+
-webkit-column-count: 2;
16+
-webkit-column-rule: 1px solid #ddd;
17+
height: 90vh;
18+
font-color: #2d2e2e;
19+
font-weight: 500;
20+
}
21+
div.frame {
22+
overflow: hidden;
23+
padding: 0;
24+
margin: 0;
25+
}
26+
div.scrolling-cont {
27+
overflow-x: scroll;
28+
padding: 0;
29+
margin: 0;
30+
}
31+
</style>
32+
</%block>
33+
34+
<%block name="content">
35+
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
36+
<div class="frame">
37+
<div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
38+
<div class="e-content entry-content chapter" itemprop="articleBody text">
39+
<h1>${post.title()}</h1>
40+
${post.text()}
41+
</div>
42+
</div>
43+
</div>
44+
</article>
45+
</%block>

‎templates/book2.tmpl

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
## -*- coding: utf-8 -*-
2+
<%namespace name="helper" file="post_helper.tmpl"/>
3+
<%namespace name="pheader" file="post_header.tmpl"/>
4+
<%namespace name="comments" file="comments_helper.tmpl"/>
5+
<%inherit file="post.tmpl"/>
6+
7+
<%block name="extra_head">
8+
${parent.extra_head()}
9+
<script src="/assets/js/jquery.min.js"></script>
10+
<script src="//cdnjs.cloudflare.com/ajax/libs/Flowtype.js/1.1.0/flowtype.min.js"></script>
11+
<link href='https://fonts.googleapis.com/css?family=Gentium+Book+Basic' rel='stylesheet' type='text/css'>
12+
<style>
13+
.smallcaps {
14+
font-variant: small-caps;
15+
}
16+
.chapter {
17+
width: 100%;
18+
padding: 10px;
19+
-webkit-column-gap: 40px;
20+
-webkit-column-width: 400px;
21+
-webkit-column-count: 2;
22+
-webkit-column-rule: 1px solid #ddd;
23+
height: 90vh;
24+
font-family: 'Gentium Book Basic', serif;
25+
font-color: #2d2e2e;
26+
font-weight: 500;
27+
}
28+
div.frame {
29+
overflow: hidden;
30+
padding: 0;
31+
margin: 0;
32+
}
33+
div.scrolling-cont {
34+
overflow-x: scroll;
35+
padding: 0;
36+
margin: 0;
37+
}
38+
h1,
39+
h2,
40+
h3,
41+
h4 {
42+
text-align: center;
43+
width: 100%;
44+
font-family: 'Gentium Book Basic', serif;
45+
font-size: 120%;
46+
font-weight: 900;
47+
}
48+
h1 {
49+
font-size: 150%;
50+
}
51+
.subtitle {
52+
text-align: center;
53+
width: 100%;
54+
}
55+
.figure {
56+
height: 88vh;
57+
margin: 0;
58+
}
59+
.illus1,
60+
.front {
61+
margin-left: auto;
62+
margin-right: auto;
63+
max-width: 100%;
64+
max-height: 100%;
65+
height: auto;
66+
}
67+
div.topic {
68+
margin: 0;
69+
}
70+
div.section>p {
71+
text-indent: 1em;
72+
margin-bottom: 0;
73+
text-align: justify;
74+
}
75+
</style>
76+
</%block>
77+
78+
<%block name="content">
79+
<article class="storypage" itemscope="itemscope" itemtype="http://schema.org/Article">
80+
<div class="frame">
81+
<div class="scrolling-cont" id="scrolling-cont" name="scrolling-cont">
82+
<div class="e-content entry-content chapter" itemprop="articleBody text">
83+
<h1>${post.title()}</h1>
84+
${post.text()}
85+
</div>
86+
</div>
87+
</div>
88+
</article>
89+
<script>
90+
$('#scrolling-cont').flowtype({
91+
minimum: 500,
92+
maximum: 1200,
93+
minFont: 20,
94+
maxFont: 40,
95+
fontRatio: 50
96+
});
97+
</script>
98+
</%block>

0 commit comments

Comments
 (0)
Please sign in to comment.