From 0beec03b6197869af05ea8eed340aac4321cf989 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 18 Mar 2017 23:12:51 +0800
Subject: Improve color variables and class namings

---
 docs/layout.html | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

(limited to 'docs/layout.html')

diff --git a/docs/layout.html b/docs/layout.html
index adebe5b..c894b6e 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -443,7 +443,7 @@
                     <img src="img/avatar-2.png" />
                   </figure>
                   <div class="panel-title mt-10">Bruce Banner</div>
-                  <div class="panel-meta">THE HULK</div>
+                  <div class="panel-subtitle">THE HULK</div>
                 </div>
                 <nav class="panel-nav">
                   <ul class="tab tab-block">
@@ -468,7 +468,7 @@
                   <div class="tile tile-centered">
                     <div class="tile-content">
                       <div class="tile-title">E-mail</div>
-                      <div class="tile-meta">bruce.banner@hulk.com</div>
+                      <div class="tile-subtitle">bruce.banner@hulk.com</div>
                     </div>
                     <div class="tile-action">
                       <button class="btn btn-link btn-action btn-lg"><i class="icon icon-mail_outline"></i></button>
@@ -477,7 +477,7 @@
                   <div class="tile tile-centered">
                     <div class="tile-content">
                       <div class="tile-title">Skype</div>
-                      <div class="tile-meta">bruce.banner</div>
+                      <div class="tile-subtitle">bruce.banner</div>
                     </div>
                     <div class="tile-action">
                       <button class="btn btn-link btn-action btn-lg"><i class="icon icon-phone"></i></button>
@@ -486,7 +486,7 @@
                   <div class="tile tile-centered">
                     <div class="tile-content">
                       <div class="tile-title">Location</div>
-                      <div class="tile-meta">Dayton, Ohio</div>
+                      <div class="tile-subtitle">Dayton, Ohio</div>
                     </div>
                     <div class="tile-action">
                       <button class="btn btn-link btn-action btn-lg"><i class="icon icon-map"></i></button>
@@ -512,7 +512,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Thor Odinson</p>
-                      <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -523,7 +523,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Bruce Banner</p>
-                      <p class="tile-meta">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+                      <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -532,7 +532,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Tony Stark</p>
-                      <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -543,7 +543,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Steve Rogers</p>
-                      <p class="tile-meta">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+                      <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
                     </div>
                   </div>
                   <div class="tile">
@@ -554,7 +554,7 @@
                     </div>
                     <div class="tile-content">
                       <p class="tile-title">Natasha Romanoff</p>
-                      <p class="tile-meta">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+                      <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
                     </div>
                   </div>
                 </div>
@@ -603,7 +603,7 @@
                   <i class="icon icon-markunread"></i>
                 </div>
                 <h4 class="empty-title">You have no new messages</h4>
-                <p class="empty-meta">Click the button to start a conversation</p>
+                <p class="empty-subtitle">Click the button to start a conversation</p>
                 <div class="empty-action">
                   <button class="btn btn-primary">Send a message</button>
                 </div>
@@ -615,7 +615,7 @@
                   <i class="icon icon-drafts"></i>
                 </div>
                 <h4 class="empty-title">You've successfully signed up</h4>
-                <p class="empty-meta">Click the button to invite your friends</p>
+                <p class="empty-subtitle">Click the button to invite your friends</p>
                 <div class="empty-action">
                   <button class="btn btn-primary">Invite your friends</button>
                 </div>
@@ -630,7 +630,7 @@
                   <i class="icon icon-people"></i>
                 </div>
                 <h4 class="empty-title">You are not following anyone</h4>
-                <p class="empty-meta">Start to meet new friends</p>
+                <p class="empty-subtitle">Start to meet new friends</p>
                 <div class="empty-action input-group input-inline">
                   <input type="text" class="form-input" placeholder="" />
                   <button class="btn btn-primary input-group-btn">Search</button>
@@ -640,7 +640,7 @@
           </div>
 
           <section class="notes">
-            <p>An empty state component can include icons, messages (title and meta messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
+            <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
           </section>
 
 <!-- empty states example -->
@@ -649,7 +649,7 @@
     &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title&quot;</span>&gt;You have no new messages&lt;<span class="tag">/h4</span>&gt;
-  &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-meta&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
+  &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-subtitle&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action&quot;</span>&gt;
     &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
@@ -663,13 +663,13 @@
           <ul class="pagination">
             <li class="page-item page-prev">
               <a href="elements.html">
-                <p class="page-item-meta">Previous</p>
+                <p class="page-item-subtitle">Previous</p>
                 <h4 class="page-item-title">Elements</h4>
               </a>
             </li>
             <li class="page-item page-next">
               <a href="components.html">
-                <p class="page-item-meta">Next</p>
+                <p class="page-item-subtitle">Next</p>
                 <h4 class="page-item-title">Components</h4>
               </a>
             </li>
-- 
cgit v1.3.1-23-gd82d