tentakelfabrik
/
tiny-modal
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
550 KiB
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
tiny-modal/dist/fonts/demo.html

232 lines
8.2 KiB
Raw Permalink Normal View History

adding
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta name="robots" content="noindex, noarchive">
  8.     <meta name="format-detection" content="telephone=no">
  9.     <title>Transfonter demo</title>
  10.     <link href="stylesheet.css" rel="stylesheet">
  11.     <style>
  12.         /*
  13.         http://meyerweb.com/eric/tools/css/reset/
  14.         v2.0 | 20110126
  15.         License: none (public domain)
  16.         */
  17.         html, body, div, span, applet, object, iframe,
  18.         h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  19.         a, abbr, acronym, address, big, cite, code,
  20.         del, dfn, em, img, ins, kbd, q, s, samp,
  21.         small, strike, strong, sub, sup, tt, var,
  22.         b, u, i, center,
  23.         dl, dt, dd, ol, ul, li,
  24.         fieldset, form, label, legend,
  25.         table, caption, tbody, tfoot, thead, tr, th, td,
  26.         article, aside, canvas, details, embed,
  27.         figure, figcaption, footer, header, hgroup,
  28.         menu, nav, output, ruby, section, summary,
  29.         time, mark, audio, video {
  30.             margin: 0;
  31.             padding: 0;
  32.             border: 0;
  33.             font-size: 100%;
  34.             font: inherit;
  35.             vertical-align: baseline;
  36.         }
  37.         /* HTML5 display-role reset for older browsers */
  38.         article, aside, details, figcaption, figure,
  39.         footer, header, hgroup, menu, nav, section {
  40.             display: block;
  41.         }
  42.         body {
  43.             line-height: 1;
  44.         }
  45.         ol, ul {
  46.             list-style: none;
  47.         }
  48.         blockquote, q {
  49.             quotes: none;
  50.         }
  51.         blockquote:before, blockquote:after,
  52.         q:before, q:after {
  53.             content: '';
  54.             content: none;
  55.         }
  56.         table {
  57.             border-collapse: collapse;
  58.             border-spacing: 0;
  59.         }
  60.         /* demo styles */
  61.         body {
  62.             background: #f0f0f0;
  63.             color: #000;
  64.         }
  65.         .page {
  66.             background: #fff;
  67.             width: 920px;
  68.             margin: 0 auto;
  69.             padding: 20px 20px 0 20px;
  70.             overflow: hidden;
  71.         }
  72.         .font-container {
  73.             overflow-x: auto;
  74.             overflow-y: hidden;
  75.             margin-bottom: 40px;
  76.             line-height: 1.3;
  77.             white-space: nowrap;
  78.             padding-bottom: 5px;
  79.         }
  80.         h1 {
  81.             position: relative;
  82.             background: #444;
  83.             font-size: 32px;
  84.             color: #fff;
  85.             padding: 10px 20px;
  86.             margin: 0 -20px 12px -20px;
  87.         }
  88.         .letters {
  89.             font-size: 25px;
  90.             margin-bottom: 20px;
  91.         }
  92.         .s10:before {
  93.             content: '10px';
  94.         }
  95.         .s11:before {
  96.             content: '11px';
  97.         }
  98.         .s12:before {
  99.             content: '12px';
  100.         }
  101.         .s14:before {
  102.             content: '14px';
  103.         }
  104.         .s18:before {
  105.             content: '18px';
  106.         }
  107.         .s24:before {
  108.             content: '24px';
  109.         }
  110.         .s30:before {
  111.             content: '30px';
  112.         }
  113.         .s36:before {
  114.             content: '36px';
  115.         }
  116.         .s48:before {
  117.             content: '48px';
  118.         }
  119.         .s60:before {
  120.             content: '60px';
  121.         }
  122.         .s72:before {
  123.             content: '72px';
  124.         }
  125.         .s10:before, .s11:before, .s12:before, .s14:before,
  126.         .s18:before, .s24:before, .s30:before, .s36:before,
  127.         .s48:before, .s60:before, .s72:before {
  128.             font-family: Arial, sans-serif;
  129.             font-size: 10px;
  130.             font-weight: normal;
  131.             font-style: normal;
  132.             color: #999;
  133.             padding-right: 6px;
  134.         }
  135.         pre {
  136.             display: block;
  137.             position: relative;
  138.             padding: 9px;
  139.             margin: 0 0 10px;
  140.             font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  141.             font-size: 13px;
  142.             line-height: 1.428571429;
  143.             color: #333;
  144.             font-weight: normal;
  145.             font-style: normal;
  146.             background-color: #f5f5f5;
  147.             border: 1px solid #ccc;
  148.             overflow-x: auto;
  149.             border-radius: 4px;
  150.         }
  151.         pre:after {
  152.             display: block;
  153.             position: absolute;
  154.             right: 0;
  155.             top: 0;
  156.             content: 'Usage';
  157.             line-height: 1;
  158.             padding: 5px 8px;
  159.             font-size: 12px;
  160.             color: #767676;
  161.             background-color: #fff;
  162.             border: 1px solid #ccc;
  163.             border-right: none;
  164.             border-top: none;
  165.             border-radius: 0 4px 0 4px;
  166.             z-index: 10;
  167.         }
  168.         /* responsive */
  169.         @media (max-width: 959px) {
  170.             .page {
  171.                 width: auto;
  172.                 margin: 0;
  173.             }
  174.         }
  175.     </style>
  176. </head>
  177. <body>
  178. <div class="page">
  179.     <div class="demo">
  180.         <h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
  181.         <pre>.your-style {
  182.     font-family: 'IBM Plex Mono';
  183.     font-weight: normal;
  184.     font-style: normal;
  185. }</pre>
  186.         <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
  187.             <p class="letters">
  188.                 abcdefghijklmnopqrstuvwxyz<br>
  189. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  190.                 0123456789.:,;()*!?'@#<>$%&^+-=~
  191.             </p>
  192.             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  193.             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  194.             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  195.             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  196.             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  197.             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  198.             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  199.             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  200.             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  201.             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  202.             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  203.         </div>
  204.     </div>
  205.     <div class="demo">
  206.         <h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
  207.         <pre>.your-style {
  208.     font-family: 'IBM Plex Mono';
  209.     font-weight: bold;
  210.     font-style: normal;
  211. }</pre>
  212.         <div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
  213.             <p class="letters">
  214.                 abcdefghijklmnopqrstuvwxyz<br>
  215. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  216.                 0123456789.:,;()*!?'@#<>$%&^+-=~
  217.             </p>
  218.             <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
  219.             <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
  220.             <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
  221.             <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
  222.             <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
  223.             <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
  224.             <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
  225.             <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
  226.             <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
  227.             <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
  228.             <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
  229.         </div>
  230.     </div>
  231. </div>
  232. </body>
  233. </html>