-
Notifications
You must be signed in to change notification settings - Fork 2
/
showcase-im-fell-english.html
163 lines (163 loc) · 5.45 KB
/
showcase-im-fell-english.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>IM Fell English | Typesettings.css</title>
<link rel="stylesheet" href="src/styles/typesettings.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');
:root {
--ts-color-heading: firebrick;
--ts-color-background: white;
--ts-font-family-only-one: 'IM Fell English', serif;
--ts-font-weight-regular: 400;
--ts-font-weight-bold: 400;
}
p q {
display: inline-block;
text-indent: -1ch;
}
</style>
<meta name="description" content="Example article with custom font (IM Fell English) and colors.">
</head>
<body>
<a href="#content">
Skip to content
</a>
<div data-typesettings="golden">
<nav>
<ul>
<li>
<h1 role="presentation">
<a href="index.html">Typesettings.css</a> » <a href="showcase.html">Showcase</a>
</h1>
</li>
<li>
<ul>
<li>
<a href="https://mikemai.net/typesettings/css/typesettings-2.0-min.css" aria-label="Download the Typesettings.css file">Download</a>
</li>
</ul>
</li>
</ul>
</nav>
<main id="content">
<article>
<header>
<h1>
Macbeth
</h1>
<h2>
William Shakespeare
</h2>
<figure>
<img src="https://illustratedshakespeare.files.wordpress.com/2016/07/ckmac43.jpg" alt="View from the site of Macbeth's Castle.">
</figure>
</header>
<section>
<h2>Act I</h2>
<h3>Scene I. A desert place.</h3>
<p>
<em>Thunder and lightning. Enter three Witches</em>
</p>
<h4>First Witch</h4>
<p>
<q>When shall we three meet again<br>
In thunder, lightning, or in rain?</q>
</p>
<h4>Second Witch</h4>
<p>
<q>When the hurlyburly's done,<br>
When the battle's lost and won.</q>
</p>
<h4>Third Witch</h4>
<p>
<q>That will be ere the set of sun.</q>
</p>
<h4>First Witch</h4>
<p>
<q>Where the place?</q>
</p>
<h4>Second Witch</h4>
<p>
<q>Upon the heath.</q>
</p>
<h4>Third Witch</h4>
<p>
<q>There to meet with Macbeth.</q>
</p>
<h4>First Witch</h4>
<p>
<q>I come, Graymalkin!</q>
</p>
<h4>Second Witch</h4>
<p>
<q>Paddock calls.</q>
</p>
<h4>Third Witch</h4>
<p>
<q>Anon.</q>
</p>
<h4>ALL</h4>
<p>
<q>Fair is foul, and foul is fair:<br>
Hover through the fog and filthy air.</q>
</p>
<p><em>Exeunt</em></p>
</section>
<section>
<h2>Scene II. A camp near Forres.</h2>
<p>
<em>Alarum within. Enter DUNCAN, MALCOLM, DONALBAIN, LENNOX, with Attendants, meeting a bleeding Sergeant</em>
</p>
<h3>DUNCAN</h3>
<p>
<q>What bloody man is that? He can report,<br>
As seemeth by his plight, of the revolt<br>
The newest state.</q>
</p>
<h3>MALCOLM</h3>
<p>
<q>This is the sergeant<br>
Who like a good and hardy soldier fought<br>
’Gainst my captivity. Hail, brave friend!<br>
Say to the king the knowledge of the broil<br>
As thou didst leave it.</q>
</p>
<h3>Sergeant</h3>
<p>
<q>Doubtful it stood;<br>
As two spent swimmers, that do cling together<br>
And choke their art. The merciless Macdonwald—<br>
Worthy to be a rebel, for to that<br>
The multiplying villanies of nature<br>
Do swarm upon him—from the western isles<br>
Of kerns and gallowglasses is supplied;<br>
And fortune, on his damned quarrel smiling,<br>
Show’d like a rebel’s whore: but all’s too weak:<br>
For brave Macbeth—well he deserves that name—<br>
Disdaining fortune, with his brandish’d steel,<br>
Which smoked with bloody execution,<br>
Like valour’s minion carved out his passage<br>
Till he faced the slave;<br>
Which ne’er shook hands, nor bade farewell to him,<br>
Till he unseam’d him from the nave to the chaps,<br>
And fix’d his head upon our battlements.</q>
</p>
<p>
…
</p>
<p>
<a href="http://shakespeare.mit.edu/macbeth/full.html" target="_blank">Continue reading »</a>
</p>
</section>
<section>
<h3>Customization</h3>
<pre><code>@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');<br><br>--ts-color-heading: firebrick;<br>--ts-color-background: white;<br>--ts-font-family-only-one: 'IM Fell English', serif;<br>--ts-font-weight-regular: 400;<br>--ts-font-weight-bold: 400;</code></pre>
</section>
</article>
</main>
</div>
</body>
</html>