Layout Bilder am Anfang der Wiki Seiten

docs/Layouts/bone.md

@@ -2,6 +2,13 @@
 
 Bone ist die fortschrittlichste auf dieser Webseite vorgestellte Variation des [klassischen Neo-Layouts](neo.md), in der die Buchstaben noch ergonomischer angeordnet wurden.
 Bone wurde von „effchen“ und „danros“ im IRC mit Hilfe von Arnes [Layout-Optimierer](https://hg.sr.ht/~arnebab/evolve-keyboard-layout) in einer Version von 2014 entwickelt.
+
+<div style="display: flex; justify-content: center;">
+    <div class="keyboard-box">
+        <img src="https://dl.neo-layout.org/grafik/bilder-einzeln/flat/bone-1-tkl.path.svg" alt="Bone Layout"></img>
+    </div>
+</div>
+
 Über die genauen Gewichtungen und Parameter bei der Entwicklung von Bone ist wenig verblieben.
 Die Optimierungskriterien von Bone unterscheiden sich in denen von [AdNW](http://www.adnw.de) vor allem durch eine stärkere Ungleichbelastung der einzelnen Finger: Bone belastet die kleinen Finger weniger, insbesondere wurde versucht, nicht-vermeidbare Kollisionen unbedingt auf die Zeigefinger zu legen,
 während bei AdNW die einzelnen Finger deutlich gleichmäßiger belastet werden. Ferner findet eine stärkere Fokussierung auf die oberen beiden Reihen statt und die untere Reihe soll nur selten verwendent werden.

docs/Layouts/mine.md

@@ -2,6 +2,12 @@
 
 Mine ist ein Layout, das mit [ArneBabs](https://www.draketo.de/) [Optimierer](https://hg.sr.ht/~arnebab/evolve-keyboard-layout/browse) erstellt wurde. Eine frühere Version dieses Optimierers wurde auch für das Layout [Bone](bone.md) verwendet.
 
+<div style="display: flex; justify-content: center;">
+    <div class="keyboard-box">
+        <img src="https://dl.neo-layout.org/grafik/bilder-einzeln/flat/mine-1-tkl.path.svg" alt="Mine Layout"></img>
+    </div>
+</div>
+
 Die Ebenen 3 und 4 sind genauso wie bei Bone und Neo, Ebenen 5 und 6 sind an die Ebene 1 angepasst (also etwa „δ“ über dem „D“).
 Mine weicht von Bone ab, indem es:
 

docs/Layouts/neo.md

@@ -3,6 +3,13 @@
 Mit Neo ist auf dieser Webseite die Version 2.0 des Neo-Layouts gemeint.
 Es ist die letzte Version vor der Abspaltung der Varianten mit anderen Buchstabenpositionen, die allesamt
 die Sonderzeichen und Navigationstasten von Neo nutzen.
+
+<div style="display: flex; justify-content: center;">
+    <div class="keyboard-box">
+        <img src="https://dl.neo-layout.org/grafik/bilder-einzeln/flat/neo-1-tkl.path.svg" alt="Neo Layout"></img>
+    </div>
+</div>
+
 In Abgrenzung zu diesen „Second Generation“ Neo-basierten Layouts wird Neo hier auch als das klassische Neo-Layout bezeichnet.
 Weiteres zur Geschichte von Neo befindet sich [hier](../Historisch/Geschichte.md).
 

docs/Layouts/neoqwertz.md

@@ -1,7 +1,13 @@
 # NeoQwertz
 
 NeoQwertz ist ein Layout, das einem einige der Vorteile von Neo bietet, ohne sich komplett an ein neues Layout gewöhnen zu müssen.
- 
+
+<div style="display: flex; justify-content: center;">
+    <div class="keyboard-box">
+        <img src="https://dl.neo-layout.org/grafik/bilder-einzeln/flat/neo_qwertz-1-tkl.path.svg" alt="NeoQwertz Layout"></img>
+    </div>
+</div>
+
 NeoQwertz hat wie Neo verschiedene Ebenen, die die mühelose Eingabe von Sonderzeichen, griechischen Buchstaben, mathematischen Symbolen und Diakritika und eine komfortable Navigation erlauben.
 Lediglich die Buchstaben wurden so angeordnet, wie sie auch beim deutschen Standardlayout sind, um dem Benutzer die Transition möglichst einfach zu gestalten.
 

docs/Layouts/noted.md

@@ -8,6 +8,12 @@ entwickelt, der auf den Metriken und Konzepten von
 [Optimierer](https://hg.sr.ht/~arnebab/evolve-keyboard-layout/browse) aufsetzt
 und diese anpasst und erweitert.
 
+<div style="display: flex; justify-content: center;">
+    <div class="keyboard-box">
+        <img src="https://dl.neo-layout.org/grafik/bilder-einzeln/flat/noted-1-tkl.path.svg" alt="Noted Layout"></img>
+    </div>
+</div>
+
 Es übernimmt einige Ideen des Mine Layouts, wie etwa die Position der rechten
 Mod3-Taste, der Shortcut-Tasten ++C++, ++V++ und ++X++ und des Vokalblocks,
 weicht aber insbesondere bei der Anordnung der Konsonanten auf der rechten Hand

docs/style.css

@@ -0,0 +1,16 @@
+.keyboard-box{
+    margin:auto !important;
+    margin-top:1em !important;
+    margin-bottom:1em !important;
+    max-width:600px;
+    background:white;
+    border-radius: 10px!important;
+    box-shadow:0 0 10px rgba(0,0,0,0.4);
+}
+
+.keyboard-box img{
+    margin:auto;
+    display:block;
+    padding: 5px;
+}
+

mkdocs.yml

@@ -44,6 +44,8 @@ markdown_extensions:
         "ltgt": "<>"
         }
       camel_case: True
+extra_css:
+  - style.css
 
 nav:
   - Startseite: index.md