Update Docs style

2 files changed, 47 insertions, 58 deletions

diff --git a/docs/getting-started/custom.html b/docs/getting-started/custom.html
index eafc748..c8c9fef 100644
--- a/docs/getting-started/custom.html
+++ b/docs/getting-started/custom.html
@@ -300,13 +300,13 @@
             <p>Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p>
             <h4 class="s-subtitle" id="variables-colors">Variables - Colors<a class="anchor" href="#variables-colors" aria-hidden="true">#</a></h4>
             <div class="columns">
-              <div class="column col-3 col-md-6">
+              <div class="column col-2 col-md-6">
                 <div class="docs-color" style="background:#5755d9;color:#fff;">
                   <div class="color-title">#5755d9</div>
                   <div class="color-subtitle">Primary</div>
                 </div>
               </div>
-              <div class="column col-3 col-md-6">
+              <div class="column col-2 col-md-6">
                 <div class="docs-color" style="background:#f1f1fc;color:#5755d9;">
                   <div class="color-title">#f1f1fc</div>
                   <div class="color-subtitle">Secondary</div>
@@ -314,19 +314,19 @@
               </div>
             </div>
             <div class="columns">
-              <div class="column col-3 col-md-6">
+              <div class="column col-2 col-md-6">
                 <div class="docs-color" style="background:#32b643;color:#fff;">
                   <div class="color-title">#32b643</div>
                   <div class="color-subtitle">Success</div>
                 </div>
               </div>
-              <div class="column col-3 col-md-6">
+              <div class="column col-2 col-md-6">
                 <div class="docs-color" style="background:#ffb700;color:#fff;">
                   <div class="color-title">#ffb700</div>
                   <div class="color-subtitle">Warning</div>
                 </div>
               </div>
-              <div class="column col-3 col-md-6">
+              <div class="column col-2 col-md-6">
                 <div class="docs-color" style="background:#e85600;color:#fff;">
                   <div class="color-title">#e85600</div>
                   <div class="color-subtitle">Error</div>
@@ -334,44 +334,32 @@
               </div>
             </div>
             <div class="columns">
-              <div class="column col-3 col-md-6">
+              <div class="column col-2 col-md-6">
                 <div class="docs-color" style="background:#303742;color:#fff;">
                   <div class="color-title">#303742</div>
                   <div class="color-subtitle">Dark</div>
                 </div>
               </div>
-              <div class="column col-3 col-md-6">
+              <div class="column col-2 col-md-6">
                 <div class="docs-color" style="background:#66758c;color:#fff;">
                   <div class="color-title">#66758c</div>
                   <div class="color-subtitle">Gray dark</div>
                 </div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#bcc3ce;color:#303742;">
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#bcc3ce;color:#fff;">
                   <div class="color-title">#bcc3ce</div>
                   <div class="color-subtitle">Gray</div>
                 </div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#f7f8f9;color:#303742;">
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#f7f8f9;color:#66758c;">
                   <div class="color-title">#f7f8f9</div>
                   <div class="color-subtitle">Gray light</div>
                 </div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#bcc3ce;color:#303742;">
-                  <div class="color-title">#bcc3ce</div>
-                  <div class="color-subtitle">Border</div>
-                </div>
-              </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#f7f8f9;color:#303742;">
-                  <div class="color-title">#f7f8f9</div>
-                  <div class="color-subtitle">Background</div>
-                </div>
-              </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#fff;color:#303742;">
+              <div class="column col-2 col-md-6">
+                <div class="docs-color" style="background:#fff;color:#bcc3ce;">
                   <div class="color-title">#fff</div>
                   <div class="color-subtitle">Light</div>
                 </div>
diff --git a/docs/getting-started/whatsnew.html b/docs/getting-started/whatsnew.html
index b7d149d..c30f9c9 100644
--- a/docs/getting-started/whatsnew.html
+++ b/docs/getting-started/whatsnew.html
@@ -211,14 +211,14 @@
                 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
               </div>
             </div><h4>Spectre.css Changelog</h4>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.7">v0.5.7</a></h5>
+<h5>v0.5.7 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.7">#</a></h5>
 <ul>
 <li>Add pure CSS 360-Degree Viewer</li>
 <li>Improve Docs SEO</li>
 <li>Change Carousels image number to variable #428</li>
 <li>Fix Form textarea height issue</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.6">v0.5.6</a></h5>
+<h5>v0.5.6 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.6">#</a></h5>
 <ul>
 <li>Add Docs Search #509 #291</li>
 <li>Add Copy icon</li>
@@ -228,7 +228,7 @@
 <li>Fix #511 issue</li>
 <li>Fix sidebar background height for short docs pages</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.5">v0.5.5</a></h5>
+<h5>v0.5.5 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.5">#</a></h5>
 <ul>
 <li>IMPORTANT: New Docs</li>
 <li>Add Changelog to What's New section</li>
@@ -236,7 +236,7 @@
 <li>Fix circle -&gt; s-circle #489</li>
 <li>Fix code font-family issue for asian languages #476</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.4">v0.5.4</a></h5>
