flexbox exmperiments
parent
0395aaea5c
commit
f36f2f3a70
@ -0,0 +1,117 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
@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;
|
||||
*/
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="style.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 style="
|
||||
flex-grow: 1; flex-shrink: 1; min-height: 0;
|
||||
display: flex; flex-direction: row;
|
||||
">
|
||||
<div class="resizable-panel" style="
|
||||
flex-grow: 0; flex-shrink: 0;
|
||||
">
|
||||
<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 style="
|
||||
flex-grow: 1; flex-shrink: 1;
|
||||
border: solid 5px #000; background: yellowgreen; opacity: .5; padding: 20px;
|
||||
font-size: 140%; font-weight: bold; font-family: sans-serif;
|
||||
">
|
||||
<div>
|
||||
This div gets resized automatically when you resize its sibling (i.e. panelo).
|
||||
This happens because this div's size is calculated (according to the flexbox layout logic) as:
|
||||
</div>
|
||||
<div>
|
||||
Give this div all the available width.
|
||||
</div>
|
||||
</pre>
|
||||
</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>
|
||||
Loading…
Reference in New Issue