From 97d0bb683d283b32b9077c9254ad5f8d979d060b Mon Sep 17 00:00:00 2001
From: Lucas Garron <code@garron.net>
Date: Wed, 8 Jan 2025 02:02:21 -0800
Subject: [PATCH] Simplify basic usage.

---
 src/web/icons.cubing.net/index.html | 34 ++++++++++-------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/web/icons.cubing.net/index.html b/src/web/icons.cubing.net/index.html
index 0941fcb..47efe4c 100644
--- a/src/web/icons.cubing.net/index.html
+++ b/src/web/icons.cubing.net/index.html
@@ -49,32 +49,22 @@ <h1><span class="cubing-icon event-clock"></span> It's time for cubing icons!</h
       <h2><a href="#cdn-usage" class="section-header-link">Use cubing icons in your web project</a></h2>
 
       <p>
-        The simplest way to use cubing icons in your project is to include one <a
-          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">CSS <code>&lt;link&gt;</code>
-          element</a>
-        on
-        your page and then use <code>class</code> on <a
-          href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code> elements</a>
-        to
-        specify icons.
-      </p>
-
-      <p>
-        Here's an example:
+        The simplest way to use cubing icons in your project is as follows:
       </p>
 
       <div class="sample">
         <code>
-      <span class="dim">&lt;!-- The following line is needed only once per page. --&gt;<br></span>
-      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.cubing.net/v0/css/@cubing/icons/css&quot;&gt;
-      <br>
-      <br>
-      &lt;ul&gt;<br>
-    &nbsp;&nbsp;&lt;li&gt;&lt;span class="<b>cubing-icon event-333</b>"&gt;&lt;/span&gt; 3×3×3&lt;/li&gt;<br>
-    &nbsp;&nbsp;&lt;li&gt;&lt;span class="<b>cubing-icon event-clock</b>"&gt;&lt;/span&gt; Clock&lt;/li&gt;<br>
-    &nbsp;&nbsp;&lt;li&gt;&lt;span class="<b>cubing-icon unofficial-fto</b>"&gt;&lt;/span&gt; FTO&lt;/li&gt;<br>
-      &lt;/ul&gt;
-    </code>
+          <span class="dim">&lt;!-- Include the following line once on your page: --&gt;<br></span>
+          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.cubing.net/v0/css/@cubing/icons/css&quot;&gt;
+          <br>
+          <br>
+          <span class="dim">&lt;!-- Add any number of icons like this: --&gt;<br></span>
+          <span class="dim">&lt;ul&gt;<br>
+            &nbsp;&nbsp;&lt;li&gt;</span>&lt;span class="<b>cubing-icon event-333</b>"&gt;&lt;/span&gt;<span class="dim"> 3×3×3&lt;/li&gt;<br>
+            &nbsp;&nbsp;&lt;li&gt;</span>&lt;span class="<b>cubing-icon event-clock</b>"&gt;&lt;/span&gt;<span class="dim"> Clock&lt;/li&gt;<br>
+            &nbsp;&nbsp;&lt;li&gt;</span>&lt;span class="<b>cubing-icon unofficial-fto</b>"&gt;&lt;/span&gt;<span class="dim"> FTO&lt;/li&gt;<br>
+          &lt;/ul&gt;</span>
+        </code>
       </div>
 
       <p>