-
Notifications
You must be signed in to change notification settings - Fork 3
/
local-test.html
108 lines (103 loc) · 2.71 KB
/
local-test.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
<head>
<script src="./lib/index.js"></script>
<link href="./lib/index.css" rel="stylesheet" />
<title>boundless shapeshifters</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="poems"></div>
<script>
const poems = [
{
content: `
* Texts
* Melodies
* for
* words
* communes of
* letters
* are
* boundless shapeshifters,
* boundless shapeshifters (technicolor chameleons)`,
},
{
content: `
* <a href="https://google.com">Texts</a>
* <a href="https://google.com">Melodies</a>
* <em>for</em>
* words
* are
* <b>boundless shapeshifters</b>,
* boundless shapeshifters (technicolor chameleons)`,
config: { textMode: TextMode.Html },
},
{
content: `
* Texts
* Melodies
* are
* _boundless shapeshifters,_
* boundless shapeshifters (technicolor chameleons),
* zealous freedom fighters,
* *sacred*
* sacred (laden with gravitas)
* ---
* holders of space
* holders of *space* and keepers of time
* > holders of space and keepers of time and protectors of life`,
config: {
specialCharacters: {
// quote
"^> (.*)$": (lineText) => {
const el = document.createElement("blockquote");
const span = document.createElement("span");
span.appendChild(document.createTextNode(lineText));
el.appendChild(span);
return el;
},
}
}
},
];
const poemContainer = document.getElementById("poems");
poems.forEach((poem) => {
const poemDiv = document.createElement("div");
const { config, content } = poem;
const poemContent = createTelescopicTextFromBulletedList(content, config);
poemDiv.appendChild(poemContent);
poemContainer.appendChild(poemDiv);
});
</script>
</body>
<style>
body {
background: #ede8e4;
}
#poems {
color: #141312;
margin: 10vh 35vw;
font-size: 1.3rem;
line-height: 2.5rem;
font-family: "Libre Baskerville", serif;
}
@media only screen and (max-width: 1600px) {
#poems {
margin: 10vh 20vw;
}
}
@media only screen and (max-width: 800px) {
#poems {
margin: 10vh 5vw;
}
}
:root {
--telescope-highlight: #95abe655;
--telescope-highlight-hover: #95abe699;
--telescope-text-color: #1f2021;
}
</style>