+<h5>v0.5.4 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.4">#</a></h5>
 <ul>
 <li>IMPORTANT: Change naming of position utilities to avoid conflicts</li>
 <li>Update dark color variable</li>
@@ -248,7 +248,7 @@
 <li>Fix chip bug when content is too long #506</li>
 <li>Fix multiple select height bug #508</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.3">v0.5.3</a></h5>
+<h5>v0.5.3 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.3">#</a></h5>
 <ul>
 <li>Add dark text color to utilities</li>
 <li>Add error state to the indeterminate checkbox</li>
@@ -256,7 +256,7 @@
 <li>Add more code examples</li>
 <li>Fix errors in the Docs</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.2">v0.5.2</a></h5>
+<h5>v0.5.2 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.2">#</a></h5>
 <ul>
 <li>IMPORTANT:  Move Docs to Pug templates</li>
 <li>Add more Docs examples</li>
@@ -268,7 +268,7 @@
 <li>Fix a bug of input addons width on mobile devices #449</li>
 <li>Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.1">v0.5.1</a></h5>
+<h5>v0.5.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.1">#</a></h5>
 <p>IMPORTANT: Move Autocomplete to the Experimentals</p>
 <ul>
 <li>Add form checkbox, radio and switch support to Menus</li>
@@ -279,7 +279,7 @@
 <li>Fix Deprecation Warning #396 #356</li>
 <li>Initial commit of RTL support (not finished)</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.0">v0.5.0</a></h5>
+<h5>v0.5.0 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.5.0">#</a></h5>
 <ul>
 <li>IMPORTANT: Restore /dist folder</li>
 <li>Add Grid nesting example #353</li>
@@ -290,7 +290,7 @@
 <li>Fix modal doc typo</li>
 <li>Fix docs examples #348</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.7">v0.4.7</a></h5>
+<h5>v0.4.7 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.7">#</a></h5>
 <ul>
 <li>Add new button colors (success and error) #227 #241 #342</li>
 <li>Add overflow-scrolling: touch; CSS for better scrolling</li>
@@ -298,7 +298,7 @@
 <li>Update the Modal example code</li>
 <li>Fix form horizontal layout spacing</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.6">v0.4.6</a></h5>
+<h5>v0.4.6 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.6">#</a></h5>
 <ul>
 <li>Add new Sliders example #328</li>
 <li>Add Table with horizontal scroll support #333</li>
@@ -308,18 +308,18 @@
 <li>Fix breadcrumb-item extra spacing #337</li>
 <li>Fix comparison slider image responsive bug #338</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.5">v0.4.5</a></h5>
+<h5>v0.4.5 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.5">#</a></h5>
 <ul>
 <li>Rewrite Off-canvas component</li>
 <li>Add <code>active</code> support to the Off-canvas #308</li>
 <li>Update the Docs pages</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.4">v0.4.4</a></h5>
+<h5>v0.4.4 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.4">#</a></h5>
 <ul>
 <li>IMPORTANT: Increase default font sizes to 16px #271</li>
 <li>Add version number to CSS #288 #289</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.3">v0.4.3</a></h5>
+<h5>v0.4.3 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.3">#</a></h5>
 <ul>
 <li>Add Icon Sizes #284</li>
 <li>Add Large Modals #293</li>
@@ -331,12 +331,12 @@
 <li>Improve gulpfile and package</li>
 <li>Add Importing Sass Docs</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.2">v0.4.2</a></h5>
+<h5>v0.4.2 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.2">#</a></h5>
 <ul>
 <li>Add Off-screen experimental</li>
 <li>Fix Docs rendering bug in Safari</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.1">v0.4.1</a></h5>
+<h5>v0.4.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.1">#</a></h5>
 <ul>
 <li>Add default modifier to all variables</li>
 <li>Add <code>address</code> reset which changes font-style to normal</li>
@@ -344,12 +344,12 @@
 <li>Fix responsive video</li>
 <li>Update the Docs</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.0">v0.4.0</a></h5>
+<h5>v0.4.0 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.4.0">#</a></h5>
 <ul>
 <li>Switch from Less to Sass</li>
 <li>Add Cursor utilities</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.2">v0.3.2</a></h5>
+<h5>v0.3.2 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.2">#</a></h5>
 <ul>
 <li>Add label-rounded classes</li>
 <li>Add Avatars presence status code</li>
@@ -359,7 +359,7 @@
 <li>Update Autoprefixer rules</li>
 <li>Update label mixin and code mono font family</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.1">v0.3.1</a></h5>
+<h5>v0.3.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.3.1">#</a></h5>
 <p><em>IMPORTANT</em>: The default root font-size has been changed to <code>20px</code>, please update your <code>rem</code> numbers if you're using the custom sizes. <a href="https://picturepan2.github.io/spectre/getting-started/custom.html#variables-sizes">Learn more</a>.</p>
 <ul>
 <li>Fix margin and padding utilities bug</li>
@@ -368,7 +368,7 @@
 <li>Move Panels and Empty states to Components from Layout</li>
 <li>Fix Docs bugs and cleanup codes</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.15">v0.2.15</a></h5>
