First version of "systers magical papyri"
parent
f4bbb177bf
commit
e3d9b566c0
Binary file not shown.
@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="w-100 h-100">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
color: #26263dff;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
max-width: 53em;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: magenta;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#cardtest {
|
||||
box-shadow: 10px 10px 10px lightslategray;
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
#cardtest.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#cardtest.rotated.scaledup {
|
||||
transform: rotate(90deg) scale(1.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="w-100 h-100 d-flex flex-column mt-5">
|
||||
|
||||
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
|
||||
<img id="cardtest" src="images/game-over2.png" width="450" height="723">
|
||||
</div>
|
||||
<div class="text-left mt-5">
|
||||
|
||||
</div><br>
|
||||
|
||||
<div class="d-flex justify-content-center mt-5 mb-5">
|
||||
<img src="images/footer.png" width="410" height="83">
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const card = document.getElementById("cardtest");
|
||||
|
||||
card.addEventListener('click', e => {
|
||||
card.classList.remove('scaledup');
|
||||
card.classList.toggle('rotated');
|
||||
});
|
||||
|
||||
card.addEventListener('wheel', e => {
|
||||
const zoom = e.deltaY > 0 ? 'out' : 'in';
|
||||
if(zoom === 'in') {
|
||||
card.classList.add('scaledup');
|
||||
}
|
||||
else {
|
||||
card.classList.remove('scaledup');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="w-100 h-100">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
color: #26263dff;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
max-width: 53em;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: magenta;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#cardtest {
|
||||
box-shadow: 10px 10px 10px lightslategray;
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
#cardtest.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#cardtest.rotated.scaledup {
|
||||
transform: rotate(90deg) scale(1.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="w-100 h-100 d-flex flex-column mt-5">
|
||||
|
||||
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
|
||||
<img id="cardtest" src="images/game-over.png" width="450" height="723">
|
||||
</div>
|
||||
<div class="text-left mt-5">
|
||||
<div class="d-flex justify-content-left mt-3">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="test.html" class="ml-2">Restart</a>
|
||||
</div>
|
||||
</div><br>
|
||||
|
||||
<div class="d-flex justify-content-center mt-5 mb-5">
|
||||
<img src="images/footer.png" width="410" height="83">
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const card = document.getElementById("cardtest");
|
||||
|
||||
card.addEventListener('click', e => {
|
||||
card.classList.remove('scaledup');
|
||||
card.classList.toggle('rotated');
|
||||
});
|
||||
|
||||
card.addEventListener('wheel', e => {
|
||||
const zoom = e.deltaY > 0 ? 'out' : 'in';
|
||||
if(zoom === 'in') {
|
||||
card.classList.add('scaledup');
|
||||
}
|
||||
else {
|
||||
card.classList.remove('scaledup');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 701 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 456 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1004 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 767 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="w-100 h-100">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
color: #26263dff;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
max-width: 53em;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: magenta;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="w-100 h-100 d-flex flex-column mt-3">
|
||||
|
||||
<div class="d-flex justify-content-center mt-5">
|
||||
<img src="images/try8.png" width="250" height="382">
|
||||
</div>
|
||||
|
||||
<div class="text-left mt-5">
|
||||
<p>The fields of physical and cyber tech lands are vastly dominated by male hack wizards. Questioning their cultural sovereignty seems like an impossible venture.</p>
|
||||
<p>And yet, scattered occult pagan groups of hack witches, craft their own spells, rituals and techniques, raising the knowledge and power of the Systerhood. Their memories are hidden in arcane cyber rooms, diabolic wikis and folk cryptosongs.</p>
|
||||
|
||||
<p>Syster Papyri Magicae is a collection of stories and practices from old and new Syster groups worldwide.
|
||||
Join the quest of collecting their magical papyri!</p>
|
||||
|
||||
<div class="d-flex justify-content-left mt-5">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="test.html" class="ml-2">Immerse in the Systerhood</a>
|
||||
</div>
|
||||
|
||||
</div><br>
|
||||
|
||||
|
||||
<div class="d-flex justify-content-center mt-5 mb-5">
|
||||
<img src="images/footer.png" width="410" height="83">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="w-100 h-100">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
color: #26263dff;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
max-width: 53em;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: magenta;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#cardtest {
|
||||
box-shadow: 10px 10px 10px lightslategray;
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
#cardtest.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#cardtest.rotated.scaledup {
|
||||
transform: rotate(90deg) scale(1.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="w-100 h-100 d-flex flex-column mt-5">
|
||||
|
||||
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
|
||||
<img id="cardtest" src="images/mapa1.png" width="450" height="723">
|
||||
</div>
|
||||
<div class="text-left mt-5">
|
||||
<div class="d-flex justify-content-left mt-3">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="mapa1.html" class="ml-2">Listen to a testimony about the Systers List.</a>
|
||||
</div>
|
||||
<div class="d-flex justify-content-left mt-3">
|
||||
<img src="images/wand.png" width="60" height="29"><a target="_blank" rel="noopener noreferrer" href="http://systers.org/mailman/listinfo/systers" class="ml-2">Join this Email List.</a>
|
||||
</div>
|
||||
<div class="d-flex justify-content-left mt-3">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="random.html" class="ml-2">Retrieve another papyrus.</a>
|
||||
</div>
|
||||
</div><br>
|
||||
|
||||
<div class="d-flex justify-content-center mt-5 mb-5">
|
||||
<img src="images/footer.png" width="410" height="83">
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const card = document.getElementById("cardtest");
|
||||
|
||||
card.addEventListener('click', e => {
|
||||
card.classList.remove('scaledup');
|
||||
card.classList.toggle('rotated');
|
||||
});
|
||||
|
||||
card.addEventListener('wheel', e => {
|
||||
if(card.classList.contains('rotated')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
const zoom = e.deltaY > 0 ? 'out' : 'in';
|
||||
if(zoom === 'in') {
|
||||
card.classList.add('scaledup');
|
||||
}
|
||||
else {
|
||||
card.classList.remove('scaledup');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="w-100 h-100">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
color: #26263dff;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
max-width: 53em;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: magenta;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#cardtest {
|
||||
box-shadow: 10px 10px 10px lightslategray;
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
#cardtest.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#cardtest.rotated.scaledup {
|
||||
transform: rotate(90deg) scale(1.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="w-100 h-100 d-flex flex-column mt-5">
|
||||
|
||||
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
|
||||
<img id="cardtest" src="images/quest.png" width="440" height="710">
|
||||
</div>
|
||||
<div class="text-left mt-5">
|
||||
<div class="d-flex justify-content-left mt-3">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="mapa1.html" class="ml-2">Create a cyber group of your own</a>
|
||||
</div>
|
||||
<div class="d-flex justify-content-left mt-2">
|
||||
<img src="images/wand.png" width="60" height="29"><a target="_blank" rel="noopener noreferrer" href="https://hub.xpub.nl/systers/mediawiki/index.php?title=Confront_the_men_in_Usenet_group&action=edit" class="ml-2">Confront the men</a>
|
||||
</div>
|
||||
<div class="d-flex justify-content-left mt-2">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="game-over1.html" class="ml-2">Remain silent</a>
|
||||
</div>
|
||||
</div><br>
|
||||
|
||||
<div class="d-flex justify-content-center mt-5 mb-5">
|
||||
<img src="images/footer.png" width="410" height="83">
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const card = document.getElementById("cardtest");
|
||||
|
||||
card.addEventListener('click', e => {
|
||||
card.classList.remove('scaledup');
|
||||
card.classList.toggle('rotated');
|
||||
});
|
||||
|
||||
card.addEventListener('wheel', e => {
|
||||
const zoom = e.deltaY > 0 ? 'out' : 'in';
|
||||
if(zoom === 'in') {
|
||||
card.classList.add('scaledup');
|
||||
}
|
||||
else {
|
||||
card.classList.remove('scaledup');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,198 +0,0 @@
|
||||
@font-face {
|
||||
font-family: klartext mono bold;
|
||||
src: url("fonts/Klartext Mono Bold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PropCourierSans;
|
||||
src: url("fonts/PropCourierSans.ttf");
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 5px;
|
||||
background: rgb(255, 0, 255);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: right;
|
||||
color: rgb(69, 48, 105);
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
font-family: klartext mono bold;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/*
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
*/
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
background: url('images/background-image.png') no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.container-screen {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.resizable-panel {
|
||||
border-top: 12px solid rgb(255, 0, 255);
|
||||
padding: 20px 15px 10px 30px;
|
||||
margin: 40px 40px 20px;
|
||||
width: 400px;
|
||||
/*max-height: 670px;*/
|
||||
resize: horizontal;
|
||||
overflow: auto;
|
||||
background: rgb(255, 255, 255);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.constellation {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
border: solid 5px #000;
|
||||
padding: 20px;
|
||||
font-size: 140%;
|
||||
font-weight: bold;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.star-coding {
|
||||
border-radius: 50%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: white;
|
||||
border-color: magenta;
|
||||
border-style: solid;
|
||||
background-image: url(images/code-logo.png);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: center;
|
||||
background-size: 45px;
|
||||
border-width: 5px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.star-radio {
|
||||
border-radius: 50%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: white;
|
||||
border-color: magenta;
|
||||
border-style: solid;
|
||||
background-image: url(images/radio-logo.png);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: center;
|
||||
background-size: 60px;
|
||||
border-width: 5px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.star-servers {
|
||||
border-radius: 50%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: white;
|
||||
border-color: magenta;
|
||||
border-style: solid;
|
||||
background-image: url(images/servers-logo.png);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: center;
|
||||
background-size: 45px;
|
||||
border-width: 5px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.star-conversation {
|
||||
border-radius: 50%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: white;
|
||||
border-color: magenta;
|
||||
border-style: solid;
|
||||
background-image: url(images/conversation-logo.png);
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-position: center;
|
||||
background-size: 45px;
|
||||
border-width: 5px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.resizable-panel {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
font-family: PropCourierSans;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
text-align: center;
|
||||
font-family: PropCourierSans;
|
||||
font-weight: 600;
|
||||
background: rgb(57, 42, 83);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
padding: 5px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.column {
|
||||
min-width: 16%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 300px) {
|
||||
.column {
|
||||
min-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
/*
|
||||
flex: 1 0 auto;
|
||||
*/
|
||||
}
|
||||
|
||||
.footer {
|
||||
/*
|
||||
flex-shrink: 0;
|
||||
*/
|
||||
}
|
||||
@ -1,98 +1,15 @@
|
||||
@font-face {
|
||||
font-family: klartext mono bold;
|
||||
src: url("fonts/Klartext Mono Bold.ttf");
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PropCourierSans;
|
||||
src: url("fonts/PropCourierSans.ttf");
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 5px;
|
||||
background: rgb(255, 0, 255);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: right;
|
||||
color: rgb(69, 48, 105);
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
text-transform: none;
|
||||
font-family: klartext mono bold;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
img {
|
||||
box-shadow: 10px 10px 10px lightslategray;
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
background: url('images/background-image.png') no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.resizable-panel {
|
||||
margin-left: 60px !important;
|
||||
width: 800px !important;
|
||||
max-height: 700px !important;
|
||||
color: red;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.resizable-panel {
|
||||
border-top: 12px solid rgb(255, 0, 255);
|
||||
padding-top: 20px;
|
||||
padding-left: 30px;
|
||||
padding-right: 15px;
|
||||
margin-left: 40px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
width: 400px;
|
||||
max-height: 670px;
|
||||
resize: horizontal;
|
||||
overflow: auto;
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
font-family: PropCourierSans;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
font-family: PropCourierSans;
|
||||
font-weight: 600;
|
||||
background: rgb(57, 42, 83);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 50%;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
img.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
img.rotated.scaledup {
|
||||
transform: rotate(90deg) scale(1.5);
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="style-tests.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content" style="height: 100%; display: flex; flex-direction: column;">
|
||||
|
||||
<div class="header" style="flex-grow: 0; flex-shrink: 0;">
|
||||
<h1>SY.sters CO.nstellations</h1>
|
||||
</div>
|
||||
|
||||
<div class="container-screen">
|
||||
<div class="resizable-panel">
|
||||
<p>Systers Constellations is a series of meetings related to the context of feminist hacker communities, inspired by the /etc (Eclectic Tech Carnival https://eclectictechcarnival.org/). These meetings are hosted in Varia, Rotterdam, a coworking space which embraces everyday technology and the social structures that surround it.</p>
|
||||
|
||||
<p>The series of informal research meetings/workshops aims to explore suggestions, urgencies and potentials of feminist hacker initiatives, by exploring collectively technologies and infrastructures. They will have the form of gatherings for discussion and cooperation, inviting people who are already or are interested in being involved in technology and processes of shaping it. Some of the topics that will be explored are:</p>
|
||||
<p>Feminist & autonomous servers/terminology related to hardware and software of the servers
|
||||
Inclusion and diversity
|
||||
Story-sharing regarding experiences in tech communities
|
||||
Sound experiments and performances
|
||||
Hardware workshops
|
||||
Infrastructure and tools
|
||||
Server experiments (i.e. install IRC server and discuss around obsolete technologies in relation to new ones and their involvement in communities)
|
||||
Mapping protocols and internet / network territories
|
||||
Mail services (i.e. GNU mailman, Deltachat)
|
||||
Storage services (i.e. Nextcloud)
|
||||
Microblogging software (i.e. Mastodon)
|
||||
Archive and documentation: We are going to explore ways of archiving and publishing. The meetings and workshops of this research group could lead to a publication(s), e.g. a guide that documents situated technical tools, together with the reasons why these tools are useful in this particular context. This could take the form of DIY and DIT fanzine making.</p>
|
||||
|
||||
<p>This variety of collective activities can be methods to open up discussions, share personal and collective challenges, educate ourselves and learn from each other. The stereotypes of novices and experts and the gendered social structures are intervening in the processes of technology. One of our intentions is to rethink and reinvent those associations. Not only from our own experience but also the general technological culture there is a need for feminist groups to form tech communities, that encourage collective knowledge production and Do-It-Together practices in inclusive and diverse environments. A feminist approach to technology takes into consideration the social and political context around it. Such initiatives push the boundaries of technological circles, in order to include gender-diverse people, amateurs, or others who have experienced low or high levels of exclusion in tech environments. They also include cultural, artistic and educational practices that are approaching technology, not as an end in itself. The idea started after participating in /etc in Athens, where it was decided that the earnings from the festival will support local feminist initiatives. As we live in the Netherlands and our contribution to this initiative can only be fragmented, we came with the idea to keep practising here with the topics that we are interested and open the discussion to the public in Rotterdam, while contributing also to the initiative in Athens.</p>
|
||||
|
||||
<p>Every meeting will have a different need and we will listen to the desires of the group. The gatherings will be open to everyone interested, technical or non-technical. At the same time, we will have contact with the gatherings that will take place in Athens and are related to feminist servers. We will build a relationship with the group in Athens and reflect upon the practices and the context there in relation to Rotterdam. Here a text from our invitation for the first meeting in Athens:</p>
|
||||
|
||||
<p>/etc Athens invitation/ "Feminist Server Review"
|
||||
We invite you to a gathering/discussion about feminist servers. We will introduce concepts and examples of autonomous local servers that support feminist initiatives, archives and networks. We will look critically on infrastructures, that are most of the times invisible, and engage with collective authorship. As described in the Feminist Server Manifesto*: "A feminist server is run for and by a community that cares enough for her in order to make her exist". She "opens herself to expose processes, tools, sources, habits, patterns". We are going to talk about existing feminist servers, such as Systerserver (which hosts /etc), which is run by women, and queers using free software only. It acts as a place to learn system administration skills, host services and inspire other communities to do the same. Another example is Anarchaserver, a feminist server which aims to develop autonomous infrastructure to host feminists projects. We intend to open up a dialogue around feminist servers/gatherings and possibly create a similar server in Athens. </p>
|
||||
</div>
|
||||
<div class="constellation">
|
||||
<div class="star-coding">
|
||||
</div>
|
||||
<div class="star-radio">
|
||||
</div>
|
||||
<div class="star-servers">
|
||||
</div>
|
||||
<div class="star-conversation">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer row" style="flex-grow: 0; flex-shrink: 0;">
|
||||
<div class="column">Jan</div>
|
||||
<div class="column">Feb</div>
|
||||
<div class="column">Mar</div>
|
||||
<div class="column">Apr</div>
|
||||
<div class="column">May</div>
|
||||
<div class="column">Jun</div>
|
||||
<div class="column">Jul</div>
|
||||
<div class="column">Aug</div>
|
||||
<div class="column">Sep</div>
|
||||
<div class="column">Oct</div>
|
||||
<div class="column">Nov</div>
|
||||
<div class="column">Dec</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
|
||||
<div class="header">
|
||||
<h1>SY.sters CO.nstellations</h1>
|
||||
</div>
|
||||
|
||||
<div class="resizable-panel">
|
||||
<p>Systers Constellations is a series of meetings related to the context of feminist hacker communities, inspired by the /etc (Eclectic Tech Carnival https://eclectictechcarnival.org/). These meetings are hosted in Varia, Rotterdam, a coworking space which embraces everyday technology and the social structures that surround it.</p>
|
||||
|
||||
<p>The series of informal research meetings/workshops aims to explore suggestions, urgencies and potentials of feminist hacker initiatives, by exploring collectively technologies and infrastructures. They will have the form of gatherings for discussion and cooperation, inviting people who are already or are interested in being involved in technology and processes of shaping it. Some of the topics that will be explored are:</p>
|
||||
<p>Feminist & autonomous servers/terminology related to hardware and software of the servers
|
||||
Inclusion and diversity
|
||||
Story-sharing regarding experiences in tech communities
|
||||
Sound experiments and performances
|
||||
Hardware workshops
|
||||
Infrastructure and tools
|
||||
Server experiments (i.e. install IRC server and discuss around obsolete technologies in relation to new ones and their involvement in communities)
|
||||
Mapping protocols and internet / network territories
|
||||
Mail services (i.e. GNU mailman, Deltachat)
|
||||
Storage services (i.e. Nextcloud)
|
||||
Microblogging software (i.e. Mastodon)
|
||||
Archive and documentation: We are going to explore ways of archiving and publishing. The meetings and workshops of this research group could lead to a publication(s), e.g. a guide that documents situated technical tools, together with the reasons why these tools are useful in this particular context. This could take the form of DIY and DIT fanzine making.</p>
|
||||
|
||||
<p>This variety of collective activities can be methods to open up discussions, share personal and collective challenges, educate ourselves and learn from each other. The stereotypes of novices and experts and the gendered social structures are intervening in the processes of technology. One of our intentions is to rethink and reinvent those associations. Not only from our own experience but also the general technological culture there is a need for feminist groups to form tech communities, that encourage collective knowledge production and Do-It-Together practices in inclusive and diverse environments. A feminist approach to technology takes into consideration the social and political context around it. Such initiatives push the boundaries of technological circles, in order to include gender-diverse people, amateurs, or others who have experienced low or high levels of exclusion in tech environments. They also include cultural, artistic and educational practices that are approaching technology, not as an end in itself. The idea started after participating in /etc in Athens, where it was decided that the earnings from the festival will support local feminist initiatives. As we live in the Netherlands and our contribution to this initiative can only be fragmented, we came with the idea to keep practising here with the topics that we are interested and open the discussion to the public in Rotterdam, while contributing also to the initiative in Athens.</p>
|
||||
|
||||
<p>Every meeting will have a different need and we will listen to the desires of the group. The gatherings will be open to everyone interested, technical or non-technical. At the same time, we will have contact with the gatherings that will take place in Athens and are related to feminist servers. We will build a relationship with the group in Athens and reflect upon the practices and the context there in relation to Rotterdam. Here a text from our invitation for the first meeting in Athens:</p>
|
||||
|
||||
<p>/etc Athens invitation/ "Feminist Server Review"
|
||||
We invite you to a gathering/discussion about feminist servers. We will introduce concepts and examples of autonomous local servers that support feminist initiatives, archives and networks. We will look critically on infrastructures, that are most of the times invisible, and engage with collective authorship. As described in the Feminist Server Manifesto*: "A feminist server is run for and by a community that cares enough for her in order to make her exist". She "opens herself to expose processes, tools, sources, habits, patterns". We are going to talk about existing feminist servers, such as Systerserver (which hosts /etc), which is run by women, and queers using free software only. It acts as a place to learn system administration skills, host services and inspire other communities to do the same. Another example is Anarchaserver, a feminist server which aims to develop autonomous infrastructure to host feminists projects. We intend to open up a dialogue around feminist servers/gatherings and possibly create a similar server in Athens. </p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
<div class="column">Oct</div>
|
||||
<div class="column">Nov</div>
|
||||
<div class="column">Dec</div>
|
||||
<div class="column">Jan</div>
|
||||
<div class="column">Feb</div>
|
||||
<div class="column">Mar</div>
|
||||
<div class="column">Apr</div>
|
||||
<div class="column">May</div>
|
||||
<div class="column">Jun</div>
|
||||
<div class="column">Jul</div>
|
||||
<div class="column">Aug</div>
|
||||
<div class="column">Sep</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="w-100 h-100">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: BLKCHCRY;
|
||||
src: url("fonts/BLKCHCRY.TTF");
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
color: #26263dff;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
max-width: 53em;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-family: BLKCHCRY;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #42b1e8ff;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: magenta;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#cardtest {
|
||||
box-shadow: 10px 10px 10px lightslategray;
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
#cardtest.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#cardtest.rotated.scaledup {
|
||||
transform: rotate(90deg) scale(1.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="w-100 h-100 d-flex flex-column mt-5">
|
||||
|
||||
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
|
||||
<img id="cardtest" src="images/eniac6.png" width="440" height="710">
|
||||
</div>
|
||||
<div class="text-left mt-5">
|
||||
<div class="d-flex justify-content-left mt-3">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="quest-usenet.html" class="ml-2">Summon the Spirits to get a quest</a>
|
||||
</div>
|
||||
<div class="d-flex justify-content-left mt-2">
|
||||
<img src="images/wand.png" width="60" height="29"><a href="game-over.html" class="ml-2">I don't believe in pagan data</a>
|
||||
</div>
|
||||
<div class="d-flex justify-content-left mt-2">
|
||||
|
||||
|
||||
</div>
|
||||
</div><br>
|
||||
|
||||
<div class="d-flex justify-content-center mt-5 mb-5">
|
||||
<img src="images/footer.png" width="410" height="83">
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
const card = document.getElementById("cardtest");
|
||||
|
||||
card.addEventListener('click', e => {
|
||||
card.classList.remove('scaledup');
|
||||
card.classList.toggle('rotated');
|
||||
});
|
||||
|
||||
card.addEventListener('wheel', e => {
|
||||
const zoom = e.deltaY > 0 ? 'out' : 'in';
|
||||
if(zoom === 'in') {
|
||||
card.classList.add('scaledup');
|
||||
}
|
||||
else {
|
||||
card.classList.remove('scaledup');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue