TreeSaver 使用教程整理——Step 6: Simple Typography

请首先阅读前几篇教程，才能对本篇文章了解比较深入：

TreeSaver 使用教程整理——Step 1: Getting Started

TreeSaver 使用教程整理——Step 2: Adding Basic UI

TreeSaver 使用教程整理——Step 3: Creating Grids

TreeSaver 使用教程整理——Step 4: Using a Title Figure

TreeSaver 使用教程整理——Step 5: Adding Illustration Figures

我们在上一步的基础上，copy到 step6 作为我们 step6 初始的基础。

Step 6: Simple Typography

内容文件。

标题的修改。我们把章节用CSS属性扩起来，这样我们后面可以控制这个区域

<figure>

  <h2 data-sizes="title fallback">

    <span class="chapter">Chapter I:</span>

    Down the Rabbit-Hole

  </h2>

</figure>

这里我们是对章节号使用<span>标签，这样我们就可以对它做一些排版的工作。

我们在样式文件中增加如下样式设置：

body {

  font-family: Georgia, Serif;

  font-size: 16px;

  color: #434;

}

h2 {

  font-size: 36px;

  line-height: 48px;

  font-weight: normal;

  margin: 24px 0;

  color: #666;

}

h2 .chapter {

  display: block;

  font-size: 16px;

  line-height: 24px;

  color: #999;

}

p {

  margin: 0;

  text-indent: 24px;

}

hr {

  margin: 24px 0;

  border: none;

  padding: 0;

  height: 24px;

  background: url('../img/horizontal-rule.png') 50% 50% no-repeat;

}

这里是很简单的CSS调整。

修改如下CSS成下面的样子：

.grid {

  width: 280px;

  margin: 0 72px;

  opacity: .25;

  min-height: 30px;

}

.cols-2 {

  width: 590px;

}

.cols-3 {

  width: 910px;

}

.column, .container {

  width: 280px;

  top: 15px;

  bottom: 15px;

  left: 0;

}

.col-2 {

  left: 305px;

}

.col-3 {

  left: 615px;

}

 

我们删除了每一页的边框，这意味着我们不再需要15px的空间去区分分栏。

页面效果：

 

参考资料：

https://github.com/Treesaver/treesaver/wiki/Walkthrough