
27 changed files with 875 additions and 11554 deletions
@ -1,233 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<meta name="robots" content="noindex, noarchive"> |
|||
<meta name="format-detection" content="telephone=no"> |
|||
<title>Transfonter demo</title> |
|||
<link href="stylesheet.css" rel="stylesheet"> |
|||
<style> |
|||
/* |
|||
http://meyerweb.com/eric/tools/css/reset/ |
|||
v2.0 | 20110126 |
|||
License: none (public domain) |
|||
*/ |
|||
html, body, div, span, applet, object, iframe, |
|||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|||
a, abbr, acronym, address, big, cite, code, |
|||
del, dfn, em, img, ins, kbd, q, s, samp, |
|||
small, strike, strong, sub, sup, tt, var, |
|||
b, u, i, center, |
|||
dl, dt, dd, ol, ul, li, |
|||
fieldset, form, label, legend, |
|||
table, caption, tbody, tfoot, thead, tr, th, td, |
|||
article, aside, canvas, details, embed, |
|||
figure, figcaption, footer, header, hgroup, |
|||
menu, nav, output, ruby, section, summary, |
|||
time, mark, audio, video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
} |
|||
/* HTML5 display-role reset for older browsers */ |
|||
article, aside, details, figcaption, figure, |
|||
footer, header, hgroup, menu, nav, section { |
|||
display: block; |
|||
} |
|||
body { |
|||
line-height: 1; |
|||
} |
|||
ol, ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, blockquote:after, |
|||
q:before, q:after { |
|||
content: ''; |
|||
content: none; |
|||
} |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
/* demo styles */ |
|||
body { |
|||
background: #f0f0f0; |
|||
color: #000; |
|||
} |
|||
.page { |
|||
background: #fff; |
|||
width: 920px; |
|||
margin: 0 auto; |
|||
padding: 20px 20px 0 20px; |
|||
overflow: hidden; |
|||
} |
|||
.font-container { |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
margin-bottom: 40px; |
|||
line-height: 1.3; |
|||
white-space: nowrap; |
|||
padding-bottom: 5px; |
|||
} |
|||
h1 { |
|||
position: relative; |
|||
background: #444; |
|||
font-size: 32px; |
|||
color: #fff; |
|||
padding: 10px 20px; |
|||
margin: 0 -20px 12px -20px; |
|||
} |
|||
.letters { |
|||
font-size: 25px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.s10:before { |
|||
content: '10px'; |
|||
} |
|||
.s11:before { |
|||
content: '11px'; |
|||
} |
|||
.s12:before { |
|||
content: '12px'; |
|||
} |
|||
.s14:before { |
|||
content: '14px'; |
|||
} |
|||
.s18:before { |
|||
content: '18px'; |
|||
} |
|||
.s24:before { |
|||
content: '24px'; |
|||
} |
|||
.s30:before { |
|||
content: '30px'; |
|||
} |
|||
.s36:before { |
|||
content: '36px'; |
|||
} |
|||
.s48:before { |
|||
content: '48px'; |
|||
} |
|||
.s60:before { |
|||
content: '60px'; |
|||
} |
|||
.s72:before { |
|||
content: '72px'; |
|||
} |
|||
.s10:before, .s11:before, .s12:before, .s14:before, |
|||
.s18:before, .s24:before, .s30:before, .s36:before, |
|||
.s48:before, .s60:before, .s72:before { |
|||
font-family: Arial, sans-serif; |
|||
font-size: 10px; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
color: #999; |
|||
padding-right: 6px; |
|||
} |
|||
pre { |
|||
display: block; |
|||
position: relative; |
|||
padding: 9px; |
|||
margin: 0 0 10px; |
|||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace; |
|||
font-size: 13px; |
|||
line-height: 1.428571429; |
|||
color: #333; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
background-color: #f5f5f5; |
|||
border: 1px solid #ccc; |
|||
overflow-x: auto; |
|||
border-radius: 4px; |
|||
} |
|||
pre:after { |
|||
display: block; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
content: 'Usage'; |
|||
line-height: 1; |
|||
padding: 5px 8px; |
|||
font-size: 12px; |
|||
color: #767676; |
|||
background-color: #fff; |
|||
border: 1px solid #ccc; |
|||
border-right: none; |
|||
border-top: none; |
|||
border-radius: 0 4px 0 4px; |
|||
z-index: 10; |
|||
} |
|||
/* responsive */ |
|||
@media (max-width: 959px) { |
|||
.page { |
|||
width: auto; |
|||
margin: 0; |
|||
} |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="page"> |
|||
<div class="demo"> |
|||
<h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1> |
|||
<pre>.your-style { |
|||
font-family: 'IBM Plex Mono'; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
}</pre> |
|||
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;"> |
|||
<p class="letters"> |
|||
abcdefghijklmnopqrstuvwxyz<br> |
|||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
|||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
|||
</p> |
|||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
|||
</div> |
|||
</div> |
|||
<div class="demo"> |
|||
<h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1> |
|||
<pre>.your-style { |
|||
font-family: 'IBM Plex Mono'; |
|||
font-weight: bold; |
|||
font-style: normal; |
|||
}</pre> |
|||
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;"> |
|||
<p class="letters"> |
|||
abcdefghijklmnopqrstuvwxyz<br> |
|||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> |
|||
0123456789.:,;()*!?'@#<>$%&^+-=~ |
|||
</p> |
|||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> |
|||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
</html> |
@ -1,24 +0,0 @@ |
|||
@font-face { |
|||
font-family: 'IBM Plex Mono'; |
|||
src: url('fonts/IBMPlexMono.eot'); |
|||
src: url('fonts/IBMPlexMono.eot?#iefix') format('embedded-opentype'), |
|||
url('fonts/IBMPlexMono.woff2') format('woff2'), |
|||
url('fonts/IBMPlexMono.woff') format('woff'), |
|||
url('fonts/IBMPlexMono.ttf') format('truetype'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
font-display: swap; |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: 'IBM Plex Mono'; |
|||
src: url('fonts/IBMPlexMono-Bold.eot'); |
|||
src: url('fonts/IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'), |
|||
url('fonts/IBMPlexMono-Bold.woff2') format('woff2'), |
|||
url('fonts/IBMPlexMono-Bold.woff') format('woff'), |
|||
url('fonts/IBMPlexMono-Bold.ttf') format('truetype'); |
|||
font-weight: bold; |
|||
font-style: normal; |
|||
font-display: swap; |
|||
} |
|||
|
File diff suppressed because it is too large
@ -1,14 +1,4 @@ |
|||
{ |
|||
"/spritemap.js": "/spritemap.js", |
|||
"/dist/plain-ui.css": "/dist/plain-ui.css", |
|||
"/dist/fonts/demo.html": "/dist/fonts/demo.html", |
|||
"/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot", |
|||
"/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf", |
|||
"/dist/fonts/IBMPlexMono-Bold.woff": "/dist/fonts/IBMPlexMono-Bold.woff", |
|||
"/dist/fonts/IBMPlexMono-Bold.woff2": "/dist/fonts/IBMPlexMono-Bold.woff2", |
|||
"/dist/fonts/IBMPlexMono.eot": "/dist/fonts/IBMPlexMono.eot", |
|||
"/dist/fonts/IBMPlexMono.ttf": "/dist/fonts/IBMPlexMono.ttf", |
|||
"/dist/fonts/IBMPlexMono.woff": "/dist/fonts/IBMPlexMono.woff", |
|||
"/dist/fonts/IBMPlexMono.woff2": "/dist/fonts/IBMPlexMono.woff2", |
|||
"/dist/fonts/stylesheet.css": "/dist/fonts/stylesheet.css" |
|||
"/dist/plain-ui.css": "/dist/plain-ui.css" |
|||
} |
|||
|
File diff suppressed because it is too large
Before Width: | Height: | Size: 578 KiB After Width: | Height: | Size: 578 KiB |
@ -0,0 +1,4 @@ |
|||
{ |
|||
"/spritemap.js": "/spritemap.js", |
|||
"/plain-ui.css": "/plain-ui.css" |
|||
} |
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]); |
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
@ -1,13 +0,0 @@ |
|||
(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{ |
|||
|
|||
/***/ "?4e0c": |
|||
/*!******************************!*\ |
|||
!*** spritemap-dummy-module ***! |
|||
\******************************/ |
|||
/***/ (() => { |
|||
|
|||
|
|||
|
|||
/***/ }) |
|||
|
|||
}]); |
Loading…
Reference in new issue