Initial setup for pandoc rendering

- I grabbed fonts and CSS from my website. These files can be entirely
  replaced; I just picked them because it was easy for me to use.
- The minified CSS was generated in advance from the Sass file
- Run build.sh to generate output, and then upload the html/ dir to your
  favorite location
- I uploaded to https://forgefed.angeley.es

25 files changed, 625 insertions, 0 deletions

diff --git a/build.sh b/build.sh
new file mode 100755
index 0000000..a06e34d
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,27 @@
+#!/bin/bash
+
+inputs="forgefed forgefed-vocabulary"
+
+render () {
+    dir="$1"
+    file="$2"
+    if [ "$3" == "true" ]; then
+        toc="--table-of-contents"
+    else
+        toc=""
+    fi
+    pandoc $dir/$file.md \
+        --from markdown \
+        --to html \
+        --template html/template.html \
+        $toc \
+        --output html/$file.html
+        # --highlight-style=STYLE \
+        # --number-sections \
+}
+
+render html index "false"
+
+for file in $inputs; do
+    render specification $file "true"
+done
diff --git a/html/fonts/cabin/cabin-bold-italic.woff b/html/fonts/cabin/cabin-bold-italic.woff
new file mode 100644
index 0000000..d5c0d4e
--- /dev/null
+++ b/html/fonts/cabin/cabin-bold-italic.woff
diff --git a/html/fonts/cabin/cabin-bold-italic.woff2 b/html/fonts/cabin/cabin-bold-italic.woff2
new file mode 100644
index 0000000..d25d5d9
--- /dev/null
+++ b/html/fonts/cabin/cabin-bold-italic.woff2
diff --git a/html/fonts/cabin/cabin-bold.woff b/html/fonts/cabin/cabin-bold.woff
new file mode 100644
index 0000000..ce1f277
--- /dev/null
+++ b/html/fonts/cabin/cabin-bold.woff
diff --git a/html/fonts/cabin/cabin-bold.woff2 b/html/fonts/cabin/cabin-bold.woff2
new file mode 100644
index 0000000..cb8e967
--- /dev/null
+++ b/html/fonts/cabin/cabin-bold.woff2
diff --git a/html/fonts/cabin/cabin-italic.woff b/html/fonts/cabin/cabin-italic.woff
new file mode 100644
index 0000000..52cf2a2
--- /dev/null
+++ b/html/fonts/cabin/cabin-italic.woff
diff --git a/html/fonts/cabin/cabin-italic.woff2 b/html/fonts/cabin/cabin-italic.woff2
new file mode 100644
index 0000000..ca44ee8
--- /dev/null
+++ b/html/fonts/cabin/cabin-italic.woff2
diff --git a/html/fonts/cabin/cabin-regular.woff b/html/fonts/cabin/cabin-regular.woff
new file mode 100644
index 0000000..c575666
--- /dev/null
+++ b/html/fonts/cabin/cabin-regular.woff
diff --git a/html/fonts/cabin/cabin-regular.woff2 b/html/fonts/cabin/cabin-regular.woff2
new file mode 100644
index 0000000..5b6c54c
--- /dev/null
+++ b/html/fonts/cabin/cabin-regular.woff2
diff --git a/html/fonts/cabin/ofl.txt b/html/fonts/cabin/ofl.txt
new file mode 100644
index 0000000..d7f477e
--- /dev/null
+++ b/html/fonts/cabin/ofl.txt
@@ -0,0 +1,91 @@
+This Font Software is licensed under the SIL Open Font License, Version 1.1.

+This license is copied below, and is also available with a FAQ at:

+http://scripts.sil.org/OFL

+

+

+-----------------------------------------------------------

+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007

+-----------------------------------------------------------

+

+PREAMBLE

+The goals of the Open Font License (OFL) are to stimulate worldwide

+development of collaborative font projects, to support the font creation

+efforts of academic and linguistic communities, and to provide a free and

+open framework in which fonts may be shared and improved in partnership

+with others.

+

+The OFL allows the licensed fonts to be used, studied, modified and

