diff options
Diffstat (limited to 'searx/static/themes/simple/fonts/ion.html')
| -rw-r--r-- | searx/static/themes/simple/fonts/ion.html | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/searx/static/themes/simple/fonts/ion.html b/searx/static/themes/simple/fonts/ion.html new file mode 100644 index 000000000..defea2647 --- /dev/null +++ b/searx/static/themes/simple/fonts/ion.html @@ -0,0 +1,261 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title>ion</title> + <style> + body { + margin:0; + padding:10px 20px; + background:#fff; + color:#222; + } + h1, div, footer { + font-family:"Helvetica Neue", Arial, sans-serif; + } + h1 { + margin:0 0 20px; + font-size:32px; + font-weight:normal; + } + h1 small { + font-size: 0.8em; + padding-left: 2em; + } + .icons { + margin-bottom:40px; + -webkit-column-count:5; + -moz-column-count:5; + column-count:5; + -webkit-column-gap:20px; + -moz-column-gap:20px; + column-gap:20px; + } + .icons__item, + .icons__item i { + line-height:2em; + cursor:pointer; + overflow:hidden; + } + .icons__item:hover { + color:#3c90be; + } + .icons__item i { + display:inline-block; + width:32px; + text-align:center; + } + .icons__item:hover i { + -webkit-transform:scale(1.5); + transform:scale(1.5); + } + footer { + margin-top:40px; + font-size:14px; + color:#999; + } + + /* Generated by grunt-webfont */ + + +@font-face { + font-family:"ion"; + src:url("ion.eot?94af7082ea096aefe3a7b6642834716e"); + src:url("ion.eot?#iefix") format("embedded-opentype"), + url("ion.woff2?94af7082ea096aefe3a7b6642834716e") format("woff2"), + url("ion.woff?94af7082ea096aefe3a7b6642834716e") format("woff"), + url("ion.ttf?94af7082ea096aefe3a7b6642834716e") format("truetype"), + url("ion.svg?94af7082ea096aefe3a7b6642834716e#ion") format("svg"); + font-weight:normal; + font-style:normal; +} + +.ion-icon { + + font-family:"ion"; + + display:inline-block; + vertical-align:middle; + line-height:1; + font-weight:normal; + font-style:normal; + speak:none; + text-decoration:inherit; + text-transform:none; + text-rendering:auto; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; +} + + +/* Icons */ + + +.ion-navicon-round:before { + content:"\f101"; +} + + +.ion-search:before { + content:"\f102"; +} + + +.ion-play:before { + content:"\f103"; +} + + +.ion-link:before { + content:"\f104"; +} + + +.ion-chevron-up:before { + content:"\f105"; +} + + +.ion-chevron-left:before { + content:"\f106"; +} + + +.ion-chevron-right:before { + content:"\f107"; +} + + +.ion-arrow-down-a:before { + content:"\f108"; +} + + +.ion-arrow-up-a:before { + content:"\f109"; +} + + +.ion-arrow-swap:before { + content:"\f10a"; +} + + +.ion-arrow-dropdown:before { + content:"\f10b"; +} + + +.ion-globe:before { + content:"\f10c"; +} + + +.ion-time:before { + content:"\f10d"; +} + + +.ion-location:before { + content:"\f10e"; +} + + +.ion-warning:before { + content:"\f10f"; +} + + +.ion-error:before { + content:"\f110"; +} + + +.ion-film-outline:before { + content:"\f111"; +} + + +.ion-music-note:before { + content:"\f112"; +} + + +.ion-more-vertical:before { + content:"\f113"; +} + + +.ion-magnet:before { + content:"\f114"; +} + + </style> + </head> + <body> + <h1>ion</h1> + + <div class="icons" id="icons"> + + <div class="icons__item" data-name="navicon-round"><i class="ion-icon ion-navicon-round"></i> ion-navicon-round</div> + + <div class="icons__item" data-name="search"><i class="ion-icon ion-search"></i> ion-search</div> + + <div class="icons__item" data-name="play"><i class="ion-icon ion-play"></i> ion-play</div> + + <div class="icons__item" data-name="link"><i class="ion-icon ion-link"></i> ion-link</div> + + <div class="icons__item" data-name="chevron-up"><i class="ion-icon ion-chevron-up"></i> ion-chevron-up</div> + + <div class="icons__item" data-name="chevron-left"><i class="ion-icon ion-chevron-left"></i> ion-chevron-left</div> + + <div class="icons__item" data-name="chevron-right"><i class="ion-icon ion-chevron-right"></i> ion-chevron-right</div> + + <div class="icons__item" data-name="arrow-down-a"><i class="ion-icon ion-arrow-down-a"></i> ion-arrow-down-a</div> + + <div class="icons__item" data-name="arrow-up-a"><i class="ion-icon ion-arrow-up-a"></i> ion-arrow-up-a</div> + + <div class="icons__item" data-name="arrow-swap"><i class="ion-icon ion-arrow-swap"></i> ion-arrow-swap</div> + + <div class="icons__item" data-name="arrow-dropdown"><i class="ion-icon ion-arrow-dropdown"></i> ion-arrow-dropdown</div> + + <div class="icons__item" data-name="globe"><i class="ion-icon ion-globe"></i> ion-globe</div> + + <div class="icons__item" data-name="time"><i class="ion-icon ion-time"></i> ion-time</div> + + <div class="icons__item" data-name="location"><i class="ion-icon ion-location"></i> ion-location</div> + + <div class="icons__item" data-name="warning"><i class="ion-icon ion-warning"></i> ion-warning</div> + + <div class="icons__item" data-name="error"><i class="ion-icon ion-error"></i> ion-error</div> + + <div class="icons__item" data-name="film-outline"><i class="ion-icon ion-film-outline"></i> ion-film-outline</div> + + <div class="icons__item" data-name="music-note"><i class="ion-icon ion-music-note"></i> ion-music-note</div> + + <div class="icons__item" data-name="more-vertical"><i class="ion-icon ion-more-vertical"></i> ion-more-vertical</div> + + <div class="icons__item" data-name="magnet"><i class="ion-icon ion-magnet"></i> ion-magnet</div> + + </div> + + + + <h1>Usage</h1> + <pre><code><i class="ion-icon ion-<span id="name">name</span>"></i></code></pre> + + + <footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer> + + <script> + (function() { + document.getElementById('icons').onclick = function(e) { + e = e || window.event; + var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name'); + document.getElementById('name').innerHTML = name; + + } + })(); + </script> + </body> +</html> |