From 3f9c0be1f03476fb616ddbc8c9a4d402fc49127b Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 15 Dec 2018 09:28:05 +0800
Subject: Update Docs style

---
 docs/getting-started/custom.html | 38 +++++++++++++-------------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

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

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>
-- 
cgit v1.3.1-23-gd82d