+redistributed freely as long as they are not sold by themselves. The

+fonts, including any derivative works, can be bundled, embedded,

+redistributed and/or sold with any software provided that any reserved

+names are not used by derivative works. The fonts and derivatives,

+however, cannot be released under any other type of license. The

+requirement for fonts to remain under this license does not apply

+to any document created using the fonts or their derivatives.

+

+DEFINITIONS

+"Font Software" refers to the set of files released by the Copyright

+Holder(s) under this license and clearly marked as such. This may

+include source files, build scripts and documentation.

+

+"Reserved Font Name" refers to any names specified as such after the

+copyright statement(s).

+

+"Original Version" refers to the collection of Font Software components as

+distributed by the Copyright Holder(s).

+

+"Modified Version" refers to any derivative made by adding to, deleting,

+or substituting -- in part or in whole -- any of the components of the

+Original Version, by changing formats or by porting the Font Software to a

+new environment.

+

+"Author" refers to any designer, engineer, programmer, technical

+writer or other person who contributed to the Font Software.

+

+PERMISSION & CONDITIONS

+Permission is hereby granted, free of charge, to any person obtaining

+a copy of the Font Software, to use, study, copy, merge, embed, modify,

+redistribute, and sell modified and unmodified copies of the Font

+Software, subject to the following conditions:

+

+1) Neither the Font Software nor any of its individual components,

+in Original or Modified Versions, may be sold by itself.

+

+2) Original or Modified Versions of the Font Software may be bundled,

+redistributed and/or sold with any software, provided that each copy

+contains the above copyright notice and this license. These can be

+included either as stand-alone text files, human-readable headers or

+in the appropriate machine-readable metadata fields within text or

+binary files as long as those fields can be easily viewed by the user.

+

+3) No Modified Version of the Font Software may use the Reserved Font

+Name(s) unless explicit written permission is granted by the corresponding

+Copyright Holder. This restriction only applies to the primary font name as

+presented to the users.

+

+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font

+Software shall not be used to promote, endorse or advertise any

+Modified Version, except to acknowledge the contribution(s) of the

+Copyright Holder(s) and the Author(s) or with their explicit written

+permission.

+

+5) The Font Software, modified or unmodified, in part or in whole,

+must be distributed entirely under this license, and must not be

+distributed under any other license. The requirement for fonts to

+remain under this license does not apply to any document created

+using the Font Software.

+

+TERMINATION

+This license becomes null and void if any of the above conditions are

+not met.

+

+DISCLAIMER

+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF

+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT

+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE

+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL

+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM

+OTHER DEALINGS IN THE FONT SOFTWARE.

diff --git a/html/fonts/hack/hack-bold-italic.woff b/html/fonts/hack/hack-bold-italic.woff
new file mode 100644
index 0000000..409d0d4
--- /dev/null
+++ b/html/fonts/hack/hack-bold-italic.woff
diff --git a/html/fonts/hack/hack-bold-italic.woff2 b/html/fonts/hack/hack-bold-italic.woff2
new file mode 100644
index 0000000..73fdcb2
--- /dev/null
+++ b/html/fonts/hack/hack-bold-italic.woff2
diff --git a/html/fonts/hack/hack-bold.woff b/html/fonts/hack/hack-bold.woff
new file mode 100644
index 0000000..c950832
--- /dev/null
+++ b/html/fonts/hack/hack-bold.woff
diff --git a/html/fonts/hack/hack-bold.woff2 b/html/fonts/hack/hack-bold.woff2
new file mode 100644
index 0000000..2b126cd
--- /dev/null
+++ b/html/fonts/hack/hack-bold.woff2
diff --git a/html/fonts/hack/hack-italic.woff b/html/fonts/hack/hack-italic.woff
new file mode 100644
index 0000000..ca368b7
--- /dev/null
+++ b/html/fonts/hack/hack-italic.woff
diff --git a/html/fonts/hack/hack-italic.woff2 b/html/fonts/hack/hack-italic.woff2
new file mode 100644
index 0000000..b936c9a
--- /dev/null
+++ b/html/fonts/hack/hack-italic.woff2
diff --git a/html/fonts/hack/hack-regular.woff b/html/fonts/hack/hack-regular.woff
new file mode 100644
index 0000000..ca0ba78
--- /dev/null
+++ b/html/fonts/hack/hack-regular.woff
diff --git a/html/fonts/hack/hack-regular.woff2 b/html/fonts/hack/hack-regular.woff2
new file mode 100644
index 0000000..c2497bf
--- /dev/null
+++ b/html/fonts/hack/hack-regular.woff2
diff --git a/html/fonts/hack/ofl.txt b/html/fonts/hack/ofl.txt
new file mode 100644
index 0000000..d7f477e
--- /dev/null
+++ b/html/fonts/hack/ofl.txt
@@ -0,0 +1,91 @@
+This Font Software is licensed under the SIL Open Font License, Version 1.1.

+This license is copied below, and is also available with a FAQ at:

+http://scripts.sil.org/OFL

+

+

+-----------------------------------------------------------

+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007

+-----------------------------------------------------------

+

+PREAMBLE

+The goals of the Open Font License (OFL) are to stimulate worldwide

+development of collaborative font projects, to support the font creation

+efforts of academic and linguistic communities, and to provide a free and

+open framework in which fonts may be shared and improved in partnership

+with others.

+

+The OFL allows the licensed fonts to be used, studied, modified and

+redistributed freely as long as they are not sold by themselves. The

+fonts, including any derivative works, can be bundled, embedded,

+redistributed and/or sold with any software provided that any reserved

+names are not used by derivative works. The fonts and derivatives,

+however, cannot be released under any other type of license. The

+requirement for fonts to remain under this license does not apply

+to any document created using the fonts or their derivatives.

+

+DEFINITIONS

+"Font Software" refers to the set of files released by the Copyright

+Holder(s) under this license and clearly marked as such. This may

+include source files, build scripts and documentation.

+

+"Reserved Font Name" refers to any names specified as such after the

+copyright statement(s).

+

+"Original Version" refers to the collection of Font Software components as

+distributed by the Copyright Holder(s).

+

+"Modified Version" refers to any derivative made by adding to, deleting,

+or substituting -- in part or in whole -- any of the components of the

+Original Version, by changing formats or by porting the Font Software to a

+new environment.

+

+"Author" refers to any designer, engineer, programmer, technical

+writer or other person who contributed to the Font Software.

+

+PERMISSION & CONDITIONS

+Permission is hereby granted, free of charge, to any person obtaining

+a copy of the Font Software, to use, study, copy, merge, embed, modify,

+redistribute, and sell modified and unmodified copies of the Font

+Software, subject to the following conditions:

+

+1) Neither the Font Software nor any of its individual components,

+in Original or Modified Versions, may be sold by itself.

+

+2) Original or Modified Versions of the Font Software may be bundled,

+redistributed and/or sold with any software, provided that each copy

+contains the above copyright notice and this license. These can be

+included either as stand-alone text files, human-readable headers or

+in the appropriate machine-readable metadata fields within text or

+binary files as long as those fields can be easily viewed by the user.

+

+3) No Modified Version of the Font Software may use the Reserved Font

+Name(s) unless explicit written permission is granted by the corresponding

+Copyright Holder. This restriction only applies to the primary font name as

+presented to the users.

+

+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font

+Software shall not be used to promote, endorse or advertise any

+Modified Version, except to acknowledge the contribution(s) of the

+Copyright Holder(s) and the Author(s) or with their explicit written

+permission.

+

+5) The Font Software, modified or unmodified, in part or in whole,

+must be distributed entirely under this license, and must not be

+distributed under any other license. The requirement for fonts to

+remain under this license does not apply to any document created

+using the Font Software.

+

+TERMINATION

+This license becomes null and void if any of the above conditions are

+not met.

+

+DISCLAIMER

+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF

+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT

+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE

+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL

+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM

+OTHER DEALINGS IN THE FONT SOFTWARE.

