add icons

They're awesome! and really tiny too!
This commit is contained in:
Owen Versteeg 2013-05-23 20:43:56 -04:00
parent 369e8ece3d
commit e54a9e865c
2 changed files with 127 additions and 101 deletions

219
beta.html
View file

@ -1,101 +1,118 @@
<!DOCTYPE html>
<!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]-->
<head>
<meta charset="UTF-8">
<title>min</title>
<link type="text/css" rel="stylesheet/less" href="min.less"/>
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<h1 class="title">min</h1>
<h3>the tiny framework</h3>
<hr class="mediumwidth">
<div class="buttons">
<a href="http://github.com/owenversteeg/min"><button class="smooth btn-a">btn-a</button></a>
<a href="http://minfwk.com"><button class="smooth btn-b">btn-b</button></a>
<a href="http://minframework.com"><button class="smooth btn-c">btn-c</button></a>
<br><br>
<a href="http://minframework.com"><button class="smooth btn-b btn-small">btn-small</button></a>
</div>
<hr class="mediumwidth">
<h1 class="title">h1 title</h1>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<hr class="mediumwidth">
<input type="text" class="smooth" placeholder="input type=&#34;text&#34;">
<br><br>
<textarea rows="3" class="smooth" placeholder="textarea"></textarea>
<br><br>
<span class="addon-front">$</span><input type="text" class="smooth" placeholder="span class=&#34;addon-front&#34;">
<hr class="mediumwidth">
<div class="mediumwidth">
<div class="navbar">
<a class="pagename" href="#">Min Framework</a>
<a class="navbar-link" href="#">One</a>
<a class="navbar-link" href="#">Two</a>
<a class="navbar-link" href="#">Three</a>
</div>
</div>
<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>
<!DOCTYPE html>
<!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]-->
<head>
<meta charset="UTF-8">
<title>min</title>
<link type="text/css" rel="stylesheet/less" href="min.less"/>
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<h1 class="title">min</h1>
<h3>the tiny framework</h3>
<hr class="mediumwidth">
<div class="buttons">
<a href="http://github.com/owenversteeg/min"><button class="smooth btn-a">btn-a</button></a>
<a href="http://minfwk.com"><button class="smooth btn-b">btn-b</button></a>
<a href="http://minframework.com"><button class="smooth btn-c">btn-c</button></a>
<br><br>
<a href="http://minframework.com"><button class="smooth btn-b btn-small">btn-small</button></a>
</div>
<hr class="mediumwidth">
<h1 class="title">h1 title</h1>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<hr class="mediumwidth">
<input type="text" class="smooth" placeholder="input type=&#34;text&#34;">
<br><br>
<textarea rows="3" class="smooth" placeholder="textarea"></textarea>
<br><br>
<span class="addon-front">$</span><input type="text" class="smooth" placeholder="span class=&#34;addon-front&#34;">
<hr class="mediumwidth">
<div class="mediumwidth">
<div class="navbar">
<a class="pagename" href="#">Min Framework</a>
<a class="navbar-link" href="#">One</a>
<a class="navbar-link" href="#">Two</a>
<a class="navbar-link" href="#">Three</a>
</div>
</div>
<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>
<hr class="mediumwidth">
<div class="icons">
<ico>✉ ✰ ☁ ⌚ ⌘ ☎ ✈ ☑ ☒</ico>
<br><br>
<ico>♂ ♀ ⌛ ☀ ☮ ☢ ☠ ☣ ⌨</ico>
<br><br>
<ico>ⓧ © § ® ⌂ ℗ ☺ ☻ ☼</ico>
<br><br>
<ico>⇦ ⇧ ⇨ ⇩ ∡ ∿ ⊝ ⊘ ⌂</ico>
<br><br>
<ico>♠ ♣ ♥ ♦ ♪ ♫ ♭ ♮ ♯</ico>
</div>
<br>
</body>
</html>

View file

@ -230,6 +230,15 @@ message {
}
}
/*
Icons
*/
ico {
font-size: 1.9375em;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; /* If you have to fall back to sans-serif you're screwed */
}
/*
IE hacks
*/