-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (164 loc) · 21.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Forma DJR Mono</title>
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/main.css">
<link href="css/flapper.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/dist/jquery.transform-0.9.3.min.js"></script>
<script src="jshashtable-2.1/jshashtable.js"></script>
<script src="numberformatter/jquery.numberformatter-1.2.3.min.js"></script>
<script src="js/jquery.flapper.js"></script>
</head>
<body>
<section class="flapper-container">
<a class="cta-link" href="#">Try</a>
<a class="cta-link right" href="#"> Buy</a>
<div class="flapper">
<input class="header dark XXL" id="display" />
<input class="header dark XXL" id="display2" />
</div>
<div class="bottom-cta">
<a class="cta-link" href="#">PDF</a>
<a class="cta-link right" href="#">DJR</a>
</div>
</section>
<section class="content-container">
<div class="content-text">
<h2 class="content-emphasis">Kinda like helvetica,
except for absolutely everything about it</h2>
</div>
<div class="content-text">
<div class="text-block right">
<p>Originally released in 1968, Forma was the Italian type foundry Nebiolo’s answer to Helvetica. It was created by a team of eight designers, led by the legendary Aldo Novarese, that Nebiolo assembled to design a more mature and humane neo-grotesque. As a result, Forma’s rationality is tempered by its warmth, and its trademark single-story a sets it apart from the rest.
</p>
<p>Issued in metal over a decade after Helvetica and Univers, Forma was relatively late to the neutral sans serif game. It never made the jump to phototypesetting and virtually disappeared after Nebiolo closed its doors in 1978. However, publications designer Roger Black always continued to admire the design, and in 2013 asked me to revive it for his redesign of Hong Kong Tatler magazine.</p>
</div>
</div>
<figure class="content-image">
<img src="images/comic3.svg" style="background-color: White"/>
<figcaption>Original cartoon by Giorgio Cavallo showing Forma. From 'Qui Nebiolo' 10 (1969).</figcaption>
</figure>
<figure class="content-image">
<img src="images/comic1.svg" style="background-color: White"/>
</figure>
<div class="content-text">
<div class="text-block">
<p>Forma DJR embodies the peculiar collision of midcentury modernist precision and the smudgy realities of metal, ink, and paper. This revival is not based on Forma’s original drawings, nor does it try to truly capture its designers’ original intent. Instead it brings new life to a bygone typographic era, and seeks to recapture everything that Roger has loved about Forma for so long.
</p>
<p>Expert type hunter Indra Kupferschmid obtained a casting of the original Forma in lead, and printed fresh proofs for us to use as source material for our revival. We found that many of the most interesting details were not present in Forma’s original drawings, but were instead byproducts of the printing process. Stems that were supposed to be straight swelled at either end. Corners that were supposed to be sharp were rounded. We believe that Forma comes alive in these unintentional details, and worked to incorporate subtle bits of unevenness into our digital interpretation.
</p>
</div>
</div>
<div class="content-text">
<h2 class="content-emphasis right">Seeking the warmth of the printed page.</h2>
</div>
</section>
<section class="content-container placeholder">
Time Table will go here
</section>
<section class="content-container">
<div class="waterfall">
<div class="controls">
<form>
<select id="style">
<option data-weight="100" data-style="normal">Forma DJR Mono Light</option>
<option data-weight="100" data-style="italic">Forma DJR Mono Light Italic</option>
<option data-weight="400" data-style="normal">Forma DJR Mono Regular</option>
<option data-weight="400" data-style="italic">Forma DJR Mono Regular Italic</option>
<option data-weight="700" data-style="normal">Forma DJR Mono Bold</option>
<option data-weight="700" data-style="italic">Forma DJR Mono Bold Italic</option>
</select>
<label for="weightRange" class="waterfall-label">weight</label>
<!-- this will be a slider -->
<input type="range" value="0" min="100" max="700" id="weightRange" />
<!--button id="italicToggle" class="textButton">italic</button-->
<label for="italicRange" class="waterfall-label">italic </label>
<input type="range" value="0" min="0" max="100" id="italicRange" />
<!--select id="italicness">
<option data-italicness="0">0</option>
<option data-italicness="0.5">50</option>
<option data-italicness="1">100</option>
</select>-->
features
<select id="features">
<option>feature 1</option>
<option>feature 2</option>
<option>feature 3</option>
</select>
<button id="uppercaseToggle" class="textButton">uppercase</button>
<!--secret checkbox goodness maybe on state becomes uppercase/italic with another visual change?/ -->
</form>
</div>
<div class="example-text">
Waterfall
</div>
</div>
</section>
<section class="content-container">
<h2 class="heading">Character Set</h2>
<div class="glyphset-container">
<div class="glyph">A</div><div class="glyph">Á</div><div class="glyph">Ă</div><div class="glyph">Ắ</div><div class="glyph">Ặ</div><div class="glyph">Ằ</div><div class="glyph">Ẳ</div><div class="glyph">Ẵ</div><div class="glyph">Â</div><div class="glyph">Ấ</div><div class="glyph">Ậ</div><div class="glyph">Ầ</div><div class="glyph">Ẩ</div><div class="glyph">Ẫ</div><div class="glyph">Ä</div><div class="glyph">Ạ</div><div class="glyph">À</div><div class="glyph">Ả</div><div class="glyph">Ā</div><div class="glyph">Ą</div><div class="glyph">Å</div><div class="glyph">Ã</div><div class="glyph">Æ</div><div class="glyph">B</div><div class="glyph">C</div><div class="glyph">Ć</div><div class="glyph">Č</div><div class="glyph">Ç</div><div class="glyph">Ĉ</div><div class="glyph">Ċ</div><div class="glyph">D</div><div class="glyph">Ð</div><div class="glyph">Ď</div><div class="glyph">Đ</div><div class="glyph">Ḍ</div><div class="glyph">Ḏ</div><div class="glyph">E</div><div class="glyph">É</div><div class="glyph">Ĕ</div><div class="glyph">Ě</div><div class="glyph">Ê</div><div class="glyph">Ế</div><div class="glyph">Ệ</div><div class="glyph">Ề</div><div class="glyph">Ể</div><div class="glyph">Ễ</div><div class="glyph">Ë</div><div class="glyph">Ė</div><div class="glyph">Ẹ</div><div class="glyph">È</div><div class="glyph">Ẻ</div><div class="glyph">Ē</div><div class="glyph">Ę</div><div class="glyph">Ẽ</div><div class="glyph">F</div><div class="glyph">G</div><div class="glyph">Ğ</div><div class="glyph">Ĝ</div><div class="glyph">Ģ</div><div class="glyph">Ġ</div><div class="glyph">H</div><div class="glyph">Ħ</div><div class="glyph">Ĥ</div><div class="glyph">Ḥ</div><div class="glyph">I</div><div class="glyph">IJ</div><div class="glyph">Í</div><div class="glyph">Ĭ</div><div class="glyph">Î</div><div class="glyph">Ï</div><div class="glyph">İ</div><div class="glyph">Ị</div><div class="glyph">Ì</div><div class="glyph">Ỉ</div><div class="glyph">Ī</div><div class="glyph">Į</div><div class="glyph">Ĩ</div><div class="glyph">J</div><div class="glyph">Ĵ</div><div class="glyph">K</div><div class="glyph">Ķ</div><div class="glyph">L</div><div class="glyph">Ĺ</div><div class="glyph">Ľ</div><div class="glyph">Ļ</div><div class="glyph">Ŀ</div><div class="glyph">Ł</div><div class="glyph">M</div><div class="glyph">N</div><div class="glyph">Ń</div><div class="glyph">Ň</div><div class="glyph">Ņ</div><div class="glyph">Ñ</div><div class="glyph">Ŋ</div><div class="glyph">O</div><div class="glyph">Ó</div><div class="glyph">Ŏ</div><div class="glyph">Ô</div><div class="glyph">Ố</div><div class="glyph">Ộ</div><div class="glyph">Ồ</div><div class="glyph">Ổ</div><div class="glyph">Ỗ</div><div class="glyph">Ö</div><div class="glyph">Ọ</div><div class="glyph">Ò</div><div class="glyph">Ỏ</div><div class="glyph">Ơ</div><div class="glyph">Ớ</div><div class="glyph">Ợ</div><div class="glyph">Ờ</div><div class="glyph">Ở</div><div class="glyph">Ỡ</div><div class="glyph">Ő</div><div class="glyph">Ō</div><div class="glyph">Ø</div><div class="glyph">Õ</div><div class="glyph">Œ</div><div class="glyph">P</div><div class="glyph">Þ</div><div class="glyph">Q</div><div class="glyph">R</div><div class="glyph">Ŕ</div><div class="glyph">Ř</div><div class="glyph">Ŗ</div><div class="glyph">S</div><div class="glyph">Ś</div><div class="glyph">Š</div><div class="glyph">Ş</div><div class="glyph">Ŝ</div><div class="glyph">Ș</div><div class="glyph">Ṣ</div><div class="glyph">T</div><div class="glyph">Ŧ</div><div class="glyph">Ť</div><div class="glyph">Ţ</div><div class="glyph">Ț</div><div class="glyph">U</div><div class="glyph">Ú</div><div class="glyph">Ŭ</div><div class="glyph">Û</div><div class="glyph">Ü</div><div class="glyph">Ụ</div><div class="glyph">Ù</div><div class="glyph">Ủ</div><div class="glyph">Ư</div><div class="glyph">Ứ</div><div class="glyph">Ự</div><div class="glyph">Ừ</div><div class="glyph">Ử</div><div class="glyph">Ữ</div><div class="glyph">Ű</div><div class="glyph">Ū</div><div class="glyph">Ų</div><div class="glyph">Ů</div><div class="glyph">Ũ</div><div class="glyph">V</div><div class="glyph">W</div><div class="glyph">Ẃ</div><div class="glyph">Ŵ</div><div class="glyph">Ẅ</div><div class="glyph">Ẁ</div><div class="glyph">X</div><div class="glyph">Y</div><div class="glyph">Ý</div><div class="glyph">Ŷ</div><div class="glyph">Ÿ</div><div class="glyph">Ỵ</div><div class="glyph">Ỳ</div><div class="glyph">Ỷ</div><div class="glyph">Ỹ</div><div class="glyph">Z</div><div class="glyph">Ź</div><div class="glyph">Ž</div><div class="glyph">Ż</div><div class="glyph">Ẓ</div><div class="glyph">a</div><div class="glyph">á</div><div class="glyph">ă</div><div class="glyph">ắ</div><div class="glyph">ặ</div><div class="glyph">ằ</div><div class="glyph">ẳ</div><div class="glyph">ẵ</div><div class="glyph">â</div><div class="glyph">ấ</div><div class="glyph">ậ</div><div class="glyph">ầ</div><div class="glyph">ẩ</div><div class="glyph">ẫ</div><div class="glyph">ä</div><div class="glyph">ạ</div><div class="glyph">à</div><div class="glyph">ả</div><div class="glyph">ā</div><div class="glyph">ą</div><div class="glyph">å</div><div class="glyph">ã</div><div class="glyph">æ</div><div class="glyph">b</div><div class="glyph">c</div><div class="glyph">ć</div><div class="glyph">č</div><div class="glyph">ç</div><div class="glyph">ĉ</div><div class="glyph">ċ</div><div class="glyph">d</div><div class="glyph">ð</div><div class="glyph">ď</div><div class="glyph">đ</div><div class="glyph">ḍ</div><div class="glyph">ḏ</div><div class="glyph">e</div><div class="glyph">é</div><div class="glyph">ĕ</div><div class="glyph">ě</div><div class="glyph">ê</div><div class="glyph">ế</div><div class="glyph">ệ</div><div class="glyph">ề</div><div class="glyph">ể</div><div class="glyph">ễ</div><div class="glyph">ë</div><div class="glyph">ė</div><div class="glyph">ẹ</div><div class="glyph">è</div><div class="glyph">ẻ</div><div class="glyph">ē</div><div class="glyph">ę</div><div class="glyph">ẽ</div><div class="glyph">ə</div><div class="glyph">f</div><div class="glyph">g</div><div class="glyph">ğ</div><div class="glyph">ĝ</div><div class="glyph">ģ</div><div class="glyph">ġ</div><div class="glyph">h</div><div class="glyph">ħ</div><div class="glyph">ĥ</div><div class="glyph">ḥ</div><div class="glyph">i</div><div class="glyph">ı</div><div class="glyph">í</div><div class="glyph">ĭ</div><div class="glyph">î</div><div class="glyph">ï</div><div class="glyph">ị</div><div class="glyph">ì</div><div class="glyph">ỉ</div><div class="glyph">ij</div><div class="glyph">ī</div><div class="glyph">į</div><div class="glyph">ĩ</div><div class="glyph">j</div><div class="glyph">ȷ</div><div class="glyph">ĵ</div><div class="glyph">k</div><div class="glyph">ķ</div><div class="glyph">l</div><div class="glyph">ĺ</div><div class="glyph">ľ</div><div class="glyph">ļ</div><div class="glyph">ŀ</div><div class="glyph">ł</div><div class="glyph">m</div><div class="glyph">n</div><div class="glyph">ń</div><div class="glyph">ň</div><div class="glyph">ņ</div><div class="glyph">ñ</div><div class="glyph">ŋ</div><div class="glyph">o</div><div class="glyph">ó</div><div class="glyph">ŏ</div><div class="glyph">ô</div><div class="glyph">ố</div><div class="glyph">ộ</div><div class="glyph">ồ</div><div class="glyph">ổ</div><div class="glyph">ỗ</div><div class="glyph">ö</div><div class="glyph">ọ</div><div class="glyph">ò</div><div class="glyph">ỏ</div><div class="glyph">ơ</div><div class="glyph">ớ</div><div class="glyph">ợ</div><div class="glyph">ờ</div><div class="glyph">ở</div><div class="glyph">ỡ</div><div class="glyph">ő</div><div class="glyph">ō</div><div class="glyph">ø</div><div class="glyph">õ</div><div class="glyph">œ</div><div class="glyph">p</div><div class="glyph">þ</div><div class="glyph">q</div><div class="glyph">r</div><div class="glyph">ŕ</div><div class="glyph">ř</div><div class="glyph">ŗ</div><div class="glyph">s</div><div class="glyph">ś</div><div class="glyph">š</div><div class="glyph">ş</div><div class="glyph">ŝ</div><div class="glyph">ș</div><div class="glyph">ṣ</div><div class="glyph">ß</div><div class="glyph">t</div><div class="glyph">ŧ</div><div class="glyph">ť</div><div class="glyph">ţ</div><div class="glyph">ț</div><div class="glyph">u</div><div class="glyph">ú</div><div class="glyph">ŭ</div><div class="glyph">û</div><div class="glyph">ü</div><div class="glyph">ụ</div><div class="glyph">ù</div><div class="glyph">ủ</div><div class="glyph">ư</div><div class="glyph">ứ</div><div class="glyph">ự</div><div class="glyph">ừ</div><div class="glyph">ử</div><div class="glyph">ữ</div><div class="glyph">ű</div><div class="glyph">ū</div><div class="glyph">ų</div><div class="glyph">ů</div><div class="glyph">ũ</div><div class="glyph">v</div><div class="glyph">w</div><div class="glyph">ẃ</div><div class="glyph">ŵ</div><div class="glyph">ẅ</div><div class="glyph">ẁ</div><div class="glyph">x</div><div class="glyph">y</div><div class="glyph">ý</div><div class="glyph">ŷ</div><div class="glyph">ÿ</div><div class="glyph">ỵ</div><div class="glyph">ỳ</div><div class="glyph">ỷ</div><div class="glyph">ỹ</div><div class="glyph">z</div><div class="glyph">ź</div><div class="glyph">ž</div><div class="glyph">ż</div><div class="glyph">ẓ</div><div class="glyph">ª</div><div class="glyph">º</div><div class="glyph">Δ</div><div class="glyph">Ω</div><div class="glyph">μ</div><div class="glyph">π</div><div class="glyph">0</div><div class="glyph">1</div><div class="glyph">2</div><div class="glyph">3</div><div class="glyph">4</div><div class="glyph">5</div><div class="glyph">6</div><div class="glyph">7</div><div class="glyph">8</div><div class="glyph">9</div><div class="glyph">⁄</div><div class="glyph">½</div><div class="glyph">⅓</div><div class="glyph">⅔</div><div class="glyph">¼</div><div class="glyph">¾</div><div class="glyph">⅛</div><div class="glyph">⅜</div><div class="glyph">⅝</div><div class="glyph">⅞</div><div class="glyph">₀</div><div class="glyph">₁</div><div class="glyph">₂</div><div class="glyph">₃</div><div class="glyph">₄</div><div class="glyph">₅</div><div class="glyph">₆</div><div class="glyph">₇</div><div class="glyph">₈</div><div class="glyph">₉</div><div class="glyph">⁰</div><div class="glyph">¹</div><div class="glyph">²</div><div class="glyph">³</div><div class="glyph">⁴</div><div class="glyph">⁵</div><div class="glyph">⁶</div><div class="glyph">⁷</div><div class="glyph">⁸</div><div class="glyph">⁹</div><div class="glyph"> </div><div class="glyph">.</div><div class="glyph"></div><div class="glyph"></div><div class="glyph">:</div><div class="glyph">;</div><div class="glyph">…</div><div class="glyph">!</div><div class="glyph">¡</div><div class="glyph">?</div><div class="glyph">¿</div><div class="glyph">·</div><div class="glyph">•</div><div class="glyph">*</div><div class="glyph">#</div><div class="glyph">/</div><div class="glyph">\</div><div class="glyph">-</div><div class="glyph">–</div><div class="glyph">—</div><div class="glyph">―</div><div class="glyph">_</div><div class="glyph">(</div><div class="glyph">)</div><div class="glyph">{</div><div class="glyph">}</div><div class="glyph">[</div><div class="glyph">]</div><div class="glyph">‚</div><div class="glyph">„</div><div class="glyph">“</div><div class="glyph">”</div><div class="glyph">‘</div><div class="glyph">’</div><div class="glyph">«</div><div class="glyph">»</div><div class="glyph">‹</div><div class="glyph">›</div><div class="glyph">"</div><div class="glyph">'</div><div class="glyph">ƒ</div><div class="glyph">✓</div><div class="glyph"></div><div class="glyph">@</div><div class="glyph">&</div><div class="glyph">¶</div><div class="glyph">§</div><div class="glyph">©</div><div class="glyph">®</div><div class="glyph">℗</div><div class="glyph">™</div><div class="glyph">°</div><div class="glyph">′</div><div class="glyph">″</div><div class="glyph">|</div><div class="glyph">¦</div><div class="glyph">†</div><div class="glyph">‡</div><div class="glyph">¢</div><div class="glyph">¤</div><div class="glyph">$</div><div class="glyph">€</div><div class="glyph">£</div><div class="glyph">¥</div><div class="glyph">+</div><div class="glyph">−</div><div class="glyph">×</div><div class="glyph">÷</div><div class="glyph">=</div><div class="glyph">≠</div><div class="glyph">></div><div class="glyph"><</div><div class="glyph">≥</div><div class="glyph">≤</div><div class="glyph">±</div><div class="glyph">≈</div><div class="glyph">¬</div><div class="glyph">~</div><div class="glyph">^</div><div class="glyph">∞</div><div class="glyph">∫</div><div class="glyph">∏</div><div class="glyph">∑</div><div class="glyph">√</div><div class="glyph">∂</div><div class="glyph">%</div><div class="glyph">‰</div><div class="glyph">↑</div><div class="glyph">↗</div><div class="glyph">→</div><div class="glyph">↘</div><div class="glyph">↓</div><div class="glyph">↙</div><div class="glyph">←</div><div class="glyph">↖</div><div class="glyph">◊
</div>
</section>
<script type="text/javascript">
var width = document.body.clientWidth;
var numberOfChars = Math.floor(width / 105);
/** This will adjust on resize someday...
//var onresize = function(width) {
//your code here
//this is just an example
// width = document.body.clientWidth;
//height = document.body.clientHeight;
//console.log(width);
//console.log(numberOfChars);
}
window.addEventListener("resize", onresize);
**/
console.log(width);
console.log(numberOfChars);
var options = {
width: numberOfChars,
align: 'left',
chars_preset: 'alphanum',
min_timing: 200,
}
$('#display').flapper(options).val('FORMA DJR').change();
$('#display2').flapper(options).val('MONO').change();
$('#style').on('change', function() {
var weight = $(this).find(':selected').data('weight');
var style = $(this).find(':selected').data('style');
$('.example-text').css("font-weight",weight).css("font-style",style);
});
$('#italicness').on('change', function() {
var italicness = $(this).find(':selected').data('italicness');
//console.log( italicness );
$('.example-text').css('font-variation-settings', "'ital'" + italicness);
});
$('#italicRange').on('change', function() {
var italicness = $("#italicRange").val()/100;
console.log( italicness );
$('.example-text').css('font-variation-settings', "'ital'" + italicness);
});
$('#weightRange').on('change', function() {
var weightValue = $("#weightRange").val();
console.log( weightValue );
$('.example-text').css("font-weight",weightValue);
});
$('#italicToggle').click(function() {
event.preventDefault()
$('.example-text').toggleClass('italic');
$('#italicToggle.textButton').toggleClass('on');
console.log("italic");
});
$('#uppercaseToggle').click(function() {
event.preventDefault()
$('.example-text').toggleClass('uppercase');
$('#uppercaseToggle.textButton').toggleClass('on');
console.log("Uppercase");
});
</script>
</body>
</html>