Add bookmark helpers and CDN info

docs/docs.css

@@ -43,6 +43,18 @@ h2[id] {
   margin-bottom: 1rem;
 }
 
+a.bookmark {
+  width: 1em;
+  text-align: right;
+  color: var(--color-silver);
+  margin-left: -1em;
+  display: inline-block;
+}
+
+a.bookmark:hover {
+  text-decoration: none;
+}
+
 /* Column helpers */
 .two-column {
   column-count: 2;

docs/index.html

@@ -33,7 +33,7 @@
       <span data-placeholder="minifiedSize">31KB</span> and much smaller when gzipped.
     </p>
     <p>
-      Just link to <code>shoelace.css</code> and customize it in your own stylesheet.
+      Just link to <code>shoelace.css</code> and add customizations to your stylesheet.
     </p>
 <pre>
 &lt;link rel=&quot;stylesheet&quot; href=&quot;shoelace.css&quot;&gt;
@@ -63,7 +63,11 @@
     * Documentation
     *********************************************************************************************-->
 
-    <h2 id="documentation">Documentation</h2>
+    <h2 id="documentation">
+      <a class="bookmark" href="#documentation">#</a>
+      Documentation
+    </h2>
+
     <ul class="two-column">
       <li><a href="#installing">Installing</a></li>
       <li><a href="#customizing">Customizing</a></li>
@@ -85,10 +89,32 @@
     * Installing
     *********************************************************************************************-->
 
-    <h2 id="installing">Installing</h2>
+    <h2 id="installing">
+      <a class="bookmark" href="#installing">#</a>
+      Installing
+    </h2>
+
     <p>
       Shoelace is incredibly easy to use. Just link to <code>shoelace.css</code> in your project and
-      you’re ready to <a href="#customizing">start customizing things</a>.
+      you’re ready to <a href="#customizing">start customizing things</a>. You can use the CDN
+      version or download the source manually.
+    </p>
+
+    <h3 id="cdn">CDN</h3>
+    <p>
+      The easiest way to use Shoelace is via CDN.
+    </p>
+<pre>
+COMING SOON!
+</pre>
+    <p>
+      This service is generously provided by <a href="https://www.keycdn.com/">KeyCDN</a>.
+    </p>
+
+    <h3 id="download">Download</h3>
+    <p>
+      Alternatively, you can <a href="https://github.com/claviska/shoelace-css/releases">download
+      the source</a> and link to <code>shoelace.css</code> from your own server.
     </p>
 <pre>
 &lt;link rel=&quot;stylesheet&quot; href=&quot;dist/shoelace.css&quot;&gt;
@@ -106,7 +132,11 @@ npm install --save-dev shoelace-css
     * Customizing
     *********************************************************************************************-->
 
-    <h2 id="customizing">Customizing</h2>
+    <h2 id="customizing">
+      <a class="bookmark" href="#customizing">#</a>
+      Customizing
+    </h2>
+
     <p>
       You can customize Shoelace without editing core files or using a preprocessor. To add
       customizations, simply override one or more of the variables found in
@@ -122,7 +152,7 @@ npm install --save-dev shoelace-css
 }
 </pre>
 
-    <h4 id="using-variables">Using Variables</h4>
+    <h3 id="using-variables">Using Variables</h3>
     <p>
       You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse
       values without hardcoding them and provides the foundation to extend Shoelace with your own
@@ -147,7 +177,11 @@ npm install --save-dev shoelace-css
     * Content
     *********************************************************************************************-->
 
-    <h2 id="content">Content</h2>
+    <h2 id="content">
+      <a class="bookmark" href="#content">#</a>
+      Content
+    </h2>
+
     <p>
       Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need
       to apply any classes to achieve these styles — just use the appropriate tags.
@@ -313,7 +347,11 @@ PRINT "SHOELACE IS AWESOME"
     * Alerts
     *********************************************************************************************-->
 
-    <h2 id="alerts">Alerts</h2>
+    <h2 id="alerts">
+      <a class="bookmark" href="#alerts">#</a>
+      Alerts
+    </h2>
+
     <p>
       Create an alert by applying the <code>alert alert-[modifier]</code> class to an element such
       as a <code>div</code>.
@@ -337,7 +375,11 @@ PRINT "SHOELACE IS AWESOME"
     * Badges
     *********************************************************************************************-->
 
-    <h2 id="badges">Badges</h2>
+    <h2 id="badges">
+      <a class="bookmark" href="#badges">#</a>
+      Badges
+    </h2>
+
     <p>
       Create a badge by applying the <code>badge badge-[state]</code> class to an element such as a
       <code>&lt;span&gt;</code>.
