diff options
Improve Docs homepage
1 files changed, 17 insertions, 14 deletions
| -rw-r--r-- | docs/utilities.html | 31 |
diff --git a/docs/utilities.html b/docs/utilities.html index 9b61975..1bdcbc1 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -6,7 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="author" content="https://github.com/picturepan2/" /> - <title>Utilities - Spectre.css </title> + <title>Utilities - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css" /> <link rel="stylesheet" href="dist/spectre-icons.css" /> <link rel="stylesheet" href="css/docs.css" /> @@ -15,8 +15,8 @@ <div class="s-container container"> <div class="columns"> <div class="s-brand"> - <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css" > - <img src="img/spectre-logo.svg" alt="Spectre.css"/> + <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> <h2>Spectre.css</h2> </a> <div class="menu-btn"> @@ -253,12 +253,13 @@ <div id="content" class="s-content"> <div id="colors" class="container"> <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3> - <div class="notes"> + <div class="docs-note"> <p>Color utilities are used for changing colors for text, link and background.</p> </div> <h4 class="s-subtitle">Text colors</h4> - <div class="notes"> + <div class="docs-note"> <p><span class="text-primary">primary color</span></p> + <p><span class="text-secondary">secondary color</span></p> <p><span class="text-gray">gray color</span></p> <p><span class="text-light bg-dark p-5 rounded">light color</span></p> <p><span class="text-success">success color</span></p> @@ -268,6 +269,7 @@ <!-- colors example --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span>>primary color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span>>secondary color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span>>gray color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-light"</span>>light color<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-success"</span>>success color<<span class="tag">/span</span>> @@ -275,8 +277,9 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-error"</span>>error color<<span class="tag">/span</span>> </code></pre> - <div class="notes"> + <div class="docs-note"> <p><a class="text-primary p-5" href="#colors">primary link</a></p> + <p><a class="text-secondary p-5" href="#colors">secondary link</a></p> <p><a class="text-gray p-5" href="#colors">gray link</a></p> <p><a class="text-light bg-dark p-5 rounded" href="#colors">light link</a></p> <p><a class="text-success p-5" href="#colors">success link</a></p> @@ -295,7 +298,7 @@ </code></pre> <h4 class="s-subtitle">Background colors</h4> - <div class="notes"> + <div class="docs-note"> <p><span class="bg-primary text-light p-5 rounded">primary bg</span></p> <p><span class="bg-secondary text-primary p-5 rounded">secondary bg</span></p> <p><span class="bg-dark text-light p-5 rounded">dark bg</span></p> @@ -319,7 +322,7 @@ <div id="display" class="container"> <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3> - <div class="notes"> + <div class="docs-note"> <p>Display utilities are used for display and hidden things.</p> </div> @@ -350,7 +353,7 @@ <div id="divider" class="container"> <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3> - <div class="notes"> + <div class="docs-note"> <p>A Divider is used for separating elements.</p> </div> <div class="columns"> @@ -424,7 +427,7 @@ <div id="loading" class="container"> <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3> - <div class="notes"> + <div class="docs-note"> <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status. Add the <code>btn-lg</code> class for large size. </p> </div> <div class="columns"> @@ -432,7 +435,7 @@ <div class="loading"></div> </div> </div> - <div class="notes"> + <div class="docs-note"> <p>Add the <code>btn-lg</code> class for large size. </p> </div> <div class="columns"> @@ -452,7 +455,7 @@ <div id="position" class="container"> <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3> - <div class="notes"> + <div class="docs-note"> <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </div> @@ -486,7 +489,7 @@ <div id="shapes" class="container"> <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3> - <div class="notes"> + <div class="docs-note"> <p>Shape utilities are used for change element shapes.</p> </div> <div class="columns"> @@ -513,7 +516,7 @@ <div id="text" class="container"> <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3> - <div class="notes"> + <div class="docs-note"> <p>Text utilities are used for text alignment, styles and overflow things.</p> </div> |