-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy patheras.html
More file actions
395 lines (360 loc) · 42.4 KB
/
eras.html
File metadata and controls
395 lines (360 loc) · 42.4 KB
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
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Witch trials, Witchcraft, Sorcery, Feminism">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="img/logo.svg">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Fonts -->
<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=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Theme 1 Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700;900&family=IM+Fell+English:ital,wght@0,400;0,700&display=swap" rel="stylesheet">
<!-- W95FA Windows 95 font -->
<link href="https://fonts.cdnfonts.com/css/w95fa" rel="stylesheet">
<!-- Cyberpunk fonts: Orbitron + Rajdhani -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- XIX century fonts: Abril Fatface + IM Fell English SC + IM Fell English -->
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
<!-- Vienna Secession font: Kolo W01 RegularLP + Federo -->
<link href="https://fonts.googleapis.com/css2?family=Federo&display=swap" rel="stylesheet">
<link href="https://db.onlinewebfonts.com/c/5f48bbaab9d184a5466d1354cae30512?family=Kolo+W01+RegularLP" rel="stylesheet">
<!-- 70s Feminist Publishing fonts: Oswald + Work Sans + Archivo Black -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body class="eras-page">
<!-- Grid effect for cyberpunk theme-->
<div class="grid-bg">
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
</div>
<header id="header">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185" fill="none">
<path d="M47.5612 6.66403C33.7838 3.00659 19.7741 10.7527 16.2696 23.9649C12.7653 37.1772 21.093 50.8529 34.8704 54.5103C44.3544 57.028 53.9488 54.1422 60.1503 47.7891L60.1493 47.7889C55.3489 50.3386 49.5185 51.1439 43.7356 49.6088C31.9101 46.4695 24.7616 34.731 27.77 23.3902C30.4837 13.1586 40.5374 6.74595 51.1626 7.89508C50.0107 7.40804 48.8082 6.99512 47.5612 6.66403Z" fill="black"/>
<path d="M143.664 107.787C143.534 107.734 143.401 107.684 143.264 107.636C143.386 107.348 143.499 107.066 143.604 106.794C143.69 106.568 143.67 106.472 143.405 106.307C142.516 105.76 141.324 104.829 140.49 103.986C138.936 102.416 134.343 97.0535 130.007 91.8047C132.1 93.2384 134.205 94.7745 135.224 95.7231C137.374 97.7251 142.192 103.01 146.096 107.058C145.298 107.297 144.489 107.54 143.664 107.787ZM119.861 99.9057C120.605 98.6774 121.733 96.2635 122.852 93.6839C123.365 94.3186 123.868 94.9675 124.336 95.6466C125.344 97.1108 127.493 101.337 129.493 105.923C126.344 106.562 124.533 107.253 122.724 107.595C120.522 108.01 119.641 106.867 118.539 105.101C117.438 103.334 118.539 102.088 119.861 99.9057ZM197.073 93.345C193.207 91.8667 191.205 92.4901 188.142 94.0256C185.083 95.5611 176.602 97.8424 168.501 100.328C168.024 100.475 165.835 101.134 162.407 102.164C162.444 101.027 162.023 100.989 160.481 101.067C159.847 101.099 158.715 100.839 158.011 100.602C156.847 100.211 156.173 100.084 155.023 100.229C154.662 100.274 154.152 100.318 153.581 100.318C153.598 100.205 153.621 100.079 153.637 99.9698C153.661 99.8262 153.654 99.7356 153.494 99.6728C151.175 98.6507 148.404 97.0746 147.261 96.3154C142.608 93.2255 132.459 84.242 130.969 82.0539C130.416 81.2396 129.238 80.1864 127.879 79.1111C127.739 78.6993 127.66 78.2906 127.634 77.8787C127.931 78.19 128.203 78.5044 128.486 78.9131C129.65 80.6014 131.5 82.1922 133.571 83.0033C132.541 82.2897 131.562 81.3119 130.803 80.3467C131.361 80.5982 132.04 80.768 132.973 80.79C131.046 80.3687 130.637 78.8533 130.571 78.0768C130.514 77.3914 130.573 76.9104 130.579 76.442C130.879 76.684 131.199 76.9355 131.526 77.2091C132.715 78.2025 134.152 80.3656 134.76 82.3746C134.677 80.2618 133.738 78.0705 132.466 76.4545C132.246 76.1747 132.074 75.9138 131.918 75.656C132.529 75.9546 133.001 76.3476 133.376 76.6809C134.582 77.753 135.419 79.7777 135.416 81.0101C136.283 79.0137 135.77 76.7815 134.673 74.9234C134.086 73.9268 132.986 72.7541 131.52 71.7638C132.864 72.1222 134.664 73.1597 135.433 73.6187C136.202 74.0746 137.419 75.1655 138.077 76.4451C138.134 74.2506 136.349 72.512 135.359 71.6726C134.462 70.9118 132.243 69.3933 131.114 67.9062C131.332 68.0477 131.55 68.2049 131.783 68.3935C133.4 69.7077 135.648 70.7514 137.875 70.9809C136.182 70.3962 134.43 69.2895 133.315 68.252C134.477 68.5004 135.619 68.5161 136.957 68.1923C132.937 68.098 132.511 66.0513 131.878 64.3724C131.523 63.4324 131.072 62.5363 130.568 61.7221C136.32 62.6495 142.321 63.4418 145.719 63.5676C146.437 63.6053 146.466 63.2469 145.804 62.8665C141.345 60.8103 136.414 58.8674 131.449 57.22C131.732 56.5031 131.946 55.8115 131.671 55.3713C132.619 54.5005 131.695 52.2337 132.058 50.8661C132.421 49.4985 135.692 48.1026 137.094 47.6939C138.091 47.4015 139.571 47.0934 140.872 47.0777C142.173 47.0651 144.498 47.3826 145.575 47.8857C146.973 48.5396 147.644 49.7123 147.505 50.7812C147.409 51.5169 146.956 52.108 146.197 52.6015C145.856 52.7965 145.942 53.1769 146.489 53.0731C147.157 52.9285 147.884 52.6392 148.622 52.0576C150.305 50.734 149.619 48.0963 147.93 46.7224C146.313 45.4082 144.298 44.9744 142.014 44.289C140.536 43.8457 135.183 42.3083 132.456 42.2328C130.043 42.1668 128.44 42.1794 126.648 42.8522C124.779 43.5533 121.95 44.7008 120.117 46.4111C118.029 48.3604 115.812 50.3914 113.778 52.9002C107.775 52.0105 100.652 51.3691 96.4622 51.6458C95.6361 51.7118 95.4368 52.0294 96.2246 52.3186C99.3827 53.5573 105.419 55.6763 111.103 57.4086C110.937 57.8707 110.859 58.27 110.918 58.5687C111.088 59.4176 110.663 59.7383 109.883 60.2664C109.042 60.8386 108.346 61.3574 107.947 61.612C107.548 61.8635 107.467 62.5647 108.05 62.7722C108.377 62.8916 108.979 63.0016 109.384 63.1148C109.742 63.2154 109.912 63.6084 109.765 64.014C109.693 64.2121 109.627 64.3693 109.408 64.5988C109.251 64.7654 109.293 65.193 109.582 65.4728C109.115 65.7306 109.226 66.3248 109.489 66.5071C109.768 66.6989 109.942 67.1956 109.956 67.3686C109.995 67.837 109.872 67.9973 109.67 68.5695C109.448 69.2015 110.061 69.912 110.645 70.0189C111.228 70.1289 111.935 70.1352 112.535 70.1635C113.065 70.1887 113.971 70.4433 114.477 71.3268C113.788 71.3834 113.107 71.5091 112.453 71.6538C109.656 72.2763 105.323 74.7505 103.293 76.8758C97.5082 80.9095 92.2521 83.6415 86.4977 84.2515C78.6536 85.0846 71.9858 83.783 63.4443 85.7386C62.4492 87.8503 60.2102 88.6325 60.4591 90.9015C67.4248 89.3368 73.1465 88.398 79.8636 88.0069C80.9436 87.944 82.0373 87.8547 83.1353 87.7507C81.0899 88.3889 79.0078 88.9174 76.9088 89.289C67.6881 90.9219 57.0394 92.9174 50.9502 96.5455C53.8343 97.4528 54.7957 100.174 53.1935 102.593C51.591 105.011 50.9502 106.523 51.9116 109.547C56.3983 106.523 67.0103 101.229 73.0639 99.5857C67.936 102.307 58.6416 108.035 55.7575 112.873C60.885 115.291 64.0897 116.803 65.0511 118.92C69.2493 109.6 72.4557 106.575 79.1525 101.383C82.3039 98.9402 85.5063 96.2927 89.5658 94.031C92.3934 92.4556 95.6688 90.9543 99.5653 89.561C99.521 89.7216 99.481 89.8763 99.434 90.041C98.515 93.273 94.4584 98.9597 88.3219 104.436C84.2064 108.109 79.8636 113.825 82.0197 119.614C82.8604 121.871 84.3936 123.657 86.3541 124.899C78.277 127.298 71.3583 129.342 66.7013 130.7C66.6127 130.35 66.5324 130.013 66.4691 129.731C65.8209 129.862 65.1025 130.048 64.0861 130.333C64.9358 129.784 65.648 129.463 66.4048 129.191C66.3498 128.684 66.584 126.796 66.6587 126.486C63.2163 126.678 58.6476 130.918 57.53 131.918C55.7355 131.637 53.2505 131.482 52.3648 132.429C46.1765 130.378 27.8967 129.835 20.8747 129.878C13.8527 129.921 5.71104 130.293 0 132.168C0.810436 133.522 1.37393 134.801 1.55688 136.122C3.01313 136.52 6.14091 136.906 8.6332 137.18C6.26288 137.134 3.68961 136.872 1.58187 136.482C1.57921 136.767 1.56623 137.952 1.5209 138.242C4.18215 138.884 8.70619 138.998 11.0002 139.025C8.68453 139.769 3.62763 139.613 1.64619 139.653C1.82314 142.327 2.85219 144.873 3.93854 146.502C6.54513 146.596 16.3897 145.298 20.3246 143.972C15.395 146.015 10.6786 147.173 7.54618 147.896C7.7078 148.361 8.184 149.162 8.5399 149.712C10.6543 149.419 13.6634 148.738 15.3136 148.303C13.8184 148.851 10.8399 149.829 8.93079 150.276C10.5937 152.505 13.1776 154.946 14.4909 155.898C17.7083 155.502 26.5728 152.135 29.1944 149.442C27.965 151.814 17.7293 155.87 15.6909 156.829C16.7396 157.832 19.4305 158.932 22.0747 159.784C22.7335 159.495 25.4014 157.939 26.3955 157.404C25.4098 158.253 23.6673 159.564 22.8305 160.048C23.8752 160.357 24.9569 160.636 26.0283 160.882C32.1648 155.377 41.1549 153.531 48.0317 148.218C51.2377 145.742 54.2785 142.224 55.174 140.555C56.9638 140.63 58.9106 139.035 59.5074 137.922C62.8954 138.184 68.6348 137.883 70.4106 137.335C69.7618 136.613 69.0323 135.657 68.5785 135.014C67.0549 135.369 65.3207 135.612 63.9744 135.603C65.443 135.374 67.4138 134.993 68.2579 134.63C68.1709 134.488 68.0853 134.337 68.0033 134.183C73.9433 132.348 82.7901 129.639 91.9855 126.818C93.1605 126.951 94.3791 126.957 95.6194 126.812C101.503 126.122 103.663 125.795 107.893 124.387C103.774 126.108 101.154 127.903 98.273 129.941C95.2879 132.054 93.7123 133.54 90.3689 137.565C91.384 140.488 94.3215 143.763 97.4196 145.124C97.4196 145.124 97.7402 144.62 99.2357 143.612C99.2291 144.628 99.3234 145.593 99.461 146.546C97.194 149.184 95.0913 151.881 93.604 153.228C93.57 153.201 93.4947 153.127 93.4307 153.071C93.2544 152.918 93.1112 152.784 92.9105 152.812C92.6769 152.844 92.5237 153.086 92.3664 153.29C92.1128 153.619 91.7895 154 91.411 154.273C90.5625 154.886 89.9534 155.097 88.5911 155.572C87.2285 156.049 84.9428 157.109 84.9775 158.106C84.14 158.766 83.238 159.744 82.5335 160.545C82.3349 160.787 82.3296 161.168 82.5235 161.529L83.3403 162.765C82.4982 164.843 81.6464 166.594 81.3562 168.317C81.0856 169.92 81.0659 171.64 81.8954 173.596C82.7654 175.649 83.9821 177.067 86.2488 177.925C87.5711 178.428 89.8171 178.343 91.501 177.535C93.1848 176.724 93.3464 175.781 92.2297 175.381C91.6112 175.161 90.2193 175.495 88.9853 174.693C88.2759 174.231 87.6997 172.976 87.866 171.524C87.9586 170.713 88.2779 169.619 89.0366 168.399C89.2513 168.056 89.5245 167.493 89.4829 167.201C90.022 167.103 90.4366 166.544 90.2983 166.126C90.6992 166.085 90.9918 165.802 91.1001 165.591C92.323 163.211 94.1785 161.353 95.8061 160.083C96.4392 159.586 97.278 158.967 97.7852 158.605C98.0144 158.439 98.0594 158.282 98.0577 158.131C98.0561 157.961 97.9568 157.841 97.8498 157.741C97.7562 157.653 97.7092 157.624 97.7092 157.624C98.2104 157.313 99.2701 156.59 100.571 155.685C100.544 156.508 100.474 157.373 100.332 158.3C103.404 156.499 106.007 154.54 108.331 152.351C107.196 155.018 106.283 157.423 104.832 159.272C104.701 159.212 104.63 159.178 104.51 159.121C104.343 159.042 104.255 159.049 104.119 159.112C103.92 159.203 103.857 159.357 103.761 159.659C103.615 160.114 103.509 160.341 103.188 160.746C102.547 161.551 101.906 162.054 100.731 162.862C99.556 163.667 97.7548 165.01 97.9415 166.085C97.4179 166.89 96.8604 167.805 96.3362 168.701C96.034 169.175 96.1916 169.653 96.5895 170.04L97.7402 171.128C97.5266 173.344 97.4789 175.532 97.6925 177.142C97.9061 178.755 98.3007 180.091 99.8486 181.811C101.364 183.496 103.229 184.257 104.631 184.499C106.289 184.785 108.39 184.577 109.811 183.524C111.298 182.421 110.861 180.993 109.689 181.21C108.852 181.367 107.865 181.367 106.5 180.902C105.69 180.625 104.47 179.896 104.363 178.585C104.296 177.758 104.526 176.413 104.892 175.026C104.945 174.825 105.024 174.407 104.783 174.243C105.091 174.052 105.326 173.778 105.413 173.508C105.521 173.178 105.507 172.81 105.342 172.539C105.682 172.407 105.837 172.146 105.959 171.86C106.908 169.653 108.816 166.072 109.384 165.179C109.759 164.591 110.098 164.035 110.357 163.595C110.541 163.284 110.657 163.07 110.602 162.891C110.544 162.705 110.369 162.639 110.369 162.639L110.162 162.532C110.797 161.765 112.606 159.706 114.557 157.474C115.366 159.863 116.141 162.369 116.185 165.094C119.871 162.073 123.901 154.572 125.782 150.818C128.403 145.588 131.343 142.11 133.794 139.027C139.145 132.293 142.606 126.572 143.814 120.443C144.371 117.623 144.476 115.426 144.338 113.662C144.434 113.539 144.495 113.398 144.532 113.16C144.85 113.12 145.416 112.599 145.402 112.208C146.137 111.87 146.425 111.2 146.01 110.473C145.955 110.376 145.899 110.262 145.841 110.14C146.688 109.892 147.54 109.643 148.394 109.395C148.898 109.893 149.37 110.352 149.787 110.737C150.185 111.119 150.481 111.078 150.748 110.616C151.041 109.991 151.326 109.255 151.597 108.467C151.77 108.417 151.942 108.368 152.115 108.318C152.991 109.186 153.645 109.645 154.625 109.992C155.589 110.333 156.385 110.318 156.955 109.644C157.859 109.717 158.994 109.312 158.863 108.769C159.616 108.721 160.145 108.625 160.634 108.27C160.945 108.045 160.887 107.641 160.774 107.317C162.119 106.905 162.319 106.319 162.272 105.437C165.895 104.427 168.631 103.691 169.617 103.472C175.562 102.148 190.728 98.5224 193.804 98.3558C196.883 98.1888 198.909 98.8349 199.705 97.3906C200.502 95.9459 199.702 94.352 197.073 93.345Z" fill="black"/>
</svg>
</a>
<button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-lg-flex justify-content-center" id="menuItems">
<ul class="navbar-nav">
<li class="nav-item text-center"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item text-center"><a class="nav-link" href="map.html">Map</a></li>
<li class="nav-item text-center"><a class="nav-link active" href="chronological.html">Exhibition</a></li>
<li class="nav-item text-center"><a class="nav-link" href="documentation.html">Documentation</a></li>
<li class="nav-item text-center"><a class="nav-link" href="documentation.html#disclaimer">Disclaimer</a></li>
<li class="nav-item text-center"><a class="nav-link" href="documentation.html#about">About</a></li>
</ul>
</div>
<!-- Theme switcher -->
<div class="layout-container">
<button class="layout-button" id="layoutButton" area-label="Layout options">
<!-- SVG icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M24.1022 10.7969C25.7807 11.808 27.319 14.1902 27.8239 16.5811C28.3544 19.0949 28.1173 23.5037 24.5934 26.8066C22.188 28.7859 19.1131 29.9801 15.7594 29.999V30.001H5.99963V31.9199L3.44104 30.001H3.33362V29.9199L0.666626 27.9199L3.33362 25.9199V25.8389H3.44104L5.99963 23.9199V25.8389H16.5065V25.8018C21.4916 25.388 25.427 21.2749 25.5553 16.2139L25.5582 15.959C25.5581 14.0667 25.0249 12.2992 24.1022 10.7969ZM9.83167 23.9199H9.78967L9.7262 23.8418C9.76109 23.8682 9.79641 23.894 9.83167 23.9199ZM15.6793 8.08008C20.0303 8.08043 23.5579 11.608 23.5582 15.959C23.5582 20.3103 20.0305 23.8385 15.6793 23.8389C11.3279 23.8388 7.80042 20.3104 7.80042 15.959C7.80077 11.6078 11.3281 8.08017 15.6793 8.08008ZM30.8912 4L25.5582 8V6.08105H15.7155C15.7034 6.08101 15.6914 6.08008 15.6793 6.08008C15.6674 6.08008 15.6551 6.08101 15.6432 6.08105H14.8854V6.11523C9.80081 6.51963 5.80075 10.7705 5.80042 15.959C5.80042 17.846 6.33081 19.6087 7.24866 21.1084C5.57858 20.09 4.05116 17.7194 3.54846 15.3389C3.01642 12.8183 3.25492 8.391 6.80627 5.08496C6.82102 5.0712 6.83483 5.05649 6.84924 5.04297C9.26123 3.08982 12.333 1.91898 15.6783 1.91895H25.5582V0L30.8912 4ZM15.5729 10.748C15.0872 10.7481 14.6934 11.1423 14.693 11.6279V16.5723L14.9508 16.8291L17.2877 19.166C17.6313 19.5096 18.1882 19.5095 18.5319 19.166C18.875 18.8223 18.8753 18.2654 18.5319 17.9219L16.4528 15.8428V11.6279C16.4524 11.1424 16.0585 10.7482 15.5729 10.748ZM21.5826 8L21.6686 8.10449C21.6224 8.06921 21.5758 8.03448 21.5289 8H21.5826Z" fill="#1A1A1A"/>
</svg>
</button>
<ul class="layout-options" id="layoutOptions">
<li class="trigger-style" data-theme="theme1">
<span class="style-label" style="font-family: 'Cormorant Garamond';">Early Modern Era</span>
<img class="style-icon" src="img/early-modern-era/theme1.svg" alt="Style 1">
</li>
<li class="trigger-style" data-theme="theme2">
<span class="style-label" style="font-family: 'Abril Fatface', serif;">Penny Dreadfuls</span>
<img class="style-icon" src="img/penny/icon.svg" alt="Style 2">
</li>
<li class="trigger-style" data-theme="theme3">
<span class="style-label" style="font-family: 'Kolo W01 RegularLP', sans-serif;">Vienna Secession</span>
<img class="style-icon" src="img/vienna-secession/icon.svg" alt="Style 3">
</li>
<li class="trigger-style" data-theme="theme4">
<span class="style-label" style="font-family: 'Archivo Black', sans-serif;">70s Feminist Publishing</span>
<img class="style-icon" src="img/70s-feminist-protests/70s_feminism_icon.svg" alt="Style 4">
</li>
<li class="trigger-style" data-theme="theme5">
<span class="style-label" style="font-family: 'Press Start 2P', cursive;"> Windows 95</span>
<img class="style-icon" src="img/windows95/theme4.svg" alt="Style 5">
</li>
<li class="trigger-style" data-theme="theme6">
<span class="style-label" style="font-family: 'Orbitron', sans-serif;">Cyberpunk 2035</span>
<img class="style-icon" src="img/cyberpunk/cyberpunk_icon.svg" alt="Style 6">
</li>
<li class="trigger-style" id="resetTheme">
<span class="style-label"> Reset to Default</span>
<svg class="style-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M24.1022 10.7969C25.7807 11.808 27.319 14.1902 27.8239 16.5811C28.3544 19.0949 28.1173 23.5037 24.5934 26.8066C22.188 28.7859 19.1131 29.9801 15.7594 29.999V30.001H5.99963V31.9199L3.44104 30.001H3.33362V29.9199L0.666626 27.9199L3.33362 25.9199V25.8389H3.44104L5.99963 23.9199V25.8389H16.5065V25.8018C21.4916 25.388 25.427 21.2749 25.5553 16.2139L25.5582 15.959C25.5581 14.0667 25.0249 12.2992 24.1022 10.7969ZM9.83167 23.9199H9.78967L9.7262 23.8418C9.76109 23.8682 9.79641 23.894 9.83167 23.9199ZM15.6793 8.08008C20.0303 8.08043 23.5579 11.608 23.5582 15.959C23.5582 20.3103 20.0305 23.8385 15.6793 23.8389C11.3279 23.8388 7.80042 20.3104 7.80042 15.959C7.80077 11.6078 11.3281 8.08017 15.6793 8.08008ZM30.8912 4L25.5582 8V6.08105H15.7155C15.7034 6.08101 15.6914 6.08008 15.6793 6.08008C15.6674 6.08008 15.6551 6.08101 15.6432 6.08105H14.8854V6.11523C9.80081 6.51963 5.80075 10.7705 5.80042 15.959C5.80042 17.846 6.33081 19.6087 7.24866 21.1084C5.57858 20.09 4.05116 17.7194 3.54846 15.3389C3.01642 12.8183 3.25492 8.391 6.80627 5.08496C6.82102 5.0712 6.83483 5.05649 6.84924 5.04297C9.26123 3.08982 12.333 1.91898 15.6783 1.91895H25.5582V0L30.8912 4ZM15.5729 10.748C15.0872 10.7481 14.6934 11.1423 14.693 11.6279V16.5723L14.9508 16.8291L17.2877 19.166C17.6313 19.5096 18.1882 19.5095 18.5319 19.166C18.875 18.8223 18.8753 18.2654 18.5319 17.9219L16.4528 15.8428V11.6279C16.4524 11.1424 16.0585 10.7482 15.5729 10.748ZM21.5826 8L21.6686 8.10449C21.6224 8.06921 21.5758 8.03448 21.5289 8H21.5826Z" fill="#1A1A1A"/>
</svg>
</li>
</ul>
</div>
</nav>
<div class="dropdown-overlay" id="dropdownOverlay"></div>
</header>
<main class="page-content" id="pageContent">
<div class="toggle-frame">
<!-- Left Label -->
<span id="labelChrono" class="toggle-text">Chronological</span>
<!-- The Toggle Pill -->
<div class="toggle-pill eras-active">
<!-- Active Icon inside Knob -->
<div class="toggle-knob">
<!-- <img id="toggleIcon" src="img/eras-active.svg" alt="Active Icon"> -->
<svg id="toggleIcon" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.2207" y="9.98828" width="8.88889" height="8.88889" rx="1.11111" fill="#CCCCCC"/>
<rect x="19.002" y="20.1064" width="17.7778" height="17.7778" rx="2.22222" fill="#CCCCCC"/>
<rect x="19.002" y="2.11621" width="13.3333" height="13.3333" rx="2.22222" fill="#CCCCCC"/>
</svg>
</div>
<!-- Inactive Icon on the opposite side -->
<!-- <img id="inactiveIcon" class="inactive-icon" src="img/chronological-inactive.svg" alt="Inactive Icon"> -->
<div class="inactive-icon-wrapper">
<svg id="inactiveIcon" class="inactive-icon" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.53 8.84949C10.53 10.6686 9.05534 12.1433 7.23621 12.1433C5.41708 12.1433 3.94238 10.6686 3.94238 8.84949C3.94238 7.03036 5.41708 5.55566 7.23621 5.55566C9.05534 5.55566 10.53 7.03036 10.53 8.84949Z" fill="#333333"/>
<path d="M20.4115 8.84949C20.4115 10.6686 18.9368 12.1433 17.1177 12.1433C15.2986 12.1433 13.8239 10.6686 13.8239 8.84949C13.8239 7.03036 15.2986 5.55566 17.1177 5.55566C18.9368 5.55566 20.4115 7.03036 20.4115 8.84949Z" fill="#333333"/>
<path d="M30.293 8.84949C30.293 10.6686 28.8183 12.1433 26.9992 12.1433C25.1801 12.1433 23.7054 10.6686 23.7054 8.84949C23.7054 7.03036 25.1801 5.55566 26.9992 5.55566C28.8183 5.55566 30.293 7.03036 30.293 8.84949Z" fill="#333333"/>
<path d="M25.3523 30.9381C25.3523 32.7572 23.8776 34.2319 22.0584 34.2319C20.2393 34.2319 18.7646 32.7572 18.7646 30.9381C18.7646 29.119 20.2393 27.6443 22.0584 27.6443C23.8776 27.6443 25.3523 29.119 25.3523 30.9381Z" fill="#333333"/>
<path d="M15.4708 30.9381C15.4708 32.7572 13.9961 34.2319 12.177 34.2319C10.3578 34.2319 8.88313 32.7572 8.88313 30.9381C8.88313 29.119 10.3578 27.6443 12.177 27.6443C13.9961 27.6443 15.4708 29.119 15.4708 30.9381Z" fill="#333333"/>
<path d="M8.4707 18.6592H15.8818V13.7178H18.3525V18.6592H25.7637V13.7178H28.2334V18.6592H35.0586V14.4932L40 19.4336L35.0586 24.374V21.1289H23.293V26.0703H20.8232V21.1289H13.4121V26.0703H10.9414V21.1289H0V18.6592H6.00098V13.7178H8.4707V18.6592Z" fill="#333333"/>
</svg>
</div>
</div>
<!-- Right Label -->
<span id="labelEras" class="toggle-text active-text">Eras</span>
</div>
<div class="container eras">
<div class="row g-3 p-3">
<div class="col-12 col-md-6 col-lg-3">
<div class="era-card">
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<div class="era-card-content">
<div class="era-card-header">
<div class="era-title">Mythic roots</div>
<p class="era-description">Witch as sorceress, healer, goddess, women connected to nature, magic and divinity.</p>
</div>
<div class="era-items">
<a href="item_page.html?id=hecate&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/hecate.jpg" alt="Statue of a Triple-Bodied Hecate">
<div class="era-item-text">Statue of a Triple-Bodied Hecate</div>
</a>
<a href="item_page.html?id=medea-amphora&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Medea.jpg" alt="Medea's Amphora">
<div class="era-item-text">Medea's Amphora</div>
</a>
<a href="item_page.html?id=circe-odysseus&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Circe.jpg" alt="Circe offering the cup to Odysseus">
<div class="era-item-text">Circe offering the cup to Odysseus</div>
</a>
<a href="item_page.html?id=morgan-le-fay&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Morgana.jpeg" alt="Morgan-Le-Fay">
<div class="era-item-text">Morgan-Le-Fay</div>
</a>
<a href="item_page.html?id=baba-yaga&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Baba_Yaga.jpg" alt="Baba Yaga Illustration">
<div class="era-item-text">Baba Yaga Illustration</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="era-card">
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<div class="era-card-content">
<div class="era-card-header">
<div class="era-title">Fires of fear</div>
<p class="era-description">Witch as a heretic, victim, witch hunts.</p>
</div>
<div class="era-items">
<a href="item_page.html?id=waldensian-witches&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Vaudoises.jpeg" alt="Two Waldensian Witches">
<div class="era-item-text">Two Waldensian Witches</div>
</a>
<a href="item_page.html?id=malleus-maleficarum&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/malleus.jpeg" alt="Malleus Maleficarum">
<div class="era-item-text">Malleus Maleficarum</div>
</a>
<a href="item_page.html?id=hortus-sanitatis&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Hortus_Titelblatt.jpg" alt="Hortus Sanitatis">
<div class="era-item-text">Hortus Sanitatis</div>
</a>
<a href="item_page.html?id=brewing-storm&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/xilografia.jpeg" alt="Witches brewing up a storm">
<div class="era-item-text">Witches brewing up a storm</div>
</a>
<a href="item_page.html?id=woodcut-witches&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/woodcut.jpg" alt="The Witches">
<div class="era-item-text">The Witches</div>
</a>
<a href="item_page.html?id=examination-witch&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Examination_of_a_Witch.jpeg" alt="The Examination of a Witch">
<div class="era-item-text">The Examination of a Witch</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="era-card">
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<div class="era-card-content">
<div class="era-card-header">
<div class="era-title">Visions and shadows</div>
<p class="era-description">Witch as symbol of imagination, sensuality and rebellion. The figure is romanticized by poets and painters.</p>
</div>
<div class="era-items">
<a href="item_page.html?id=three-witches&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/tre_streghe.jpg" alt="The Three Witches">
<div class="era-item-text">The Three Witches</div>
</a>
<a href="item_page.html?id=walnut-tree&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/nocedibenevento.jpeg" alt="The Walnut Tree of Benevento">
<div class="era-item-text">The Walnut Tree of Benevento</div>
</a>
<a href="item_page.html?id=witchcraft-hung&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/poem.jpg" alt="Witchcraft was hung, in History">
<div class="era-item-text">Witchcraft was hung, in History</div>
</a>
<a href="item_page.html?id=myths-series&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/warhol-the-witch.webp" alt="The Myths series">
<div class="era-item-text">The Myths series</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="era-card">
<span class="bottom-left"></span>
<span class="bottom-right"></span>
<div class="era-card-content">
<div class="era-card-header">
<div class="era-title">Reclaming the spell</div>
<p class="era-description">Empowerment and modern reclamation, witch as icon of rebellion and identity.</p>
</div>
<div class="era-items">
<a href="item_page.html?id=anna-goldi&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Anna-Goldi.jpeg" alt="Anna Goldi">
<div class="era-item-text">Atto Göldin 4</div>
</a>
<a href="item_page.html?id=petronilla-de-meath&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Petronilla.png" alt="Petronilla de Meath Place Setting">
<div class="era-item-text">Petronilla de Meath Place Setting</div>
</a>
<a href="item_page.html?id=streghe-tornate&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/StregheSonTornatePhoto_PaolaAgosti.jpg" alt="Le streghe son tornate">
<div class="era-item-text">"Le streghe son tornate"</div>
</a>
<a href="item_page.html?id=witches-america&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/Wolf_WitchPhotograph_FrancesDenny.jpg" alt="Witches in America">
<div class="era-item-text">Witches in America</div>
</a>
<a href="item_page.html?id=witch-camp-ghana&narrative=eras" class="era-item text-decoration-none">
<img src="img/collection/lee-ann-olwage-the-big-forget-00004.jpeg" alt="Witch Camp in Ghana">
<div class="era-item-text">Witch Camp in Ghana</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="footer-separator" id="footerSeparator"></div>
<!-- Footer -->
<div class="thematic-divider-footer" id="thematicDividerFooter"></div>
<footer class="text-white text-center" id="footer">
<!-- Grid container -->
<div class="container p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">About the project</h5>
<p>
The purpose of this web site is to explore various types of typographic and layout style for museum pages, as an end-of-course project for the "Information Modeling and Web technologies" course of the Master Degree in Digital Humanities and Digital Knowledge of the University of Bologna, under prof. Fabio Vitali.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Creators</h5>
<ul class="list-unstyled">
<li class="mt-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
<a class="fw-bold" href="https://github.com/Maryamdadras">Maryam Dadrasrazi</a>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg>
maryam.dadrasrazi@studio.unibo.it
</p>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
<a class="fw-bold" href="https://github.com/mir-pin">Miriana Pinto</a>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg>
miriana.pinto@studio.unibo.it
</p>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
<a class="fw-bold" href="https://github.com/sararoggi">Sara Roggiani</a>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg>
sara.roggiani2@studio.unibo.it
</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3 copyright-text" style="background-color: rgba(0, 0, 0, 0.2);">
<p>
All copyrights and related rights on the content remain with their original owners. All copyright on the typographic and layout choices are 2025 © Witches through time.
</p>
</div>
<!-- Copyright -->
</footer>
<!-- JS moved at the bottom -> in the head: it runs before the DOM is fully loaded and might fail -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/main.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>