Initial commit

This commit is contained in:
2020-04-11 20:44:27 +03:00
commit a9fd9cb522
66 changed files with 1168 additions and 0 deletions

BIN
static/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

685
static/TTCommons/demo.html Executable file
View File

@@ -0,0 +1,685 @@
<!DOCTYPE html>
<html>
<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;
}
/* common styles */
body {
background: #f1f1f1;
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 !important;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal !important;
font-style: normal !important;
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" style="font-family: 'TT Commons'; font-weight: 100; font-style: italic;">
<h1>TT Commons Thin Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 100;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 300; font-style: normal;">
<h1>TT Commons Light</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 300;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 900; font-style: normal;">
<h1>TT Commons Black</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 900;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 500; font-style: normal;">
<h1>TT Commons Medium</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 500;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: normal; font-style: italic;">
<h1>TT Commons Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: normal;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: normal; font-style: normal;">
<h1>TT Commons Regular</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 900; font-style: italic;">
<h1>TT Commons Black Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 900;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 800; font-style: normal;">
<h1>TT Commons ExtraBold</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 800;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: bold; font-style: italic;">
<h1>TT Commons Bold Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: bold;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 600; font-style: italic;">
<h1>TT Commons DemiBold Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 600;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: bold; font-style: normal;">
<h1>TT Commons Bold</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 200; font-style: normal;">
<h1>TT Commons ExtraLight</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 200;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 600; font-style: normal;">
<h1>TT Commons DemiBold</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 600;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 200; font-style: italic;">
<h1>TT Commons ExtraLight Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 200;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 800; font-style: italic;">
<h1>TT Commons ExtraBold Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 800;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 500; font-style: italic;">
<h1>TT Commons Medium Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 500;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 300; font-style: italic;">
<h1>TT Commons Light Italic</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 300;
font-style: italic;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
<div class="demo" style="font-family: 'TT Commons'; font-weight: 100; font-style: normal;">
<h1>TT Commons Thin</h1>
<pre>.your-style {
font-family: 'TT Commons';
font-weight: 100;
font-style: normal;
}</pre>
<div class="font-container">
<p class="letters">
абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
<p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
</div>
</div>
</div>
</body>
</html>

198
static/TTCommons/stylesheet.css Executable file
View File

@@ -0,0 +1,198 @@
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-ThinItalic.eot');
src: local('TT Commons Thin Italic'), local('TTCommons-ThinItalic'),
url('TTCommons-ThinItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-ThinItalic.woff') format('woff'),
url('TTCommons-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-Light.eot');
src: local('TT Commons Light'), local('TTCommons-Light'),
url('TTCommons-Light.eot?#iefix') format('embedded-opentype'),
url('TTCommons-Light.woff') format('woff'),
url('TTCommons-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-Black.eot');
src: local('TT Commons Black'), local('TTCommons-Black'),
url('TTCommons-Black.eot?#iefix') format('embedded-opentype'),
url('TTCommons-Black.woff') format('woff'),
url('TTCommons-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-Medium.eot');
src: local('TT Commons Medium'), local('TTCommons-Medium'),
url('TTCommons-Medium.eot?#iefix') format('embedded-opentype'),
url('TTCommons-Medium.woff') format('woff'),
url('TTCommons-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-Italic.eot');
src: local('TT Commons Italic'), local('TTCommons-Italic'),
url('TTCommons-Italic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-Italic.woff') format('woff'),
url('TTCommons-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-Regular.eot');
src: local('TT Commons Regular'), local('TTCommons-Regular'),
url('TTCommons-Regular.eot?#iefix') format('embedded-opentype'),
url('TTCommons-Regular.woff') format('woff'),
url('TTCommons-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-BlackItalic.eot');
src: local('TT Commons Black Italic'), local('TTCommons-BlackItalic'),
url('TTCommons-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-BlackItalic.woff') format('woff'),
url('TTCommons-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-ExtraBold.eot');
src: local('TT Commons ExtraBold'), local('TTCommons-ExtraBold'),
url('TTCommons-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('TTCommons-ExtraBold.woff') format('woff'),
url('TTCommons-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-BoldItalic.eot');
src: local('TT Commons Bold Italic'), local('TTCommons-BoldItalic'),
url('TTCommons-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-BoldItalic.woff') format('woff'),
url('TTCommons-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-DemiBoldItalic.eot');
src: local('TT Commons DemiBold Italic'), local('TTCommons-DemiBoldItalic'),
url('TTCommons-DemiBoldItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-DemiBoldItalic.woff') format('woff'),
url('TTCommons-DemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-Bold.eot');
src: local('TT Commons Bold'), local('TTCommons-Bold'),
url('TTCommons-Bold.eot?#iefix') format('embedded-opentype'),
url('TTCommons-Bold.woff') format('woff'),
url('TTCommons-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-ExtraLight.eot');
src: local('TT Commons ExtraLight'), local('TTCommons-ExtraLight'),
url('TTCommons-ExtraLight.eot?#iefix') format('embedded-opentype'),
url('TTCommons-ExtraLight.woff') format('woff'),
url('TTCommons-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-DemiBold.eot');
src: local('TT Commons DemiBold'), local('TTCommons-DemiBold'),
url('TTCommons-DemiBold.eot?#iefix') format('embedded-opentype'),
url('TTCommons-DemiBold.woff') format('woff'),
url('TTCommons-DemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-ExtraLightItalic.eot');
src: local('TT Commons ExtraLight Italic'), local('TTCommons-ExtraLightItalic'),
url('TTCommons-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-ExtraLightItalic.woff') format('woff'),
url('TTCommons-ExtraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-ExtraBoldItalic.eot');
src: local('TT Commons ExtraBold Italic'), local('TTCommons-ExtraBoldItalic'),
url('TTCommons-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-ExtraBoldItalic.woff') format('woff'),
url('TTCommons-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-MediumItalic.eot');
src: local('TT Commons Medium Italic'), local('TTCommons-MediumItalic'),
url('TTCommons-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-MediumItalic.woff') format('woff'),
url('TTCommons-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-LightItalic.eot');
src: local('TT Commons Light Italic'), local('TTCommons-LightItalic'),
url('TTCommons-LightItalic.eot?#iefix') format('embedded-opentype'),
url('TTCommons-LightItalic.woff') format('woff'),
url('TTCommons-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'TT Commons';
src: url('TTCommons-Thin.eot');
src: local('TT Commons Thin'), local('TTCommons-Thin'),
url('TTCommons-Thin.eot?#iefix') format('embedded-opentype'),
url('TTCommons-Thin.woff') format('woff'),
url('TTCommons-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}

BIN
static/info.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/vk-logo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB