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/getting-started.html | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'docs/getting-started.html')

diff --git a/docs/getting-started.html b/docs/getting-started.html
index 501a5e2..a283d1a 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.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>Getting started - Spectre.css</title>
+  <title>Getting started - 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,7 +253,7 @@
       <div id="content" class="s-content">
         <div id="introduction" class="container">
           <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p><strong>Spectre.css</strong> is a lightweight and responsive and modern CSS framework for faster and extensible development.</p>
             <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p>
           </div>
@@ -261,10 +261,10 @@
 
         <div id="installation" class="container">
           <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <h5>Install manually</h5>
             <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank">Spectre CSS file</a> (~10KB min+gzip):</p>
             <p><a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
@@ -277,7 +277,7 @@
 &lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre-icons.min.css&quot;</span> /&gt;
 </code></pre>
 
-          <div class="notes">
+          <div class="docs-note">
             <h5>Install from CDN</h5>
             <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> CDN to load compiled Spectre.css.</p>
           </div>
@@ -286,7 +286,7 @@
 <pre class="code"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre.min.css&quot;</span> /&gt;
 </code></pre>
 
-          <div class="notes">
+          <div class="docs-note">
             <h5>Install with NPM</h5>
 
 <!-- install with npm example -->
@@ -294,7 +294,7 @@
 </code></pre>
 
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <h5>Install with Yarn</h5>
 
 <!-- install with yarn example -->
@@ -302,7 +302,7 @@
 </code></pre>
 
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <h5>Install with Bower</h5>
 
 <!-- install with bower example -->
@@ -314,7 +314,7 @@
 
         <div id="compiling" class="container">
           <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>, <code>spectre-exp.less</code> and <code>spectre-icons.less</code>.</p>
             <p>Then, you can build the CSS file from the command line:</p>
             <ol>
@@ -363,7 +363,7 @@
 </code></pre>
 
           <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4>
-          <div class="notes">
+          <div class="docs-note">
             <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.
             <h5>Colors</h5>
             <div class="columns">
@@ -453,7 +453,7 @@
 
         <div id="browsers" class="container">
           <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
             <ul>
               <li>Chrome <small class="label label-success">LAST 4</small></li>
@@ -468,7 +468,7 @@
 
         <div id="whatsnew" class="container">
           <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p><strong>April 2017</strong></p>
             <ul>
               <li>
-- 
cgit v1.3.1-23-gd82d