/
index.html
63 lines (55 loc) · 3.87 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Default stylesheet test</title>
<link rel="stylesheet" type="text/css" href="../tests.css" />
<link rel="stylesheet" type="text/css" href="../../dist/styles/monocore.css" />
<style type="text/css">
#reader {
width: 300px;
height: 420px;
border: 1px solid #000;
background-color: #CCC;
overflow: hidden;
}
</style>
<script type="text/javascript" src="../../dist/scripts/monocore.js"></script>
<script type="text/javascript">
Monocle.DEBUG = true;
// Initialize the reader element.
Monocle.Events.listen(window, 'load', function () {
window.reader = Monocle.Reader(
'reader',
null,
{ stylesheet: "body { color: #090; }" }
);
});
</script>
</head>
<body class="narrow">
<a href="../index.html" class="backToGuide">← Back to Guide</a>
<h1>Default stylesheet</h1>
<p>
Demonstrates how to apply a stylesheet to each component on load in
the Monocle Reader's initialisation options. In this case, it turns the
component's body text <span style="color: #090;">green</span>.
</p>
<div id="reader">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque neque, varius volutpat cursus vel, tristique vel mi. Etiam tincidunt metus sed libero fringilla venenatis. Suspendisse interdum, neque sit amet fringilla consectetur, nunc nulla accumsan est, vitae porta ligula eros non felis. Donec volutpat viverra metus, eu tincidunt lectus dapibus ac. Sed porttitor tristique libero, at feugiat ligula feugiat ut. Morbi cursus ornare blandit. Suspendisse sit amet sapien metus, sagittis condimentum elit. Sed mollis turpis sed turpis viverra venenatis. Ut viverra dignissim orci, sed egestas nisi lobortis quis. Nulla mi lacus, dictum quis interdum vitae, pretium sit amet sem. Phasellus vitae ante in mauris varius imperdiet volutpat sed felis. Donec mollis felis vitae magna luctus ut gravida augue luctus. Maecenas suscipit purus id odio euismod porttitor at volutpat purus.
</p>
<p>
Etiam sem nunc, tristique id suscipit id, vulputate at tellus. Etiam tempus orci a nulla convallis id imperdiet tellus ultrices. Morbi faucibus enim id lectus porttitor sollicitudin scelerisque neque commodo. Proin tempor ultrices posuere. Suspendisse et quam neque. Proin imperdiet dolor in libero volutpat elementum. Nunc accumsan tristique nisi, sit amet vestibulum nisi ultrices et. Nam vestibulum, erat et varius mattis, lectus enim auctor tellus, sed tincidunt metus tortor sed tortor. Nam fermentum tristique sapien sed fermentum. Ut interdum mauris eget purus tempus viverra.
</p>
<p>
Fusce ut ipsum id lorem tristique scelerisque non ut sem. Sed sapien ligula, imperdiet hendrerit vulputate quis, lobortis sit amet justo. Vivamus eu ante sit amet tortor aliquam congue. Curabitur tincidunt felis in augue facilisis ac pharetra elit aliquet. Sed at nulla quis purus egestas condimentum. Nunc ornare odio sed urna feugiat pellentesque. Cras volutpat euismod eros, sollicitudin pellentesque purus sollicitudin et. Aenean nisl purus, congue id sodales id, tincidunt sit amet arcu. Morbi feugiat erat at leo molestie aliquet. Morbi eu felis mauris, a feugiat lorem. Nulla mattis rhoncus semper. Maecenas porta, velit at mollis auctor, purus purus viverra dolor, ac convallis libero dolor a lectus. Cras at neque erat, at semper elit. Duis at tellus neque. Phasellus tincidunt viverra velit, et hendrerit tortor sagittis commodo. Sed mattis mi vulputate risus laoreet iaculis.
</p>
</div>
</body>
</html>