From 996fa03961d486183b55679fef126931fa07ad7c Mon Sep 17 00:00:00 2001 From: betalars <contact@betalars.de> Date: Sat, 26 Mar 2022 23:34:39 +0100 Subject: [PATCH] Styleguide um Pixelwelt erweitert. --- pixels/Pixel-cityscapes.aseprite | Bin 0 -> 2473 bytes pixels/Pixel-cityscapes.png | Bin 0 -> 1607 bytes pixels/bb3-palette.aseprite | Bin 0 -> 712 bytes styleguide-website/img/Pixel-cityscapes.png | Bin 0 -> 1607 bytes styleguide-website/index.html | 17 ++++++++++++----- styleguide-website/styleguide.css | 6 +++++- 6 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 pixels/Pixel-cityscapes.aseprite create mode 100644 pixels/Pixel-cityscapes.png create mode 100644 pixels/bb3-palette.aseprite create mode 100644 styleguide-website/img/Pixel-cityscapes.png diff --git a/pixels/Pixel-cityscapes.aseprite b/pixels/Pixel-cityscapes.aseprite new file mode 100644 index 0000000000000000000000000000000000000000..642378065699777206655560c7bede4b7a5b8a03 GIT binary patch literal 2473 zcmZ3<$-wYnDI-G)g98Hx10w?iLka^j&|zQ%2{H&U2p|hnjjhSa!0_uMH`rEg1_lN( z1_lOp1+bM!b|^72Fi0xsKt;5nG@Sa+!0`X|jsFY`w~wy>&%iLdsro+y!=|escGAIR z{}~u!md^dpz+ltV@}Gghr?B`x1B0Te#eW6{F%8ZC3=CZ2^8Xna7F_-RpMfDL7(`kp zp83zfV3jiSKLdk(Y6nQAj`4p620<zH{|pT5JktLe7_QGg|DS<jx%c(|3=Gxw+y65# zB-l*-&%hApS@WNPK}A~oKLdlXu;PCP1|AmC{|pST)~p1Pf#v@h7>>F$gKRV}`_I5o z<(2uLfx$w`<Ua$0GCxR{AO}d--&-Iv|L*ht&%khTg57@xhNft}{|pQz3GV+H7&NpM z{xdMhC`p3cBh2@|kAZ=K1r&dvK>Gjs#_gl)XE#-Ey1G8;;If#db8VVhd<u&dO)bPU zG`Ym(7hL@x6#U;h@r+f<O#9RhF&$$;DRp)p>Fcx4FZaG)ZNELiW@?;gjf%9ku&^Qz zi|DI0D_;ecA9ZP7U|v?`m1!YmqRg)?$f5Z6*7m>qyf03$Yl_w@NpRQDR*+GWWEbX> z2f0Rp86H6l4F5s#%HWe&nOdY^h+o=R1*>izm~I8<{DMmSMi{+gVqjoZfY|?^2||OC zwgW@OoUIXolh!Ek*c|-rklo#7Vf}soQ|87QEi8d|HdwsKD7WH#@Mf3XHXZwox`j{X zeExY$Y+clWdt0{_xHLU|p5UqS?tugM4f%_UdP*!J?l?ZWW5r~(<VdLGOs>d9xwpN& zgd&z|=!Bk7=-Kb(UNEb2da~(E_9q|K{Sp0PvuoArgI$xXxGr~nb8=N}j@qq#U=!Eu zFZ+yI_>SkuF}Rzxx7_}2>(t1&GEBUn&$Z};&6}mtS|U**NyP;#Y+LewyleJ+uqvvr z{^YEd_ldv%E=!)xKHr9|)vIU?_tO<O8@RsztU2_3cAuL~)wO~Eu1j_|16W%=I@wu@ zaIp!$K6Sw0$d%IyT-O37Hm99ow~kv>HZkdHs6@x}ndg%O_6dvZ%vkvK|FNV?e(r*6 z#9n>zkrcE^P<LQ)^+<l?$@+37??<+6YHo}41tP?Bm}4_8_@DU4Fzf#U*7MW-=OrY( zn9|SkIK*KuYqC#7$|8%|lK*em6tD)&Nv-7D`yq7Q>q9#GD*NP)CLOz#nG|4B*`OPy z;BQ|amXs;J{qy3`2dVEWIvV;~_%Dg@R?0nC<|QXG(LBXaeFoP?K1WU?1Frm?S}h-T zuZev7(eJ>Lz8sIDes#`<GzGmokycA8U)hGRYPxlJaR(c_&I{O7DkpJk?fUo6wS#AI z7jQ>){}-#6SL*&JmX*!Va`op0jbGo~v&)R{ZL$n@YGcoA<yDpU-}`pmeZ>ts8#m8l z&x+#|IaACSct2s@>V*Le*Z!5?*lW|N+40*Xdga5$<JYaKl;ostuIT2uu;BUB4Xb7a zUMyri!Oe4HyRYe^?>kGY5;iTH+R`=0vHGgX;=>v>)pmDuvObyS%$Qs*{mkK=@AaD! z;lX-SZGL=T<@t)^tE<=dx=lQ<*4BM#Onk8U`h&wq|0^%M(qb(C(|q#3>MS>3h0~U2 zs&k$^zI#JEc3;BX^?#+U9`Ik?^SUtpxV4=8-i`mCXLW6MVF0CeNTG>H?XnEw3>9;d z6AtiJd^o||@+4qWQ9<UC2)<xJe*Q8uHSwAKdaQ!YOeTd4EoqEbXM=ML6N4H97X!i! zI|eg`iaArKo}SjMz~gXtYwOg_<?~zq|KERda(mjA=HpS?(`U16xc%+Utt<Op%xnHH zqvXC{`axgqgZUSBGww_Ne_(%`@ULpKh5wo3Uu5?yFEm)X`6Hu{l(1DV--oXB5-#K3 z={!jXo>v*J{n0)<#`Eri>(7&z_p$t+QuJni$HB*uFLO8+OX>x1J-*<)yll0dQqhr3 z?_2G=vo9K*e-JmnYMEo+(Np^czMnp$x==D*N->RL>omz&=Ji)ICoEu9FPwDn&ZZ^V zx}}BtcN94_Ux?*p(Dtdird77{Qm5L|lUD*i2d`ZHF!-LF<%0Dxdh^9>XY26Yc@t{m z_+C{>Ju>s|+{?#Lt~GhQY+I)JtXnl&XNw-~SvlwK9P0@`qqm*vN!zn6C~N+E+dH$0 zcC>%ppnW;*y7z^s;$@vF$8xuxeRbor<LPu`se&`xPu8rx*(>wn`pmHJ*%xFgU)lZI zy^dWsojYok+l$3wrI*cC_1@JzpIEf`@>S`}@8)IM?#wO^ueIi|-FVpduSA|0^O|?9 zwI%LnIdh`*-|UT+_V~tNcc1(3XS40*x-!4622`3l`0c-c_0C<LzlZL&u;!O6oB4FE z{mz}2yZhJtw9dG2=-rz%xn1T7ebTw*o+qP@&kftSZ=z|$Y12CqwU(xbO&dGKwn=H( zPTP~Jx@hL?>HhP1tRgB;y}2>(4x?$#?)-g~vv_4*&NiEJIp_6<$8{#3R(4;zV{@=+ z@|(ZY_zfO)79ag>e^hdAVf$4dlm68Ad$|3kD^A*T+}@?F`ng==)4jS2AIto*{PWSf z-tMj8rvtxlUQ^6CB9L2Vp7Z^gW@oqcG1>IRl~0d^|2kZ2=QeRt)#~c#oX1N}?A1<Q zvGOm|0=89>tc;-K&CI~bz=@PJqZ!N@D(1Ys!p+xgz`>Rv<+S(2hkx!ezSnuyny$W( z+As8Y^{=P=febyR!KquzUcKx+o%j6E=?(j$f=$DJ-+8<G^}Kyjv3rl42}svF|Mm1K z+sVHlDs7%7`#@-B<Vm@_iIFG$rp`X7oKn&K=6GIe_;*d~&CXAK`Wy6nn&YS0o0m+G zQcB;}IQs>Ii%PY{rd}h59^KnAR=Guwe7bdJ275nH*tS#NrSTAll%d*e0qt8qo+>_? zWToU@vebCz5slxM3eBTFsES&izNz>0c2?{4`dzipTHQmr<sNS_{ApJf<X?4Z^1tF= Q-pT&AuI^)YFqK&c0PfrA7XSbN literal 0 HcmV?d00001 diff --git a/pixels/Pixel-cityscapes.png b/pixels/Pixel-cityscapes.png new file mode 100644 index 0000000000000000000000000000000000000000..3ac58873fe61bb36fdc26e1f8a1fc021437809de GIT binary patch literal 1607 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 literal 0 HcmV?d00001 diff --git a/pixels/bb3-palette.aseprite b/pixels/bb3-palette.aseprite new file mode 100644 index 0000000000000000000000000000000000000000..40063be3d908944be108190e6c6ef3ab3b5e0939 GIT binary patch literal 712 zcmX@X#K7=iDI<db12Y2$10w?iLka^j&|zQ%2{H&U2p|hnjqSn2!0_uME7(?61_lN( z1_lOp1+bM!b|^72Fi0xsKt;5nG@Sa+!0`X|jsFY`w~wy>&%iLdsro+y!=|escGAIR z{}~u!md^dpz+ltV@}Gghr?B`x1B0Te#eW6{F%8ZC3=CZ2^8Xna7F_-RpMfDL7(`kp zp83zfV3jiSKLdk(Y6nQAj`4p620<zH{|pT5JktLe7_QGg|DS<jx%c(|3=Gxw+y65# zB-l*-&%hApS@WNPK}A~oKLdlXu;PCP1|AmC{|pST)~p1Pf#v@h7>>F$gKRV}`_I5o z<(2uLfx$w`<Ua$0GCxR{AO}d--&-Iv|L*ht&%khTg57@xhNft}{|pQz3GV+H7&NpM z{xdMhC`p3cBh2@|kAZ=K1r&dvK>Gjs#_gl)XE#-Ey1G8;;If#db8VVhd<u&dO)bPU zG`Ym(7hL@x6#U;h@r+f<O#9RhF&$$;DRp)p>Fcx4FZaG)ZNELiW@?;gjf%9ku&^Qz zi|DI0D_;ecA9ZP7U|v?`m1!YmqRg)?$f5Z6*7m>qyf03$Yl_w@NpRQDR*+GWWEbXB z0=Y(kA09yr4F4Gz7`Pam5|gvji}FkJQUVwl7+4h`3jQ-eXa;a9teBIWkdl;^n40|j x!IMYN9zK06E+8T#CMYUAeZrJU(<V-x93Bu76c!j7eEq_eOKA*D3~p)6n*kKwx$*!2 literal 0 HcmV?d00001 diff --git a/styleguide-website/img/Pixel-cityscapes.png b/styleguide-website/img/Pixel-cityscapes.png new file mode 100644 index 0000000000000000000000000000000000000000..3ac58873fe61bb36fdc26e1f8a1fc021437809de GIT binary patch literal 1607 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 literal 0 HcmV?d00001 diff --git a/styleguide-website/index.html b/styleguide-website/index.html index 0fd3739..8ad7ac0 100644 --- a/styleguide-website/index.html +++ b/styleguide-website/index.html @@ -31,6 +31,8 @@ <p> Wenn ihr mit euren eigenen Designs contributen möcht stellt euch die Fragen: Was macht die soziale Blase aus, in der ihr euch befindet und wir könnt ihr eure Gesellschaft umgeben von einer Blase repräsentieren? </p> + <p> + Diesen Styleguide und alle Grafik Assets, die bis zum Event erstellt werden, findet ihr im <a href="https://git.cccv.de/divoc/bridging-bubbles-design"> Bridging Bubbles Design Repository im CCCV-Git.</a> <hr/> </section> <section aria-labelledby="logo"> @@ -63,7 +65,7 @@ Dabei sollte in den meisten Kontexten das dunkle Farbschema genutzt werden. Wenn sich Nutzende über eine CSS-Flag ein helles Theme wünschen oder der Kontext das erfordert, kann auch das Light theme verwendet werden. Die Grundfarben sind so abgestimmt, dass sie leicht verschiedene HEX-Werte haben, jedoch vor dem Untergrund visuell gleich aussehen. </p> - <div class:"sr-only"> + <div class="sr-only"> <a href="#Themes-ableiten"> Lange Farbschema-Beschreibungen überspringen. </a> </div> @@ -307,7 +309,7 @@ </svg> <svg role="img" aria-label="Ein helles Farbschema - base. Die schwarze Überschrift ist grün unterstrichen vor fast beigem Untergrund, ein Beispiel-fließtext steht auf hellgrau. 6 mit hex-werten Beschriftete Kästchen zeigen schwarz, grün, blau, violett, rose und ocker. " - width="500" + height="280" viewBox="0 0 52.916665 37.041664" version="1.1" id="svg160177" @@ -544,7 +546,7 @@ </g> </svg> <svg role="img" aria-label="Übersichtsgrafiken mit dunklen Farbverläufen passend zu den bisher genannten Farben." - width="500" + height="280" viewBox="0 0 52.916665 37.041664" version="1.1" id="svg160177" @@ -907,13 +909,18 @@ <input type="text" id="text-input-example"/> </div> </section> - <section aria-labelledby="Pixelwelt"> + <section aria-labelledby="pixelwelt"> <div> <h2 id="pixelwelt">Pixelwelt</h2> </div> <p> - Hier entsteht noch ein Abschnitt zum Thema Pixelwelt. Bitte habt einen kleinen Augenblick geduld! + Das Divoc setzt für die Pixelwelt auf einen 16x16 Stil und reduzierte Farbpaletten. Zwar unterstützt das Workadventure nur 32x32 Tiles, wir können jedoch jeden Pixel "4 Pixel groß" machen und so eine besondere Optik erzielen. </p> + <div><img src="img/Pixel-cityscapes.png" class="pixelated" height="300" + alt="Pixelgrafik, ein grünes Häschen in Bläschen fliegt in richtung einer Stadt in einer gelben blase. Im Hintergrund ist eine Raumstation in einer blauen blase und ein kleines rotes Raaumschiff."/> + </div> + <p> + Unsere <a href="https://git.cccv.de/divoc/bridging-bubbles-design/-/tree/main/pixels"> Pixel-Asssets im Design-Git </a> können euch dabei helfen, im Event-Stil zu pixeln. Wir empfehlen hier insbesondere die Farbpalette, die ihr in Aseprite nutzen könnt. (Die Anwendung kann gekauft werden, Freund_innen des selbst-kompilierens finden die Anwendung jedoch auch frei im Paketmanager des Vertrauens.) </section> </main> </body> diff --git a/styleguide-website/styleguide.css b/styleguide-website/styleguide.css index e4de57c..a68d0c0 100644 --- a/styleguide-website/styleguide.css +++ b/styleguide-website/styleguide.css @@ -391,7 +391,7 @@ hr::after { } } -#sr-only { +.sr-only { position:absolute; left:-10000px; top:auto; @@ -400,6 +400,10 @@ hr::after { overflow:hidden; } +.pixelated { + image-rendering: pixelated; +} + html { /* Works around a bug in chromium that makes the site not full width in small preview sizes*/ position: absolute; -- GitLab