add table and message capabilities

for only 130 bytes extra!

note: that number might not be 100% accurate
This commit is contained in:
Owen Versteeg 2013-05-19 21:11:26 -04:00
parent 956f3ce41d
commit f951bba63c
2 changed files with 87 additions and 0 deletions

View file

@ -50,6 +50,52 @@
<hr class="mediumwidth">
<div class="mediumwidth">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Widgets Sold</th>
<th>Revenue (&pound;)</th>
<th>Profit (&pound;)</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>
</div>
<hr class="mediumwidth">
<div class="mediumwidth">
<message class="warning"><strong>Watch out!</strong> You don't have H9RBS.js installed.</message>
<br>
<message class="great"><strong>Great!</strong> You successfully frobjugated the minlingator's snorbdralob.</message>
<br>
<message><strong>Hey!</strong> You've got four thousand new grabjalognibs!</message>
</div>
<br><br>
</body>
</html>

View file

@ -184,3 +184,44 @@ textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[ty
height: 7.5em;
}
}
/*
Tables
*/
table {
width: 100%;
border-spacing: 0;
}
.table th, .table td {
padding: 0.5em;
line-height: 1.4em;
text-align: left;
vertical-align: top;
}
.table td {
border-top: 1px solid #dddddd;
}
tbody tr:nth-child(2n-1) {
background: #E0E0E0;
}
/*
Messages
*/
message {
width: 100%;
display: block;
padding: 2em 0;
background: #A7D3E4;
&.warning {
background: rgb(228, 167, 167);
}
&.great {
background: #A7E4AE;
}
}