Styleguide um Pixelwelt erweitert.

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>

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;