website version 0.01
Stephen Kerr
2 years ago
parent
d901f7ac67
commit
7cdbfe6654
@ -0,0 +1,3 @@
|
||||
.vscode
|
||||
.vscode/*
|
||||
.DS_store
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,21 @@
|
||||
/* ----------------------------------------------------
|
||||
VG5000
|
||||
-------------------------------------------------------
|
||||
Designed by Justin Bihan
|
||||
distribued by Velvetyne
|
||||
License: SIL Open Font License, Version 1.1
|
||||
https://velvetyne.fr/fonts/vg5000/
|
||||
---------------------------------------------------- */
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'VG5000';
|
||||
src: url('VG5000-Regular_web.eot');
|
||||
src: url('VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
|
||||
url('VG5000-Regular_web.woff') format('woff'),
|
||||
url('VG5000-Regular_web.woff2') format('woff2'),
|
||||
url('VG5000-Regular_web.ttf') format('truetype'),
|
||||
url('VG5000-Regular_web.svg#svgFontName') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
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.
@ -0,0 +1,801 @@
|
||||
<!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;
|
||||
padding: 9px;
|
||||
margin: 0 0 12px;
|
||||
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;
|
||||
}
|
||||
/* responsive */
|
||||
@media (max-width: 959px) {
|
||||
.page {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'HK Grotesk'; font-weight: 600; font-style: normal;">HK Grotesk SemiBold</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-SemiBold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 600; 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: 'HK Grotesk'; font-weight: normal; font-style: italic;">HK Grotesk Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-Italic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: normal; font-style: italic;">
|
||||
<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: 'HK Grotesk'; font-weight: bold; font-style: normal;">HK Grotesk ExtraBold</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-ExtraBold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; 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 class="demo">
|
||||
<h1 style="font-family: 'HK Grotesk'; font-weight: normal; font-style: normal;">HK Grotesk Regular</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-Regular.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; 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: 'HK Grotesk Medium Legacy'; font-weight: 500; font-style: normal;">HK Grotesk Medium Legacy</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Medium Legacy';
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-MediumLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Medium Legacy'; font-weight: 500; 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: 'HK Grotesk Legacy'; font-weight: normal; font-style: italic;">HK Grotesk Legacy Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-LegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; font-weight: normal; font-style: italic;">
|
||||
<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: 'HK Grotesk Legacy'; font-weight: bold; font-style: italic;">HK Grotesk Bold Legacy Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-BoldLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; font-weight: bold; font-style: italic;">
|
||||
<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: 'HK Grotesk Light Legacy'; font-weight: 300; font-style: normal;">HK Grotesk Light Legacy</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Light Legacy';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-LightLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Light Legacy'; font-weight: 300; 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: 'HK Grotesk'; font-weight: 900; font-style: normal;">HK Grotesk Black</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-Black.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 900; 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: 'HK Grotesk Legacy'; font-weight: bold; font-style: normal;">HK Grotesk Bold Legacy</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-BoldLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; 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 class="demo">
|
||||
<h1 style="font-family: 'HK Grotesk Light Legacy'; font-weight: 300; font-style: italic;">HK Grotesk Light Legacy Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Light Legacy';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-LightLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Light Legacy'; font-weight: 300; font-style: italic;">
|
||||
<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: 'HK Grotesk'; font-weight: 500; font-style: normal;">HK Grotesk Medium</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-Medium.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 500; 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: 'HK Grotesk SmBold Legacy'; font-weight: 600; font-style: italic;">HK Grotesk SemiBold Legacy Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk SmBold Legacy';
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-SemiBoldLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk SmBold Legacy'; font-weight: 600; font-style: italic;">
|
||||
<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: 'HK Grotesk'; font-weight: 600; font-style: italic;">HK Grotesk SemiBold Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-SemiBoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 600; font-style: italic;">
|
||||
<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: 'HK Grotesk Legacy'; font-weight: normal; font-style: normal;">HK Grotesk Regular Legacy</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-RegularLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Legacy'; 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: 'HK Grotesk'; font-weight: bold; font-style: italic;">HK Grotesk Bold Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-BoldItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: bold; font-style: italic;">
|
||||
<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: 'HK Grotesk'; font-weight: bold; font-style: normal;">HK Grotesk Bold</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-Bold.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; 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 class="demo">
|
||||
<h1 style="font-family: 'HK Grotesk SemiBold Legacy'; font-weight: 600; font-style: normal;">HK Grotesk SemiBold Legacy</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk SemiBold Legacy';
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-SemiBoldLegacy.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk SemiBold Legacy'; font-weight: 600; 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: 'HK Grotesk'; font-weight: 500; font-style: italic;">HK Grotesk Medium Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-MediumItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 500; font-style: italic;">
|
||||
<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: 'HK Grotesk'; font-weight: 300; font-style: normal;">HK Grotesk Light</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-Light.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 300; 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: 'HK Grotesk Medium Legacy'; font-weight: 500; font-style: italic;">HK Grotesk Medium Legacy Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk Medium Legacy';
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-MediumLegacyItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk Medium Legacy'; font-weight: 500; font-style: italic;">
|
||||
<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: 'HK Grotesk'; font-weight: 300; font-style: italic;">HK Grotesk Light Italic</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'HK Grotesk';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="HKGrotesk-LightItalic.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'HK Grotesk'; font-weight: 300; font-style: italic;">
|
||||
<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>
|
||||
@ -0,0 +1,198 @@
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-SemiBold.woff2') format('woff2'),
|
||||
url('HKGrotesk-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-Italic.woff2') format('woff2'),
|
||||
url('HKGrotesk-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-ExtraBold.woff2') format('woff2'),
|
||||
url('HKGrotesk-ExtraBold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-Regular.woff2') format('woff2'),
|
||||
url('HKGrotesk-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Medium Legacy';
|
||||
src: url('HKGrotesk-MediumLegacy.woff2') format('woff2'),
|
||||
url('HKGrotesk-MediumLegacy.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
src: url('HKGrotesk-LegacyItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-LegacyItalic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
src: url('HKGrotesk-BoldLegacyItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-BoldLegacyItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Light Legacy';
|
||||
src: url('HKGrotesk-LightLegacy.woff2') format('woff2'),
|
||||
url('HKGrotesk-LightLegacy.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-Black.woff2') format('woff2'),
|
||||
url('HKGrotesk-Black.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
src: url('HKGrotesk-BoldLegacy.woff2') format('woff2'),
|
||||
url('HKGrotesk-BoldLegacy.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Light Legacy';
|
||||
src: url('HKGrotesk-LightLegacyItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-LightLegacyItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-Medium.woff2') format('woff2'),
|
||||
url('HKGrotesk-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk SmBold Legacy';
|
||||
src: url('HKGrotesk-SemiBoldLegacyItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-SemiBoldLegacyItalic.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-SemiBoldItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-SemiBoldItalic.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Legacy';
|
||||
src: url('HKGrotesk-RegularLegacy.woff2') format('woff2'),
|
||||
url('HKGrotesk-RegularLegacy.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-BoldItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-BoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-Bold.woff2') format('woff2'),
|
||||
url('HKGrotesk-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk SemiBold Legacy';
|
||||
src: url('HKGrotesk-SemiBoldLegacy.woff2') format('woff2'),
|
||||
url('HKGrotesk-SemiBoldLegacy.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-MediumItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-MediumItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-Light.woff2') format('woff2'),
|
||||
url('HKGrotesk-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk Medium Legacy';
|
||||
src: url('HKGrotesk-MediumLegacyItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-MediumLegacyItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HK Grotesk';
|
||||
src: url('HKGrotesk-LightItalic.woff2') format('woff2'),
|
||||
url('HKGrotesk-LightItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,11 @@
|
||||
class MyHandler extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
beforeParsed(content) {
|
||||
// console.log(content);
|
||||
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(MyHandler);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,373 @@
|
||||
.reset-this {
|
||||
animation: none;
|
||||
animation-delay: 0;
|
||||
animation-direction: normal;
|
||||
animation-duration: 0;
|
||||
animation-fill-mode: none;
|
||||
animation-iteration-count: 1;
|
||||
animation-name: none;
|
||||
animation-play-state: running;
|
||||
animation-timing-function: ease;
|
||||
backface-visibility: visible;
|
||||
background: 0;
|
||||
background-attachment: scroll;
|
||||
background-clip: border-box;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-origin: padding-box;
|
||||
background-position: 0 0;
|
||||
background-position-x: 0;
|
||||
background-position-y: 0;
|
||||
background-repeat: repeat;
|
||||
background-size: auto auto;
|
||||
border: 0;
|
||||
border-style: none;
|
||||
border-width: medium;
|
||||
border-color: inherit;
|
||||
border-bottom: 0;
|
||||
border-bottom-color: inherit;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: medium;
|
||||
border-collapse: separate;
|
||||
border-image: none;
|
||||
border-left: 0;
|
||||
border-left-color: inherit;
|
||||
border-left-style: none;
|
||||
border-left-width: medium;
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
border-right-color: inherit;
|
||||
border-right-style: none;
|
||||
border-right-width: medium;
|
||||
border-spacing: 0;
|
||||
border-top: 0;
|
||||
border-top-color: inherit;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-style: none;
|
||||
border-top-width: medium;
|
||||
bottom: auto;
|
||||
box-shadow: none;
|
||||
box-sizing: content-box;
|
||||
caption-side: top;
|
||||
clear: none;
|
||||
clip: auto;
|
||||
color: inherit;
|
||||
columns: auto;
|
||||
column-count: auto;
|
||||
column-fill: balance;
|
||||
column-gap: normal;
|
||||
column-rule: medium none currentColor;
|
||||
column-rule-color: currentColor;
|
||||
column-rule-style: none;
|
||||
column-rule-width: none;
|
||||
column-span: 1;
|
||||
column-width: auto;
|
||||
content: normal;
|
||||
counter-increment: none;
|
||||
counter-reset: none;
|
||||
cursor: auto;
|
||||
direction: ltr;
|
||||
display: inline;
|
||||
empty-cells: show;
|
||||
float: none;
|
||||
font: normal;
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
height: auto;
|
||||
hyphens: none;
|
||||
left: auto;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: disc;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
opacity: 1;
|
||||
orphans: 0;
|
||||
outline: 0;
|
||||
outline-color: invert;
|
||||
outline-style: none;
|
||||
outline-width: medium;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
padding: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
page-break-after: auto;
|
||||
page-break-before: auto;
|
||||
page-break-inside: auto;
|
||||
perspective: none;
|
||||
perspective-origin: 50% 50%;
|
||||
position: static;
|
||||
/* May need to alter quotes for different locales (e.g fr) */
|
||||
quotes: "\201C""\201D""\2018""\2019";
|
||||
right: auto;
|
||||
tab-size: 8;
|
||||
table-layout: auto;
|
||||
text-align: inherit;
|
||||
text-align-last: auto;
|
||||
text-decoration: none;
|
||||
text-decoration-color: inherit;
|
||||
text-decoration-line: none;
|
||||
text-decoration-style: solid;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
top: auto;
|
||||
transform: none;
|
||||
transform-style: flat;
|
||||
transition: none;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
transition-property: none;
|
||||
transition-timing-function: ease;
|
||||
unicode-bidi: normal;
|
||||
vertical-align: baseline;
|
||||
visibility: visible;
|
||||
white-space: normal;
|
||||
widows: 0;
|
||||
width: auto;
|
||||
word-spacing: normal;
|
||||
z-index: auto;
|
||||
/* basic modern patch */
|
||||
all: initial;
|
||||
all: unset;
|
||||
}
|
||||
|
||||
/* basic modern patch */
|
||||
|
||||
#interface-header {
|
||||
all: initial;
|
||||
}
|
||||
#interface-header * {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("IBMPlex/IBMPlexMono-Text.woff2") format("woff2"),
|
||||
url("IBMPlex/IBMPlexMono-Text.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("IBMPlex/IBMPlexMono-TextItalic.woff2") format("woff2"),
|
||||
url("IBMPlex/IBMPlexMono-TextItalic.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.interface-bar-bottom #interface-header {
|
||||
bottom: 0;
|
||||
top: unset;
|
||||
}
|
||||
#interface-header {
|
||||
width: 100vw;
|
||||
height: var(--pagedjs-header-height);
|
||||
box-sizing: border-box;
|
||||
background-color: #cfcfcf;
|
||||
--color-interface-header: #222;
|
||||
--border-color: #999;
|
||||
--backgroung-button: rgb(195, 195, 195);
|
||||
color: var(--color-interface-header);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 999999999999999999;
|
||||
font-size: 12px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
|
||||
font-family: "IBM Plex Mono";
|
||||
|
||||
box-shadow: 22px 7px 13px 0px rgba(153, 153, 153, 0.57);
|
||||
}
|
||||
|
||||
#interface-header input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* GRID FORM --------------------------------------- */
|
||||
|
||||
#header-group-grid {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
#interface-header .grid-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1ch;
|
||||
}
|
||||
#interface-header .grid-form h1 {
|
||||
font-size: 14px;
|
||||
|
||||
width: 14ch;
|
||||
margin: 0;
|
||||
margin-right: 3ch;
|
||||
}
|
||||
|
||||
#interface-header .grid-form-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 7ch;
|
||||
padding: 3px 0;
|
||||
border: 1px solid var(--color-interface-header);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 0px 0px var(--color-interface-header);
|
||||
margin-right: 5ch;
|
||||
}
|
||||
|
||||
#interface-header .grid-form-label:hover {
|
||||
background-color: var(--backgroung-button);
|
||||
}
|
||||
|
||||
#interface-header .grid-form-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#interface-header .grid-form-values-group {
|
||||
padding-top: 0.8ch;
|
||||
}
|
||||
|
||||
/* BASELINE GROUP --------------------------------------- */
|
||||
|
||||
#interface-header .grid-form input[type="number"] {
|
||||
width: 50px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 0px 0px #9f9f9f;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#size-baseline-form label {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#label-position {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
/* BUTTONS GROUP */
|
||||
|
||||
#header-group-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header-group-right > p {
|
||||
margin-right: 5ch !important;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
color: var(--color-interface-header) !important;
|
||||
position: relative !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1em !important;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/* width: 300px; */
|
||||
}
|
||||
|
||||
#button-print {
|
||||
width: 60px;
|
||||
opacity: 0.2;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#button-print svg {
|
||||
fill: var(--color-interface-header);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#label-preview-toggle svg {
|
||||
fill: var(--color-interface-header);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#label-preview-toggle,
|
||||
#button-print {
|
||||
--buttons-size: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--buttons-size);
|
||||
height: var(--buttons-size);
|
||||
margin-right: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 0px 0px #9f9f9f;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.interface-preview #label-preview-toggle {
|
||||
border: 2px solid var(--color-interface-header);
|
||||
}
|
||||
|
||||
#button-print {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#label-preview-toggle:hover,
|
||||
#button-print:hover {
|
||||
background-color: var(--backgroung-button);
|
||||
}
|
||||
|
||||
#button-print[data-ready="true"] {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media print {
|
||||
#interface-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
|
||||
<div class="reset-this" id="header-group-grid">
|
||||
<form class="reset-this grid-form" id="baseline-form">
|
||||
<div class="reset-this grid-form-header">
|
||||
<h1 class="reset-this">Baseline grid</h1>
|
||||
<input class="reset-this" type="checkbox" id="baseline-toggle" name="baseline-toggle">
|
||||
<label class="reset-this grid-form-label" for="baseline-toggle" id="label-baseline-toggle">See</label>
|
||||
</div>
|
||||
<div class="reset-this grid-form-values-group" id="size-baseline-form">
|
||||
<label class="reset-this" for="size-baseline">Size (px)</label>
|
||||
<input class="reset-this" type="number" id="size-baseline" name="size-baseline" min="1" max="100" value="12">
|
||||
<label class="reset-this" for="position-baseline" id="label-position">Position (px)</label>
|
||||
<input class="reset-this" type="number" id="position-baseline" name="position-baseline" value="0">
|
||||
</div>
|
||||
</form>
|
||||
<form class="reset-this grid-form" id="marginbox-form">
|
||||
<div class="reset-this grid-form-header">
|
||||
<h1 class="reset-this">Margin boxes</h1>
|
||||
<input class="reset-this" type="checkbox" id="marginbox-toggle" name="marginbox-toggle">
|
||||
<label class="reset-this grid-form-label" for="marginbox-toggle" id="label-marginbox-toggle">See</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="reset-this" id="header-group-right">
|
||||
<p class="reset-this"><span id="nrb-pages" class="reset-this"></span> pages</p>
|
||||
<div class="reset-this header-group" id="buttons">
|
||||
<form class="reset-this" id="preview-form">
|
||||
<input class="reset-this" type="checkbox" id="preview-toggle" name="preview-toggle">
|
||||
<label class="reset-this"for="preview-toggle" id="label-preview-toggle">
|
||||
<svg class="reset-this icon-preview" width="100%" height="100%" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polyline fill="none" points=" 649,137.999 675,137.999 675,155.999 661,155.999 " stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><polyline fill="none" points=" 653,155.999 649,155.999 649,141.999 " stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><polyline fill="none" points=" 661,156 653,162 653,156 " stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/></g><g><g><path d="M16,25c-4.265,0-8.301-1.807-11.367-5.088c-0.377-0.403-0.355-1.036,0.048-1.413c0.404-0.377,1.036-0.355,1.414,0.048 C8.778,21.419,12.295,23,16,23c4.763,0,9.149-2.605,11.84-7c-2.69-4.395-7.077-7-11.84-7c-4.938,0-9.472,2.801-12.13,7.493 c-0.272,0.481-0.884,0.651-1.363,0.377c-0.481-0.272-0.649-0.882-0.377-1.363C5.147,10.18,10.333,7,16,7 c5.668,0,10.853,3.18,13.87,8.507c0.173,0.306,0.173,0.68,0,0.985C26.853,21.819,21.668,25,16,25z"/></g><g><path d="M16,21c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S18.757,21,16,21z M16,13c-1.654,0-3,1.346-3,3s1.346,3,3,3 s3-1.346,3-3S17.654,13,16,13z"/></g></g></svg>
|
||||
</label>
|
||||
</form>
|
||||
<button class="reset-this" id="button-print" onclick="window.print()" data-ready="false" data-text="Print">
|
||||
<svg class="reset-this icon-printer" width="100%" height="100%" viewBox="0 0 478 478" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M460.8,119.467L375.467,119.467L375.467,17.067C375.467,7.641 367.826,0 358.4,0L119.467,0C110.041,0 102.4,7.641 102.4,17.067L102.4,119.467L17.067,119.467C7.641,119.467 0,127.108 0,136.533L0,358.4C0,367.826 7.641,375.467 17.067,375.467L102.4,375.467L102.4,460.8C102.4,470.226 110.041,477.867 119.467,477.867L358.4,477.867C367.826,477.867 375.467,470.226 375.467,460.8L375.467,375.467L460.8,375.467C470.226,375.467 477.867,367.826 477.867,358.4L477.867,136.533C477.867,127.108 470.226,119.467 460.8,119.467ZM136.533,34.133L341.333,34.133L341.333,119.466L136.533,119.466L136.533,34.133ZM341.333,443.733L136.533,443.733L136.533,290.133L341.333,290.133L341.333,443.733ZM443.733,341.333L375.466,341.333L375.466,290.133L392.533,290.133C401.959,290.133 409.6,282.492 409.6,273.066C409.6,263.64 401.959,256 392.533,256L85.333,256C75.907,256 68.266,263.641 68.266,273.067C68.266,282.493 75.907,290.134 85.333,290.134L102.4,290.134L102.4,341.334L34.133,341.334L34.133,153.6L443.733,153.6L443.733,341.333Z" style="fill-rule:nonzero;"/><path d="M409.6,187.733L392.533,187.733C383.107,187.733 375.466,195.374 375.466,204.8C375.466,214.226 383.107,221.867 392.533,221.867L409.6,221.867C419.026,221.867 426.667,214.226 426.667,204.8C426.667,195.374 419.026,187.733 409.6,187.733Z" style="fill-rule:nonzero;"/><path d="M290.133,324.267L187.733,324.267C178.307,324.267 170.666,331.908 170.666,341.334C170.666,350.76 178.307,358.401 187.733,358.401L290.133,358.401C299.559,358.401 307.2,350.76 307.2,341.334C307.2,331.908 299.559,324.267 290.133,324.267Z" style="fill-rule:nonzero;"/><path d="M290.133,375.467L187.733,375.467C178.307,375.467 170.666,383.108 170.666,392.534C170.666,401.96 178.307,409.601 187.733,409.601L290.133,409.601C299.559,409.601 307.2,401.96 307.2,392.534C307.2,383.108 299.559,375.467 290.133,375.467Z" style="fill-rule:nonzero;"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
interfaceEvents();
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,195 @@
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
let p = includeHTML();
|
||||
p.then(() => {
|
||||
interfaceEvents();
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
let flowBook = document.querySelector("#book-content");
|
||||
let book_content = flowBook.content;
|
||||
let paged = new Paged.Previewer();
|
||||
paged.preview(book_content, ["style-print.css"], document.querySelector("#renderbook")).then((flow) => {
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function interfaceEvents(){
|
||||
|
||||
let body = document.getElementsByTagName("body")[0];
|
||||
|
||||
|
||||
// set a "unique" filename based on title element, in case several books are opened
|
||||
var fileTitle = document.getElementsByTagName("title")[0].text;
|
||||
|
||||
/* BASELINE ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
/* Set baseline onload */
|
||||
let baselineToggle = localStorage.getItem('baselineToggle' + fileTitle);
|
||||
let baselineButton = document.querySelector('#label-baseline-toggle');
|
||||
let baselineSize = localStorage.getItem('baselineSize' + fileTitle);
|
||||
let baselinePosition = localStorage.getItem('baselinePosition');
|
||||
let baselineSizeInput = document.querySelector('#size-baseline');
|
||||
let baselinePositionInput = document.querySelector('#position-baseline');
|
||||
|
||||
if(baselineToggle == "no-baseline"){
|
||||
body.classList.add('no-baseline');
|
||||
baselineButton.innerHTML = "see";
|
||||
}else if(baselineToggle == "baseline"){
|
||||
body.classList.remove('no-baseline');
|
||||
document.querySelector("#baseline-toggle").checked = "checked";
|
||||
baselineButton.innerHTML = "hide";
|
||||
}else{
|
||||
body.classList.add('no-baseline');
|
||||
localStorage.setItem('baselineToggle' + fileTitle, 'no-baseline');
|
||||
baselineButton.innerHTML = "see";
|
||||
}
|
||||
|
||||
/* Get baseline size and position on load*/
|
||||
if(baselineSize){
|
||||
baselineSizeInput.value = baselineSize;
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline', baselineSize + 'px');
|
||||
}else{
|
||||
localStorage.setItem('baselineSize' + fileTitle, baselineSizeInput.value);
|
||||
}
|
||||
baselinePositionInput.addEventListener("input", (e) => {
|
||||
});
|
||||
if(baselinePosition){
|
||||
baselinePositionInput.value = baselinePosition;
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline-position', baselinePosition + 'px');
|
||||
}else{
|
||||
localStorage.setItem('baselineSPosition', baselinePositionInput.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Toggle baseline */
|
||||
document.querySelector("#baseline-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* see baseline */
|
||||
body.classList.remove('no-baseline');
|
||||
localStorage.setItem('baselineToggle' + fileTitle, 'baseline');
|
||||
baselineButton.innerHTML = "hide";
|
||||
}else{
|
||||
/* hide baseline */
|
||||
body.classList.add('no-baseline');
|
||||
localStorage.setItem('baselineToggle' + fileTitle, 'no-baseline');
|
||||
baselineButton.innerHTML = "see";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Change baseline size on input */
|
||||
document.querySelector("#size-baseline").addEventListener("input", (e) => {
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline', e.target.value + 'px');
|
||||
localStorage.setItem('baselineSize' + fileTitle, baselineSizeInput.value);
|
||||
});
|
||||
|
||||
|
||||
/* Change baseline position on input */
|
||||
document.querySelector("#position-baseline").addEventListener("input", (e) => {
|
||||
document.documentElement.style.setProperty('--pagedjs-baseline-position', e.target.value + 'px');
|
||||
localStorage.setItem('baselinePosition', baselinePositionInput.value);
|
||||
});
|
||||
|
||||
|
||||
/* MARGIN BOXES ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
let marginButton = document.querySelector('#label-marginbox-toggle');
|
||||
|
||||
body.classList.add('no-marginboxes');
|
||||
|
||||
document.querySelector("#marginbox-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* see baseline */
|
||||
body.classList.remove('no-marginboxes');
|
||||
marginButton.innerHTML = "hide";
|
||||
}else{
|
||||
/* hide baseline */
|
||||
body.classList.add('no-marginboxes');
|
||||
marginButton.innerHTML = "see";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Preview ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
document.querySelector("#preview-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* preview mode */
|
||||
body.classList.add('interface-preview');
|
||||
}else{
|
||||
body.classList.remove('interface-preview');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function includeHTML() {
|
||||
var z, i, file, xhttp;
|
||||
/* Loop through a collection of all HTML elements: */
|
||||
/*search for elements with a certain atrribute:*/
|
||||
let elmnt = document.getElementById("interface-header")
|
||||
file = elmnt.getAttribute("w3-include-html");
|
||||
let a = new Promise((resolve, reject) => {
|
||||
if (file) {
|
||||
/* Make an HTTP request using the attribute value as the file name: */
|
||||
xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
|
||||
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
|
||||
/* Remove the attribute, and call this function once more: */
|
||||
elmnt.removeAttribute("w3-include-html");
|
||||
resolve();
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", file, true);
|
||||
xhttp.send();
|
||||
/* Exit the function: */
|
||||
return;
|
||||
}
|
||||
});
|
||||
return a;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class interfacePaged extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken){
|
||||
let nbr = page.id.replace('page-', '');
|
||||
let span = document.querySelector("#nrb-pages");
|
||||
span.innerHTML = nbr;
|
||||
}
|
||||
|
||||
|
||||
afterRendered(pages){
|
||||
let print = document.querySelector("#button-print");
|
||||
print.dataset.ready = 'true';
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(interfacePaged);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,116 @@
|
||||
// Reload-in-place v1.3
|
||||
// Nicolas Taffin + Sameh Chafik - 2020
|
||||
// MIT License https://opensource.org/licenses/MIT
|
||||
// A simple script to add your pagedjs project. On reload, it will make the web browser scroll to the place it was before reload.
|
||||
// Useful when styling or proof correcting your book. Multi docs compatible and doesn't wait for complete compilation to go.
|
||||
|
||||
|
||||
// console.log("reload in place");
|
||||
|
||||
|
||||
// separate human / machine scroll
|
||||
var machineScroll = false;
|
||||
|
||||
// check pagedJS ended compilation
|
||||
var pagedjsEnd = false;
|
||||
|
||||
class pagedjsEnded extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
afterRendered(pages) {
|
||||
pagedjsEnd = true;
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(pagedjsEnded);
|
||||
|
||||
// set a "unique" filename based on title element, in case several books are opened
|
||||
var fileTitle = document.getElementsByTagName("title")[0].text;
|
||||
|
||||
function getDocHeight() {
|
||||
var D = document;
|
||||
return Math.max(
|
||||
D.body.scrollHeight, D.documentElement.scrollHeight,
|
||||
D.body.offsetHeight, D.documentElement.offsetHeight,
|
||||
D.body.clientHeight, D.documentElement.clientHeight
|
||||
)
|
||||
}
|
||||
function saveAmountScrolled(){
|
||||
var scrollArray = [];
|
||||
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
|
||||
if (!machineScroll) {
|
||||
var scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft
|
||||
scrollArray.push({ X: Math.round(scrollLeft), Y: Math.round(scrollTop) });
|
||||
// console.log("Saved ", scrollArray);
|
||||
localStorage[fileTitle] = JSON.stringify(scrollArray);
|
||||
}
|
||||
}
|
||||
|
||||
// on Load, blur or opacify the page, and try to join ASAP
|
||||
// last saved position, or at least last compiled page
|
||||
|
||||
window.onload = function() {
|
||||
machineScroll= true;
|
||||
var styleEl = document.createElement('style');
|
||||
document.head.appendChild(styleEl);
|
||||
var styleSheet = styleEl.sheet;
|
||||
// uncomment one of the two options :
|
||||
// nice but high calculation usage : blur until scrolled
|
||||
styleSheet.insertRule('.pagedjs_pages { filter: blur(4px); }', 0);
|
||||
// less power consumption: low opacity until scrolled
|
||||
//styleSheet.insertRule('.pagedjs_pages { opacity: 0.3; }', 0);
|
||||
var savedData = localStorage.getItem(fileTitle);
|
||||
if (savedData) {
|
||||
var scrollArray = JSON.parse(savedData);
|
||||
var scrollTop = scrollArray[0].Y;
|
||||
var scrollLeft = scrollArray[0].X;
|
||||
} else {
|
||||
var scrollTop = 0;
|
||||
var scrollLeft = 0;
|
||||
}
|
||||
var winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
|
||||
window.currentInterval = setInterval(function(){
|
||||
var docheight = getDocHeight();
|
||||
|
||||
if ( scrollTop > 0 && scrollTop > docheight - winheight && !pagedjsEnd) {
|
||||
window.scrollTo(scrollLeft,docheight);
|
||||
} else {
|
||||
window.scrollTo(scrollLeft,scrollTop);
|
||||
clearInterval(window.currentInterval);
|
||||
setTimeout(function(){
|
||||
window.scrollTo(scrollLeft,scrollTop);
|
||||
machineScroll = false;
|
||||
styleSheet.deleteRule(0);
|
||||
}, 100);
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
|
||||
// slow down a bit save position pace
|
||||
|
||||
var slowSave = debounce(function() {
|
||||
if(!machineScroll) {
|
||||
saveAmountScrolled();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
// Scroll triggers save, but not immediately on load
|
||||
|
||||
setTimeout(function(){
|
||||
window.addEventListener('scroll', slowSave);
|
||||
}, 1000);
|
||||
@ -0,0 +1,255 @@
|
||||
let classNotes = "margin-note"; // ← Change the CLASS of the notes here
|
||||
let notesFloat = "outside"; // ← Change the POSITION of the notes here
|
||||
|
||||
class marginNotes extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
|
||||
}
|
||||
|
||||
beforeParsed(content) {
|
||||
|
||||
let notes = content.querySelectorAll("." + classNotes);
|
||||
|
||||
|
||||
for (let i = 0; i < notes.length; ++i) {
|
||||
|
||||
// Add call notes
|
||||
var spanCall = document.createElement("span");
|
||||
spanCall.classList.add("note-call");
|
||||
spanCall.classList.add("note-call_" + classNotes);
|
||||
spanCall.dataset.noteCall = classNotes + '-' + i + 1;
|
||||
notes[i].parentNode.insertBefore(spanCall, notes[i]);
|
||||
|
||||
// Add marker notes
|
||||
var spanMarker = document.createElement("span");
|
||||
spanMarker.classList.add("note-marker");
|
||||
spanMarker.classList.add("note-marker_" + classNotes);
|
||||
spanMarker.dataset.noteMarker = classNotes + '-' + i + 1;
|
||||
notes[i].prepend(spanMarker);
|
||||
|
||||
|
||||
// Hide notes to avoid rendering problems
|
||||
notes[i].style.display = "none";
|
||||
}
|
||||
|
||||
|
||||
/* NOTE FLOAT ---------------------------------------------------------------------------------- */
|
||||
|
||||
let positionRight = 'left: calc(var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right) - 1px); width: var(--pagedjs-margin-right);';
|
||||
let positionLeft = 'left: calc(var(--pagedjs-margin-left)*-1 - 1px); width: var(--pagedjs-margin-left);'
|
||||
|
||||
let notePosition;
|
||||
|
||||
switch (notesFloat) {
|
||||
case 'inside':
|
||||
notePosition = '.pagedjs_left_page .' + classNotes + '{' + positionRight + '} \
|
||||
.pagedjs_right_page .' + classNotes + '{' + positionLeft + '}';
|
||||
break;
|
||||
case 'left':
|
||||
notePosition = '.pagedjs_left_page .' + classNotes + '{' + positionLeft + '} \
|
||||
.pagedjs_right_page .' + classNotes + '{' + positionLeft + '}';
|
||||
break;
|
||||
case 'right':
|
||||
notePosition = '.pagedjs_left_page .' + classNotes + '{' + positionRight + '} \
|
||||
.pagedjs_right_page .' + classNotes + '{' + positionRight + '}';
|
||||
break;
|
||||
default:
|
||||
notePosition = '.pagedjs_left_page .' + classNotes + '{' + positionLeft + '} \
|
||||
.pagedjs_right_page .' + classNotes + '{' + positionRight + '}';
|
||||
}
|
||||
|
||||
|
||||
/* SPECIFIC CSS ---------------------------------------------------------------------------------- */
|
||||
|
||||
addcss('\
|
||||
body {\
|
||||
counter-reset: callNote_' + toCamelClassNote(classNotes) + ' markerNote_' + toCamelClassNote(classNotes) + ';\
|
||||
}\
|
||||
\
|
||||
.' + classNotes + '{\
|
||||
position: absolute;\
|
||||
text-align-last: initial;\
|
||||
box-sizing: border-box;\
|
||||
}\
|
||||
\
|
||||
.note-call_' + classNotes + ' {\
|
||||
counter-increment: callNote_' + toCamelClassNote(classNotes) + ';\
|
||||
}\
|
||||
\
|
||||
.note-call_' + classNotes + '::after {\
|
||||
content: counter(callNote_' + toCamelClassNote(classNotes) + ');\
|
||||
}\
|
||||
\
|
||||
.note-marker_' + classNotes + ' {\
|
||||
counter-increment: markerNote_' + toCamelClassNote(classNotes) + ';\
|
||||
}\
|
||||
.note-marker_' + classNotes + '::before {\
|
||||
content: counter(markerNote_' + toCamelClassNote(classNotes) + ') ". ";\
|
||||
}\
|
||||
' + notePosition);
|
||||
|
||||
|
||||
} /* end beforeParsed*/
|
||||
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
let notes = pageElement.querySelectorAll("." + classNotes);
|
||||
let noteOverflow = false;
|
||||
|
||||
let notesHeightAll = [];
|
||||
|
||||
if (typeof (notes) != 'undefined' && notes != null && notes.length != 0) {
|
||||
|
||||
for (let n = 0; n < notes.length; ++n) {
|
||||
// Display notes of the page
|
||||
notes[n].style.display = "inline-block";
|
||||
// Add height of the notes to array notesHeightAll
|
||||
let noteHeight = notes[n].offsetHeight;
|
||||
notesHeightAll.push(noteHeight);
|
||||
// Add margins of the notes to array notesHeightAll
|
||||
if (n >= 1) {
|
||||
let margins = biggestMargin(notes[n - 1], notes[n]);
|
||||
notesHeightAll.push(margins);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* FIT PAGE ------------------------------------------------------------------------------------- */
|
||||
|
||||
// Calculate if all notes fit on the page;
|
||||
let reducer = (accumulator, currentValue) => accumulator + currentValue;
|
||||
let allHeight = notesHeightAll.reduce(reducer);
|
||||
let maxHeight = pageElement.querySelectorAll(".pagedjs_page_content")[0].offsetHeight;
|
||||
|
||||
if (allHeight > maxHeight) {
|
||||
|
||||
/* IF DOESN'T FIT ----------------------------------------------------------------------------- */
|
||||
|
||||
// positions all the notes one after the other starting from the top
|
||||
notes[0].style.top = parseInt(window.getComputedStyle(notes[0]).marginBottom, 10) * -1 + "px";
|
||||
for (let a = 1; a < notes.length; ++a) {
|
||||
let notePrev = notes[a - 1];
|
||||
let newMargin = biggestMargin(notePrev, notes[a]);
|
||||
let newTop = notePrev.offsetTop + notePrev.offsetHeight - marginNoteTop(notes[a]) + newMargin;
|
||||
notes[a].style.top = newTop + "px";
|
||||
}
|
||||
// alert
|
||||
let pageNumber = pageElement.dataset.pageNumber;
|
||||
alert("Rendering issue \n ☞ A marginal note overflow on page " + pageNumber + " (this is because there is too many on this page and paged.js can't breaks notes between pages for now.)");
|
||||
noteOverflow = true;
|
||||
|
||||
} else {
|
||||
|
||||
/* PUSH DOWN ---------------------------------------------------- */
|
||||
for (let i = 0; i < notes.length; ++i) {
|
||||
if (i >= 1) {
|
||||
let noteTop = notes[i].offsetTop;
|
||||
let notePrev = notes[i - 1];
|
||||
let newMargin = biggestMargin(notes[i], notePrev);
|
||||
let notePrevBottom = notePrev.offsetTop - marginNoteTop(notePrev) + notePrev.offsetHeight + newMargin;
|
||||
// Push down the note to bottom if it's over the previous one
|
||||
if (notePrevBottom > noteTop) {
|
||||
notes[i].style.top = notePrevBottom + "px";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* PUSH UP ---------------------------------------------- */
|
||||
|
||||
// Height of the page content
|
||||
let contentHeight = pageElement.querySelectorAll(".pagedjs_page_content")[0].querySelectorAll("div")[0].offsetHeight;
|
||||
|
||||
// Check if last note overflow
|
||||
let nbrLength = notes.length - 1;
|
||||
let lastNote = notes[nbrLength];
|
||||
let lastNoteHeight = lastNote.offsetHeight + marginNoteTop(lastNote);
|
||||
let noteBottom = lastNote.offsetTop + lastNoteHeight;
|
||||
|
||||
if (noteBottom > contentHeight) {
|
||||
|
||||
// Push up the last note
|
||||
lastNote.style.top = contentHeight - lastNoteHeight + "px";
|
||||
|
||||
// Push up previous note(s) if if it's over the note
|
||||
for (let i = nbrLength; i >= 1; --i) {
|
||||
let noteLastTop = notes[i].offsetTop;
|
||||
let notePrev = notes[i - 1];
|
||||
let notePrevHeight = notePrev.offsetHeight;
|
||||
let newMargin = biggestMargin(notePrev, notes[i]);
|
||||
let notePrevBottom = notePrev.offsetTop + notePrev.offsetHeight + newMargin;
|
||||
if (notePrevBottom > noteLastTop) {
|
||||
notePrev.style.top = notes[i].offsetTop - marginNoteTop(notePrev) - notePrevHeight - newMargin + "px";
|
||||
}
|
||||
}
|
||||
|
||||
} /* end push up */
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}/* end afterPageLayout*/
|
||||
|
||||
}
|
||||
Paged.registerHandlers(marginNotes);
|
||||
|
||||
|
||||
|
||||
/* FUNCTIONS --------------------------------------------------------------------------------------
|
||||
--------------------------------------------------------------------------------------------------- */
|
||||
|
||||
// MARGINS
|
||||
|
||||
function marginNoteTop(elem) {
|
||||
let marginTop = parseInt(window.getComputedStyle(elem).marginTop, 10)
|
||||
return marginTop;
|
||||
}
|
||||
|
||||
function marginNoteBottom(elem) {
|
||||
let marginBottom = parseInt(window.getComputedStyle(elem).marginBottom, 10)
|
||||
return marginBottom;
|
||||
}
|
||||
|
||||
function biggestMargin(a, b) {
|
||||
let margin;
|
||||
let marginBottom = marginNoteBottom(a);
|
||||
let marginTop = marginNoteTop(b);
|
||||
if (marginBottom > marginTop) {
|
||||
margin = marginBottom;
|
||||
} else {
|
||||
margin = marginTop;
|
||||
}
|
||||
return margin;
|
||||
}
|
||||
|
||||
|
||||
// ADD CSS
|
||||
|
||||
function addcss(css) {
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var s = document.createElement('style');
|
||||
s.setAttribute('type', 'text/css');
|
||||
if (s.styleSheet) { // IE
|
||||
s.styleSheet.cssText = css;
|
||||
} else {// the world
|
||||
s.appendChild(document.createTextNode(css));
|
||||
}
|
||||
head.appendChild(s);
|
||||
}
|
||||
|
||||
|
||||
// CAMEL CLASS NOTE
|
||||
|
||||
function toCamelClassNote(elem) {
|
||||
let splitClass = elem.split("-");
|
||||
if (splitClass.length > 1) {
|
||||
for (let s = 1; s < splitClass.length; ++s) {
|
||||
let strCapilize = splitClass[s].charAt(0).toUpperCase() + splitClass[s].slice(1)
|
||||
splitClass[s] = strCapilize;
|
||||
}
|
||||
}
|
||||
let reducer = (accumulator, currentValue) => accumulator + currentValue;
|
||||
let classCamel = splitClass.reduce(reducer);
|
||||
return classCamel;
|
||||
}
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
:root{
|
||||
--pantone1: #7C3BC8;
|
||||
--baseline: 5mm;
|
||||
--margin-left: 40mm;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'youngserif';
|
||||
src: url('/fonts/youngserif/youngserif-regular.woff') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media print{
|
||||
|
||||
@page{
|
||||
size: 145mm 210mm;
|
||||
bleed: 5mm;
|
||||
marks: crop cross;
|
||||
margin: 10mm 10mm 20mm 50mm;
|
||||
@bottom{
|
||||
color: var(--pantone1);
|
||||
font-weight: 600;
|
||||
}
|
||||
@bottom-right{
|
||||
color: var(--pantone1);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
content: counter(page);
|
||||
text-align: right;
|
||||
}
|
||||
@bottom-left{
|
||||
color: var(--pantone1);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
content: "La pratique de l'enquête ⟶" string(title);
|
||||
position: relative;
|
||||
left: -40mm;
|
||||
overflow: visible;
|
||||
width: 80mm;
|
||||
/* width: calc(100% + 40mm); */
|
||||
/* text-align: right; */
|
||||
}
|
||||
/* @bottom-left::after{width: 80mm} */
|
||||
}
|
||||
|
||||
}
|
||||
body{
|
||||
font-family: 'HK Grotesk', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: var(--baseline);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
font-family: 'youngserif', serif;
|
||||
color: var(--pantone1);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 48pt;
|
||||
line-height: calc(4 * var(--baseline));
|
||||
position: relative;
|
||||
top: -1.75mm;
|
||||
left: -40mm;
|
||||
width: calc(100% + 40mm);
|
||||
string-set: title content(text);
|
||||
}
|
||||
h3{
|
||||
font-size: 15pt;
|
||||
line-height: calc(2 * var(--baseline));
|
||||
position: relative;
|
||||
top: -2mm;
|
||||
margin-bottom:10mm;
|
||||
left: -40mm;
|
||||
width: calc(100% + 40mm);
|
||||
}
|
||||
.margin-note{
|
||||
/* color: var(--pantone1) */
|
||||
line-height: 3.75mm;
|
||||
padding: 0 5mm;
|
||||
text-align: left;
|
||||
}
|
||||
.note-call::after{
|
||||
|
||||
/* height: 0; */
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0 0 5mm;
|
||||
position: relative;
|
||||
top: 1.2mm;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
sup{
|
||||
color: var(--pantone1);
|
||||
line-height: 0.5;
|
||||
}
|
||||
#image{
|
||||
max-width: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue