Simulate background-clip: text for browsers that don't support it

Move the heading generating to a partial that iteratively wraps each character
of the heading in a <span>. The CSS for the site heading uses :nth-child to
color each span a different color.

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "body" }}
 <main>
   <div class="platter grid">
-    <h1 class="site">{{ .Title }}</h1>
+    <h1 class="site">{{ partial "site_name.html" .Title }}</h1>
     <div id="content">
       {{ .Content }}
     </div>