You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
2.8 KiB
HTML
53 lines
2.8 KiB
HTML
5 years ago
|
<div class="ml-3 mt-4 footer">
|
||
|
|
<!-- Trigger/Open The Modal -->
|
||
|
|
<button id="aboutBtn">About</button>
|
||
|
|
|
||
|
|
<!-- The Modal -->
|
||
|
|
<div id="aboutModal" class="modal">
|
||
|
|
|
||
|
|
<!-- Modal content -->
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close1">×</span>
|
||
|
|
<p>
|
||
|
|
.•°*”˜˜ A-bruh-kuh-DA-bruh ˜˜”*°•.<br><br>
|
||
|
|
<b>Syster Papyri Magicae</b> is a project that unfolds the phenomenon of gender exclusions in male-dominated tech environments, aiming to document, discuss and activate a variety of feminist practices that respond to this issue.
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
The Syster Papyri Magicae website enables a playful navigation to a collection of stories and practices that are gathered in a growing, editable ★ <a class="wikilink" target="_blank" rel="noopener noreferrer" href="https://hub.xpub.nl/systers/mediawiki/">Wiki</a> ★. Aided by the early web magic of hyperlinks, one may discover documentation of sexist incidents in tech, feminist hacker projects, wiki pages to write their versions of stories, or even dead-ends. A fictional context of sorcery provides a game-like atmosphere but is also tactically used. On the one hand, the witch as an excluded figure symbolises female strength, that challenges patriarchal systems. On the other hand, witchcraft is a theme ever-present in the geek culture, proposing that technology has a source of magical power, that one can harness for their own sense of agency and empowerment.<br><br>
|
||
|
|
|
||
|
|
Strolling through the website, the visitor encounters several quests, that challenge them to choose what they would do in situations of exclusion. This method helps them realise how hard it is, to take action under these circumstances. It is also a way to open discussions on diverse feminist approaches, learn about feminist hacker practices, and if interested, become a contributor.
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
This project builds upon the research done in the context of the publication:<br> <a class="outerlinks" target="_blank" rel="noopener noreferrer" href="../thesis/ArtemisGryllakiThesis.pdf">Syster Systems: On the urgencies and potential of feminist hacker initiatives</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Get the modal
|
||
|
|
var modal1 = document.getElementById("aboutModal");
|
||
|
|
|
||
|
|
// Get the button that opens the modal
|
||
|
|
var btn1 = document.getElementById("aboutBtn");
|
||
|
|
|
||
|
|
// Get the <span> element that closes the modal
|
||
|
|
var span1 = document.getElementsByClassName("close1")[0];
|
||
|
|
|
||
|
|
// When the user clicks the button, open the modal
|
||
|
|
btn1.onclick = function() {
|
||
|
|
modal1.style.display = "block";
|
||
|
|
}
|
||
|
|
|
||
|
|
// When the user clicks on <span> (x), close the modal
|
||
|
|
span1.onclick = function() {
|
||
|
|
modal1.style.display = "none";
|
||
|
|
}
|
||
|
|
|
||
|
|
// When the user clicks anywhere outside of the modal, close it
|
||
|
|
window.onclick = function(event) {
|
||
|
|
if (event.target == modal1) {
|
||
|
|
modal1.style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|