Improve Docs homepage

1 files changed, 14 insertions, 14 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index c439331..372abe7 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.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>Experimentals - Spectre.css</title>
+  <title>Experimentals - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
   <link rel="stylesheet" href="dist/spectre-exp.css" />
   <link rel="stylesheet" href="dist/spectre-icons.css" />
@@ -16,8 +16,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">
@@ -254,14 +254,14 @@
       <div id="content" class="s-content">
         <div id="experimentals" class="container">
           <h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p>
           </div>
         </div>
 
         <div id="calendars" class="container">
           <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
           </div>
           <div class="columns">
@@ -424,7 +424,7 @@
 
         <div id="carousels" class="container">
           <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
           </div>
           <div class="columns">
@@ -489,7 +489,7 @@
 
         <div id="comparison" class="container">
           <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
           </div>
           <div class="columns">
@@ -527,7 +527,7 @@
 
         <div id="filters" class="container">
           <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Filters are CSS only content filters.</p>
           </div>
           <div class="columns">
@@ -652,7 +652,7 @@
 
         <div id="meters" class="container">
           <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Meters represent the value within the known range.</p>
           </div>
           <div class="columns">
@@ -669,7 +669,7 @@
               <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p></p>
           </div>
 
@@ -687,7 +687,7 @@
 
         <div id="parallax" class="container">
           <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
           </div>
           <div class="columns">
@@ -730,7 +730,7 @@
 
         <div id="progress" class="container">
           <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>The Progress indicates the progress completion of a task.</p>
           </div>
           <div class="columns">
@@ -757,7 +757,7 @@
 
         <div id="sliders" class="container">
           <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Sliders are for selecting values from ranges.</p>
           </div>
           <div class="columns">
@@ -777,7 +777,7 @@
 
         <div id="timelines" class="container">
           <h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Timelines are ordered sequences of activities.</p>
           </div>
           <div class="columns">