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