push
This commit is contained in:
Yann Esposito (Yogsototh)
parent
fcca77e222
commit
4f35c7e0a2
GPG key ID:
7B19A4C650D59646
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
66
h/docs.html
66
h/docs.html
|
|
@ -82,7 +82,7 @@
|
|||
<div class="row">
|
||||
<div class="col c4">
|
||||
<div class="card">
|
||||
<h2>Standardized Width <code>btn std</code></h2>
|
||||
<h3>Standardized Width <code>btn std</code></h3>
|
||||
<div class="col">
|
||||
<a class="btn std">btn std</a>
|
||||
<a class="btn std info">btn std info</a>
|
||||
|
|
@ -190,9 +190,17 @@
|
|||
<a href="#">Four</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn btn-sm">×</button>
|
||||
<button class="btn-close btn sm">×</button>
|
||||
<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>
|
||||
|
|
@ -200,27 +208,27 @@
|
|||
<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
|
||||
<br><br>
|
||||
<pre><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
|
|
@ -233,7 +241,7 @@
|
|||
<i class="ico block" style="line-height: 1.5rem">
|
||||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</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.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -244,7 +252,13 @@
|
|||
<i class="ico block" style="line-height: 1.5rem">
|
||||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<p>Don't worry it will be quick and straightforward.</p>
|
||||
<p>Just a test</p>
|
||||
</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 class="c4 col">
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<div class="block">
|
||||
<p>Download BRUT</p>
|
||||
</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 class="c4 col">
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="block">
|
||||
<p>To give you an idea.</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@
|
|||
border: solid 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.col > .card, .col > .block { height: 100%; }
|
||||
.row > .card, .row > .block { width: 100%; }
|
||||
|
||||
.card { border-color: var(--cn-1); }
|
||||
.block {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
|
@ -33,3 +34,5 @@ button ~ .central {
|
|||
outline-width: 0.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.push { justify-self: flex-end; margin-top: auto;}
|
||||
|
|
|
|||
Loading…
Reference in a new issue