diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-08-03 19:45:56 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-08-03 19:45:56 +0300 |
commit | f4057ff8d3a36350728411de0010fdcf10dfc860 (patch) | |
tree | 138c7977cacf7194980b09da44e48bf61fad7bb1 | |
parent | a2f1864da01e76c59d682b897398b100eb3bc25a (diff) |
Minor update to the Docs
-rw-r--r-- | docs/components.html | 6 | ||||
-rw-r--r-- | docs/css/docs.css | 11 | ||||
-rw-r--r-- | docs/elements.html | 60 | ||||
-rw-r--r-- | docs/experimentals.html | 26 | ||||
-rw-r--r-- | docs/index.html | 4 | ||||
-rw-r--r-- | docs/layout.html | 18 | ||||
-rw-r--r-- | docs/src/docs.less | 15 | ||||
-rw-r--r-- | docs/utilities.html | 22 |
8 files changed, 78 insertions, 84 deletions
diff --git a/docs/components.html b/docs/components.html index d5e037d..7089ade 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1430,7 +1430,7 @@ </div> </div> <div class="notes"> - <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted.</p> + <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p> </div> <!-- pagination example --> @@ -2151,9 +2151,7 @@ <footer class="section section-footer bg-gray"> <div id="copyright" class="grid-footer container grid-960"> - <p> - <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> - </p> + <p><a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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>Designed and built with ♥ 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> </footer> diff --git a/docs/css/docs.css b/docs/css/docs.css index 3026c45..73aa882 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -21,7 +21,7 @@ } .section-footer { color: #acb3c2; - padding: 25px 15px 10px 15px; + padding: 26px 15px 10px 15px; position: relative; z-index: 200; } @@ -86,15 +86,18 @@ overflow: auto; } .docs-content { + padding-bottom: 50px; padding-top: 0; } .docs-content .container { padding: 10px; } -.docs-content header { +.docs-content .container > h3, +.docs-content .container > h4 { padding-top: 55px; } .docs-content .anchor { + color: #626fca; height: 0; margin-left: -1em; overflow: hidden; @@ -218,12 +221,12 @@ padding: 0 5px; } .docs-sidebar { - padding: 70px 10px 50px 10px; + padding: 70px 10px 70px 10px; position: relative; } .docs-sidebar .docs-nav { bottom: 50px; - height: calc(100vh - 120px); + height: calc(100vh - 140px); overflow-y: auto; position: fixed; top: 90px; diff --git a/docs/elements.html b/docs/elements.html index 41b612e..a196a4c 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -254,11 +254,11 @@ <div class="docs-content column col-sm-12"> <div id="typography" class="container"> - <header class="text-center"><h3><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3></header> + <h3 class="text-center"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> <div class="notes"> <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> </div> - <header class="text-center"><h4>Headings</h4></header> + <h4 class="text-center">Headings</h4> <div class="notes"> <h1>H1 Title <small class="label">5rem</small></h1> <h2>H2 Title <small class="label">4rem</small></h2> @@ -273,7 +273,7 @@ <<span class="tag">h2</span>>H2 Title <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>4rem<<span class="tag">/small</span>><<span class="tag">/h2</span>> </code></pre> - <header class="text-center"><h4>Paragraphs</h4></header> + <h4 class="text-center">Paragraphs</h4> <div class="notes"> <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> @@ -283,7 +283,7 @@ <pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>dictum in vehicula sit amet<<span class="tag">/a</span>>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<<span class="tag">/p</span>> </code></pre> - <header class="text-center"><h4>Semantic text elements</h4></header> + <h4 class="text-center">Semantic text elements</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <abbr title="Internationalization">I18N</abbr> @@ -362,7 +362,7 @@ </div> </div> - <header class="text-center"><h4>Optimized for east asian fonts</h4></header> + <h4 class="text-center">Optimized for east asian fonts</h4> <div class="notes"> <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> <h5>Chinese (Simplified)</h5> @@ -397,7 +397,7 @@ <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">del</span>>祇園<<span class="tag">/del</span>><<span class="tag">del</span>>精舎<<span class="tag">/del</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> </code></pre> - <header class="text-center"><h4>Blockquote</h4></header> + <h4 class="text-center">Blockquote</h4> <blockquote> <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p> <cite>- Bill Gates</cite> @@ -410,7 +410,7 @@ <<span class="tag">/blockquote</span>> </code></pre> - <header class="text-center"><h4>Lists</h4></header> + <h4 class="text-center">Lists</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <ul class="list"> @@ -474,7 +474,7 @@ </div> <div id="tables" class="container"> - <header class="text-center"><h3><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3></header> + <h3 class="text-center"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> <div class="notes"> <p><strong>Tables</strong> include default styles for tables and data sets.</p> </div> @@ -536,7 +536,7 @@ </div> <div id="buttons" class="container"> - <header class="text-center"><h3><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3></header> + <h3 class="text-center"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> <div class="notes"> <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> </div> @@ -601,7 +601,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> - <header class="text-center"><h4>Button sizes</h4></header> + <h4 class="text-center">Button sizes</h4> <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button> @@ -649,7 +649,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> </code></pre> - <header class="text-center"><h4>Button groups</h4></header> + <h4 class="text-center">Button groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="btn-group"> @@ -697,7 +697,7 @@ </div> <div id="forms" class="container"> - <header class="text-center"><h3><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3></header> + <h3 class="text-center"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> <div class="notes"> <p><strong>Forms</strong> provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> </div> @@ -809,7 +809,7 @@ <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> </div> - <header class="text-center"><h4>Horizontal forms</h4></header> + <h4 class="text-center">Horizontal forms</h4> <div class="notes"> <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p> </div> @@ -908,7 +908,7 @@ <<span class="tag">/form</span>> </code></pre> - <header class="text-center"><h4>Form sizes</h4></header> + <h4 class="text-center">Form sizes</h4> <div class="notes"> <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> </div> @@ -945,7 +945,7 @@ </div> </div> - <header class="text-center"><h4>Form icons</h4></header> + <h4 class="text-center">Form icons</h4> <div class="notes"> <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</p> </div> @@ -1030,7 +1030,7 @@ <<span class="tag">/div</span>> </code></pre> - <header class="text-center"><h4>Input types</h4></header> + <h4 class="text-center">Input types</h4> <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -1110,7 +1110,7 @@ </div> </div> - <header class="text-center"><h4>Input groups</h4></header> + <h4 class="text-center">Input groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> @@ -1193,7 +1193,7 @@ <<span class="tag">/div</span>> </code></pre> - <header class="text-center"><h4>Form validation styles</h4></header> + <h4 class="text-center">Form validation styles</h4> <div class="notes"> <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> </div> @@ -1292,7 +1292,7 @@ <<span class="tag">/form</span>> </code></pre> - <header class="text-center"><h4>Form disabled styles</h4></header> + <h4 class="text-center">Form disabled styles</h4> <div class="notes"> <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> </div> @@ -1346,11 +1346,11 @@ </div> <div id="icons" class="container"> - <header class="text-center"><h3><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3></header> + <h3 class="text-center"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> <div class="notes"> <p><strong>Icons</strong> are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.</p> </div> - <header class="text-center"><h4>Navigation</h4></header> + <h4 class="text-center">Navigation</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1431,7 +1431,7 @@ <p>icon-more-vert</p> </div> </div> - <header class="text-center"><h4>Action</h4></header> + <h4 class="text-center">Action</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1536,7 +1536,7 @@ <p>icon-upload</p> </div> </div> - <header class="text-center"><h4>Object</h4></header> + <h4 class="text-center">Object</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1595,7 +1595,7 @@ </div> <div id="labels" class="container"> - <header class="text-center"><h3><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3></header> + <h3 class="text-center"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> <div class="notes"> <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> </div> @@ -1620,7 +1620,7 @@ </div> <div id="codes" class="container"> - <header class="text-center"><h3><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3></header> + <h3 class="text-center"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> <div class="notes"> <p><strong>Codes</strong> are inline and multiline code snippets.</p> <p>For inline code, you can use the element <code><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> @@ -1643,11 +1643,11 @@ </div> <div id="media" class="container"> - <header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header> + <h3 class="text-center"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> <div class="notes"> <p><strong>Media</strong> includes responsive images, figures and video classes. </p> </div> - <header class="text-center"><h4>Images</h4></header> + <h4 class="text-center">Images</h4> <div class="notes"> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> </div> @@ -1698,7 +1698,7 @@ <<span class="tag">/figure</span>> </code></pre> - <header class="text-center"><h4>Video</h4></header> + <h4 class="text-center">Video</h4> <div class="notes"> <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> </div> @@ -1741,9 +1741,7 @@ <footer class="section section-footer bg-gray"> <div id="copyright" class="grid-footer container grid-960"> - <p> - <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> - </p> + <p><a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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>Designed and built with ♥ 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> </footer> diff --git a/docs/experimentals.html b/docs/experimentals.html index c67d757..84c9365 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -255,14 +255,14 @@ <div class="docs-content column col-9 col-sm-12"> <div id="experimentals" class="container"> - <header class="text-center"><h3><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3></header> + <h3 class="text-center"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3> <div class="notes"> <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p> </div> </div> <div id="calendars" class="container"> - <header class="text-center"><h3><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3></header> + <h3 class="text-center"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3> <div class="notes"> <p><strong>Calendars</strong> are designed for date or date range picker and events display. It is made with flex layout.</p> </div> @@ -330,7 +330,7 @@ </div> </div> - <header class="text-center"><h4>Calendars large</h4></header> + <h4 class="text-center">Calendars large</h4> <div class="columns"> <div class="column col-12"> <div class="calendar calendar-lg"> @@ -425,7 +425,7 @@ </div> <div id="carousels" class="container"> - <header class="text-center"><h3><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3></header> + <h3 class="text-center"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3> <div class="notes"> <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p> </div> @@ -490,7 +490,7 @@ </div> <div id="comparison" class="container"> - <header class="text-center"><h3><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3></header> + <h3 class="text-center"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3> <div class="notes"> <p><strong>Comparison Sliders</strong> are sliders for comparing two images. It is built in pure CSS.</p> </div> @@ -528,7 +528,7 @@ </div> <div id="filters" class="container"> - <header class="text-center"><h3><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3></header> + <h3 class="text-center"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3> <div class="notes"> <p><strong>Filters</strong> are CSS only content filters.</p> </div> @@ -653,7 +653,7 @@ </div> <div id="meters" class="container"> - <header class="text-center"><h3><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3></header> + <h3 class="text-center"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3> <div class="notes"> <p><strong>Meters</strong> represent the value within the known range.</p> </div> @@ -688,7 +688,7 @@ </div> <div id="parallax" class="container"> - <header class="text-center"><h3><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3></header> + <h3 class="text-center"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3> <div class="notes"> <p>The <strong>Parallax</strong> acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> </div> @@ -731,7 +731,7 @@ </div> <div id="progress" class="container"> - <header class="text-center"><h3><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3></header> + <h3 class="text-center"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3> <div class="notes"> <p>The <strong>Progress</strong> indicates the progress completion of a task.</p> </div> @@ -758,7 +758,7 @@ </div> <div id="sliders" class="container"> - <header class="text-center"><h3><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3></header> + <h3 class="text-center"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> <div class="notes"> <p><strong>Sliders</strong> are for selecting values from ranges.</p> </div> @@ -778,7 +778,7 @@ </div> <div id="timelines" class="container"> - <header class="text-center"><h3><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3></header> + <h3 class="text-center"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3> <div class="notes"> <p><strong>Timelines</strong> are ordered sequences of activities.</p> </div> @@ -888,9 +888,7 @@ <footer class="section section-footer bg-gray"> <div id="copyright" class="grid-footer container grid-960"> - <p> - <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> - </p> + <p><a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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>Designed and built with ♥ 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> </footer> diff --git a/docs/index.html b/docs/index.html index 11da7d6..cc806a2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -593,9 +593,7 @@ <footer class="section section-footer bg-gray"> <div id="copyright" class="grid-footer container grid-960"> - <p> - <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> - </p> + <p><a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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>Designed and built with ♥ 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> </footer> diff --git a/docs/layout.html b/docs/layout.html index c90809a..1b224b5 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -254,7 +254,7 @@ <div class="docs-content column col-sm-12"> <div id="grid" class="container"> - <header class="text-center"><h3><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3></header> + <h3 class="text-center"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> <div class="notes"> <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> </div> @@ -364,7 +364,7 @@ </div> <div id="responsive" class="container"> - <header class="text-center"><h3><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3></header> + <h3 class="text-center"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3> <div class="notes"> <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> </div> @@ -410,7 +410,7 @@ <<span class="tag">/div</span>> </code></pre> - <header class="text-center"><h4>Responsive container</h4></header> + <h4 class="text-center">Responsive container</h4> <div class="notes"> <p>The responsive layout also provides fixed-width containers. Use <code>grid-480</code>, <code>grid-960</code> or <code>grid-1280</code> to <code>container</code> for a fixed-width container with the specific max-width.</p> </div> @@ -423,7 +423,7 @@ <<span class="tag">/div</span>> </code></pre> - <header class="text-center"><h4>Responsive visibility</h4></header> + <h4 class="text-center">Responsive visibility</h4> <div class="notes"> <p>The responsive visibility utilities help show and hide elements on specific viewport sizes. </p> </div> @@ -563,7 +563,7 @@ </div> <div id="navbar" class="container"> - <header class="text-center"><h3><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3></header> + <h3 class="text-center"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> <div class="notes"> <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p> </div> @@ -644,7 +644,7 @@ </div> <div id="panels" class="container"> - <header class="text-center"><h3><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3></header> + <h3 class="text-center"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> <div class="notes"> <p><strong>Panels</strong> are flexible view container layout with auto-expand content section.</p> </div> @@ -805,7 +805,7 @@ </div> <div id="empty" class="container"> - <header class="text-center"><h3><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3></header> + <h3 class="text-center"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3> <div class="notes"> <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p> </div> @@ -894,9 +894,7 @@ <footer class="section section-footer bg-gray"> <div id="copyright" class="grid-footer container grid-960"> - <p> - <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> - </p> + <p><a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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>Designed and built with ♥ 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> </footer> diff --git a/docs/src/docs.less b/docs/src/docs.less index c7217db..c01aba3 100644 --- a/docs/src/docs.less +++ b/docs/src/docs.less @@ -26,7 +26,7 @@ .section-footer { color: @gray-color; - padding: 25px 15px 10px 15px; + padding: 26px 15px 10px 15px; position: relative; z-index: 200; @@ -107,17 +107,20 @@ } .docs-content { + padding-bottom: 50px; padding-top: 0; .container { padding: 10px; - } - header { - padding-top: 55px; + & > h3, + & > h4 { + padding-top: 55px; + } } .anchor { + color: @primary-color-light; height: 0; margin-left: -1em; overflow: hidden; @@ -270,12 +273,12 @@ } .docs-sidebar { - padding: 70px 10px 50px 10px; + padding: 70px 10px 70px 10px; position: relative; .docs-nav { bottom: 50px; - height: ~"calc(100vh - 120px)"; + height: ~"calc(100vh - 140px)"; overflow-y: auto; position: fixed; top: 90px; diff --git a/docs/utilities.html b/docs/utilities.html index d88aea8..943f4bc 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -254,11 +254,11 @@ <div class="docs-content column col-sm-12"> <div id="colors" class="container"> - <header class="text-center"><h3><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3></header> + <h3 class="text-center"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> <div class="notes"> <p><strong>Color utilities</strong> are used for changing colors for text, link and background.</p> </div> - <header class="text-center"><h4>Text colors</h4></header> + <h4 class="text-center">Text colors</h4> <div class="notes"> <p> <span class="text-primary p-5">primary color</span> @@ -303,7 +303,7 @@ <<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> </code></pre> - <header class="text-center"><h4>Background colors</h4></header> + <h4 class="text-center">Background colors</h4> <div class="notes"> <p> <span class="bg-primary text-light p-5 rounded">primary bg</span> @@ -329,7 +329,7 @@ </div> <div id="display" class="container"> - <header class="text-center"><h3><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3></header> + <h3 class="text-center"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> <div class="notes"> <p><strong>Display utilities</strong> are used for display and hidden things.</p> </div> @@ -360,7 +360,7 @@ </div> <div id="divider" class="container"> - <header class="text-center"><h3><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3></header> + <h3 class="text-center"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> <div class="notes"> <p>A <strong>Divider</strong> is used for separating elements.</p> </div> @@ -432,7 +432,7 @@ </div> <div id="loading" class="container"> - <header class="text-center"><h3><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3></header> + <h3 class="text-center"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> <div class="notes"> <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p> </div> @@ -450,7 +450,7 @@ </div> <div id="position" class="container"> - <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header> + <h3 class="text-center"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> <div class="notes"> <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </div> @@ -484,7 +484,7 @@ </div> <div id="shapes" class="container"> - <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header> + <h3 class="text-center"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> <div class="notes"> <p><strong>Shape utilities</strong> are used for change element shapes.</p> </div> @@ -499,7 +499,7 @@ </div> <div id="text" class="container"> - <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header> + <h3 class="text-center"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> <div class="notes"> <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> </div> @@ -563,9 +563,7 @@ <footer class="section section-footer bg-gray"> <div id="copyright" class="grid-footer container grid-960"> - <p> - <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> - </p> + <p><a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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>Designed and built with ♥ 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> </footer> |