From f4bbb177bf89dbfca46a580f4d4fcb330e868eeb Mon Sep 17 00:00:00 2001
From: estragon <artemis.gryllaki@gmail.com>
Date: Mon, 30 Mar 2020 13:17:54 +0200
Subject: [PATCH] flexbox and stars-icons

---
 images/code-logo.png         | Bin 0 -> 1294 bytes
 images/conversation-logo.png | Bin 0 -> 1450 bytes
 images/radio-logo.png        | Bin 0 -> 1004 bytes
 images/servers-logo.png      | Bin 0 -> 1280 bytes
 style-tests.css              |  81 +++++++++++++++++++++++++++++++++++
 syco-index-tests.html        |  29 +++++--------
 6 files changed, 91 insertions(+), 19 deletions(-)
 create mode 100644 images/code-logo.png
 create mode 100644 images/conversation-logo.png
 create mode 100644 images/radio-logo.png
 create mode 100644 images/servers-logo.png

diff --git a/images/code-logo.png b/images/code-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4bbb6495f0e5d104e07c9fc2f1eb55a6a549a27
GIT binary patch
literal 1294
zcmV+p1@ZccP)<h;3K|Lk000e1NJLTq002e+002e^1^@s6aW3M700004b3#c}2nYxW
zd<bNS00009a7bBm000*f000*f0cW4mQUCw|8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11dB;TK~#90?V4YRRaF?p*KzKQGc{4n_%JhBy@WwUNkL$P83d8l
zTmPUxkRd@)SWpiUK@XJ~R7Mek);vc}L{VBq2}M$dMnz=M*h~M6QW8hg^4G&X!F4>}
zzUS<{&$$!r1@mz4xqGcO`<}hNy}x^;goK2IgoK2IgoK3uF|uA8uz)y4(vtk;sgh<T
z9nD|QWXksS#8|I^cnX2>cTTVU^$dtFjY*klLVrOMB2|G{Ea^Ps^4m>#n3oeHX{GG^
z+tQ?wc?HC4#xgpL81A*do&eF0*l$eCJ5Bj$`3^+1Bt0bQ<bun)Gi6hr)RStL=OUc2
zj1WV)j{!-;lKML?@5q#G^7P>c#CqdfJ%F%+vkdRLs%08+m+|?(5!d?vm(|VRVi-Aw
zxIU2k3!gHL*l3LV195JMr?SSEA`TiR9u4GPoKJ2M_X}Od_9H$t#(smamS;E+qlg(p
z{0&4<`A4jFETd~mj2}n*V2pn~)So5VLcDK??vC+|Af`jhG~!akp9aq(p&p9_pL48X
z@38IQk5;A;_cRj5UBdRdNE(+rmeGA4e4A<wW5mUX**d~@j?R;giK%>=Mhqf$7<^yT
zZfkg(b%pJlF~bbcGTnvq48$*vFs|N@>Jqkl5Tm|^3$!NiEYl^pClN;s?uUH{t*||W
zxG2PIfmTqNF2R4lBaE-ELUgOc=<T6K3-p4^bP0_qL*sYE*<}b^JKN`Dn4F{6qJh&i
zVhHh>R~UB*+wF*fSVlWES2*s@%4NEX)>(*O4Xx?IFs8l1+GY&;8F6|{lO4Ki9TOA1
z>5aHD&z2&+2Z{z*VS5y@BDTQ}-Oml(+M3>orwz@&5LZZf&o{q?tZn^XNnh1ua6-}r
z#^pMDyYCtAFOW2J+&hRxi0_S=d>7Fd+a2N#$1<v=!Gt&yvDeUCZw<Q8QIXcwU~;pe
zRZG(w_c7rkXK_K?Yz#bxxGAE^7Gj^FRZG(w@v@=!BVxP^!7~QIERlA-h|3(yC~BF`
z_0~A<&P&RY^dYtyM0*g6A{cd*=_TD6Drrq(H?LM#B^$xs>;;E04V7u!C+rt}NnOW-
z#{<lcQ`2dBj?N(BQ$y!t#KI8r+Z<u+)xATkaxA0Z({zW<lp|~>VhB8I2pmA1@4@$~
z!FLF8Qn2B+#=VBd5ybKs8r{Nph6+uqoa;A(YilIGu3rl7jG@sfHiGyrG>j3;9m{A<
z1fQ<omNta)TcWO=@na=9o^VV|P?<(7M0{d!Zx0IF65_6%@eL)$@3NL;1aH>w*FRBH
z+hnc*>)7rLW5gJCnGWg>BJQp|Y)hEvLu@gOe2X~E80RX}<(twc@-B-Vw%*VA(ym0C
zB^C8br!!@13&y-6>BfT3AC@$lDVz21F(BzBNn?@*b$mbNgG||jRXH044V3AaX!5De
zWs*jWYxC|&%qAyhrQ=#7&+g7kAa>SOrt3f>cMM`o(o*B{TTOVVil&y*Rr-%T>FxcT
zZ$<2v^lvkLSkggB<gd3i<RKv;At50lAt50lA)ze(0a!8%A(C@jz5oCK07*qoM6N<$
Ef}4<IrvLx|

literal 0
HcmV?d00001

diff --git a/images/conversation-logo.png b/images/conversation-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fc70e561ae651a2a6162a77fab34c2d54b22ab1
GIT binary patch
literal 1450
zcmV;b1y%ZqP)<h;3K|Lk000e1NJLTq002e+002e^1^@s6aW3M700004b3#c}2nYxW
zd<bNS00009a7bBm000*f000*f0cW4mQUCw|8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11t&>FK~#90?V4MNRaF?re>*KTEz45VF$}x;AbE+h0)0p;^dSnd
zh%zeBmn=vhf|7a&E6FYrbbTl=gX$p&RLUeQDY3w!`_PnHVmQudI(c_~J?wpQ&z{k9
zW?#;kX#ZisIx~BH-+%r0UTc5*`xcZaQKCeN5+zEMDDi(l&}aflhy#Erzyx4CFa{V2
z42fNK5NHSf1e$>#fG-1r-SuT#FvKQtk+@DgAey3eir<OPiPwsK?xxoSF%V}(VjNE?
z#;Mw`;$rcfH2fN(syG997MR$>zuSP%qxKWf0_+6#1q4T;@k4+SKoj9|n+#k7Orrao
z_5;g+=L3QRxlbk!h{MJAdbqo-;tFw^cv=SgBgOl~4bjqy``9ktl;?bMK{V+<5@cJ%
z1>&Fr{9P`-DIQJiLo3A7^Y&LOso~-jafUcoTrM7q5$q5j6$jRV%XsmV#0~jSJiBPe
zL&RIem&A=?Ta``mD{*Y0q`Gqq#D(JF7>~{3S$R9^C(enKKh%pi#mXX<O)q#~m$-2s
zi~aL3JRo`nZcFj{e8WBvTZoer;yj(z;4HB@g&>M+8@A!~0C8q)&pR$oO=DzWw7aJb
zwA#es1<WrK#3y1LH}!UKlej5^D2nq7np-A_gT$>do-=D5I7<92qbS?W5U>>u@qrlE
zcWN0hRQx)lD2hw#Fu&9g&-cVDe7|@`wE^$uAd2Eub(&*ph^u3Kr&Rvl?J*Z;19Nlo
z`*Tiqio}*!e|)9WMHsOk@M2C5+X8}pIoT=_@#NO9N+<cm+yIQr$zj7H+zjZfbdti{
zo1>F64bzl;9p}aR?Ul~I!Wf3@H|Fg0%AD;Lfl0CcH<eEOi5UT;N&}t(vvanWE5u=h
z+Xuj3#9kJ0VFnlA`;NZ!jno5f2P(^bT|m&;?F#YYoMM+`TUghr)(FE)K}*$70>gZ1
z5yI>eFR1gpt3rG{#_@YkmJ%_{a&;6W&iW`u>Jt#Bdm<OyDNe68;G=?sQCwc9d7l#E
z1iL1xUan=(`~rp1FfZJ&%~+foE$s@Q4c3y77Y8Q>7STQvFR6nL$+;~M|Bmta*4|Vp
z#rq2uM)9Dy#A=`UIY7KrT$Av>NgUBzL;b{0>mZKekA{`Q-0Mq*;m0d>Etx2;GHs<o
zyinXxCvh}fzE6o)o2^7URGeqe2L;;2JJZ^ZJDC_6tCu)&kyeQh8y51$i|1BbcH+(U
zT;n<{zF-*s=L5r6Te9BV$aXBcS?z}T<Z&^scO|afEj}rZ&P|YnIHT-d`|T@ji_v~z
zSQ)MSeWe-qt*YxeAlM1a1Qr7wS)BC}M}alKTHp)9voc$OJ;0IZnn}Q`QU73UY->Pp
zs6I3Sag1S*mfY#{Y)8b`#fwhCV_I}wWy~V+`q=N+>LyBp*l5Ezq$MXY6n}|qHr2@C
z!NlIPH1_-LqBW>SE)efYDa2mG(-Mz}SETg+R?J@f1l0#w=a%URL_nap<0Svy2&@Jq
zJO{TIXa#l=X6ASHm>B9E77!kLok-WScln-sNdv=JBl$EmoAR_|3jbpb&+x_lZ_a8r
zkGgU)CE5Yp8W8Nw!FE*y1lxeSiIqO+BTvly#5%vNK|Gekc>LZ74oN}}#RxsqKpuhk
ze#B!>qj<y#Jr<E!Zyx8_vT+$=n7=*RNFEh3%M8C;`oyUz@v<lsDE5<}2J{E!1O%-)
z*vgE6pc$A)qig5(HWOB&M2Qk5N|Y#3qC|-jCH}Mc2a{n5RQ9~JNdN!<07*qoM6N<$
Eg12d=RsaA1

literal 0
HcmV?d00001

diff --git a/images/radio-logo.png b/images/radio-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..aeff46ec0adadbbff685c284b248d3bbeaf1a7b6
GIT binary patch
literal 1004
zcmV<I0~7p-P)<h;3K|Lk000e1NJLTq002e+002e^1^@s6aW3M700004b3#c}2nYxW
zd<bNS00009a7bBm000*f000*f0cW4mQUCw|8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H118GS_K~#90?U>DL6G0e<pV_39`q8G<s)z;AqWB-wg9=4OM5uz|
z$6565K`$am!H=`x2Ohk5^P)m89xT#>h@QlYN=20Vo$e;JiZ;pXAt?r%iOJ4vb|dq^
zu*>c{@B7;yv%50`4u`|xa5xMQ{EU#@61R@TA^7J6e@>8eR5iS)5=V>b1kyyPzfFya
z9%qaOXN(4Cj0R_nhQu2qh!XtULa?iqbrWw4yjcVs0JgWXY8x2S7(#AP5Npq4lt_5L
z*p?6zgzNy6UV?wfR?g7I2*D2M$_v2;TVlc^O8^DlGFur9Mog(6NP+6JB_>JyH{TfB
zIAb&<&KMzBFHBz)q$5rp4I3i_r-a}{lw!)1c7r+%xq;|w>1krb$Wf4kbtA|Q3AsT-
zP3o^>D1_`5VR~!W{+4&ZyjxIw3LLhZHw@l+kS<^-RBy{_(x4*SZfp_{RH|Np;ExFT
zO`6W}BFyv)U#v~cn&c)FPS(1iHAeWhDmp#Y6vm+AdTVMeAO)(X2Q@DW!A_X_Abj0y
zQdRIr1^?kcqPoj1S$F_Ka7+lUR$b2k3RK1{y&42e|58>EruPW`WWCo`c-JLN_rRYK
zGYm2ky|`ST;O7K?U(~f0qBa8SA=RsoS$YN3IJErZD;c00WNmBfHcSuYw<Z3+Qc`io
zXmG}8m^Vf$En=itIVsi+i;q&J&99Y8*FfEmzHa6%<c>r7ZuGSlP%0m!&H(T(L2)Hi
zj8XJW025IwQz!v$L|sS2z4G30-;^#u(eq^fT(jWwo<VUOIw#Gv$SYvASq?iWdfxyS
z8jY`MjH3GmFl<50*#@GXgS<AaWt-Ty2o${sVyu1{N{?#YiQSkuQDn~O?%6hGw$hS7
z0Q?Huxfx^fl~#wsPDmxhm>)+V9eM)WgfXf8P$<-kQ1rhKE2JvR6fg^3V3dV5-%a{A
zY>c8iYf`B3I=y!US*}n&TTxF(BG*cBn*s?nCJ7iA<2A7MXkQGBNj(70g8$r_ngkJg
z9-~<H1sJuc#e^BkTNy@wvTFW|nXh8Sl<;{i^nbFIvkgAJ>wW@bAdl-sDOP^0Y-?B{
z@gt`4uzOoww+%*2JUC-CIAb(8V>CEpG_<KPQlLDcE5)rOQ3&}Jg1;?p9S(=X;cz${
aN#r+!_1C}L;`$i?0000<MNUMnLSTYtwzOCP

literal 0
HcmV?d00001

diff --git a/images/servers-logo.png b/images/servers-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..845c261c3222edf55137a90d2d6a9561f519da7c
GIT binary patch
literal 1280
zcmV+b1^@bqP)<h;3K|Lk000e1NJLTq002e+002e^1^@s6aW3M700004b3#c}2nYxW
zd<bNS00009a7bBm000*f000*f0cW4mQUCw|8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11bs<FK~#90?V4SPRaF$ne`}nNtCL?di4|54VOl9+AryU3*a!7e
z5k`qoL_`D$zWD4@)N60i+XzBfA)<i>MGBb@fmosGgMv7ujvv>L#?f(B5Bpraqi3Cc
z&hhBkciKPL+`ISM=iGJH-DjV@{%1oZ5{X12kw|AEMLH`w9as*`2j&9PfktBP2YM^@
zZZc!QzZv!kpqYFh1ui9@r-3uTupmw2*m5Y^rRX|Ek1MJjT#hO_r05dgHG4;lqBDU_
zz{^zxIS?)aFA4Ii)gez{HUqC!=~W;c1s)RQVw$ll>qtcxGc|((a4+zdWy}l=usFju
z1l$ii0_-d9R}eg98M-|O_8aX#2=ZR5qUbBYpSUMgCt?2az7aFcXy4IZ5o8$nv7l2S
zFyAux0;5LzeJO1Z<aQ?<E?EX&V6GVLA1e9`fTGhBT@O57&bL}I7ks`sX4q(-1?*Jx
zATXPZAsINkEkouyCP@Jf)43O(#Tc+ukV9$4%v(v2QQ#e1&M}oxV2u@&0%y_XNuE)6
zu2V%htmyN;YtEfrD>?)C829X-gUh7*ff+y_ZmwyKz?s<dS6_0>t>iK;9|9Nw{sE2w
zTY>MBJ0X)ovO}FH+WI4|XQFaBArdJ}Q3Y=RcoMi1n1@Rl8aO3SaC47^bt|;fIu~41
z;EK}3sd)h7zzN)X>=^KiB{P&l(H=!VQ}lcQPnDY~O+~**)@PaI5vm4&Eo7wV9moM-
zMUwock|!`bfETOuDiD4Ho)siDAM`1BOPHEL0eAv<!!r7^>xD+U0$(R5ejoU~jAsGx
zu4V9L*VYPkqaYu(DvEvw90Kkt?pv*tR`9IA?P;$Fasl|cpi?1mw`K4J=Bm;DaC=43
zE?{Xvr$XSYW$*=N%xM2W(N_T!72tEg`*trtOxdBVg4YXdQ*<YA2k=-)$LeOYW$-C@
zy*LH$o~k_xfK$LCK~AL^eG1-XoPu}Z7C2TnYptN<M$u)89t<GYsiKT4`l;`lizs*v
zU^VVF$pTy^JeSEC@$KXa=_C0Z*Pf=WJvHZW+4XVYCqWL}77rtlNSQr&4*~;88BFOm
zr@(n<VQ(BL!Z>jLy0(^*HwK)<DS1Z(8L8m+9E$cO%GYQBPnDY~6N+wE)Vl#8k5Dy;
z+xF3^tJ^eA1J4Qaht<KCD*=4P)Cvl?X<$RLvQNdQ;LRgL<?3)A#jVRy@r{@lGWvW2
ztOC{mf0uHtepXrrUv_OJk6Q(KyH!zi2-r`C@DnKJ6yX~&4WoTqdnI{yysMy7AuyQe
zNjFedsG1~_E7}b#E8$q(oE0Q>pP?@>M~wDQ6nzui9z5Vn>^BM_v)?lK<``>Za|8HR
z(Y?6LdQnNo>SmK=$g{xP1w37;J7F*aEEFVF5YMx~TZcW@bSe|TYAYy^BQS#O237!n
zRp?lqG=WuuY|rXcM8WF@UdKKA7vSDf&c?kZ=xOWPm9%HklN?u+qI+hVNjZbNb@l*T
q1UXsaw<D2ABoc{4B9X}dhyMTxeeRLm#%E6e0000<MNUMnLSTZ8Z!5q6

literal 0
HcmV?d00001

diff --git a/style-tests.css b/style-tests.css
index 799f0ec..2175edf 100644
--- a/style-tests.css
+++ b/style-tests.css
@@ -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;
diff --git a/syco-index-tests.html b/syco-index-tests.html
index 99b0bbd..9023545 100644
--- a/syco-index-tests.html
+++ b/syco-index-tests.html
@@ -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>