+<h5>v0.2.15 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.15">#</a></h5>
 <ul>
 <li>BIG Update to the Docs experience, completely rewritten and improved #240</li>
 <li>Add Text and Background colors utilities #205 #219</li>
@@ -380,7 +380,7 @@
 <li>Fix icon direction bug #218</li>
 <li>Fix Dropdown menu max items/height #226</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.14">v0.2.14</a></h5>
+<h5>v0.2.14 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.14">#</a></h5>
 <ul>
 <li>Add vertical divider</li>
 <li>Add Form icon support</li>
@@ -389,7 +389,7 @@
 <li>Add new container grid size</li>
 <li>Fix link error and typo</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.13">v0.2.13</a></h5>
+<h5>v0.2.13 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.13">#</a></h5>
 <ul>
 <li>Add Timelines code</li>
 <li>Add input readonly style</li>
@@ -399,7 +399,7 @@
 <li>Fix dropdown-toggle border radius in button groups</li>
 <li>Fix Calendars date item width bug under Firefox</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.12">v0.2.12</a></h5>
+<h5>v0.2.12 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.12">#</a></h5>
 <ul>
 <li>Add pure CSS Comparison Sliders</li>
 <li>Add pure CSS content Filters</li>
@@ -410,7 +410,7 @@
 <li>Update Navbar code</li>
 <li>Fix typos, Modals bugs</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.11">v0.2.11</a></h5>
+<h5>v0.2.11 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.11">#</a></h5>
 <ul>
 <li>Add pure CSS Popovers</li>
 <li>Add pure CSS Icons</li>
@@ -418,7 +418,7 @@
 <li>Add tvOS Parallax effect text layer</li>
 <li>Update shadow mixin</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.10">v0.2.10</a></h5>
+<h5>v0.2.10 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.10">#</a></h5>
 <ul>
 <li>Add Shadows and Z-index variables</li>
 <li>Add Divider text</li>
@@ -426,13 +426,13 @@
 <li>Cleanup components code</li>
 <li>Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.9">v0.2.9</a></h5>
+<h5>v0.2.9 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.9">#</a></h5>
 <ul>
 <li>Add Panels layout: flexible view container layout with auto-expand content section</li>
 <li>Update Navbar layout</li>
 <li>Update docs and examples</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.8">v0.2.8</a></h5>
+<h5>v0.2.8 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.8">#</a></h5>
 <ul>
 <li>Add Carousels previous and next buttons</li>
 <li>Improve disabled state for forms</li>
@@ -441,7 +441,7 @@
 <li>Improve Autocomplete menu position</li>
 <li>Merge Menus and Dropdowns</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.7">v0.2.7</a></h5>
+<h5>v0.2.7 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.7">#</a></h5>
 <ul>
 <li>Add Calendars experimental support</li>
 <li>Add tabindex note to the dropdowns docs</li>
@@ -450,14 +450,14 @@
 <li>Fix wrong shadow colors with form-select</li>
 <li>Fix grid-480</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.6">v0.2.6</a></h5>
+<h5>v0.2.6 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.6">#</a></h5>
 <ul>
 <li>Add Carousels initial experimental version</li>
 <li>Add Spectre.css Twitter account (@spectrecss) link</li>
 <li>Improve Docs experience and navbar</li>
 <li>Fix the bug of form input focus colors</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.5">v0.2.5</a></h5>
+<h5>v0.2.5 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.5">#</a></h5>
 <ul>
 <li>Improve color variables completely</li>
 <li>Add Menu badges</li>
@@ -466,7 +466,7 @@
 <li>Fix elements and components</li>
 <li>Update empty state layout code</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.4">v0.2.4</a></h5>
+<h5>v0.2.4 [#]    (https://github.com/picturepan2/spectre/releases/tag/v0.2.4)</h5>
 <ul>
 <li>ADD: Meters element experimental support</li>
 <li>ADD: Progress indeterminate animation</li>
@@ -474,7 +474,7 @@
 <li>CHG: Split Codes and improve docs codes</li>
 <li>FIX: Steps with tooltips z-index bug</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.3">v0.2.3</a></h5>
+<h5>v0.2.3 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.3">#</a></h5>
 <ul>
 <li>Bars component</li>
 <li>Badges for buttons</li>
@@ -482,12 +482,13 @@
 <li>Sliders experimental component</li>
 <li>A number of fixes as usual</li>
 </ul>
-<h5><a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.1">v0.2.1</a></h5>
+<h5>v0.2.1 <a href="https://github.com/picturepan2/spectre/releases/tag/v0.2.1">#</a></h5>
 <p>I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:</p>
 <ul>
 <li>New Docs experience with better navigations and better mobile off-canvas menu</li>
 <li>New components: Tiles, Steps and Navs (part of Navigation)</li>
-<li>Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards,  new Progress experimental support and better focus style</li>
+<li>Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support</li>
+<li>Improvements: better focus style</li>
 <li>Fixes</li>
 </ul>
 <h5>v0.0.1 - March 2016</h5>