Update Docs style

5 files changed, 22 insertions, 26 deletions

diff --git a/docs/src/_layout/_docs-layout.pug b/docs/src/_layout/_docs-layout.pug
index 890b458..9aad19c 100644
--- a/docs/src/_layout/_docs-layout.pug
+++ b/docs/src/_layout/_docs-layout.pug
@@ -10,8 +10,6 @@ block content
         input.docs-search.form-input(type="text" placeholder="Search Docs")
         a.btn.ml-1(href='https://www.paypal.me/picturepan2' target='_blank') PayPal
         a.btn.btn-primary.ml-1(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
-        
-        
 
     #sidebar.docs-sidebar.off-canvas-sidebar
       .docs-brand
diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug
index be899e8..c85b475 100644
--- a/docs/src/elements/tables.pug
+++ b/docs/src/elements/tables.pug
@@ -77,7 +77,7 @@ block docs-content
               td The Shawshank Redemption
               td Crime, Drama
               td 14 October 1994
-            tr.active
+            tr
               td The Godfather
               td Crime, Drama
               td 24 March 1972
diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug
index 2f71e96..8618be6 100644
--- a/docs/src/experimentals.pug
+++ b/docs/src/experimentals.pug
@@ -21,7 +21,7 @@ block docs-content
           .card-header
             .card-title.h5 360-Degree Viewer
           .card-body
-            | Interactive product photo viewer
+            | Interactive 360-degree product photo viewer
           .card-footer
             a.btn.btn-primary(href="experimentals/autocomplete.html") View
       .column.col-6.col-xs-12
diff --git a/docs/src/getting-started/custom.pug b/docs/src/getting-started/custom.pug
index 88cb713..36a1753 100644
--- a/docs/src/getting-started/custom.pug
+++ b/docs/src/getting-started/custom.pug
@@ -166,54 +166,46 @@ block docs-content
     +docs-subheading('variables-colors', 'Variables - Colors')
 
     .columns
-      .column.col-3.col-md-6
+      .column.col-2.col-md-6
         .docs-color(style='background:#5755d9;color:#fff;')
           .color-title #5755d9
           .color-subtitle Primary
-      .column.col-3.col-md-6
+      .column.col-2.col-md-6
         .docs-color(style='background:#f1f1fc;color:#5755d9;')
           .color-title #f1f1fc
           .color-subtitle Secondary
     .columns
-      .column.col-3.col-md-6
+      .column.col-2.col-md-6
         .docs-color(style='background:#32b643;color:#fff;')
           .color-title #32b643
           .color-subtitle Success
-      .column.col-3.col-md-6
+      .column.col-2.col-md-6
         .docs-color(style='background:#ffb700;color:#fff;')
           .color-title #ffb700
           .color-subtitle Warning
-      .column.col-3.col-md-6
+      .column.col-2.col-md-6
         .docs-color(style='background:#e85600;color:#fff;')
           .color-title #e85600
           .color-subtitle Error
     .columns
-      .column.col-3.col-md-6
+      .column.col-2.col-md-6
         .docs-color(style='background:#303742;color:#fff;')
           .color-title #303742
           .color-subtitle Dark
-      .column.col-3.col-md-6
+      .column.col-2.col-md-6
         .docs-color(style='background:#66758c;color:#fff;')
           .color-title #66758c
           .color-subtitle Gray dark
-      .column.col-3.col-md-6
-        .docs-color(style='background:#bcc3ce;color:#303742;')
+      .column.col-2.col-md-6
+        .docs-color(style='background:#bcc3ce;color:#fff;')
           .color-title #bcc3ce
           .color-subtitle Gray
-      .column.col-3.col-md-6
-        .docs-color(style='background:#f7f8f9;color:#303742;')
+      .column.col-2.col-md-6
+        .docs-color(style='background:#f7f8f9;color:#66758c;')
           .color-title #f7f8f9
           .color-subtitle Gray light
-      .column.col-3.col-md-6
-        .docs-color(style='background:#bcc3ce;color:#303742;')
-          .color-title #bcc3ce
-          .color-subtitle Border
-      .column.col-3.col-md-6
-        .docs-color(style='background:#f7f8f9;color:#303742;')
-          .color-title #f7f8f9
-          .color-subtitle Background
-      .column.col-3.col-md-6
-        .docs-color(style='background:#fff;color:#303742;')
+      .column.col-2.col-md-6
+        .docs-color(style='background:#fff;color:#bcc3ce;')
           .color-title #fff
           .color-subtitle Light
 
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index ce8f974..9450cef 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -154,6 +154,12 @@
   .docs-demo {
     padding-bottom: 1rem;
     padding-top: 1rem;
+
+    .card {
+      box-shadow: 0 .25rem 1rem rgba($dark-color, .15);
+      border: 0;
+      height: 100%;
+    }
   }
 
   .column {
@@ -194,7 +200,7 @@
   .docs-color {
     border-radius: $border-radius;
     margin: .25rem 0;
-    padding: .5rem;
+    padding: 5rem .5rem .5rem;
 
     .color-subtitle {
       font-size: $font-size-sm;