diff options
1 files changed, 34 insertions, 37 deletions
| -rw-r--r-- | index.html | 71 |
@@ -20,8 +20,18 @@ padding: 1rem .5rem; border-radius: .3rem; } - .navbar.bg-grey { - padding: 1rem; + .navbar-brand { + font-size: 2rem; + font-weight: bold; + padding-right: 2rem; + text-decoration: none; + vertical-align: middle; + } + .navbar-brand .icon { + font-size: 1.3333em; + line-height: .8em; + margin-right: .2rem; + vertical-align: -20%; } .grid-hero { margin-top: 10rem; @@ -1159,56 +1169,43 @@ </section> <div class="columns"> <div class="column"> - <section class="navbar bg-grey"> - <div class="navbar-section"> - <a href="#navbar" class="btn btn-link btn-lg"><i class="icon icon-menu"></i></a> - <a href="#navbar" class="navbar-brand">Spectre.css</a> - </div> - <div class="navbar-section"> - <input class="form-input input-inline" type="text" placeholder="search" /> - <a href="#navbar" class="btn btn-link">documents</a> - <a href="#navbar" class="btn btn-link">login</a> - <a href="#navbar" class="btn btn-primary">signup</a> - </div> - </section> - </div> - </div> - <div class="columns"> - <div class="column"> <section class="navbar"> - <div class="navbar-section"> - <a href="#navbar" class="btn btn-link btn-lg"><i class="icon icon-menu"></i></a> - <a href="#navbar" class="navbar-brand">Spectre.css</a> - </div> - <div class="navbar-section"> - <input class="form-input input-inline" type="text" placeholder="search" /> - <figure class="avatar ml-10 mr-10"> - <img src="demo/img/avatar-4.png" /> - </figure> - <a href="#navbar" class="btn btn-primary">profile</a> - </div> + <section class="navbar-section"> + <a href="#navbar" class="navbar-brand"> + <i class="icon icon-pages"></i> Spectre.css + </a> + <a href="#navbar" class="btn btn-link">features</a> + <a href="#navbar" class="btn btn-link">documents</a> + </section> + <section class="navbar-section"> + <div class="input-group input-inline"> + <input class="form-input" type="text" placeholder="search" /> + <button class="btn btn-primary input-group-btn">Search</button> + </div> + </section> </section> </div> </div> <section class="notes"> - <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. By default, there is no grey background.</p> + <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the class <code>navbar-section</code> will be evenly distributed in the container.</p> </section> <!-- navbar example --> <pre class="code lang-html"> <<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link btn-lg"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-pages"</span>><<span class="tag">/i</span>> Spectre.css <<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand"</span>>Spectre.css<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>features<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>documents<<span class="tag">/a</span>> <<span class="tag">/section</span>> <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-inline"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span>>documents<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>documents<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>login<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>signup<<span class="tag">/a</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Search<<span class="tag">/button</span>> + <<span class="tag">/div</span>> <<span class="tag">/section</span>> <<span class="tag">/header</span>> </pre> |