-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathdocumentation.html
More file actions
1880 lines (1626 loc) · 151 KB
/
documentation.html
File metadata and controls
1880 lines (1626 loc) · 151 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
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<title>Documentation Page</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="documentation-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" href="chronological.html">Exhibition</a></li>
<li class="nav-item text-center"><a class="nav-link active" 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="Cyberpunk style">
</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="none"/>
</svg>
</li>
</ul>
</div>
</nav>
<div class="dropdown-overlay" id="dropdownOverlay"></div>
</header>
<main class="page-content" id="pageContent">
<div class="thematic-divider-nav"></div>
<!-- Documentation -->
<section id="documentation" class="lg-m-5 sm-m-0 p-4 mt-5">
<div class="container-fluid documentation-box">
<div class="row justify-content-center documentation-intro">
<div class="col-lg-10 col-md-10 col-sm-12 text-box documentation-title">
<h1>Documentation</h1>
</div>
<div class="card mb-5 card-contents table-of-contents">
<div class="card-body">
<h4 class="card-title" style="color: black; font-weight: 700;">Table of Contents</h4>
<ul class="list-unstyled">
<li class="mb-2">
<a href="#general" class="text-decoration-none">
<strong>1. General scope and purpose</strong>
</a>
<ul class="list-unstyled ms-4 mt-1">
<li><a href="#theme" class="text-decoration-none">1.1 Exhibition theme and
concept</a></li>
<li><a href="#content" class="text-decoration-none">1.2 Content and Item
description</a></li>
<li><a href="#structure" class="text-decoration-none">1.3 Structure and thematic
rooms</a></li>
<li><a href="#metadata" class="text-decoration-none">1.4 Metadata model</a></li>
</ul>
</li>
<li class="mb-2">
<a href="#presentation" class="text-decoration-none">
<strong>2. Presentation and Navigation</strong>
</a>
<ul class="list-unstyled ms-4 mt-1">
<li><a href="#index-page" class="text-decoration-none">2.1 Index Page</a></li>
<li><a href="#map-page" class="text-decoration-none">2.2 Map Page</a></li>
<li><a href="#exhibition-page" class="text-decoration-none">2.3 Exhibition
Page</a></li>
<li><a href="#item-page" class="text-decoration-none">2.4 Item Page</a></li>
</ul>
</li>
<li class="mb-2">
<a href="#themes" class="text-decoration-none">
<strong>3. Themes</strong>
</a>
<ul class="list-unstyled ms-4 mt-1">
<li><a href="#early-modern-era" class="text-decoration-none">3.1 Early Modern Era</a></li>
<li><a href="#penny-dreadfuls" class="text-decoration-none">3.2 Penny Dreadfuls</a></li>
<li><a href="#vienna-secession" class="text-decoration-none">3.3 Vienna Secession</a></li>
<li><a href="#70s-feminist-protests" class="text-decoration-none">3.4 70s Feminist Publishing</a></li>
<li><a href="#windows-95" class="text-decoration-none">3.5 Windows 95</a></li>
<li><a href="#cyberpunk" class="text-decoration-none">3.6 Cyberpunk 2035</a>
</li>
</ul>
</li>
<li class="mb-2">
<a href="#revision" class="text-decoration-none">
<strong>4. Code revision and optimization</strong>
</a>
</li>
<li class="mb-2">
<a href="#disclaimer" class="text-decoration-none">
<strong>5. Disclaimer</strong>
</a>
</li>
<li class="mb-2">
<a href="#about" class="text-decoration-none">
<strong>6. About</strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-10 col-md-10 col-sm-12 text-center">
<!-- 1. General scope and purpose -->
<div class="doc-chapter text-box mb-5">
<h2 id="general">1. General scope and purpose</h2>
<p>
The virtual exhibition <em>Witches Through Time: From Myth to Empowerment</em> was developed in alignment with the principles of the <em>Multimedia Museum Meta Mirror</em> project, designed by Professor Fabio Vitali within the course <em>Information Modeling and Web Technologies</em> at the University of Bologna.
</p>
<p>
The project aims to investigate and emulate contemporary web and application design practices adopted by museums,in order to create a digital companion capable of supporting visitors before, during or in place of an on-site visit.
</p>
<p>
In accordance with the project specifications, <em>Witches Through Time</em> offers a complete digital overview of a hypothetical museum exhibition whose goal is to present a new perspective on the history of witchcraft through a feminist lens. The application functions as a <em>meta mirror</em> of the physical museum: it reproduces the exhibition’s spatial organization through a faithful interactive map and recreates the curatorial experience through a narrative-driven navigation mode.
</p>
<p>
The exhibition brings together a wide range of media, including artworks, books, historical documents, photographs and contemporary installations, connected through interpretative texts that guide the visitor along the curatorial narrative.
</p>
<p>
In addition, the project includes mandatory features such as switchable themes, whose design choices and conceptual motivations are discussed and justified in the third chapter of the documentation.
</p>
<!-- 1.1 Exhibition theme and concept -->
<h3 id="theme">1.1 Exhibition theme and concept</h3>
<p>
<em>Witches Through Time</em> is conceived as a critical exploration of the figure of the witch as a historically constructed and politically charged archetype. The project aims to guide the visitor through a journey, as suggested by the exhibition’s title: from the ancient and pre-Christian origins of the witch, through the persecutions of the Middle Ages, to her modern and contemporary reconfigurations.
Adopting a feminist interpretative lens, the exhibition presents the witch not merely as a victim of superstition, but as a figure shaped by enduring systems of control and resistance.
</p>
<p>
The exhibition challenges dominant narratives that have alternately feared, ridiculed or romanticized witches, while rarely addressing witchcraft as a form of cultural and political agency. By foregrounding the relationship between witchcraft and forms of female knowledge, such as healing practices, herbal medicine, reproductive care and spiritual mediation, the exhibition positions the witch as operating outside state control, thereby framing her as a threat to established power structures. Within this framework, witch hunts are interpreted not solely as episodes of religious fanaticism, but as mechanisms of social discipline that targeted women whose roles and expertise disrupted patriarchal and institutional norms.
</p>
<p>
Historically, the exhibition traces the transformation of witch-like figures from ancient goddesses, healers and mythological sorceresses connected to nature and fertility, to symbols of fear and deviance during the late Middle Ages and early modern period. The widespread persecution of alleged witches across Europe and beyond is presented as a deeply gendered phenomenon, whose cultural consequences extend far beyond the decline of formal trials.
Although the legal repression of witchcraft eventually declined, the symbolic figure of the witch persisted, continuing to shape literature, folklore and popular imagination, while constantly shifting in meaning and form.
</p>
<p>
A central focus of the exhibition is the re-emergence and re-signification of the witch in modern and contemporary contexts, particularly within poetry, theatre and pop culture. From the late nineteenth century onward, and particularly within twentieth-century feminist movements, the term “witch” was progressively reclaimed as a marker of self-determination and resistance, as well as a tool of feminist and decolonial critique. The exhibition highlights this shift by referencing the case of Anna Göldi, the last woman executed for witchcraft and also the first to be officially rehabilitated in 2008 by the Canton of Glarus.
</p>
<p>
The curatorial approach of the exhibition emphasizes continuity rather than rupture, suggesting that witch hunts should not be understood as a closed chapter of the past. The final section, and in particular the last item of the exhibition, serves as a
warning, inviting reflection on the persistence of analogous mechanisms of gendered marginalization and stigmatization in the present. By juxtaposing historical material with contemporary artistic practices, <em>Witches Through Time</em> reframes the witch as an evolving figure whose meanings are continuously negotiated across time and cultural contexts.
</p>
<!-- 1.2 Content of the exhibition and Item description -->
<h3 id="content">1.2 Content of the exhibition and Item description </h3>
<h4>Justification of text versions</h4>
<p>
The content of <em>Witches Through Time</em> was conceived to reflect both the
complexity of the exhibition and the diversity of its potential audiences. Given the
historical depth, political sensitivity, and cultural stratification of the figure of
the witch, particular attention was paid to how information is mediated through text.
Rather than assuming a single, universal visitor, the project adopts a pluralistic
approach to interpretation, in line with contemporary museum practices that emphasize
accessibility, inclusivity, and visitor-centered design.
</p>
<p>
As required by the project guidelines, there are three main categories for the audience,
introduced as personas: a teacher in a middle school, a businessman from out of town and
a PhD student. Therefore, the exhibition offers visitors the possibility to switch
between different textual descriptions for each item. These descriptions vary according
to length, level of competence, and communicative intent, allowing users to choose the
version that best suits their interests, prior knowledge, and reading preferences.
</p>
<h4>Defining the dimensions</h4>
<p>
At the initial design stage, four dimensions were identified as relevant for shaping
textual interpretation:
</p>
<ul>
<li><strong>Length</strong>: short / medium / long</li>
<li><strong>Complexity</strong>: simple / difficult</li>
<li><strong>Audience</strong>: kids / adults / scholars</li>
<li><strong>Tone</strong>: fun / educational</li>
</ul>
<p>
While this framework allowed for a theoretically rich combination of possibilities, it
quickly became evident that exposing all potential permutations would be
counterproductive. The number of combinations was excessively high, and many of them
either overlapped conceptually or resulted in contradictory communicative goals. For
example, a short, difficult and fun text aimed at children would undermine clarity,
while a long, difficult and fun text for adults risks tonal inconsistency. Likewise,
texts designed for scholars almost inevitably require a longer format and an academic
tone, regardless of stylistic variation.
</p>
<p>
Museums frequently operate along similar interpretive dimensions, but they rarely make
all possible combinations explicit to visitors. Instead, they curate a limited and
coherent set of interpretive layers to avoid cognitive overload and decision fatigue.
Following this principle, we refined our framework by collapsing overlapping dimensions
and prioritizing clarity and usability.
</p>
<h4>Final structure: length and audience</h4>
<p>
The final model is based on two primary dimensions: audience and length. Tone and
complexity are embedded within these categories rather than treated as independent
variables. This resulted in nine text versions for each item, organized as follows:
</p>
<h5>Kids (short, medium, long)</h5>
<p>
Texts intended for younger audiences use clear, accessible language and concrete
examples.
</p>
<ul>
<li>The <strong>short</strong> version introduces the object in a concise and engaging
way.</li>
<li>The <strong>medium</strong> version provides additional contextual information while
maintaining simplicity.</li>
<li>
The <strong>long</strong> version is designed for children with prior knowledge or
strong interest, allowing for deeper exploration without abandoning a clear and
consistent tone.
</li>
</ul>
<p>
Across all three versions, the tone remains approachable and coherent, avoiding
oversimplification while maintaining accessibility.
</p>
<h5>Adults (short, medium, long)</h5>
<p>
Texts aimed at the general adult public assume varying degrees of familiarity with the
topic.
</p>
<ul>
<li>The <strong>short</strong> version offers an essential overview, suitable for visitors who prefer quick insights.</li>
<li>The <strong>medium</strong> version expands on the historical and cultural context.
</li>
<li>
The <strong>long</strong> version provides a more articulated interpretation,
engaging visitors who wish to deepen their understanding.
</li>
</ul>
<p>
In this group, linguistic complexity increases alongside text length, reflecting the
assumption that visitors who seek longer explanations are already more at ease with the
subject matter.
</p>
<h5>Scholars (short, medium, long)</h5>
<p>
Texts for scholars adopt an academic tone in all versions, prioritizing analytical depth
and conceptual precision.
</p>
<ul>
<li>
Even the <strong>short</strong> version presents a critical perspective rather than
a simplified summary.
</li>
<li>
The <strong>medium</strong> and <strong>long</strong> versions progressively expand
the interpretive framework, integrating historical references, theoretical
considerations, and disciplinary vocabulary.
</li>
</ul>
<p>
Here, length does not alter tone but rather the degree of analytical development,
allowing scholars to select the depth most appropriate to their research or reading
context.
</p>
<h4>Rationale and curatorial value</h4>
<p>
During the text production phase, the team adopted a hybrid authorial approach combining
curatorial writing with the support of a Large Language Model (LLM). For each item, a
long scholarly version was first authored by the team, ensuring interpretive accuracy
and consistency with the exhibition’s conceptual framework.
</p>
<p>
The LLM was subsequently employed as an assistive tool to generate differentiated
textual versions. These derivative texts were not produced autonomously, but developed
through iterative prompts and editorial supervision, allowing the team to maintain
control over tone, content and interpretive coherence.
</p>
<p>
This structured yet flexible system allows the exhibition to address a wide range of
audiences without fragmenting the interpretive experience. By limiting the number of
versions while maintaining meaningful differentiation, the project balances interpretive
richness with usability. Visitors are empowered to actively shape their own experience,
choosing how deeply to engage with each object, while remaining guided by a coherent
curatorial voice.
</p>
<p>
In the context of <em>Witches Through Time</em>, this approach is particularly
significant. The figure of the witch carries layered meanings, mythological, historical,
political and symbolic, that cannot be communicated effectively through a single
narrative register. Multiple text versions allow the exhibition to address these layers
responsibly, making space for education, critical reflection and scholarly inquiry while
remaining accessible to younger and non-specialist audiences.
</p>
<p>
Overall, the design of the item descriptions reflects the exhibition’s broader aim: to
question inherited narratives, reveal hidden power structures, and invite visitors to
reconsider the witch not as a marginal figure of superstition, but as a complex and
enduring symbol of cultural resistance and empowerment.
</p>
<!-- 1.3 Exhibition structure and thematic rooms -->
<h3 id="structure">1.3 Exhibition structure and thematic rooms</h3>
<p>
The exhibition’s conceptual framework is closely tied to its spatial and narrative
structure.
<em>Witches Through Time</em> is organized into four thematic rooms, each addressing a
distinct
dimension of the figure of the witch across history and artistic representation.
</p>
<p>
<strong>Room 1 – Mythic roots</strong> focuses on the mythological and pre-Christian
origins
of
witch-like figures, establishing the witch as a foundational cultural figure.
</p>
<p>
<strong>Room 2 – Fires of fear</strong> addresses the historical phenomenon of witch
hunts
and
executions, particularly during the late Middle Ages and early modern period. Through
historical
documents and visual material of the time, the room examines how the witch was redefined
as
a legal
and moral enemy.
</p>
<p>
<strong>Room 3 – Visions and shadows</strong> explores representations of the witch in
literature,
visual art and pop culture. Here, the witch emerges as a figure of ambiguity,
oscillating
between
fear and fascination.
</p>
<p>
<strong>Room 4 – Reclaiming the spell</strong> focuses on modern and contemporary
reappropriations
of the witch as a symbol of feminist resistance and empowerment. At the same time, the
room
acknowledges the continued vulnerability of women accused of witchcraft in various parts
of
the
world, connecting historical persecution with contemporary forms of gendered exclusion.
</p>
<p>
While allowing both chronological and thematic navigation, the exhibition is conceived
as a
cyclical narrative, emphasizing the recurrence of specific patterns: persecution,
marginalization, resistance and reappropriation.
</p>
<p>
The spatial organization of the exhibition is represented through a pentacle-shaped map.
Traditionally associated with balance and interconnected forces, the pentacle is used
here
as a
conceptual device to visualize the dynamics underlying the history of witchcraft, such
as
the
tension between knowledge and repression, visibility and erasure, empowerment and
punishment.
Each point of the pentacle corresponds to one thematic room, while the central space
remains
intentionally inaccessible.
</p>
<p>
This absence reflects the curatorial position that the history of witchcraft does not
follow
a
linear or progressive trajectory, but instead repeats and transforms across time.
Consequently,
the exhibition has no definitive center or conclusive endpoint; the final room reopens
the
narrative rather than closing it, reinforcing the exhibition’s central question: when,
and
under what conditions, the witch hunt truly ends?
</p>
<!-- 1.4 Metadata model and standards -->
<h3 id="metadata">1.4 Metadata model and standards</h3>
<p>
Metadata for the digital collection were collected directly from institutional websites
hosting the digital items. To ensure semantic interoperability across these
heterogeneous sources, metadata were standardized using the Dublin Core Metadata Element
Set (DCMES). This process unified varying cataloguing standards into a consistent schema
– mapping attributes such as Creator, Date, Type, and Location – which was then
consolidated into a single JSON file acting as the application’s central repository.
</p>
<p>
The application utilizes JavaScript to dynamically populate the item interface without
requiring page reloads. Upon initialization, the script fetches the JSON file and parses
the items into a JavaScript object. The core function, displayItemDetails(), retrieves
the specific metadata object for the active item ID. It then targets the corresponding
table cells in the HTML (e.g., item-creator, item-type) and renders the content.
</p>
</div>
<!-- 2. Presentation -->
<div class="doc-chapter text-box mb-5">
<h2 id="presentation">2. Presentation and Navigation</h2>
<p>
The design phase began with the creation of interface prototypes in Figma, used to
define the overall structure of the website and to test visual hierarchy, spatial
balance and interaction flow prior to implementation. These prototypes supported the
translation of curatorial and conceptual decisions into concrete layout solutions.
</p>
<p>
Figma’s developer-oriented features were subsequently used as a reference during the
implementation phase, facilitating consistency between design and code. Selected screens
from the design prototypes are included in the documentation to illustrate the design
process and the methodological approach adopted by the team.
</p>
<p>
The text layout was deliberately constrained using a <code>max-width</code> of 70ch for
paragraphs, combined with responsive padding and font scaling. This choice follows
research-based guidelines for optimal line length (50–75 characters per line), ensuring
readability, smooth eye movement, and reduced visual fatigue. By explicitly setting this
measure in CSS, we make a conscious design decision that balances aesthetic proportion,
user comfort, and accessibility across devices.
</p>
<!-- 2.1 Index Page -->
<h3 id="index-page">2.1 Index Page</h3>
<p>
The Index page functions as the primary point of access to the digital exhibition
<em>Witches Through Time</em>. Rather than operating as a neutral menu or informational
landing page, the homepage is conceived as a threshold experience, designed to introduce
visitors to the exhibition’s atmosphere, themes, and narrative logic before any explicit
curatorial content is presented.
</p>
<p>
This approach aligns with a growing tendency in digital exhibitions to treat the
homepage as an interpretive space in its own right, rather than a purely navigational
interface. Projects such as Google Arts & Culture immersive exhibitions, The British
Museum online storytelling features, and experimental digital archives like Europeana
thematic collections demonstrate how visual immersion and narrative framing can guide
user engagement from the very first interaction.
</p>
<h4>Narrative and visual metaphor</h4>
<p>
The homepage opens with a forest scene, a recurring symbolic environment in the cultural
imagination of witchcraft. Forests have historically functioned as liminal spaces:
places of exclusion, secrecy, fear, and resistance. By situating the visitor within a
forest before entry, the exhibition establishes an immediate metaphorical framework that
anticipates the themes explored throughout the collection: persecution, marginality,
transformation, and empowerment.
</p>
<p>
The absence of textual explanation in this opening moment is intentional. Instead of
presenting information immediately, the interface prioritizes atmosphere over
exposition, encouraging curiosity and emotional engagement. This design choice reflects
strategies used in immersive museum installations, where sensory experience precedes
interpretation, allowing visitors to enter the narrative world before confronting
historical or analytical content.
</p>
<h4>Controlled entry and visitor agency</h4>
<p>
The presence of a single call-to-action (<em>“Enter the spell”</em>) reinforces the idea
of intentional access. Visitors are not immediately confronted with menus, categories,
or metadata, but are instead invited to actively choose to cross into the exhibition
space. This mirrors ritualistic and performative elements associated with witchcraft,
while also granting the user a clear moment of agency.
</p>
<p>
Similar strategies can be observed in digital storytelling projects and virtual
exhibitions that emphasize performative navigation, where entering the exhibition
becomes part of the narrative experience rather than a purely functional step.
</p>
<h4>Transition between worlds</h4>
<p>
After entry, the homepage gradually reveals its full interface, including the navigation
bar and thematic visual elements associated with later sections of the exhibition. This
staged revelation reflects a conceptual transition from mythic space to structured
knowledge. The initial forest environment represents the symbolic and folkloric
dimension of witchcraft, while the revealed interface introduces the analytical,
historical, and curatorial framework of the exhibition.
</p>
<p>
This transition echoes the exhibition’s broader narrative arc: moving from myth and fear
toward contextualization, reinterpretation, and empowerment. The homepage thus
anticipates the exhibition’s internal logic and prepares visitors for the thematic
progression they will encounter.
</p>
<h4>Curatorial function of the Index page</h4>
<p>
From a curatorial perspective, the Index page fulfills three main functions:
</p>
<ul>
<li><strong>Orientation</strong> – establishing the thematic and emotional tone of the
exhibition.</li>
<li><strong>Engagement</strong> – capturing visitor attention through visual immersion
rather than textual density.</li>
<li><strong>Framing</strong> – positioning the figure of the witch as a subject of
cultural complexity before any historical judgment or academic interpretation is
introduced.</li>
</ul>
<p>
By avoiding immediate didactic explanations, the homepage respects the diversity of its
audience and mirrors the exhibition’s overall commitment to layered interpretation.
Visitors are invited to enter the exhibition not as passive readers, but as participants
in a narrative journey.
</p>
<p>
In this sense, the Index page is not merely a technical starting point but an integral
component of the exhibition’s interpretive strategy, bridging visual storytelling,
symbolic space, and user-centered design.
</p>
<figure class="figure mt-4 mb-5 w-50 mx-auto">
<img src="img/documentation/index_page.png"
class="figure-img img-fluid border border-dark" alt="Homepage Figma Prototype">
<figcaption class="figure-caption text-center">Fig 1. Early Figma prototype of the
homepage.
</figcaption>
</figure>
<!-- 2.2 Map Page -->
<h3 id="map-page">2.2 Map Page</h3>
<p>
The Map page is not intended to function as the primary navigational interface, since
the Exhibition page provides a more comprehensive overview of the contents of each room.
Instead, this page was designed to visually translate the exhibition’s conceptual
framework into an interactive spatial structure, mirroring the on-site experience in
which visitors enter each room blindly, without prior knowledge of its artworks.
</p>
<p>
The page layout is organized using a two-column grid system. On larger screens, the left
side of the page is occupied by an embedded SVG map, while the right side hosts a
textual description panel. On smaller devices, the layout adapts responsively, stacking
the elements vertically to preserve readability and usability. This structure allows the
map to remain the focal point of interaction while maintaining constant access to
interpretative content.
</p>
<p>
The SVG map was created starting from a pre-designed element in Canva and then further
modified using BoxySVG in order to add transparent SVG paths corresponding to each room
over the graphical representation. These paths are fully interactive: they highlight on
hover and change color when active, providing visual feedback when a room is selected.
Text labels are embedded within the SVG to identify each room and reinforce spatial
orientation.
</p>
<p>
The right-hand panel, which by default presents the introductory section (<em>“Enter the
spell”</em>), functions as a dynamic content container. It displays the title and
description of the currently selected room, as well as a button linking to the first
item of that room. Interactive behaviors, such as room selection and content updates
within the description panel, are handled through JavaScript event listeners applied to
the SVG elements, while the associated texts are stored within the same JavaScript file.
This interaction model maintains narrative continuity while avoiding disruptive page
transitions.
</p>
<figure class="figure mt-4 mb-5 w-50 mx-auto">
<img src="img/documentation/map_page.png"
class="figure-img img-fluid border border-dark" alt="Map Page Figma Prototype">
<figcaption class="figure-caption text-center">Fig 2. Early Figma prototype of the map
page.
</figcaption>
</figure>
<!-- 2.3 Exhibiyion Page -->
<h3 id="exhibition-page">2.3 Exhibition Page</h3>
<p>
The Exhibition page functions as the central curatorial hub of <em>Witches Through
Time</em>. Accessible directly from the navigation bar, this page does not present
items itself, but instead defines how the collection can be explored. Its primary role
is to introduce and mediate between two distinct modes of access to the exhibition
content: <strong>Chronological</strong> and <strong>Eras</strong>, each implemented as a
separate HTML page.
</p>
<p>
Rather than enforcing a single interpretive structure, the Exhibition page foregrounds
the act of selection, making the organizational logic of the exhibition explicit and
accessible to the visitor.
</p>
<h4>Dual access to the same collection</h4>
<p>
Both the Chronological and Eras views present the same set of exhibition items, but
organize them according to different interpretive principles. This separation reflects a
conscious curatorial decision to distinguish between historical sequencing and
contextual grouping, two approaches that are frequently discussed in museum studies and
digital humanities.
</p>
<p>
By separating these views into individual pages, the project avoids conflating
interpretive logics and allows each structure to remain conceptually coherent and
readable.
</p>
<h4>Chronological view</h4>
<p>
The Chronological view organizes items according to temporal progression. This mode
emphasizes historical continuity, transformation, and rupture, allowing visitors to
trace how representations of witchcraft evolve across time.
</p>
<p>
This structure supports visitors who prefer a linear, historically grounded narrative
and aligns with traditional historiographical models. At the same time, the digital
environment preserves non-linearity: users can move freely between periods without being
constrained to a fixed path.
</p>
<h4>Eras view</h4>
<p>
The Eras view organizes items according to culturally and historically defined periods
rather than strict dates. In this mode, items are grouped by shared aesthetic,
ideological, and symbolic characteristics associated with specific eras.
</p>
<p>
This approach highlights how representations of witches intensify or shift within
particular cultural contexts, emphasizing discourse and visual language over chronology.
It reflects curatorial strategies commonly used in physical exhibitions, where thematic
or period-based rooms encourage comparative interpretation.
</p>
<div class="row mt-4 mb-5">
<div class="col-md-6">
<figure class="figure text-center w-75 mx-auto">
<img src="img/documentation/chronological_page.png"
class="figure-img img-fluid border border-dark"
alt="Chronological Figma Prototype">
<figcaption class="figure-caption">
Fig. 3. Exhibition page: chronological view prototype.
</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure class="figure text-center w-75 mx-auto">
<img src="img/documentation/eras_page.png"
class="figure-img img-fluid border border-dark" alt="Eras Figma Prototype">
<figcaption class="figure-caption">
Fig. 4. Exhibition page: eras view prototype.
</figcaption>
</figure>
</div>
</div>
<h4>Curatorial transparency and user agency</h4>
<p>
The Exhibition page makes curatorial structure visible by explicitly offering these two
organizational choices. Rather than presenting one model as neutral or authoritative,
the interface acknowledges that structure itself produces meaning.
</p>
<p>
Visitors are thus invited to actively choose how they want to engage with the
collection, reinforcing a user-centered and interpretive approach consistent with
contemporary digital exhibition practices.
</p>
<!-- 2.4 Item Page -->
<h3 id="item-page">2.4 Item Page</h3>
<p>
The Item Page is designed as a responsive, modular interface that adapts its layout
based on the device screen size using the Bootstrap grid system. The structure is
divided into two primary sections. The <strong>upper section</strong> contains the
interactive <u>item image</u>, clicking on that triggers a Bootstrap Modal for a
high-resolution detailed view, and the <u>metadata table</u> which provides standardized
information about the artifact. The <strong>lower section</strong> contains the
<u>descriptive content</u> and allows visitors to choose between different text lengths
(Short, Medium, Long) and tones (Kid, Adult, Scholar). The navigation controls are
positioned at the bottom, dynamically updating based on the selected narrative mode.
</p>
<p>
To ensure that every artifact in the collection is uniquely addressable and accessible
directly from external pages (such as the Exhibition page), the application implements a
<strong>URL parameter system</strong>. Each item is identified by a unique key passed
via the ?id=parameter. Additionally, a ?narrative=parameter tracks the user’s
navigational context (eras or chronological). Upon loading, the script inspects the
browser’s URL query string using URLSearchParams. If a valid ID is found, the system
immediately initializes the view with that specific item and sets the correct narrative
context via the switchNarrative() function. If no ID is present, it defaults to the
first item in the chronological sequence. This approach ensures that users can bookmark
specific items or navigate seamlessly from other pages to a detailed view without losing
their place in the narrative structure.
</p>
<p>
The Item Page functions as a data-driven template. Content is injected dynamically via
JavaScript, ensuring scalability and ease of maintenance. On page load, the script
asynchronously fetches the JSON file, that acts as the central repository containing all
item objects and their associated metadata. The script maintains the current state using
variables for the active currentIdList (the list of items to show) and currentIndex (the
specific item currently being viewed). The core of this system is the function
displayItemDetails(): the function uses the currentIndex to find the correct item ID and
retrieves the corresponding object from the loaded JSON data; it targets specific DOM
elements by ID (e.g., item-title, item-creator) and populates them. The function uses
innerHTML that allows the browser to correctly render any semantic HTML tags stored
within the metadata.
</p>
<p>
To address diverse audiences, the Item Page enables users to switch between
<strong>different textual descriptions</strong> for each item. The JavaScript logic
constructs a composite key based on user selection to retrieve the correct text block.
When a user clicks a button (e.g., “Kid” tone and “Short” length), the script
concatenates these values into a key string: ‘${currentLength}-${currentTone}’ (e.g.,
“short-kid”). It checks if this specific key exists in the item’s texts object within
the JSON. If found, it updates the description panel instantly without reloading the
page.
</p>
<p>
The page supports two distinct modes of navigation, controlled by the switchNarrative()
function. This system allows users to view the same artifact through different
contextual lenses.
</p>
<ul>
<li>The <u>Chronological Narrative</u> is the default mode. The currentIdList is
populated with the complete list of items sorted by date and Previous and Next
buttons traverse this entire collection. In this mode, the “Room Navigation”
controls are hidden (d-none).</li>
<li>The <u>Eras Narrative</u> is activated by clicking the “Room” link in the metadata
table. The code creates a filtered list of items belonging only to specific rooms.
In this mode, additional navigation buttons appear, allowing users to jump between
rooms rather than just between individual items.</li>
</ul>
<figure class="figure mt-4 mb-5 w-50 mx-auto">
<img src="img/documentation/item_page.png"
class="figure-img img-fluid border border-dark" alt="Item Page Figma Prototype">
<figcaption class="figure-caption text-center">Fig 5. Early Figma prototype of the item
page.</figcaption>
</figure>
</div>
<!-- 3. Themes -->
<div class="doc-chapter text-box mb-5">
<h2 id="themes">3. Themes</h2>
<!-- 3.1 Early Modern Era-->
<h3 id="early-modern-era">3.1 Early Modern Era</h3>
<p>
This theme represents a conceptual experiment: what would a website look like if the
internet existed during the Renaissance? To answer this, the design philosophy focuses
on extreme minimalism and authenticity. In an era before digital screens, information
was conveyed through the "basic technologies" of the time: ink and paper. Consequently,
this layout strips away all modern web aesthetics—there are no glossy gradients, drop
shadows, or bright "digital" colors. The palette is strictly limited to organic tones: a
parchment-like tan (<code>#D9C3A6</code>) for the background and a deep charcoal
(<code>#1A1A1A</code>) for the text, simulating the high contrast of iron gall ink on
rag paper.
</p>
<p>
The goal was to create an interface that feels "old" not just through decoration, but
through the absence of distraction. The UI is deliberately sparse, forcing the visitor
to focus on the text and content, much like a reader would focus on a printed page in
the 16th century.
</p>
<h4>Atmosphere and Texture</h4>
<p>A key technical challenge was ensuring the page didn't feel like a flat digital screen.
To achieve a tactile "paper" quality, we implemented a global noise overlay. By applying
a semi-transparent noise texture (<code>beige-noise.png</code>) to a fixed
<code>::before</code> pseudo-element on the body, we created a static grain that remains
consistent even as the user scrolls. This subtle layering (managed via
<code>z-index: -1</code>) ensures the text appears to sit on top of the texture,
mimicking the physical depth of ink pressed into fiber.
</p>
<h4>Typography</h4>
<p>Typography is the primary vehicle for this theme, using fonts that are historically
grounded rather than merely "old-looking":</p>