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
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%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