Make code snippets in src/templates/docs/ consistent

* all code tags have class `code` and `font-size: .75rem`
* change measure code snippet to have same light gray background as
other doc pages

Author: donnieberg

src/templates/docs/borders/index.html

@@ -370,7 +370,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_borders.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="small">
+<code class="code" style="font-size: .75rem;">
 /*
 
    BORDER BASE

src/templates/docs/debug/index.html

@@ -263,7 +263,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_debug-children.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="f6" style="font-size: .75rem;">
+<code class="code" style="font-size: .75rem;">
   /*
 
     DEBUG CHILDREN
@@ -280,7 +280,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_debug.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="f6" style="font-size: .75rem;">
+<code class="code" style="font-size: .75rem;">
   <%= srcCSS %>
 </code>
 </pre>

src/templates/docs/measure/index.html

@@ -212,7 +212,7 @@ <h1 class="f4 ttu tracked semibold">Reference</h1>
     <a href="http://webtypography.net/2.1.2" class="link semibold blue dim">Choose a Comfortable Measure</a>
   </div>
       </div>
-      <section class="bg-dark-gray white pt4 pbxl">
+      <section class="bg-near-white black-70 pt4 pb5">
 <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_typography.css</kbd>
 </header>

src/templates/docs/position/index.html

@@ -117,15 +117,15 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_position.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="f6" style="font-size: .75rem;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS %>
 </code>
 </pre>
 <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_coordinates.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="f6" style="font-size: .75rem;">
+<code class="code" style="font-size: .75rem;">
 @custom-media --breakpoint-not-small screen and (min-width: 48em);
 @custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
 @custom-media --breakpoint-large screen and (min-width: 64em);

src/templates/docs/spacing/index.html

@@ -195,7 +195,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_spacing.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="small">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>

src/templates/docs/text-transform/index.html

@@ -58,7 +58,7 @@ <h3 class="fw4 ttu tracked mbn">Uppercase with tracking</h3>
         <kbd class="yellow">src/_text-transform.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="code" style="font-size: 12px;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>

src/templates/docs/tracking/index.html

@@ -75,7 +75,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_letter-spacing.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="code" style="font-size: 12px;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>

src/templates/docs/vertical-align/index.html

@@ -112,7 +112,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
               <kbd class="yellow">src/_vertical-align.css</kbd>
       </header>
 <pre class="ph3 ph5-ns">
-<code class="code" style="font-size: .7rem;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>