Real CSS, inline SVG

examples/tutorial.html

@@ -18,8 +18,8 @@
 </style>
 <dt-header></dt-header>
 <dt-article>
-  <h1 class="l">How to Create a Distill Article</h1>
-  <h2 class="l">A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
+  <h1>How to Create a Distill Article</h1>
+  <h2>A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
   <!-- <dt-byline></dt-byline> -->
   <p>Distill ships with a CSS framework and a collection of custom web components that make building interactive academic articles easier than raw HTML, CSS and JavaScript. This reference article details several examples and best practices for how to use both frameworks. Both are also available on Github with a permissive license, so feel free to use them independent of http://distill.pub as well.</p>
   <hr>
@@ -52,7 +52,7 @@
   </div>
   <hr>
   <h2>Code Blocks</h2>
-  <p>Syntax highlighting is provided within <code class="language-html">&lt;code&gt;</code> tags. Just wrap the source with this: <code class="language-javascript">&lt;code class="language-html"&gt;let x = 10;&lt;/code&gt;</code>. For larger blocks of code, add a <code class="language-html">&lt;pre&gt;</code> tag:</p>
+  <p>Syntax highlighting is provided within <code class="language-html">&lt;code&gt;</code> tags. Just wrap the source with this: <code class="language-html">&lt;code class="language-html"&gt;let x = 10;&lt;/code&gt;</code>. For larger blocks of code, add a <code class="language-html">&lt;pre&gt;</code> tag:</p>
   <pre><code class="language-html">
     &lt;pre&gt;&lt;code class="language-javascript"&gt;
       var x = 25;