push
This commit is contained in:
parent
fcca77e222
commit
4f35c7e0a2
4 changed files with 48 additions and 31 deletions
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
26
h/docs.html
26
h/docs.html
|
@ -82,7 +82,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col c4">
|
<div class="col c4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h2>Standardized Width <code>btn std</code></h2>
|
<h3>Standardized Width <code>btn std</code></h3>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<a class="btn std">btn std</a>
|
<a class="btn std">btn std</a>
|
||||||
<a class="btn std info">btn std info</a>
|
<a class="btn std info">btn std info</a>
|
||||||
|
@ -190,9 +190,17 @@
|
||||||
<a href="#">Four</a>
|
<a href="#">Four</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<button class="btn-close btn btn-sm">×</button>
|
<button class="btn-close btn sm">×</button>
|
||||||
<br>
|
<br>
|
||||||
<pre><nav class="nav" tabindex="-1" onclick="this.focus()"><br> <div class="container"><br> <a class="pagename current" href="#">BRUT</a><br> <a href="#">One</a><br> <a href="#">Two</a> <br> <a href="#">Three</a><br> </div><br></nav><br><button class="btn-close btn btn-sm">×</button></pre>
|
<pre><nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||||
|
<div class="container">
|
||||||
|
<a class="pagename current" href="#">BRUT</a>
|
||||||
|
<a href="#">One</a>
|
||||||
|
<a href="#">Two</a>
|
||||||
|
<a href="#">Three</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<button class="btn-close btn sm">×</button></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
@ -220,7 +228,7 @@
|
||||||
<td>500</td>
|
<td>500</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -233,7 +241,7 @@
|
||||||
<i class="ico block" style="line-height: 1.5rem">
|
<i class="ico block" style="line-height: 1.5rem">
|
||||||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ¥£ ¢❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||||
</i>
|
</i>
|
||||||
<div class="block msg" style="line-height: 1.5rem">
|
<div class="msg push">
|
||||||
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -244,7 +252,13 @@
|
||||||
<i class="ico block" style="line-height: 1.5rem">
|
<i class="ico block" style="line-height: 1.5rem">
|
||||||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||||
</i>
|
</i>
|
||||||
<div class="block msg warn">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</div>
|
<div class="msg warn push">
|
||||||
|
Although over 75% of Android devices we tested
|
||||||
|
support all "Total Set" icons, if a substantial
|
||||||
|
portion of your users use old Android devices
|
||||||
|
you should stick to the "Android Safe" set.
|
||||||
|
(The "Total Set" does not include icons from the "Android Safe" set.)
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
<p>Don't worry it will be quick and straightforward.</p>
|
<p>Don't worry it will be quick and straightforward.</p>
|
||||||
<p>Just a test</p>
|
<p>Just a test</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="h/docs.html" class="btn info big">Docs</a>
|
<a href="h/docs.html" class="btn info big push">Docs</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c4 col">
|
<div class="c4 col">
|
||||||
|
@ -53,7 +53,7 @@
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<p>Download BRUT</p>
|
<p>Download BRUT</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="h/docs.html" class="btn err big">Download</a>
|
<a href="h/docs.html" class="btn err big push">Download</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c4 col">
|
<div class="c4 col">
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<p>To give you an idea.</p>
|
<p>To give you an idea.</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="h/examples.html" class="btn ok big">Examples</a>
|
<a href="h/examples.html" class="btn ok big push">Examples</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,12 +4,13 @@
|
||||||
border: solid 2px;
|
border: solid 2px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
.col > .card, .col > .block { height: 100%; }
|
.col > .card, .col > .block { height: 100%; }
|
||||||
.row > .card, .row > .block { width: 100%; }
|
.row > .card, .row > .block { width: 100%; }
|
||||||
|
|
||||||
|
.card { border-color: var(--cn-1); }
|
||||||
.block {
|
.block {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -33,3 +34,5 @@ button ~ .central {
|
||||||
outline-width: 0.5rem;
|
outline-width: 0.5rem;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.push { justify-self: flex-end; margin-top: auto;}
|
||||||
|
|
Loading…
Reference in a new issue