forked from wentin/underlineJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
66 lines (63 loc) · 3.94 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UnderlineJS - a pixel perfect javascript library for drawing underline</title>
<link rel="stylesheet" href="http://brick.a.ssl.fastly.net/EB+Garamond:400,400i/Fira+Sans:300,400,500,700">
<link type="text/css" rel="stylesheet" href="css/underline.css" />
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
<script type="text/javascript" src="js/baseline-ratio.js"></script>
<script type="text/javascript" src="js/underline.js"></script>
<script type="text/javascript" src="js/guitar-string.js"></script>
<script type="text/javascript" src="js/class.js"></script>
</head>
<body>
<header>
<div class="logoWrapper">
<img src="i/logo.svg" alt="">
</div>
<div class="links">
<a href="#" class="icon-github">Star underline.js</a>
<a href="#" class="icon-download">Download library</a>
<a href="#" class="icon-coffee">Buy me a coffee</a>
</div>
<div class="fullLogo">
<span>
underline.js
</span>
</div>
<h1>A quest to pixel-perfect underline <br>
with canvas, and music</h1>
</header>
<article>
<h2>
Finding the perfect underline
</h2>
<p>
The perfect underline should be visible, but unobstrusive — allowing people to realize what’s clickable, but without drawing too much attention to itself. It should be positioned at just the right distance from the text, <a href="#" class="underline">sitting comfortably</a> behind it for when descenders want to occupy the same space:
</p>
<p>So, the ideal technological solution would allow us to:</p>
<ul>
<li>change the width of the line (with additional <a href="#" class="underline">half-pixel/retina support</a>),</li>
<li>change the distance from the text,</li>
<li>change the color (even if just to simulate thinner width by using lighter grays instead of black),</li>
<li>clear the descenders,</li>
<li>(perhaps) have a separate style for visited links.</li>
</ul>
<p>There were several roads near by, but it did not take her long to find the one paved with yellow bricks. Within a short time she was walking briskly toward the <a href="#" class="underline">Emerald City</a>, her silver shoes tinkling merrily on the hard, yellow road-bed. The sun shone bright and the birds sang sweetly, and Dorothy did not feel nearly so bad as you might think a little girl would who had been suddenly whisked away from her own country and set down in the midst of a strange land.</p>
<p>She was surprised, as she walked along, to see how pretty the country was about her. There were neat fences at the sides of the road, painted a dainty blue color, and beyond them were fields of grain and vegetables in abundance. Evidently the Munchkins were good farmers and able to raise large crops. <a href="#" class="underline">Once in a while she would pass a house, and the people came out to look at her and bow low as she went by; for everyone knew she had been the means of destroying the Wicked Witch and setting them free from bondage. The houses of the Munchkins were odd-looking dwellings, for each was round, with a big dome for a roof. All were painted blue, for in this country of the East blue was the favorite color.</a>
</p>
<blockquote>
Five years ago, building a layout rendering engine and building an animation engine in JavaScript was ludicrous because JavaScript is nowhere near as fast as Compiled C,” said Newcomb. “Javascript went from maybe being 1000x slower than Compiled C to 80% as fast as <a href="#" class="underline">Compiled C</a> and that was sort of the ah-ha moment for us as deep platform engineers.
</blockquote>
</article>
<footer>
<div class="tweet icon-tweet">
<span>Tweet about underline.js</span>
</div>
<a href="#" class="next">Read Next</a>
<h1>Behind scenes: underline reimagined, <br>
with Math and Animation </h1>
</footer>
</body>
</html>