-
Notifications
You must be signed in to change notification settings - Fork 34
/
demo.html
98 lines (70 loc) · 2.5 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="author" content="Nathan Ford" />
<meta name="description" content="Min-Max-Font-Size demo.html" />
<title>Min-Max-Font-Size Demo</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='./css/styles.css' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
padding: 5% 10% 10%;
font-family: 'Droid Sans', 'Lucida Sans', sans-serif;
font-size: 18px;
line-height: 1.6;
}
h1 {
font-size: 3em;
font-size: 4vw;
max-font-size: 50px;
min-font-size: 20px;
margin: 0 0 1em;
line-height: 1.2;
}
h2 {
font-size: 3vw;
max-font-size: 24px;
min-font-size: 18px;
margin: 1em 0 1em;
max-width: 20em;
}
h3 {
font-size: 1em;
margin: 1em 0 0;
}
h4 {
margin: 1em 0 2em;
font-weight: 400;
font-style: italic;
}
p, li, h3, dd {
max-font-size: 18px;
}
a {
text-decoration: underline;
}
li {
margin-bottom: 1ex;
}
blockquote {
margin: 1em;
font-style: italic;
}
</style>
</head>
<body id="index">
<article>
<h1>Min and Max-font-size demo.</h1>
<h2>Grab the script <a href="https://github.com/nathanford/min-max-font-size">on github</a>.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
<p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
</article>
<script src="./js/mm-fontsize.js" type="text/javascript"></script>
</body>
</html>