This repository has been archived by the owner on Feb 14, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
/
reference.html
319 lines (272 loc) · 9.61 KB
/
reference.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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<title>Writ Reference Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="writ.min.css">
<header>
<h1>Page Header</h1>
<p>Tagline</p>
<nav>
<ul>
<li><a href="#a">Nav Link A</a></li>
<li><a href="#b">Nav Link B</a></li>
<li><a href="#c">Nav Link C</a></li>
</ul>
</nav>
</header>
<main>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel tortor
vel mi rutrum elementum vitae vitae erat. Sed sollicitudin consectetur dui,
ut congue metus. Maecenas eu feugiat sem. Aliquam erat volutpat. Ut
consequat auctor lorem. Pellentesque hendrerit tortor nec aliquet molestie.
Donec dignissim accumsan blandit. Sed enim diam, pellentesque nec ex a,
mattis posuere nibh. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Mauris fermentum egestas
aliquam.
</p>
<h3>Heading 3</h3>
<p>
Morbi vel imperdiet dui. Vivamus eu gravida leo, at placerat sapien. Nullam
mollis dui sit amet accumsan luctus. Nullam eget odio non metus lacinia
lacinia. Nunc vehicula felis a dolor fringilla, nec congue dui tristique.
Aenean finibus fringilla risus, vitae imperdiet dui auctor vitae. Nunc
tincidunt justo lectus, at varius nunc interdum at. Aliquam a molestie
sapien, id hendrerit nunc.
</p>
<hr>
<p>
In et venenatis nulla. Etiam vestibulum, magna et euismod sollicitudin,
elit lectus vestibulum augue, sed finibus mauris sem in tellus. Nunc
ullamcorper lorem orci, sit amet euismod nibh sagittis sed. Sed orci nisl,
mattis in lacus a, rutrum mattis nunc. Quisque interdum facilisis rhoncus.
Sed ac viverra nunc. Aenean sed malesuada lacus. Donec condimentum ligula
libero, non rutrum nibh consequat nec. Aliquam elementum facilisis arcu nec
pretium. Sed hendrerit eros vel arcu dignissim, id luctus mi finibus.
Aenean tellus sapien, tempor sit amet condimentum eget, mattis at tortor.
Nulla eleifend interdum varius. Duis luctus metus at varius commodo. Fusce
ex lacus, maximus sed elit sit amet, accumsan facilisis justo.
</p>
<h4>Heading 4</h4>
<p>
Nunc sit amet sollicitudin odio, eget lobortis ipsum. Pellentesque finibus
finibus nisl a facilisis. Pellentesque scelerisque sit amet sapien id
bibendum. Vivamus vel magna malesuada, rutrum enim commodo, consectetur
lacus. Cras laoreet ex pellentesque magna tincidunt porttitor. Duis mollis
tincidunt dignissim. Phasellus tempus ipsum risus, bibendum elementum urna
bibendum quis. Sed ullamcorper cursus enim, at pellentesque libero euismod
sed. Proin lacinia blandit ex at ultricies.
</p>
<h5>Heading 5</h5>
<p>
Suspendisse interdum, nisl quis facilisis venenatis, erat magna convallis
ante, a molestie elit lectus at justo. Donec et velit non risus tempus
accumsan quis in ipsum. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Aenean sed luctus magna. Fusce eleifend mollis eros vitae cursus.
Sed quis egestas quam. Nunc vel tincidunt massa. Aenean sodales dolor ac
porta commodo. Aenean sed dignissim eros. Sed et nisl egestas arcu porta
porta id eget orci. Aliquam eget sagittis purus.
</p>
<h6>Heading 6</h6>
<p>
Ut aliquet sagittis blandit. Fusce eros tortor, convallis vel ultrices sit
amet, pulvinar vulputate risus. Mauris posuere ut orci facilisis
scelerisque. Pellentesque quis urna orci. Vivamus placerat ante arcu, vitae
venenatis tortor convallis vel. Cras tempor felis purus, vitae tempus
tellus cursus sit amet. Sed lacinia diam id purus dignissim, et venenatis
nibh luctus.
</p>
<h2>Lists</h2>
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>Sublist Item 1</li>
<li>
Sublist Item 2
<ul>
<li>Subsublist Item 1</li>
<li>Subsublist Item 2</li>
<li>Subsublist Item 3</li>
</ul>
</li>
<li>Sublist Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
<ol>
<li>List Item 1</li>
<li>
List Item 2
<ol>
<li>Sublist Item 1</li>
<li>
Sublist Item 2
<ol>
<li>Subsublist Item 1</li>
<li>Subsublist Item 2</li>
<li>Subsublist Item 3</li>
</ol>
</li>
<li>Sublist Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
<ul>
<li>
Mixed Item
<ol>
<li>
Mixed Item
<ul>
<li>Mixed Item</li>
</ul>
</li>
</ol>
</li>
</ul>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
<h2>Table</h2>
<table>
<caption>My Little Table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
</table>
<h2>Blockquote</h2>
<blockquote>
Mauris ultrices sagittis pulvinar. Nullam ultrices neque et tristique
pharetra. Cras sodales tellus ac eros euismod, eu tincidunt elit varius.
Proin nec faucibus magna. Phasellus rhoncus ligula nec diam posuere semper
vitae eget nunc. Donec elementum ultricies dolor, vel mollis nulla dapibus
ac. Sed pellentesque commodo condimentum. Integer vel urna sem.
</blockquote>
<h2>Pre-formatted</h2>
<pre><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="writ.min.css"></pre>
<h2>Inline</h2>
<p>
An <a href="//bye">unvisited link</a> and a
<a href="reference.html">visited link</a>.
</p>
<p>
Some <em>emphasized text</em>, <strong>strong text</strong>,
<u>underlined text</u>, <mark>highlighted text</mark> and
<small>small text</small>.
</p>
<p>
<del>This text was deleted.</del> <ins>This text was inserted.</ins>
</p>
<p>
January 1<sup>st</sup>, 1970. H<sub>2</sub>O.
</p>
<p>
The maths kind of variable, <var>x</var>.
</p>
<p>
Inline code, <code>printf("Hello, world!");</code>,
and sample output, <samp>Hello, world!</samp>.
</p>
<p>To exit Emacs, press <kbd>C-x C-c</kbd>.</p>
<h2>Figure & Aside</h2>
<figure>
<img alt="Kitten" src="https://placekitten.com/g/200/280">
<figcaption>A cute little kitten</figcaption>
</figure>
<p>
Fusce consectetur augue lacus, ac dapibus neque maximus a. Maecenas
sollicitudin metus sodales, venenatis sapien at, fringilla enim.
Suspendisse dapibus pulvinar nunc, in pretium neque condimentum eu. Donec
nec sollicitudin justo, lobortis fermentum magna. Maecenas tempus lacinia
augue at posuere. Vestibulum auctor, dui in blandit malesuada, dui felis
consequat orci, eu auctor nunc leo eget ex. Suspendisse consequat auctor
risus in venenatis. Duis vel sapien eu enim facilisis auctor. Mauris ac
feugiat mauris, eu tristique sapien. Aenean mattis in magna sed ultricies.
Suspendisse convallis risus lectus, eget molestie mauris aliquam quis.
Integer eget cursus nulla. Cras sodales viverra metus in laoreet. Mauris
accumsan gravida quam sed interdum.
</p>
<p>
Fusce consectetur augue lacus, ac dapibus neque maximus a. Maecenas
sollicitudin metus sodales, venenatis sapien at, fringilla enim.
Suspendisse dapibus pulvinar nunc, in pretium neque condimentum eu. Donec
nec sollicitudin justo, lobortis fermentum magna. Maecenas tempus lacinia
augue at posuere. Vestibulum auctor, dui in blandit malesuada, dui felis
consequat orci, eu auctor nunc leo eget ex. Suspendisse consequat auctor
risus in venenatis. Duis vel sapien eu enim facilisis auctor. Mauris ac
feugiat mauris, eu tristique sapien. Aenean mattis in magna sed ultricies.
Suspendisse convallis risus lectus, eget molestie mauris aliquam quis.
Integer eget cursus nulla. Cras sodales viverra metus in laoreet. Mauris
accumsan gravida quam sed interdum.
</p>
<aside>
The quick brown fox jumps over the lazy dog.
</aside>
<p>
Pellentesque purus quam, facilisis quis mi non, porttitor malesuada mi. Sed
a hendrerit neque. Sed malesuada ex lorem, eget sagittis est semper sed.
Praesent convallis est in auctor lacinia. Praesent eu tortor sed massa
venenatis volutpat nec id erat. Mauris blandit mollis est a aliquet. Nam
convallis leo at blandit vehicula. Vestibulum a tellus in orci viverra
consectetur et suscipit justo. Integer finibus placerat ligula at cursus.
Morbi laoreet nibh euismod porttitor hendrerit. Suspendisse volutpat et
neque placerat molestie. Vivamus justo ligula, accumsan rhoncus tristique
vitae, efficitur a justo. Donec vel accumsan mi. Nam bibendum malesuada
efficitur.
</p>
</main>
<footer>
<p>Some footer text.</p>
</footer>
<div style="position: fixed; top: 0.25em; right: 1ch;">
<label>
<input type="checkbox" checked> CSS
</label>
</div>
<script>
var link = document.getElementsByTagName('link')[0];
var toggle = document.getElementsByTagName('input')[0];
toggle.onchange = function() {
link.disabled = !toggle.checked;
}
</script>