From fe124e0b13db5095afdc7b485d6cd868e1f084b8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 22 Aug 2017 21:52:46 -0400
Subject: [PATCH] Improve example

---
 index.html | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index d0f31d675..e278e5b44 100644
--- a/index.html
+++ b/index.html
@@ -30,8 +30,8 @@
 
       <p>
         You can use Shoelace with just about every browser. The CDN version is great for
-        prototyping, but to take full advantage you should
-        <a href="docs/installing.html#building-from-source">build it from source</a>.
+        prototyping, but to take advantage of all its features you should
+        <a href="docs/installing.html#building-from-source">build Shoelace from source</a>.
       </p>
 
       <p>
@@ -39,15 +39,20 @@
       </p>
 
 <pre><code class="language-css">:root {
-  --info-color: white;
-  --info-bg: color(teal shade(25%));
+  /* Use CSS variables */
+  --state-primary: #09d;
+
+  /* Use color functions instead of hard-coding values */
+  --alert-bg-color: color(var(--state-primary) tint(75%));
+  --alert-color: color(var(--state-primary) lightness(25%));
 }
 
-.info {
-  color: var(--info-color);
-  background: var(--info-bg);
+/* Nest selectors for better legibility */
+.alert {
+  background-color: var(--alert-bg-color);
+  color: var(--alert-color);
 
-  &amp;.info-big {
+  &amp;.alert-lg {
     font-size: 2rem;
   }
 }