-
Notifications
You must be signed in to change notification settings - Fork 111
/
Copy pathdemo.html
371 lines (226 loc) · 24.8 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
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
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="all">
<script>
(function() {var config = {kitId: 'wxt4lbk',scriptTimeout: 3000};
var h=document.getElementsByTagName("html")[0];h.className+=" wf-loading";var t=setTimeout(function(){h.className=h.className.replace(/(\s|^)wf-loading(\s|$)/g," ");h.className+=" wf-inactive"},config.scriptTimeout);var tk=document.createElement("script"),d=false;tk.src='//use.typekit.net/'+config.kitId+'.js';tk.type="text/javascript";tk.async="true";tk.onload=tk.onreadystatechange=function(){var a=this.readyState;if(d||a&&a!="complete"&&a!="loaded")return;d=true;clearTimeout(t);try{Typekit.load(config)}catch(b){}};var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(tk,s)
})();
</script>
<title>Typeplate » A typographic starter kit encouraging great type on the Web</title>
<meta name="description" content="A typographic starter kit for Web developers and designers, where we don’t make too many design choices, but we do set out patterns for proper markup and “pre-designed” styles for great Web typography.
">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<link rel="stylesheet" id="normalize-css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" id="typeplate-css" href="./css/typeplate.css?2.0.0">
<link rel="stylesheet" href="./css/demo.css?2.0.0">
<script src="./js/vendor/modernizr.min.js"></script>
</head>
<body><!-- $banner -->
<header class="header botDivider column" role="banner">
</header>
<!-- Main content -->
<!-- demo toggles -->
<div id="typeplate-widgets-wrap">
<!-- Normalize Radio Toggle -->
<form action="." method="post" id="normalize-form" role="form">
<!-- #Normalize Toggle -->
<div class="bg-slategray">
<label for="normalize-off">Normalize</label>
<input id="normalize-off" class="slide-switch large dark" name="normalize-state" type="checkbox" />
<label for="normalize-off">
<span class="wrapper">
<span class="on">ON</span>
<span class="switch"></span>
<span class="off">OFF</span>
</span>
</label>
</div>
</form>
<!-- #TypePlate Toggle -->
<form action="." method="post" id="typeplate-form" role="form">
<div class="bg-slategray">
<label for="typeplate-off">Typeplate</label>
<input id="typeplate-off" name="typeplate-state" class="slide-switch large dark" type="checkbox" />
<label for="typeplate-off">
<span class="wrapper">
<span class="on">ON</span>
<span class="switch"></span>
<span class="off">OFF</span>
</span>
</label>
</div>
</form>
</div>
<!-- content -->
<section role="main">
<article role="article">
<header>
<h1>The Happy Prince</h1>
<h2><small>by <cite>Oscar Wilde</cite></small></h2>
</header>
<p class="typl8-delta lede">High above the city, on a tall column, stood the statue of the Happy Prince. He was gilded all over with thin leaves of fine gold, for eyes he had two bright sapphires, and a large red ruby glowed on his sword–hilt.</p>
<p class="typl8-drop-cap">He was very much admired indeed. “He is as beautiful as a weathercock,” remarked one of the Town Councillors who wished to gain a reputation for having artistic taste; “only not quite so useful,” he added, fearing lest people should think him unpractical, which he really was not.</p>
<p>“Why can’t you be like the Happy Prince?” asked a sensible mother of her little boy who was crying for the moon. “The Happy Prince never dreams of crying for anything.”</p>
<p>“I am glad there is some one in the world who is quite happy”, muttered a disappointed man as he gazed at the wonderful statue.</p>
<p>“He looks just like an angel,” said the Charity Children as they came out of the cathedral in their bright scarlet cloaks, and their clean white pinafores.</p>
<p>“How do you know?” said the Mathematical Master, “you have never seen one.”</p>
<p>“Ah! but we have, in our dreams,” answered the children; and the Mathematical Master frowned and looked very severe, for he did not approve of children dreaming.</p>
<p>One night there flew over the city a little Swallow. His friends had gone away to Egypt six weeks before, but he had stayed behind, for he was in love with the most beautiful Reed. He had met her early in the spring as he was flying down the river after a big yellow moth, and had been so attracted by her slender waist that he had stopped to talk to her.</p>
<p>“Shall I love you said the Swallow”, who liked to come to the point at once, and the Reed made him a low bow. So he flew round and round her, touching the water with his wings, and making silver ripples. This was his courtship, and it lasted all through the summer.</p>
<p>“It is a ridiculous attachment,” twittered the other Swallows, “she has no money, and far too many relations;” and indeed the river was quite full of Reeds. Then, when the autumn came, they all flew away.</p>
<p>After they had gone he felt lonely, and began to tire of his lady-love. “She has no conversation,” he said, “and I am afraid that she is a coquette, for she is always flirting with the wind.” And certainly, whenever the wind blew, the Reed made the most graceful curtsies. I admit that she is domestic,' he continued, “but I love travelling, and my wife, consequently, should love travelling also.”</p>
<p>“Will you come away with me?” he said finally to her; but the Reed shook her head, she was so attached to her home.</p>
<p>“You have been trifling with me,” he cried, “I am off to the Pyramids. Good–bye!” and he flew away.</p>
<p>All day long he flew, and at night–time he arrived at the city. “Where shall I put up?” he said “I hope the town has made preparations.”</p>
<p>Then he saw the statue on the tall column. “I will put up there,” he cried; “it is a fine position with plenty of fresh air.” So he alighted just between the feet of the Happy Prince.</p>
<p>“I have a golden bedroom,” he said softly to himself as he looked round, and he prepared to go to sleep; but just as he was putting his head under his wing, a large drop of water fell on him. “What a curious thing!” he cried, “there is not a single cloud in the sky, the stars are quite clear and bright, and yet it is raining. The climate in the north of Europe is really dreadful. The Reed used to like the rain, but that was merely her selfishness.”</p>
<p>Then another drop fell.</p>
<p>“What is the use of a statue if it cannot keep the rain off?” he said; “I must look for a good chimney–pot,” and he determined to fly away.</p>
<p>But before he had opened his wings, a third drop fell, and he looked up, and saw – Ah! what did he see?</p>
<p>The eyes of the Happy Prince were filled with tears, and tears were running down his golden cheeks. His face was so beautiful in the moonlight that the little Swallow was filled with pity.</p>
<p>“Who are you?” he said.</p>
<p>“I am the Happy Prince.”</p>
<p>“Why are you weeping then?” asked the Swallow; “you have quite drenched me.”</p>
<p>“When I was alive and had a human heart,” answered the statue, “I did not know what tears were, for I lived in the Palace of Sans–Souci where sorrow is not allowed to enter. In the daytime I played with my companions in the garden, and in the evening I led the dance in the Great Hall. Round the garden ran a very lofty wall, but I never cared to ask what lay beyond it, everything about me was so beautiful. My courtiers called me the Happy Prince, and happy indeed I was, if pleasure be happiness. So I lived, and so I died. And now that I am dead they have set me up here so high that I can see all the ugliness and all the misery of my city, and though my heart is made of lead yet I cannot choose but weep.'</p>
<p>“What, is he not solid gold?” said the Swallow to himself. He was too polite to make any personal remarks out loud.</p>
<p>“Far away,” continued the statue in a low musical voice, “far away in a little street there is a poor house. One of the windows is open, and through it I can see a woman seated at a table. Her face is thin and worn, and she has coarse, red hands, all pricked by the needle, for she is a seamstress. She is embroidering passion–fowers on a satin gown for the loveliest of the Queen's maids–of–honour to wear at the next Court–ball. In a bed in the corner of the room her little boy is lying ill. He has a fever, and is asking for oranges. His mother has nothing to give him but river water, so he is crying. Swallow, Swallow, little Swallow, will you not bring her the ruby out of my sword–hilt? My feet are fastened to this pedestal and I cannot move.'</p>
<p>“I am waited for in Egypt,” said the Swallow. “My friends are flying up and down the Nile, and talking to the large lotus flowers. Soon they will go to sleep in the tomb of the great King. The King is there himself in his painted coffin. He is wrapped in yellow linen, and embalmed with spices. Round his neck is a chain of pale green jade, and his hands are like withered leaves.”</p>
<p>“Swallow, Swallow, little Swallow,” said the Prince,” will you not stay with me for one night, and be my messenger? The boy is so thirsty, and the mother so sad.</p>
<p>“I don't think I like boys,” answered the Swallow. “Last summer, when I was staying on the river, there were two rude boys, the miller’s sons, who were always throwing stones at me. They never hit me, of course; we swallows fly far too well for that, and besides, I come of a family famous for its agility; but still, it was a mark of disrespect.”</p>
<p>But the Happy Prince looked so sad that the little Swallow was sorry. “It is very cold here,” he said “but I will stay with you for one night, and be your messenger.”</p>
<p>“Thank you, little Swallow,” said the Prince.</p>
<p>So the Swallow picked out the great ruby from the Prince's sword, and flew away with it in his beak over the roofs of the town.</p>
<p>He passed by the cathedral tower, where the white marble angels were sculptured. He passed by the palace and heard the sound of dancing. A beautiful girl came out on the balcony with her lover. “How wonderful the stars are,” he said to her, “and how wonderful is the power of love!” “I hope my dress will be ready in time for the State-ball,” she answered; “I have ordered passion–flowers to be embroidered on it; but the seamstresses are so lazy.”</p>
<p>He passed over the river, and saw the lanterns hanging to the masts of the ships. He passed over the Ghetto, and saw the old Jews bargaining with each other, and weighing out money in copper scales. At last he came to the poor house and looked in. The boy was tossing feverishly on his bed, and the mother had fallen asleep, she was so tired. In he hopped, and laid the great ruby on the table beside the woman’s thimble. Then he flew gently round the bed, fanning the boy’s forehead with his wings. “How cool I feel,” said the boy, “I must be getting better;” and he sank into a delicious slumber.</p>
<p>Then the Swallow flew back to the Happy Prince, and told him what he had done. “It is curious,” he remarked, “but I feel quite warm now, although it is so cold.”</p>
<p>“That is because you have done a good action,” said the Prince. And the little Swallow began to think, and then he fell asleep. Thinking always made him sleepy.</p>
<p>When day broke he flew down to the river and had a bath.</p>
<p>“What a remarkable phenomenon,” said the Professor of Omithology as he was passing over the bridge. “A swallow in winter!” And he wrote a long letter about it to the local newspaper. Every one quoted it, it was full of so many words that they could not understand.</p>
<p>“Tonight I go to Egypt,” said the Swallow, and he was in high spirits at the prospect. He visited all the public monuments, and sat a long time on top of the church steeple. Wherever he went the Sparrows chirruped, and said to each other,“What a distinguished stranger!” so he enjoyed himself very much.</p>
<p>When the moon rose he flew back to the Happy Prince. “Have you any commissions for Egypt?” he cried; “I am just starting.”</p>
<p>“Swallow, Swallow, little Swallow,” said the Prince, “will you not stay with me one night longer?”</p>
<p>“I am waited for in Egypt,” answered the Swallow. Tomorrow my friends will fly up to the Second Cataract. The river–horse couches there among the bulrushes, and on a great granite throne sits the God Memnon. All night long he watches the stars, and when the morning star shines he utters one cry of joy, and then he is silent. At noon the yellow lions come down to the water’s edge to drink. They have eyes like green beryls, and their roar is louder than the roar of the cataract.”</p>
<p>“Swallow, Swallow, little Swallow,” said the Prince, “far away across the city I see a young man in a garret. He is leaning over a desk covered with papers, and in a tumbler by his side there is a bunch of withered violets. His hair is brown and crisp, and his lips are red as a pomegranate, and he has large and dreamy eyes. He is trying to finish a play for the Director of the Theatre, but he is too cold to write any more. There is no fire in the grate, and hunger has made him faint.”</p>
<p>“I will wait with you one night longer,” said the Swallow, who really had a good heart. “Shall I take him another ruby?”</p>
<p>“Alas! I have no ruby now,” said the Prince; “my eyes are all that I have left. They are made of rare sapphires, which were brought out of India a thousand years ago. Pluck out one of them and take it to him. He will sell it to the jeweller, and buy food and firewood, and finish his play.”</p>
<p>“Dear Prince,” said the Swallow, “I cannot do that;” and he began to weep.</p>
<p>“Swallow, Swallow, little Swallow,” said the Prince, “do as I command you.”</p>
<p>So the Swallow plucked out the Prince’s eye, and flew away to the student’s garret. It was easy enough to get in, as there was a hole in the roof. Through this he darted, and came into the room. The young man had his head buried in his hands, so he did not hear the flutter of the bird’s wings, and when he looked up he found the beautiful sapphire lying on the withered violets.</p>
<p>“I am beginning to be appreciated,” he cried; “this is from some great admirer. Now I can finish my play,” and he looked quite happy.</p>
<p>The next day the Swallow flew down to the harbour. He sat on the mast of a large vessel and watched the sailors hauling big chests out of the hold with ropes. “Heave a–hoy!' they shouted as each chest came up. “I am going to Egypt!” cried the Swallow, but nobody minded, and when the moon rose he flew back to the Happy Prince.</p>
<p>“I am come to bid you good–bye,” he cried.</p>
<p>“Swallow, Swallow, little Swallow,” said the Prince, “will you not stay with me one night longer?”</p>
<p>“It is winter,” answered the Swallow, and the chill snow will soon be here. In Egypt the sun is warm on the green palm–trees, and the crocodiles lie in the mud and look lazily about them. My companions are building a nest in the Temple of Baalbec, and the pink and white doves are watching them, and cooing to each other. Dear Prince, I must leave you, but I will never forget you, and next spring I will bring you back two beautiful jewels in place of those you have given away. The ruby shall be redder than a red rose, and the sapphire shall be as blue as the great sea.</p>
<p>“In the square below,” said the Happy Prince, “there stands a little match–girl. She has let her matches fall in the gutter, and they are all spoiled. Her father will beat her if she does not bring home some money, and she is crying. She has no shoes or stockings, and her little head is bare. Pluck out my other eye, and give it to her, and her father will not beat her.”</p>
<p>“I will stay with you one night longer,” said the Swallow, “but I cannot pluck out your eye. You would be quite blind then.”</p>
<p>“Swallow, Swallow, little Swallow,” said the Prince, “do as I command you.”</p>
<p>So he plucked out the Prince’s other eye, and darted down with it. He swooped past the match–girl, and slipped the jewel into the palm of her hand. “What a lovely bit of glass,” cried the little girl; and she ran home, laughing.</p>
<p>Then the Swallow came back to the Prince. “You are blind now,” he said, “so I will stay with you always.”</p>
<p>“No, little Swallow,” said the poor Prince, “you must go away to Egypt.”</p>
<p>“I will stay with you always,” said the Swallow, and he slept at the Prince’s feet.</p>
<p>All the next day he sat on the Prince’s shoulder, and told him stories of what he had seen in strange lands. He told him of the red ibises, who stand in long rows on the banks of the Nile, and catch gold fish in their beaks; of the Sphinx, who is as old as the world itself, and lives in the desert, and knows everything; of the merchants, who walk slowly by the side of their camels, and carry amber beads in their hands; of the King of the Mountains of the Moon, who is as black as ebony, and worships a large crystal; of the great green snake that sleeps in a palm–tree, and has twenty priests to feed it with honey–cakes; and of the pygmies who sail over a big lake on large flat leaves, and are always at war with the butterflies.</p>
<p>“Dear little Swallow,” said the Prince, “you tell me of marvellous things, but more marvellous than anything is the suffering of men and of women. There is no Mystery so great as Misery. Fly over my city, little Swallow, and tell me what you see there.”</p>
<p>So the Swallow flew over the great city, and saw the rich making merry in their beautiful houses, while the beggars were sitting at the gates. He flew into dark lanes, and saw the white faces of starving children looking out listlessly at the black streets. Under the archway of a bridge two little boys were lying in one another’s arms to try and keep themselves warm. “How hungry we are” they said. “You must not lie here,” shouted the Watchman, and they wandered out into the rain.</p>
<p>Then he flew back and told the Prince what he had seen.</p>
<p>“I am covered with fine gold,” said the Prince, “you must take it off, leaf by leaf, and give it to my poor; the living always think that gold can make them happy.”</p>
<p>Leaf after leaf of the fine gold the Swallow picked off, till the Happy Prince looked quite dull and grey. Leaf after leaf of the fine gold he brought to the poor, and the children’s faces grew rosier, and they laughed and played games in the street. “We have bread nod” they cried.</p>
<p>Then the snow came, and after the snow came the frost. The streets looked as if they were made of silver, they were so bright and glistening; long circles like crystal daggers hung down from the eaves of the houses, everybody went about in furs, and the little boys wore scarlet caps and skated on the ice.</p>
<p>The poor little Swallow grew colder and colder, but he would not leave the Prince, he loved him too well. He picked up crumbs outside the baker’s door when the baker was not looking, and tried to keep himself warm by flapping his wings.</p>
<p>But at last he knew that he was going to die. He had just strength to fly up to the Prince’s shoulder once more. “Good’bye, dear Prince!” he murmured, “will you let me kiss your hand?”</p>
<p>“I am glad that you are going to Egypt at last, little Swallow,” said the Prince, “you have stayed too long here; but you must kiss me on the lips, for I love you.”</p>
<p>“It is not to Egypt that I am going,” said the Swallow. I am going to the House of Death. Death is the brother of Sleep, is he not?”</p>
<p>And he kissed the Happy Prince on the lips, and fell down dead at his feet.</p>
<p>At that moment a curious crack sounded inside the statue, as if something had broken. The fact is that the leaden heart had snapped right in two. It certainly was a dreadfully hard frost.</p>
<p>Early the next morning the Mayor was walking in the square below in company with the Town Councillors. As they passed the column he looked up at the statue: “Dear me! how shabby the Happy Prince looks!” he said.</p>
<p>“How shabby indeed!” cried the Town Councillors, who always agreed with the Mayor, and they went up to look at it.</p>
<p>“The ruby has fallen out of his sword, his eyes are gone, and he is golden no longer,” said the Mayor; “in fact, he is little better than a beggar!”</p>
<p>“Little better than a beggar,” said the Town Councillors.</p>
<p>“And there is actually a dead bird at his feet,” continued the Mayor. “We must really issue a proclamation that birds are not to be allowed to die here.” And the Town Clerk made a note of the suggestion.</p>
<p>So they pulled down the statue of the Happy Prince. “As he is no longer beautiful he is no longer useful,” said the Art Professor at the University.</p>
<p>Then they melted the statue in a furnace, and the Mayor held a meeting of the Corporation to decide what was to be done with the metal. “We must have another statue, of course,” he said, “and it shall be a statue of myself.”</p>
<p>“Of myself,” said each of the Town Councillors, and they quarrelled. When I last heard of them they were quarrelling still.</p>
<p>“What a strange thing!” said the overseer of the workmen at the foundry. “This broken lead heart will not melt in the furnace. We must throw it away.” So they threw it on a dust–heap where the dead Swallow was also lying.</p>
<p>“Bring me the two most precious things in the city,” said God to one of His Angels; and the Angel brought Him the leaden heart and the dead bird.</p>
<p>“You have rightly chosen,” said God, “for in my garden of Paradise this little bird shall sing for evermore, and in my city of gold the Happy Prince shall praise me.”</p>
</article>
</section>
<!-- Footer -->
<!-- JavaScript and analytics -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery.min.js"><\/script>')</script>
<script src="./js/minified/clipboard.min.js"></script>
<script>
var dl_btns = document.querySelectorAll('.btn'),
dl_btns_length = dl_btns.length;
for (var i = 0, l = dl_btns_length; i < l; i++) {
dl_btns[i].addEventListener('mouseleave', function(e) {
e.currentTarget.classList.toggle('tooltipped');
e.currentTarget.removeAttribute('aria-label');
});
}
function showTooltip(elem, msg) {
elem.classList.toggle('tooltipped');
elem.setAttribute('aria-label', msg);
}
function fallbackMessage(action) {
var actionMsg = '',
actionKey = (action === 'cut' ? 'X' : 'C');
if(/iPhone|iPad/i.test(navigator.userAgent)) {
actionMsg = 'No support :(';
}
else if (/Mac/i.test(navigator.userAgent)) {
actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
}
else {
actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
}
return actionMsg;
}
// https://clipboardjs.com
var clipboard = new Clipboard('.dl-item.btn');
clipboard.on('success', function(e) {
e.clearSelection();
showTooltip(e.trigger, 'Copied!')
});
clipboard.on('error', function(e) {
showTooltip(e.trigger, fallbackMessage(e.action));
});
</script>
<script>
$(document).ready(function() {
var normalizeCss = $("#normalize-css"),
typleplateCss = $("#typeplate-css");
$('#normalize-form input[type="checkbox"]').on('click', function(e) {
var normalizeOffCheck = $('#normalize-off').is(':checked');
if(normalizeOffCheck) {
$("#normalize-css").attr("href", "");
} else {
$("#normalize-css").attr("href", "//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css");
}
});
$('#typeplate-form input[type="checkbox"]').on('click', function(e) {
var typePlateOffCheck = $('#typeplate-off').is(':checked');
if(typePlateOffCheck) {
$("#typeplate-css").attr("href", "");
} else {
$("#typeplate-css").attr("href", "./css/typeplate.css");
}
});
}); //end document.ready
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38761755-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>