@@ -377,7 +419,11 @@ PRINT "SHOELACE IS AWESOME"
     * Buttons
     *********************************************************************************************-->
 
-    <h2 id="buttons">Buttons</h2>
+    <h2 id="buttons">
+      <a class="bookmark" href="#buttons">#</a>
+      Buttons
+    </h2>
+
     <p>
       To create a button, use the <code>&lt;button&gt;</code> element or apply the
       <code>button</code> class to another element such as an <code>&lt;a&gt;</code>. You can change
@@ -468,7 +514,11 @@ PRINT "SHOELACE IS AWESOME"
     * Forms
     *********************************************************************************************-->
 
-    <h2 id="forms">Forms</h2>
+    <h2 id="forms">
+      <a class="bookmark" href="#forms">#</a>
+      Forms
+    </h2>
+
     <p>
       Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special
       class for styling.
@@ -814,7 +864,11 @@ PRINT "SHOELACE IS AWESOME"
     * Loaders
     *********************************************************************************************-->
 
-    <h2 id="loaders">Loaders</h2>
+    <h2 id="loaders">
+      <a class="bookmark" href="#loaders">#</a>
+      Loaders
+    </h2>
+
     <p>
       Create a pure CSS loader by applying the <code>loader</code> class to an empty
       <code>&lt;span&gt;</code> element. You can use the <code>loader-small</code> and
@@ -852,7 +906,11 @@ PRINT "SHOELACE IS AWESOME"
     * Tabs
     *********************************************************************************************-->
 
-    <h2 id="tabs">Tabs</h2>
+    <h2 id="tabs">
+      <a class="bookmark" href="#tabs">#</a>
+      Tabs
+    </h2>
+
     <p>
       Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills
       because they look better than traditional tabs when rendered on smaller screens.
@@ -997,7 +1055,11 @@ PRINT "SHOELACE IS AWESOME"
     * Tables
     *********************************************************************************************-->
 
-    <h2 id="tables">Tables</h2>
+    <h2 id="tables">
+      <a class="bookmark" href="#tables">#</a>
+      Tables
+    </h2>
+
     <p>
       By default, tables are plain and unstyled. To create a styled table, apply the
       <code>table</code> class to a table element.
@@ -1073,7 +1135,11 @@ PRINT "SHOELACE IS AWESOME"
     * Utilities
     *********************************************************************************************-->
 
-    <h2 id="utilities">Utilities</h2>
+    <h2 id="utilities">
+      <a class="bookmark" href="#utilities">#</a>
+      Utilities
+    </h2>
+
     <p>
       Shoelace provides a number of helpful utility classes that make prototyping easier.
     </p>
@@ -1230,7 +1296,11 @@ Example: class="p-left-medium m-bottom-none"
     * Grid System
     *********************************************************************************************-->
 
-    <h2 id="grid-system">Grid System</h2>
+    <h2 id="grid-system">
+      <a class="bookmark" href="#grid-system">#</a>
+      Grid System
+    </h2>
+
     <p>
       Shoelace doesn’t ship with a grid system because
       <a href="https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/">
@@ -1246,7 +1316,11 @@ Example: class="p-left-medium m-bottom-none"
     * Icons
     *********************************************************************************************-->
 
-    <h2 id="icons">Icons</h2>
+    <h2 id="icons">
+      <a class="bookmark" href="#icons">#</a>
+      Icons
+    </h2>
+
     <p>
       Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such
       as <a href="http://fontawesome.io/">Font Awesome</a>. They work superbly together.
@@ -1259,7 +1333,11 @@ Example: class="p-left-medium m-bottom-none"
     * Browser Support
     *********************************************************************************************-->
 
-    <h2 id="browser-support">Browser Support</h2>
+    <h2 id="browser-support">
+      <a class="bookmark" href="#browser-support">#</a>
+      Browser Support
+    </h2>
+
     <p class="text-bold">
       TL;DR — you can use Shoelace as-is if you don’t care about Internet Explorer and older
       browsers (Edge is fine). If you need to support older browsers, just make sure to use a
@@ -1296,6 +1374,9 @@ Example: class="p-left-medium m-bottom-none"
     </p>
 
     <footer>
+      <p class="text-small text-muted">
+        <a href="https://www.keycdn.com/">Accelerated by KeyCDN</a>
+      </p>
       <p class="text-small text-muted">
         Shoelace <span data-placeholder="version">1.0.0-beta2</span> &middot;
         &copy; A Beautiful Site, LLC