diff --git a/html/index.md b/html/index.md
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/html/index.md
diff --git a/html/spec.css b/html/spec.css
new file mode 100644
index 0000000..0a7aace
--- /dev/null
+++ b/html/spec.css
@@ -0,0 +1 @@
+@font-face{font-family:"Cabin";font-weight:400;font-style:normal;src:local("Cabin Regular"),url("/fonts/cabin/cabin-regular.woff2") format("woff2"),url("/fonts/cabin/cabin-regular.woff") format("woff")}@font-face{font-family:"Cabin";font-weight:400;font-style:italic;src:local("Cabin Italic"),url("/fonts/cabin/cabin-italic.woff2") format("woff2"),url("/fonts/cabin/cabin-italic.woff") format("woff")}@font-face{font-family:"Cabin";font-weight:600;font-style:normal;src:local("Cabin Bold"),url("/fonts/cabin/cabin-bold.woff2") format("woff2"),url("/fonts/cabin/cabin-bold.woff") format("woff")}@font-face{font-family:"Cabin";font-weight:600;font-style:italic;src:local("Cabin Bold Italic"),url("/fonts/cabin/cabin-bold-italic.woff2") format("woff2"),url("/fonts/cabin/cabin-bold-italic.woff") format("woff")}@font-face{font-family:"Hack";font-weight:400;font-style:normal;src:local("Hack Regular"),url("/fonts/hack/hack-regular.woff2") format("woff2"),url("/fonts/hack/hack-regular.woff") format("woff")}*{margin:0;padding:0;box-sizing:border-box}.default{font-size:62.5%}.body{max-width:80rem;margin:0 auto;padding:0 2rem 0;background:#000}.header{text-align:center;margin:4rem auto 2rem}.header-title__link{font:400 7rem/7.5rem Cabin,Helvetica,sans-serif;color:#c00;letter-spacing:0.1rem;text-decoration:none}.header-title__link:hover{color:#ef2929}.nav{margin:2rem auto}.nav__link{font:400 2.2rem Cabin,Helvetica,sans-serif;color:#d3d7cf;margin:0 1.5rem;text-decoration:none}.nav__link:hover{color:#eeeeec}.footer{font:400 1.5rem Cabin,Helvetica,sans-serif;color:#555;text-align:center;margin:10rem auto 3rem}.footer__link{font:400 2rem Cabin,Helvetica,sans-serif;color:#739fcf;text-decoration:none;border-bottom:0.1rem solid;padding:0 0 0.1rem 0;font-size:1.5rem}.footer__link:hover{color:#34e2e2}.main{font:400 2rem/2.8rem Cabin,Helvetica,sans-serif;color:#ccc}.main a{font:400 2rem Cabin,Helvetica,sans-serif;color:#739fcf;text-decoration:none;border-bottom:0.1rem solid;padding:0 0 0.1rem 0}.main a:hover{color:#34e2e2}.main abbr{cursor:help;text-decoration:none;border-bottom:0.2rem dotted}.main b{font-weight:600}.main blockquote{margin:0 2rem;padding:0rem 2rem;border-left:1rem solid #404040;font-style:italic}.main blockquote blockquote{margin:0;border-left:0.5rem solid #404040}.main blockquote+p,.main p+blockquote{margin-top:3rem}.main cite{font-style:italic;font-size:2.1rem}.main code,.main samp,.main var{font:400 1.5rem Hack,monospace;color:#ccc;background:#404040;margin:0 0.2rem;padding:0.2rem 0.4rem 0.1rem}.main del{color:#404040;background:#000}.main details{padding:0 0 0 3rem}.main summary{margin:0 0 1rem -2.5rem;color:#739fcf;cursor:context-menu}.main summary:hover{color:#34e2e2}.main dfn{font-weight:600;font-style:normal}.main dl{margin:2rem 0}.main dt{margin:1rem 0 0 0;font-weight:600}.main dd{margin:0 0 1rem 4rem}.main em,.main i{font-style:italic}.main h1{font:400 4.5rem Cabin,Helvetica,sans-serif;color:#ccc;margin:5rem 0 2rem}.main h2{font:400 4rem Cabin,Helvetica,sans-serif;color:#ccc;margin:5rem 0 2rem}.main h3{font:600 3.2rem Cabin,Helvetica,sans-serif;color:#ccc;margin:4.5rem 0 1.5rem}.main h4{font:600 3rem Cabin,Helvetica,sans-serif;color:#ccc;margin:3rem 0 1.5rem}.main h5{font:600 2.8rem Cabin,Helvetica,sans-serif;color:#ccc;margin:3rem 0 1.5rem}.main h6{font:600 2.3rem Cabin,Helvetica,sans-serif;color:#ccc;margin:3rem 0 1.5rem}.main h1+h2{margin:2rem 0}.main h2+h3,.main h3+h4,.main h4+h5,.main h5+h6{margin:2rem 0 1.5rem}.main hr{border:0.1rem solid #555753;margin:5rem auto}.main img{border:0;margin:2rem 0}.main mark{background:#c4a000;padding:0.2rem 0.5rem}.main ol{list-style-type:decimal;margin:2rem}.main ol li,.main ul li{padding:0 0 0 0.5rem}.main p{margin:1.5rem 0}.main pre{font:400 1.5rem Hack,monospace;color:#ccc;margin:3rem 0;padding:2rem;background:#404040;word-wrap:break-word;overflow:auto}.main s{text-decoration:line-through}.main small{font-size:1.5rem}.main strong{font-weight:600;font-size:2.1rem}.main sub,.main sup{font-size:1.5rem}.main table{margin:3rem 0;border-collapse:collapse;overflow:auto}.main td{padding:0.5rem 0 0}.main th{padding:0 3rem 1rem 0}.main tfoot,.main thead{font-weight:600}.main tbody{font-size:1.8rem}.main u{text-decoration:underline}.main ul{list-style-type:disc;margin:2rem 0 2rem 2rem}.main ul li ul{list-style-type:circle;margin:0.5rem 0 1rem 2rem}.main figure,.main .figure{margin:3rem 0}.main figure img,.main .figure img{margin:0}.main figcaption,.main .caption{font:400 1.5rem Cabin,Helvetica,sans-serif;color:#555;font-style:italic;margin:0.5rem 0 1.5rem}.main pre code{padding:0}.main thead,.main tr.header{text-align:left;border-bottom:0.1rem solid #555753}.main .footnotes li *{font-size:1.8rem;line-height:2rem}.main .footnotes li a[href^="#fnref"]{padding:0 0 0 0.5rem;border:0}.main a.footnoteRef{border:0}.main date.date--icon:before,.main time.time--icon:before{content:"🕒";margin:0 0.5rem 0 0}.main h1.main-title{font:400 4.5rem Cabin,Helvetica,sans-serif;color:#c4a000;margin:4rem 0 2rem}.main strong.strong--double{font-size:2.1rem;border-bottom:0.5rem double}.main strong.strong--em{font-size:2.1rem;font-style:italic}@media (max-width: 480px){.default{font-size:56.25%}.header-title__link{font:400 12vw Cabin,Helvetica,sans-serif;color:#c00}.nav__link{font:400 2.2rem/3.2rem Cabin,Helvetica,sans-serif;color:#d3d7cf}.footer{margin:15vw auto 3rem}.main h1{font-size:11vw}.main h2{font-size:10vw}.main h3{font-size:9vw}.main h4{font-size:8.5vw}.main h5{font-size:8vw}.main h6{font-size:7.5vw}.main h1.main-title{font-size:11vw;margin:4rem 0 0.5rem}}
diff --git a/html/spec.sass b/html/spec.sass
new file mode 100644
index 0000000..e497202
--- /dev/null
+++ b/html/spec.sass
@@ -0,0 +1,365 @@
+/// Colours -------------------------------------------------------------- ///
+$red:       #cc0000     // logo
+$redorange: #ef2929     // logo hover
+$ochre:     #c4a000     // heading
+$lightblue: #739fcf     // link
+$lightmint: #d3d7cf     // nav link
+$aqua:      #34e2e2     // link hover
+$bluegray:  #555753     // hr
+$lightgray: #eeeeec     // nav link hover
+$gray80:    #ccc        // body text
+$darkgray:  #555        // footer text
+$black:     #000        // body background
+$gray25:    #404040     // addition for del, code, blockquote
+
+
+/// Mixins --------------------------------------------------------------- ///
+
+// Format @font-face src value with the correct paths
+@function font-src($family, $weight, $style, $variant)
+    $path: "/fonts/" + to-lower-case($family) + "/"
+    $basename: to-lower-case($family) + "-" + to-lower-case($variant)
+    @if $variant == "Bold Italic"
+        $basename: to-lower-case($family) + "-bold-italic"
+    $local: local($family + " " + $variant)
+    $woff2: url($path + $basename + ".woff2") format("woff2")
+    $woff:  url($path + $basename + ".woff") format("woff")
+    @return $local, $woff2, $woff
+
+// Add @font-face attributes
+=font-face($family, $weight, $style, $variant)
+    @font-face
+        font-family: $family
+        font-weight: $weight
+        font-style: $style
+        src: font-src($family, $weight, $style, $variant)
+
+// Set font attributes and colour
+=font--cabin($weight, $size, $color)
+    font: $weight $size Cabin, Helvetica, sans-serif
+    color: $color
+
+=font--hack($weight, $size, $color)
+    font: $weight $size Hack, monospace
+    color: $color
+
+// Set default link style
+=link--normal
+    +font--cabin(400, 2rem, $lightblue)
+    text-decoration: none
+    border-bottom: 0.1rem solid
+    padding: 0 0 0.1rem 0
+    &:hover
+        color: $aqua
+
+
+/// Start of css output -------------------------------------------------- ///
+
+/** Initialise fonts **/
++font-face("Cabin", 400, normal, "Regular")
++font-face("Cabin", 400, italic, "Italic")
++font-face("Cabin", 600, normal, "Bold")
++font-face("Cabin", 600, italic, "Bold Italic")
++font-face("Hack",  400, normal, "Regular")
+
+
+/** Global **/
+*
+    margin: 0
+    padding: 0
+    box-sizing: border-box
+
+
+/** html and body tags **/
+.default
+    font-size: 62.5%
+
+.body
+    max-width: 80rem
+    margin: 0 auto
+    padding: 0 2rem 0
+    background: $black
+
+
+/** Header **/
+.header
+    text-align: center
+    margin: 4rem auto 2rem
+
+.header-title__link
+    +font--cabin(400, #{7rem}/#{7.5rem}, $red)
+    letter-spacing: 0.1rem
+    text-decoration: none
+    &:hover
+        color: $redorange
+
+
+/** Navigation **/
+.nav
+    margin: 2rem auto
+
+.nav__link
+    +font--cabin(400, 2.2rem, $lightmint)
+    margin: 0 1.5rem
+    text-decoration: none
+    &:hover
+        color: $lightgray
+
+
+/** Footer **/
+.footer
+    +font--cabin(400, 1.5rem, $darkgray)
+    text-align: center
+    margin: 10rem auto 3rem
+
+.footer__link
+    +link--normal
+    font-size: 1.5rem
+
+
+/** Main content
+    Supply a small set of defaults, some for Markdown formatting **/
+.main
+    +font--cabin(400, #{2rem}/#{2.8rem}, $gray80)
+
+    a
+        +link--normal
+
+    abbr
+        cursor: help
+        text-decoration: none
+        border-bottom: 0.2rem dotted
+
+    b
+        font-weight: 600
+
+    blockquote
+        margin: 0 2rem
+        padding: 0rem 2rem
+        border-left: 1rem solid $gray25
+        font-style: italic
+    // Collapse outer left/right margins in nested blockquote
+    blockquote blockquote
+        margin: 0
+        border-left: 0.5rem solid $gray25
+    // Insert additional space between blockquotes and paragraphs
+    blockquote + p, p + blockquote
+        margin-top: 3rem
+
+    cite
+        font-style: italic
+        font-size: 2.1rem
+
+    code, samp, var
+        +font--hack(400, 1.5rem, $gray80)
+        background: $gray25
+        margin: 0 0.2rem
+        padding: 0.2rem 0.4rem 0.1rem
+
+    del
+        color: $gray25
+        background: $black
+
+    // Do not use details/summary in Markdown files, it will be enclosed by
+    // paragraph tags, resulting in invalid HTML
+    details
+        padding: 0 0 0 3rem
+    summary
+        margin: 0 0 1rem -2.5rem
+        color: $lightblue
+        cursor: context-menu
+        &:hover
+            color: $aqua
+
+    dfn
+        font-weight: 600
+        font-style: normal
+
+    dl
+        margin: 2rem 0
+    dt
+        margin: 1rem 0 0 0
+        font-weight: 600
+    dd
+        margin: 0 0 1rem 4rem
+
+    em, i
+        font-style: italic
+
+    h1
+        +font--cabin(400, 4.5rem, $gray80)
+        margin: 5rem 0 2rem
+    h2
+        +font--cabin(400, 4rem, $gray80)
+        margin: 5rem 0 2rem
+    h3
+        +font--cabin(600, 3.2rem, $gray80)
+        margin: 4.5rem 0 1.5rem
+    h4
+        +font--cabin(600, 3rem, $gray80)
+        margin: 3rem 0 1.5rem
+    h5
+        +font--cabin(600, 2.8rem, $gray80)
+        margin: 3rem 0 1.5rem
+    h6
+        +font--cabin(600, 2.3rem, $gray80)
+        margin: 3rem 0 1.5rem
+    // When a h2 heading is immediately under h1, decrease the margin between
+    // headings. Likewise for h2 to h3
+    h1 + h2
+        margin: 2rem 0
+    h2 + h3, h3 + h4, h4 + h5, h5 + h6
+        margin: 2rem 0 1.5rem
+
+    hr
+        border: 0.1rem solid $bluegray
+        margin: 5rem auto
+
+    img
+        border: 0
+        margin: 2rem 0
+
+    mark
+        background: $ochre
+        padding: 0.2rem 0.5rem
+
+    ol
+        list-style-type: decimal
+        margin: 2rem
+
+    ol li, ul li
+        padding: 0 0 0 0.5rem
+
+    p
+        margin: 1.5rem 0
+
+    pre
+        +font--hack(400, 1.5rem, $gray80)
+        margin: 3rem 0
+        padding: 2rem
+        background: $gray25
+        word-wrap: break-word
+        overflow: auto
+
+    s
+        text-decoration: line-through
+
+    small
+        font-size: 1.5rem
+
+    strong
+        font-weight: 600
+        font-size: 2.1rem
+
+    sub, sup
+        font-size: 1.5rem
+
+    table
+        margin: 3rem 0
+        border-collapse: collapse
+        overflow: auto
+    td
+        padding: 0.5rem 0 0
+    th
+        padding: 0 3rem 1rem 0
+    tfoot, thead
+        font-weight: 600
+    tbody
+        font-size: 1.8rem
+
+    u
+        text-decoration: underline
+
+    ul
+        list-style-type: disc
+        margin: 2rem 0 2rem 2rem
+    ul li ul
+        list-style-type: circle
+        margin: 0.5rem 0 1rem 2rem
+
+    // Pandoc uses a div instead of figure/figcaption tags
+    figure, .figure
+        margin: 3rem 0
+    figure img, .figure img
+        margin: 0
+    figcaption, .caption
+        +font--cabin(400, 1.5rem, $darkgray)
+        font-style: italic
+        margin: 0.5rem 0 1.5rem
+
+    // Pandoc compiles code fences as pre with nested code tag
+    // Drop code padding
+    pre code
+        padding: 0
+
+    // Pandoc assigns a .header class to the 1st row of tables,
+    // which may become a naming conflict in some cases */
+    thead, tr.header
+        text-align: left
+        border-bottom: 0.1rem solid $bluegray
+
+    // Pandoc footnotes
+    .footnotes li *
+        font-size: 1.8rem
+        line-height: 2rem
+    .footnotes li a[href^="#fnref"]
+        padding: 0 0 0 0.5rem
+        border: 0
+    a.footnoteRef
+        border: 0
+
+    // Classes for specific usage
+    date.date--icon, time.time--icon
+        &:before
+            content: "🕒"
+            margin: 0 0.5rem 0 0
+
+    h1.main-title
+        +font--cabin(400, 4.5rem, $ochre)
+        margin: 4rem 0 2rem
+
+    strong.strong--double
+        font-size: 2.1rem
+        border-bottom: 0.5rem double
+
+    strong.strong--em
+        font-size: 2.1rem
+        font-style: italic
+
+
+/** Add a media query to make adjustments for smaller screens **/
+@media (max-width: 480px)
+    /* Scale overall font size */
+    .default
+        font-size: 56.25%
+
+    /* Decrease header title font size */
+    .header-title__link
+        +font--cabin(400, 12vw, $red)
+
+    /* Increase nav link line height */
+    .nav__link
+        +font--cabin(400, #{2.2rem}/#{3.2rem}, $lightmint)
+
+    /* Scale footer top margin to viewport width */
+    .footer
+        margin: 15vw auto 3rem
+
+    /* Scale heading font sizes */
+    .main
+        h1
+            font-size: 11vw
+        h2
+            font-size: 10vw
+        h3
+            font-size: 9vw
+        h4
+            font-size: 8.5vw
+        h5
+            font-size: 8vw
+        h6
+            font-size: 7.5vw
+
+        h1.main-title
+            font-size: 11vw
+            margin: 4rem 0 0.5rem
diff --git a/html/template.html b/html/template.html
new file mode 100644
index 0000000..064f227
--- /dev/null
+++ b/html/template.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html class="default">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>$title$</title>
+    <link rel="stylesheet" type="text/css" href="spec.css" />
+  </head>
+  <body class="body">
+    <header class="header">
+      <h1 class="header-title">
+        <a class="header-title__link" href="/">ForgeFed</a>
+      </h1>
+      <nav class="nav">
+        <a class="nav__link"
+           href="forgefed.html">🗲 behavior</a>
+        <a class="nav__link"
+           href="forgefed-vocabulary.html">📓 vocabulary</a>
+        <a class="nav__link"
+           href="https://notabug.org/peers/forgefed/issues">🐞 issues</a>
+        <a class="nav__link"
+           href="https://talk.feneas.org/c/forgefed">🗪 forum</a>
+      </nav>
+    </header>
+    <main class="main">
+      <h1 class="main-title">$title$</h1>
+      $if(toc)$
+        <nav class="toc">
+            <header class="toc-title">Table of Contents</header>
+            $toc$
+        </nav>
+      $endif$
+      $body$
+    </main>
+    <footer class="footer">
+      site generated by
+      <a class="footer__link" href="https://pandoc.org">pandoc</a>,
+      theme by
+      <a class="footer__link" href="https://keybase.io/iko">ikomi</a>
+    </footer>
+  </body>
+</html>
diff --git a/specification/forgefed-vocabulary.md b/specification/forgefed-vocabulary.md
index 214d7a3..f853202 100644
--- a/specification/forgefed-vocabulary.md
+++ b/specification/forgefed-vocabulary.md
@@ -1,3 +1,7 @@
+---
+title: ForgeFed Vocabulary
+---
+
 # ForgeFed Vocabulary - DRAFT
 
 **Editors:**
diff --git a/specification/forgefed.md b/specification/forgefed.md
index ae376f9..08dd0aa 100644
--- a/specification/forgefed.md
+++ b/specification/forgefed.md
@@ -1,3 +1,7 @@
+---
+title: ForgeFed
+---
+
 # ForgeFed - DRAFT
 
 **Editors:**