Home page layout with grid cards (#116)

* Homepage layout proposal

* Fix: Change repository link to gmc

* Change text in Repository grid card

* Zengin index concept

* Fix links

* Fix the position of links in grid cards

* Change the link in index and spelling mistake in zengin/index

* Polish translation for zengin/index.md

* Fix grid cards css

* Fix tranlsation of zengin/index

* Polish tranlsation of the main index.md

* Fix english name in zengin/index translation

docs/index.md

@@ -2,12 +2,45 @@
 
 This GitHub page is designed to contain community maintained set of articles, tutorials and documentation for everything Gothic.
 
-First two Gothic games use engine called ZenGin, developed by Piranha Bytes and Mad Scientists. If you want to know more about the history of the development, there is a heap of information on the [Gothic Archive](https://gothicarchive.org/).
+!!! Info
+    The content here is not meant to be taken as the holy word of modding. We are just modders sharing our experiences, knowledge and our favorite work flows.
 
-The content here is not meant to be taken as the holy word of modding. We are just modders sharing our experiences, knowledge and our favorite work flows.
+<div class="grid cards" markdown>
 
-Feel free to open a pull request with your article or propose changes.
+-  :fontawesome-brands-discord:{ .lg .middle } __Discord Server__
 
-You can open a pull request in [this repository](https://github.com/Gothic-Modding-Community/gmc/)
+    ---
 
+    If you have any modding related questions, or just want to talk join our discord server.
 
+    [:octicons-arrow-right-24: Discord](https://discord.gg/mCpS5b5SUY)
+
+
+-  :octicons-git-pull-request-16:{ .lg .middle } __Contribution__
+
+    ---
+
+    Feel free to open a pull request with your article or propose changes. Here is detailed contribution guide.
+
+    [:octicons-arrow-right-24: How to Contibute](contribute/index.md)
+
+-  :material-file-document:{ .lg .middle } __Gothic Archive__
+
+    ---
+
+    First two Gothic games use engine called ZenGin, developed by Piranha Bytes and Mad Scientists. If you want to know more about the history of the development, there is a heap of information on the Gothic Archive.
+
+    [:octicons-arrow-right-24: Gothic Archive](https://gothicarchive.org/)
+
+
+
+-  :fontawesome-brands-github:{ .lg .middle } __Repository__
+
+    ---
+
+    Check out our GitHub repository for the site's source code and updates.
+
+    [:octicons-arrow-right-24: GitHub](https://github.com/Gothic-Modding-Community/gmc/)
+
+
+</div>

docs/index.pl.md

@@ -2,12 +2,46 @@
 
 Ta strona GitHub jest zaprojektowana w celu zawarcia zbioru artykułów, poradników oraz innej dokumentacji o Gothicu utrzymywanych przez społeczność.
 
-Dwie pierwsze części gier Gothic korzystają z silnika o nazwie ZenGin, stworzonego przez Piranha Bytes oraz grupę programistów o nazwie Mad Scientists. Jeżeli chcesz wiedzieć więcej o historii tworzenia, to jest masa informacji na [Gothic Archive](https://gothicarchive.org/).
+!!! Info "Informacja"
+    Zawartość strony nie jest przeznaczona, aby być uznaną za święte słowa moddingu. Jesteśmy tylko modderami dzielącymi się doświadczeniami, wiedzą oraz naszym ulubionym tokiem pracy.
 
-Zawartość strony nie jest przeznaczona, aby być uznaną za święte słowa moddingu. Jesteśmy tylko modderami dzielącymi się doświadczeniami, wiedzą oraz naszym ulubionym tokiem pracy.
+<div class="grid cards" markdown>
 
-Nie krępuj się, aby otworzyć prośbę o połączenie (ang. pull request) z twoim artykułem, lub z propozycją zmian. Po więcej informacji jak to zrobić zobacz, [Jak Się Udzielić](contribute/index.md).
+-  :fontawesome-brands-discord:{ .lg .middle } __Serwer Discord__
 
-Możesz otworzyć prośbę o połączenie względem [tego repozytorium](https://github.com/Gothic-Modding-Community/gmc/).
+    ---
 
+    Jeśli masz jakieś pytania związane z modowaniem lub po prostu chcesz porozmawiać, dołącz do naszego serwera Discord.
+
+    [:octicons-arrow-right-24: Discord](https://discord.gg/mCpS5b5SUY)
+
+
+-  :octicons-git-pull-request-16:{ .lg .middle } __Udzielanie się__
+
+    ---
+
+    Nie krępuj się, aby otworzyć prośbę o połączenie (ang. pull request) z twoim artykułem, lub z propozycją zmian. Tutaj znajdziesz pełną instrukcje jak to zrobić.
+
+    [:octicons-arrow-right-24: Jak Się Udzielić](contribute/index.md)
+
+-  :material-file-document:{ .lg .middle } __Gothic Archive__
+
+    ---
+
+    Dwie pierwsze części gier Gothic korzystają z silnika o nazwie ZenGin, stworzonego przez Piranha Bytes oraz grupę programistów o nazwie Mad Scientists. Jeżeli chcesz wiedzieć więcej o historii tworzenia, to jest masa informacji na Gothic Archive.
+
+    [:octicons-arrow-right-24: Gothic Archive](https://gothicarchive.org/)
+
+
+
+-  :fontawesome-brands-github:{ .lg .middle } __Repozytorium__
+
+    ---
+
+    Sprawdź nasze repozytorium GitHub, aby uzyskać kod źródłowy strony i informacje o aktualizacjach.
+
+    [:octicons-arrow-right-24: GitHub](https://github.com/Gothic-Modding-Community/gmc/)
+
+
+</div>
 

docs/zengin/index.md

@@ -1,3 +1,41 @@
 # ZenGin
 
-The game engine **ZenGin** is used by Gothic 1 and 2. This section contains the documentation of the various aspects of ZenGin modding.
+The game engine **ZenGin** is used by Gothic 1 and 2. This section contains the documentation of the various aspects of ZenGin modding.
+
+<div class="grid cards" markdown>
+
+-  :material-code-braces:{ .lg .middle } __Script Reference__
+
+    ---
+
+    ZenGin uses its own scripting language called Daedalus. Check its functions, classes and extenders.
+
+    [:octicons-arrow-right-24: Scripts](scripts/index.md)
+
+
+-  :fontawesome-solid-cube:{ .lg .middle } __Vob Classes__
+
+    ---
+
+    Virtual objects are objects which appear in the game world.
+
+    [:octicons-arrow-right-24: zCVob](worlds/Classes/zCVob/index.md)
+
+
+-  :fontawesome-solid-person-walking-arrow-loop-left:{ .lg .middle } __Animations Section__
+
+    ---
+
+    Create new animations and put them into the game.
+
+    [:octicons-arrow-right-24: Animations](anims/index.md)
+
+
+-  :material-code-block-tags:{ .lg .middle } __Union SDK__
+
+    ---
+
+    Learn how to create plugins with Union SDK, a community-made software development kit for ZenGin.
+
+    [:octicons-arrow-right-24: Getting Started](union/sdk/getting_started.md)
+</div>

docs/zengin/index.pl.md

@@ -1,3 +1,41 @@
 # ZenGin
 
 Silnik gry **ZenGin** jest używany w grach Gothic 1 i 2. Ta sekcja zawiera dokumentację różnych aspektów modowania ZenGin.
+
+<div class="grid cards" markdown>
+
+-  :material-code-braces:{ .lg .middle } __Skrypty Gothica__
+
+    ---
+
+    ZenGin używa własnego języka skryptowego o nazwie Daedalus. Sprawdź jego funkcje, klasy i extendery.
+
+    [:octicons-arrow-right-24: Skrypty](scripts/index.md)
+
+
+-  :fontawesome-solid-cube:{ .lg .middle } __Klasy Vob__
+
+    ---
+
+    Voby (eng. virtual objects) to obiekty pojawiające sie w świecie gry.
+
+    [:octicons-arrow-right-24: zCVob](worlds/Classes/zCVob/index.md)
+
+
+-  :fontawesome-solid-person-walking-arrow-loop-left:{ .lg .middle } __Sekcja Animacji__
+
+    ---
+
+    Twórz nowe animacje i umieszczaj je w grze.
+
+    [:octicons-arrow-right-24: Animacje](anims/index.md)
+
+
+-  :material-code-block-tags:{ .lg .middle } __Union SDK__
+
+    ---
+
+    Naucz się jak tworzyć pluginy za pomocą Union SDK, stworzonego przez fanów narzędzia deweloperskiego dla silnika ZenGin.
+
+    [:octicons-arrow-right-24: Pierwsze kroki](union/sdk/getting_started.md)
+</div>

mkdocs.yml

@@ -119,6 +119,7 @@ markdown_extensions:
         - name: mermaid
           class: mermaid
           format: !!python/name:pymdownx.superfences.fence_code_format
+  - md_in_html
 
 plugins:
   - search

overrides/assets/stylesheets/extra.css

@@ -17,6 +17,22 @@
     }
 }
 
+/* Fix position of the links in grid cards */
+.md-typeset .grid.cards > ul > li {
+    display: flex;
+    flex-direction: column;
+}
+.grid.cards li p:last-child {
+    display: flex;
+    flex-grow: 5; /* Probably 2 would be enough, as the grids shouldn't hold too much text to begin with, but to be safe I set it to 5 */
+}
+.grid.cards li p:last-child a {
+    align-self: flex-end;
+}
+.grid.cards li > p:first-child > strong {
+    vertical-align: middle;
+}
+
 /* Stretch content area */
 .md-main__inner.md-grid {
     /* Default 61rem */