git.squeep.com Git - akkoma/blob - priv/static/static/font/demo.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   4     <meta charset="UTF-8"><style>/*
   5  * Bootstrap v2.2.1
   6  *
   7  * Copyright 2012 Twitter, Inc
   8  * Licensed under the Apache License v2.0
   9  * http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  12  */
  13 .clearfix {
  14   *zoom: 1;
  15 }
  16 .clearfix:before,
  17 .clearfix:after {
  18   display: table;
  19   content: "";
  20   line-height: 0;
  21 }
  22 .clearfix:after {
  23   clear: both;
  24 }
  25 html {
  26   font-size: 100%;
  27   -webkit-text-size-adjust: 100%;
  28   -ms-text-size-adjust: 100%;
  29 }
  30 a:focus {
  31   outline: thin dotted #333;
  32   outline: 5px auto -webkit-focus-ring-color;
  33   outline-offset: -2px;
  34 }
  35 a:hover,
  36 a:active {
  37   outline: 0;
  38 }
  39 button,
  40 input,
  41 select,
  42 textarea {
  43   margin: 0;
  44   font-size: 100%;
  45   vertical-align: middle;
  46 }
  47 button,
  48 input {
  49   *overflow: visible;
  50   line-height: normal;
  51 }
  52 button::-moz-focus-inner,
  53 input::-moz-focus-inner {
  54   padding: 0;
  55   border: 0;
  56 }
  57 body {
  58   margin: 0;
  59   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  60   font-size: 14px;
  61   line-height: 20px;
  62   color: #333;
  63   background-color: #fff;
  64 }
  65 a {
  66   color: #08c;
  67   text-decoration: none;
  68 }
  69 a:hover {
  70   color: #005580;
  71   text-decoration: underline;
  72 }
  73 .row {
  74   margin-left: -20px;
  75   *zoom: 1;
  76 }
  77 .row:before,
  78 .row:after {
  79   display: table;
  80   content: "";
  81   line-height: 0;
  82 }
  83 .row:after {
  84   clear: both;
  85 }
  86 [class*="span"] {
  87   float: left;
  88   min-height: 1px;
  89   margin-left: 20px;
  90 }
  91 .container,
  92 .navbar-static-top .container,
  93 .navbar-fixed-top .container,
  94 .navbar-fixed-bottom .container {
  95   width: 940px;
  96 }
  97 .span12 {
  98   width: 940px;
  99 }
 100 .span11 {
 101   width: 860px;
 102 }
 103 .span10 {
 104   width: 780px;
 105 }
 106 .span9 {
 107   width: 700px;
 108 }
 109 .span8 {
 110   width: 620px;
 111 }
 112 .span7 {
 113   width: 540px;
 114 }
 115 .span6 {
 116   width: 460px;
 117 }
 118 .span5 {
 119   width: 380px;
 120 }
 121 .span4 {
 122   width: 300px;
 123 }
 124 .span3 {
 125   width: 220px;
 126 }
 127 .span2 {
 128   width: 140px;
 129 }
 130 .span1 {
 131   width: 60px;
 132 }
 133 [class*="span"].pull-right,
 134 .row-fluid [class*="span"].pull-right {
 135   float: right;
 136 }
 137 .container {
 138   margin-right: auto;
 139   margin-left: auto;
 140   *zoom: 1;
 141 }
 142 .container:before,
 143 .container:after {
 144   display: table;
 145   content: "";
 146   line-height: 0;
 147 }
 148 .container:after {
 149   clear: both;
 150 }
 151 p {
 152   margin: 0 0 10px;
 153 }
 154 .lead {
 155   margin-bottom: 20px;
 156   font-size: 21px;
 157   font-weight: 200;
 158   line-height: 30px;
 159 }
 160 small {
 161   font-size: 85%;
 162 }
 163 h1 {
 164   margin: 10px 0;
 165   font-family: inherit;
 166   font-weight: bold;
 167   line-height: 20px;
 168   color: inherit;
 169   text-rendering: optimizelegibility;
 170 }
 171 h1 small {
 172   font-weight: normal;
 173   line-height: 1;
 174   color: #999;
 175 }
 176 h1 {
 177   line-height: 40px;
 178 }
 179 h1 {
 180   font-size: 38.5px;
 181 }
 182 h1 small {
 183   font-size: 24.5px;
 184 }
 185 body {
 186   margin-top: 90px;
 187 }
 188 .header {
 189   position: fixed;
 190   top: 0;
 191   left: 50%;
 192   margin-left: -480px;
 193   background-color: #fff;
 194   border-bottom: 1px solid #ddd;
 195   padding-top: 10px;
 196   z-index: 10;
 197 }
 198 .footer {
 199   color: #ddd;
 200   font-size: 12px;
 201   text-align: center;
 202   margin-top: 20px;
 203 }
 204 .footer a {
 205   color: #ccc;
 206   text-decoration: underline;
 207 }
 208 .the-icons {
 209   font-size: 14px;
 210   line-height: 24px;
 211 }
 212 .switch {
 213   position: absolute;
 214   right: 0;
 215   bottom: 10px;
 216   color: #666;
 217 }
 218 .switch input {
 219   margin-right: 0.3em;
 220 }
 221 .codesOn .i-name {
 222   display: none;
 223 }
 224 .codesOn .i-code {
 225   display: inline;
 226 }
 227 .i-code {
 228   display: none;
 229 }
 230 @font-face {
 231       font-family: 'fontello';
 232       src: url('./font/fontello.eot?60799712');
 233       src: url('./font/fontello.eot?60799712#iefix') format('embedded-opentype'),
 234            url('./font/fontello.woff?60799712') format('woff'),
 235            url('./font/fontello.ttf?60799712') format('truetype'),
 236            url('./font/fontello.svg?60799712#fontello') format('svg');
 237       font-weight: normal;
 238       font-style: normal;
 239     }
 240
 241
 242     .demo-icon
 243     {
 244       font-family: "fontello";
 245       font-style: normal;
 246       font-weight: normal;
 247       speak: none;
 248
 249       display: inline-block;
 250       text-decoration: inherit;
 251       width: 1em;
 252       margin-right: .2em;
 253       text-align: center;
 254       /* opacity: .8; */
 255
 256       /* For safety - reset parent styles, that can break glyph codes*/
 257       font-variant: normal;
 258       text-transform: none;
 259
 260       /* fix buttons height, for twitter bootstrap */
 261       line-height: 1em;
 262
 263       /* Animation center compensation - margins should be symmetric */
 264       /* remove if not needed */
 265       margin-left: .2em;
 266
 267       /* You can be more comfortable with increased icons size */
 268       /* font-size: 120%; */
 269
 270       /* Font smoothing. That was taken from TWBS */
 271       -webkit-font-smoothing: antialiased;
 272       -moz-osx-font-smoothing: grayscale;
 273
 274       /* Uncomment for 3D effect */
 275       /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 276     }
 277      </style>
 278     <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
 279     <script>
 280       function toggleCodes(on) {
 281         var obj = document.getElementById('icons');
 282
 283         if (on) {
 284           obj.className += ' codesOn';
 285         } else {
 286           obj.className = obj.className.replace(' codesOn', '');
 287         }
 288       }
 289
 290     </script>
 291   </head>
 292   <body>
 293     <div class="container header">
 294       <h1>fontello <small>font demo</small></h1>
 295       <label class="switch">
 296         <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
 297       </label>
 298     </div>
 299     <div class="container" id="icons">
 300       <div class="row">
 301         <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-cancel">&#xe800;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe800</span></div>
 302         <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-upload">&#xe801;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe801</span></div>
 303         <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-star">&#xe802;</i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div>
 304         <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-star-empty">&#xe803;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div>
 305       </div>
 306       <div class="row">
 307         <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div>
 308         <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-eye-off">&#xe805;</i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe805</span></div>
 309         <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-search">&#xe806;</i> <span class="i-name">icon-search</span><span class="i-code">0xe806</span></div>
 310         <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-cog">&#xe807;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe807</span></div>
 311       </div>
 312       <div class="row">
 313         <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-logout">&#xe808;</i> <span class="i-name">icon-logout</span><span class="i-code">0xe808</span></div>
 314         <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-down-open">&#xe809;</i> <span class="i-name">icon-down-open</span><span class="i-code">0xe809</span></div>
 315         <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-attach">&#xe80a;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe80a</span></div>
 316         <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-picture">&#xe80b;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe80b</span></div>
 317       </div>
 318       <div class="row">
 319         <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-video">&#xe80c;</i> <span class="i-name">icon-video</span><span class="i-code">0xe80c</span></div>
 320         <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-right-open">&#xe80d;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe80d</span></div>
 321         <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-left-open">&#xe80e;</i> <span class="i-name">icon-left-open</span><span class="i-code">0xe80e</span></div>
 322         <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-up-open">&#xe80f;</i> <span class="i-name">icon-up-open</span><span class="i-code">0xe80f</span></div>
 323       </div>
 324       <div class="row">
 325         <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-bell">&#xe810;</i> <span class="i-name">icon-bell</span><span class="i-code">0xe810</span></div>
 326         <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-lock">&#xe811;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe811</span></div>
 327         <div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-globe">&#xe812;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe812</span></div>
 328         <div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-brush">&#xe813;</i> <span class="i-name">icon-brush</span><span class="i-code">0xe813</span></div>
 329       </div>
 330       <div class="row">
 331         <div class="the-icons span3" title="Code: 0xe814"><i class="demo-icon icon-attention">&#xe814;</i> <span class="i-name">icon-attention</span><span class="i-code">0xe814</span></div>
 332         <div class="the-icons span3" title="Code: 0xe815"><i class="demo-icon icon-plus">&#xe815;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe815</span></div>
 333         <div class="the-icons span3" title="Code: 0xe816"><i class="demo-icon icon-adjust">&#xe816;</i> <span class="i-name">icon-adjust</span><span class="i-code">0xe816</span></div>
 334         <div class="the-icons span3" title="Code: 0xe817"><i class="demo-icon icon-edit">&#xe817;</i> <span class="i-name">icon-edit</span><span class="i-code">0xe817</span></div>
 335       </div>
 336       <div class="row">
 337         <div class="the-icons span3" title="Code: 0xe818"><i class="demo-icon icon-pencil">&#xe818;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe818</span></div>
 338         <div class="the-icons span3" title="Code: 0xe819"><i class="demo-icon icon-verified">&#xe819;</i> <span class="i-name">icon-verified</span><span class="i-code">0xe819</span></div>
 339         <div class="the-icons span3" title="Code: 0xe81a"><i class="demo-icon icon-wrench">&#xe81a;</i> <span class="i-name">icon-wrench</span><span class="i-code">0xe81a</span></div>
 340         <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
 341       </div>
 342       <div class="row">
 343         <div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
 344         <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext">&#xf08e;</i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
 345         <div class="the-icons span3" title="Code: 0xf08f"><i class="demo-icon icon-link-ext-alt">&#xf08f;</i> <span class="i-name">icon-link-ext-alt</span><span class="i-code">0xf08f</span></div>
 346         <div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
 347       </div>
 348       <div class="row">
 349         <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
 350         <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
 351         <div class="the-icons span3" title="Code: 0xf0f3"><i class="demo-icon icon-bell-alt">&#xf0f3;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xf0f3</span></div>
 352         <div class="the-icons span3" title="Code: 0xf0fe"><i class="demo-icon icon-plus-squared">&#xf0fe;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xf0fe</span></div>
 353       </div>
 354       <div class="row">
 355         <div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
 356         <div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
 357         <div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div>
 358         <div class="the-icons span3" title="Code: 0xf164"><i class="demo-icon icon-thumbs-up-alt">&#xf164;</i> <span class="i-name">icon-thumbs-up-alt</span><span class="i-code">0xf164</span></div>
 359       </div>
 360       <div class="row">
 361         <div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
 362         <div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
 363       </div>
 364     </div>
 365     <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
 366   </body>
 367 </html>