-
Notifications
You must be signed in to change notification settings - Fork 2
/
showcase-playfair.html
104 lines (104 loc) · 5.95 KB
/
showcase-playfair.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Playfair Display and Titillium Web | Typesettings.css</title>
<link rel="stylesheet" href="src/styles/typesettings.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:900|Titillium+Web:300,300i,700&display=swap&subset=cyrillic,latin-ext');
:root {
--ts-color-heading: #aa076b;
--ts-color-body: #2f4c6a;
--ts-color-background: #f8f8ff;
--ts-color-link: black;
--ts-color-subtle: azure;
--ts-font-family-serif: 'Playfair Display', serif;
--ts-font-family-sans: 'Titillium Web', sans-serif;
--ts-font-family-sans-alt: 'Titillium Web', sans-serif;
--ts-font-weight-regular: 300;
--ts-font-weight-bold: 900;
}
</style>
<meta name="description" content="Example article with custom fonts (Playfair Display and Titillium Web) and colors.">
</head>
<body>
<a href="#content">
Skip to content
</a>
<div data-typesettings="golden indented sans-serif">
<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>
The Vendetta
</h1>
<h2>
Guy de Maupassant
</h2>
<p>
The widow of Paolo Saverini lived alone with her son in a poor little house on the outskirts of Bonifacio. The town, built on an outjutting part of the mountain, in places even overhanging the sea, looks across the straits, full of sandbanks, towards the southernmost coast of Sardinia.
</p>
</header>
<p>
Beneath it, on the other side and almost surrounding it, is a cleft in the cliff like an immense corridor which serves as a harbor, and along it the little Italian and Sardinian fishing boats come by a circuitous route between precipitous cliffs as far as the first houses, and every two weeks the old, wheezy steamer which makes the trip to Ajaccio.
</p>
<aside>
<p>
<strong>Henri René Albert Guy de Maupassant</strong> (French: [ɡid(ə) mopasɑ̃]; 5 August 1850 – 6 July 1893) was a popular French writer, considered one of the fathers of the modern short story and one of the form’s finest exponents.
</p>
</aside>
<p>
On the white mountain the houses, massed together, makes an even whiter spot. They look like the nests of wild birds, clinging to this peak, overlooking this terrible passage, where vessels rarely venture. The wind, which blows uninterruptedly, has swept bare the forbidding coast; it drives through the narrow straits and lays waste both sides. The pale streaks of foam, clinging to the black rocks, whose countless peaks rise up out of the water, look like bits of rag floating and drifting on the surface of the sea.
</p>
<p>
The house of widow Saverini, clinging to the very edge of the precipice, looks out, through its three windows, over this wild and desolate picture.
</p>
<p>
She lived there alone, with her son Antonia and their dog “Semillante,” a big, thin beast, with a long rough coat, of the sheep-dog breed. The young man took her with him when out hunting.
</p>
<p>
One night, after some kind of a quarrel, Antoine Saverini was treacherously stabbed by Nicolas Ravolati, who escaped the same evening to Sardinia.
</p>
<blockquote>
<p>
<q>Never fear, my boy, my little baby, you shall be avenged. Sleep, sleep; you shall be avenged. Do you hear? It’s your mother’s promise! And she always keeps her word, your mother does, you know she does.</q>
</p>
</blockquote>
<p>
When the old mother received the body of her child, which the neighbors had brought back to her, she did not cry, but she stayed there for a long time motionless, watching him. Then, stretching her wrinkled hand over the body, she promised him a vendetta. She did not wish anybody near her, and she shut herself up beside the body with the dog, which howled continuously, standing at the foot of the bed, her head stretched towards her master and her tail between her legs. She did not move any more than did the mother, who, now leaning over the body with a blank stare, was weeping silently and watching it.
</p>
<p>
The young man, lying on his back, dressed in his jacket of coarse cloth, torn at the chest, seemed to be asleep. But he had blood all over him; on his shirt, which had been torn off in order to administer the first aid; on his vest, on his trousers, on his face, on his hands. Clots of blood had hardened in his beard and in his hair.
</p>
<p>
…
</p>
<p>
<a href="http://www.classicshorts.com/stories/vendetta.html" target="_blank">Continue reading »</a>
</p>
<section>
<h3>Customization</h3>
<pre><code>@import url('https://fonts.googleapis.com/css?family=Playfair+Display:900|Titillium+Web:300,300i,700&display=swap&subset=cyrillic,latin-ext');<br><br>--ts-color-heading: #aa076b;<br>--ts-color-body: #2f4c6a;<br>--ts-color-background: #f8f8ff;<br>--ts-font-family-serif: 'Playfair Display', serif;<br>--ts-font-family-sans: 'Titillium Web', sans-serif;<br>--ts-font-family-sans-alt: 'Titillium Web', sans-serif;<br>--ts-font-weight-regular: 300;<br>--ts-font-weight-bold: 900;</code></pre>
</section>
</article>
</main>
</div>
</body>
</html>