diff options
Diffstat (limited to 'docs/getting-started/custom.html')
| -rw-r--r-- | docs/getting-started/custom.html | 44 |
1 files changed, 16 insertions, 28 deletions
diff --git a/docs/getting-started/custom.html b/docs/getting-started/custom.html index eafc748..41b63bb 100644 --- a/docs/getting-started/custom.html +++ b/docs/getting-started/custom.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -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> @@ -416,7 +404,7 @@ gulp.task(<span class="hljs-string">'prefix'</span>, <span class="hljs-function" </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> |