Update Docs

13 files changed, 36 insertions, 27 deletions

diff --git a/docs/src/_layout/_docs-layout.pug b/docs/src/_layout/_docs-layout.pug
index 9aad19c..dcec070 100644
--- a/docs/src/_layout/_docs-layout.pug
+++ b/docs/src/_layout/_docs-layout.pug
@@ -17,10 +17,12 @@ block content
           a.docs-logo(href='../index.html')
             img(src='../img/spectre-logo.svg' alt='Spectre.css CSS Framework')
             h2 SPECTRE
+            small.label.label-secondary.text-bold DOCS
         else
           a.docs-logo(href='index.html')
             img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
             h2 SPECTRE
+            small.label.label-secondary.text-bold DOCS
       .docs-nav
         .accordion-container
           +docs-accordion(
@@ -38,7 +40,7 @@ block content
             {url: 'tables', name: 'Tables'},
             {url: 'buttons', name: 'Buttons'},
             {url: 'forms', name: 'Forms'},
-            {url: 'icons', name: 'Icons'},
+            {url: 'icons', name: 'Icons.css'},
             {url: 'labels', name: 'Labels'},
             {url: 'code', name: 'Code'},
             {url: 'media', name: 'Media'}
diff --git a/docs/src/_layout/_footer.pug b/docs/src/_layout/_footer.pug
index 82a5b2e..a8d7d93 100644
--- a/docs/src/_layout/_footer.pug
+++ b/docs/src/_layout/_footer.pug
@@ -1,12 +1,12 @@
 #copyright.docs-footer.container.grid-lg
   p
-    a(href='getting-started.html' target='_blank') Documents
-    |  · 
     a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
     |  · 
     a(href='https://twitter.com/spectrecss' target='_blank') Twitter
     |  · 
     a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+    |  · 
+    a(href='https://www.patreon.com/spectrecss' target='_blank') Patreon Sponsor
     |  · Version 
     span.version
   p
diff --git a/docs/src/elements/forms.pug b/docs/src/elements/forms.pug
index 5db1d95..274101b 100644
--- a/docs/src/elements/forms.pug
+++ b/docs/src/elements/forms.pug
@@ -331,8 +331,8 @@ block docs-content
     +docs-subheading('forms-icons', 'Form icons')
 
     p
-      | Spectre Form components has 
-      a(href="#icons") Spectre Icons
+      | Spectre Forms components has 
+      a(href="icons.html") Spectre Icons
       |  support.
     p
       | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element.
diff --git a/docs/src/elements/icons.pug b/docs/src/elements/icons.pug
index 5c53bc1..70aa96e 100644
--- a/docs/src/elements/icons.pug
+++ b/docs/src/elements/icons.pug
@@ -7,19 +7,25 @@ block variables
   - var description = 'Icons are single-element, responsive and pure CSS icons. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 
 block docs-content
-  +docs-heading('icons', 'Icons')
+  +docs-heading('icons', 'Icons.css')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
+    .docs-demo.columns
+      .column
+        .toast.toast-primary
+          | Spectre.css Icons will be moved to a new 
+          a(href="https://github.com/picturepan2/icons.css" target="_blank") GitHub Repo
+          | .
     p
-      | Icons are single-element, responsive and pure CSS icons.
+      | Icons.css are single-element, responsive and pure CSS icons.
       | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons.
 
     +docs-subheading('icons-navigation', 'Navigation icons')
 
-    .columns
+    .docs-demo.columns
       .column.col-3.col-md-6
         button.btn.btn-primary.btn-action.btn-lg
           i.icon.icon-arrow-up
@@ -75,7 +81,7 @@ block docs-content
 
     +docs-subheading('icons-action', 'Action icons')
 
-    .columns
+    .docs-demo.columns
       .column.col-3.col-md-6
         button.btn.btn-primary.btn-action.btn-lg
           i.icon.icon-resize-horiz
@@ -151,7 +157,7 @@ block docs-content
 
     +docs-subheading('icons-object', 'Object icons')
 
-    .columns
+    .docs-demo.columns
       .column.col-3.col-md-6
         button.btn.btn-primary.btn-action.btn-lg
           i.icon.icon-mail
@@ -196,7 +202,7 @@ block docs-content
       | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
       | You can set #[code font-size] to have different icon sizes.
 
-    .columns
+    .docs-demo.columns
       .column.col-3.col-md-6
         p
           i.icon.icon-2x.icon-mail
diff --git a/docs/src/experimentals/carousels.pug b/docs/src/experimentals/carousels.pug
index f6fb774..5dfe359 100644
--- a/docs/src/experimentals/carousels.pug
+++ b/docs/src/experimentals/carousels.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('carousels', 'Carousels')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/comparison.pug b/docs/src/experimentals/comparison.pug
index 527abd9..3252dcb 100644
--- a/docs/src/experimentals/comparison.pug
+++ b/docs/src/experimentals/comparison.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('comparison', 'Comparison sliders')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/filters.pug b/docs/src/experimentals/filters.pug
index d505c33..f49f213 100644
--- a/docs/src/experimentals/filters.pug
+++ b/docs/src/experimentals/filters.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('filters', 'Filters')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/off-canvas.pug b/docs/src/experimentals/off-canvas.pug
index cd8cfba..8d18e0b 100644
--- a/docs/src/experimentals/off-canvas.pug
+++ b/docs/src/experimentals/off-canvas.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('off-canvas', 'Off-canvas')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/parallax.pug b/docs/src/experimentals/parallax.pug
index 8637281..c52bb68 100644
--- a/docs/src/experimentals/parallax.pug
+++ b/docs/src/experimentals/parallax.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('parallax', 'Parallax')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/experimentals/viewer-360.pug b/docs/src/experimentals/viewer-360.pug
index f382097..5ab0384 100644
--- a/docs/src/experimentals/viewer-360.pug
+++ b/docs/src/experimentals/viewer-360.pug
@@ -9,7 +9,7 @@ block variables
 block docs-content
   +docs-heading('viewer-360', '360-Degree Viewer')
     p
-      small.label.label-primary.mr-2 CSS ONLY
+      small.label.label-secondary CSS ONLY
 
     include ../_layout/_ad-g.pug
 
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
index d195053..c157ea7 100644
--- a/docs/src/getting-started.pug
+++ b/docs/src/getting-started.pug
@@ -57,7 +57,7 @@ block docs-content
         .card
           .card-header
             .card-title.h5 Accessibility
-          .card-body
+          .card-body.text-gray
             | Coming soon
 
     include _layout/_ad-c.pug
diff --git a/docs/src/index.pug b/docs/src/index.pug
index f7a6194..25a9359 100644
--- a/docs/src/index.pug
+++ b/docs/src/index.pug
@@ -56,7 +56,7 @@ block content
           p.text-secondary
             | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
         .column.col-10.col-sm-12.col-mx-auto
-          a.btn.btn-lg(href='getting-started/installation.html') Install SPECTRE.CSS
+          a.btn.btn-lg(href='getting-started/installation.html') Install Spectre.css
 
   .section.section-updates.bg-gray
     .container.grid-lg
@@ -76,17 +76,17 @@ block content
             .card-header
               .card-title.h6 PayPal Donate
             .card-body
-              | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. &hearts;
+              | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development.
             .card-footer
               a.btn.btn-primary(href='https://www.paypal.me/picturepan2' target='_blank') Donate
         .column.col-4.col-xs-12
           .card
             .card-header
-              .card-title.h6 Spectre Docs
+              .card-title.h6 Sponsor via Patreon
             .card-body
-              | Spectre Docs experience has been completely rewritten and improved.
+              | Your name or company logo will be put on Spectre Docs homepage.
             .card-footer
-              a.btn.btn-primary(href='getting-started.html') Explore
+              a.btn.btn-primary(href='https://www.patreon.com/spectrecss' target='_blank') Sponsor
   .section.section-ads.bg-gray
     include _layout/_ad-c.pug
 
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 9450cef..656bfa3 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -306,6 +306,7 @@
     align-items: center;
     border-radius: $border-radius;
     display: inline-flex;
+    font-size: .7rem;
     height: 2rem;
     padding: .2rem;
     width: auto;
@@ -328,14 +329,14 @@
       line-height: 1.5rem;
       margin-bottom: 0;
       margin-left: .5rem;
-      margin-right: .5rem;
+      margin-right: .3rem;
     }
   }
 }
 
 .docs-footer {
   color: $gray-color;
-  padding: .5rem .5rem 1.5rem;
+  padding: .5rem;
 
   a {
     color: $gray-color-dark;
@@ -396,7 +397,7 @@
 }
 
 .section-updates {
-  padding: 4.5rem .5rem 3.5rem .5rem;
+  padding: 4.5rem .5rem 2.5rem .5rem;
 
   .card {
     border: 0;