Add more example content.

assets/sass/_extra.scss

@@ -0,0 +1,10 @@
+// Set the font sizes to use, fixed or fluid.
+$font-size: $font-size-fluid;
+
+// The max content width. (Consider using one of the breakpoints.)
+$max-content-width:   777px;
+
+// The max page width. Defaults to max-content-width.
+// Setting this to a larger value than max-content-width allows
+// content with class "stretch" to stretch out to the page edge.
+$max-page-width:      1111px;

content/en/misc/_index.md

@@ -0,0 +1,7 @@
+---
+title: Misc
+submitted: false
+
+---
+
+Other features of the Zen theme.

content/en/misc/layout.md

@@ -0,0 +1,27 @@
+---
+title: Layout with grid
+submitted: false
+summary: Examples of using stretch and breakout classes.
+sidebar: false
+examples:
+  - title: Lorem ipsum dolor sit amet
+    text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    class:
+  - title: Section with "breakout" class
+    text: This section also has a "box" class. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    class: breakout box
+  - title: Lorem ipsum dolor sit amet
+    text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    class:
+  - title: Section with "stretch" class
+    text: This section also has "box box--inverted" classes. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    class: stretch box box--inverted
+  - title: Lorem ipsum dolor sit amet
+    text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    class:
+type: example
+
+---
+
+Examples of using stretch and breakout classes.
+

content/en/math.md → content/en/misc/math.md

@@ -2,6 +2,7 @@
 title: Math
 math: true
 submitted: false
+summary: Examples of math typesetting with KaTeX.
 
 ---
 

content/en/misc.md → content/en/misc/misc.md

@@ -1,7 +1,8 @@
 ---
-title: Misc
+title: Components
 tables: true
 submitted: false
+summary: Examples of some components classes.
 
 ---
 

layouts/example/single.html

@@ -0,0 +1,22 @@
+{{ define "main" -}}
+<main class="main layout__main">
+<article class="single-view{{ with .Section }} single-view--{{ . | urlize }}{{ end }}">
+<header>
+<h1 class="title{{ if $.Param "submitted" | default false }} mb--xxs{{ end }}">{{ .Title }}</h1>
+{{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
+{{ if .Params.tags }}{{ partial "tags.html" . }}{{ end -}}
+</header>
+
+{{ .Content }}
+</article>
+
+{{ range .Params.examples }}
+<section class="{{ .class }}">
+<h2>{{ .title }}</h2>
+
+<p>{{ .text }}</p>
+</section>
+{{ end }}
+
+</main>
+{{ end -}}