From 38962f94d497a40435862d187f30b04f2b68205d Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 15 Aug 2017 12:16:53 +0800
Subject: Improve Docs homepage

---
 docs/utilities.html | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

(limited to 'docs/utilities.html')

diff --git a/docs/utilities.html b/docs/utilities.html
index 9b61975..1bdcbc1 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
-  <title>Utilities - Spectre.css </title>
+  <title>Utilities - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
   <link rel="stylesheet" href="dist/spectre-icons.css" />
   <link rel="stylesheet" href="css/docs.css" />
@@ -15,8 +15,8 @@
   <div class="s-container container">
     <div class="columns">
       <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css" >
-          <img src="img/spectre-logo.svg" alt="Spectre.css"/>
+        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
           <h2>Spectre.css</h2>
         </a>
         <div class="menu-btn">
@@ -253,12 +253,13 @@
       <div id="content" class="s-content">
         <div id="colors" class="container">
           <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Color utilities are used for changing colors for text, link and background.</p>
           </div>
           <h4 class="s-subtitle">Text colors</h4>
-          <div class="notes">
+          <div class="docs-note">
             <p><span class="text-primary">primary color</span></p>
+            <p><span class="text-secondary">secondary color</span></p>
             <p><span class="text-gray">gray color</span></p>
             <p><span class="text-light bg-dark p-5 rounded">light color</span></p>
             <p><span class="text-success">success color</span></p>
@@ -268,6 +269,7 @@
 
 <!-- colors example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-primary&quot;</span>&gt;primary color&lt;<span class="tag">/span</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-secondary&quot;</span>&gt;secondary color&lt;<span class="tag">/span</span>&gt;
 &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-gray&quot;</span>&gt;gray color&lt;<span class="tag">/span</span>&gt;
 &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-light&quot;</span>&gt;light color&lt;<span class="tag">/span</span>&gt;
 &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-success&quot;</span>&gt;success color&lt;<span class="tag">/span</span>&gt;
@@ -275,8 +277,9 @@
 &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-error&quot;</span>&gt;error color&lt;<span class="tag">/span</span>&gt;
 </code></pre>
 
-          <div class="notes">
+          <div class="docs-note">
             <p><a class="text-primary p-5" href="#colors">primary link</a></p>
+            <p><a class="text-secondary p-5" href="#colors">secondary link</a></p>
             <p><a class="text-gray p-5" href="#colors">gray link</a></p>
             <p><a class="text-light bg-dark p-5 rounded" href="#colors">light link</a></p>
             <p><a class="text-success p-5" href="#colors">success link</a></p>
@@ -295,7 +298,7 @@
 </code></pre>
 
           <h4 class="s-subtitle">Background colors</h4>
-          <div class="notes">
+          <div class="docs-note">
             <p><span class="bg-primary text-light p-5 rounded">primary bg</span></p>
             <p><span class="bg-secondary text-primary p-5 rounded">secondary bg</span></p>
             <p><span class="bg-dark text-light p-5 rounded">dark bg</span></p>
@@ -319,7 +322,7 @@
 
         <div id="display" class="container">
           <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Display utilities are used for display and hidden things.</p>
           </div>
 
@@ -350,7 +353,7 @@
 
         <div id="divider" class="container">
           <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>A Divider is used for separating elements.</p>
           </div>
           <div class="columns">
@@ -424,7 +427,7 @@
 
         <div id="loading" class="container">
           <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status. Add the <code>btn-lg</code> class for large size. </p>
           </div>
           <div class="columns">
@@ -432,7 +435,7 @@
               <div class="loading"></div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
               <p>Add the <code>btn-lg</code> class for large size. </p>
             </div>
           <div class="columns">
@@ -452,7 +455,7 @@
 
         <div id="position" class="container">
           <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
           </div>
 
@@ -486,7 +489,7 @@
 
         <div id="shapes" class="container">
           <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Shape utilities are used for change element shapes.</p>
           </div>
           <div class="columns">
@@ -513,7 +516,7 @@
 
         <div id="text" class="container">
           <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Text utilities are used for text alignment, styles and overflow things.</p>
           </div>
 
-- 
cgit v1.3.1-23-gd82d