flexbox and stars-icons

master
estragon 4 years ago
parent f36f2f3a70
commit f4bbb177bf

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1004 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -49,6 +49,14 @@ html {
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;
@ -58,7 +66,80 @@ html {
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;

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style-tests.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
@ -12,13 +12,8 @@
<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;
">
<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>
@ -42,19 +37,15 @@
<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 class="constellation">
<div class="star-coding">
</div>
<div>
Give this div all the available width.
<div class="star-radio">
</div>
<div class="star-servers">
</div>
<div class="star-conversation">
</div>
</pre>
</div>
</div>

Loading…
Cancel
Save