-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.html
113 lines (107 loc) · 3.23 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Démonstration</title>
<style type="text/css">
body {
padding: 20px;
box-sizing: border-box;
}
.styled {
font-family: Athelas, Cambria, Georgia, Times, "Times New Roman", serif;
margin: 0 auto;
max-width: 45em;
}
.styled h1 {
font-weight: normal;
text-align: center;
font-size: 1.5em;
line-height: 1;
}
.overridden h1 {
font-size: 1.25em !important;
line-height: 1.2 !important;
font-variant: small-caps !important;
}
.styled h2 {
font-weight: normal;
text-align: center;
font-size: 1.25em;
line-height: 1.2;
}
.overridden h2 {
font-size: 1em !important;
line-height: 1.2 !important;
font-weight: bold !important;
text-align: left !important;
margin: 1em 0 !important;
}
.styled blockquote {
margin: 1.5em 10%;
text-align: right;
font-style: italic;
}
.overridden blockquote {
text-align: left !important;
margin-right: 0 !important;
font-style: normal;
}
.styled cite {
display: block;
font-style: normal;
}
.styled p {
margin: 0;
line-height: 1.5;
}
.styled p+p {
text-indent: 1em;
}
.overridden p+p {
text-indent: 0 !important;
margin: 1em 0 0 0 !important;
}
.paginated {
box-sizing: border-box;
max-width: 100%;
height: 100vh;
max-height: 600px;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-width: 250px;
-moz-column-width: 250px;
column-width: 250px;
-moz-column-fill: auto;
column-fill: auto;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow-y: hidden;
}
@media screen and (min-width: 45em) {
.paginated {
overflow-x: auto;
}
}
.sans {
font-family: Seravek, Calibri, Arial, sans-serif;
}
.night {
background-color: #121212;
color: #FAFAFA;
}
</style>
</head>
<body class="styled paginated">
<h1>La typographie comme voix</h1>
<blockquote>
<p>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. <cite>— John Doe</cite></p>
</blockquote>
<p>Aorem ipsum dolor sit amet, cœnsectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Pellentesque nibh. Aenean quam. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.</p>
<h2>Qui impose le rythme, explicite</h2>
<p>Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.</p>
<p>Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. <i>Proin quam</i>. Integer lacinia sollicitudin massa. Cras metus.</p>
</body>
</html>