re-arrange the help section

views/DE/account/updateInformation.pug

@@ -81,28 +81,35 @@ html(lang="de")
                                     | <a class="collapsed" data-toggle="collapse" href="#collapse-index" aria-expanded="false" aria-controls="collapse-index">
                                     | 1. Bearbeiten Sie ihre <i>index.html</i></a>
                             div(id="collapse-index" class="card-body collapse")
-                                p Klicken Sie <a href=#{indexLink} target="_blank"><i>index.html</i></a>. Um die Änderungen zu speichern und auf ihrer Seite sofort zu übernehmen, klicken Sie auf <i>Commit changes</i>
-                                img(src="https://transfer.hft-stuttgart.de/img/help/save_file.png", class="img-fluid", style="border: 1px solid gray;", alt="index.html")
+                                ol
+                                    li Klicken Sie <a href=#{indexLink} target="_blank"><i>hier</i></a>, um Ihre <i>index.html</i> in GitLab zu öffnen.
+                                    li Bearbeiten Sie ihre Datei.
+                                    li Um die Änderungen zu speichern und auf ihrer Seite sofort zu übernehmen, klicken Sie auf <i>Commit changes</i>
+                                        img(src="https://transfer.hft-stuttgart.de/img/help/save_file.png", class="img-fluid", style="border: 1px solid gray;", alt="index.html")
+                                    li Sobald Sie Änderungen an Ihrer <i>index.html</i> vornehmen, wird Ihre Website veröffentlicht.
                             div(class="card-header")
                                 div(class="card-title")
                                     | <a class="collapsed" data-toggle="collapse" href="#collapse-setting" aria-expanded="false" aria-controls="collapse-setting">2. Anpassen der Einstellungen in <i>settings.js</i></a>
                             div(id="collapse-setting" class="card-body collapse")
-                                p Klicken Sie <a href=#{settingLink} target="_blank"><i>settings.js</i></a>. Hier sehen Sie die Standardwerde für Soziale Netzwerke und persönliche Webseiten eines Teilnehmers sowie den Standardavatar. Es wird empfohlen, diese Werte nicht zu ändern, aber Sie können weitere Soziale Netzwerke hinzufügen.
-                                img(src="https://transfer.hft-stuttgart.de/img/help/default_settings.png", class="img-fluid", style="border: 1px solid gray;")
-                                p Diese Schalter kontrollieren, welche Teile der gitlab-Seite angezeigt werden sollen. Wenn Sie also beispielsweise nur eine einzige Seite haben, benötigen Sie kein Menü und können den Wert für 'menu' auf OFF stellen.
-                                img(src="https://transfer.hft-stuttgart.de/img/help/switches.png", class="img-fluid", style="border: 1px solid gray;")
-                                p Hier ändern Sie das Projektlogo. Das Logo wird am oberen Rand der Seite mittig angezeigt. Wenn der Schalter für 'project logo' auf OFF steht, wird es nicht angezeigt.
-                                img(src="https://transfer.hft-stuttgart.de/img/help/pr_logo.png", class="img-fluid", style="border: 1px solid gray;")
-                                p Hier ändern Sie das Menü Ihrer gitlab-Seite. Ein Menü kann entweder auf einen Unterordner/ template verweisen oder aber auf einen externen Link, z.B. eine Demo. Sie können Menüeinträge hinzufügen oder entfernen. Das Menü wird mit dem Schalter 'OFF' verborgen. Vergessen Sie nicht den Schrägstrich am Ende eines Menülinks, wenn dieser auf einen Ordner zeigt.
-                                img(src="https://transfer.hft-stuttgart.de/img/help/menu.png", class="img-fluid", style="border: 1px solid gray;")
-                                p Hier ändern Sie die Teilnehmenden. Sie können die Standardwerte für Soziale Netzwerke (diese beinhalten die HFT-Kanäle) oder Ihr eigenen Profile verwenden. Sie können auf Ihre persönliche Webseite verlinken. Sie können soziale Netzwerke hinzufügen oder entfernen. Sie können auch einen persönlichen Avatar oder den Standard-Avatar (DEFAULT.avatar) verwenden.
-                                img(src="https://transfer.hft-stuttgart.de/img/help/partic.png", class="img-fluid", style="border: 1px solid gray;")
-                                p Hier ist ein Beispiel mit zwei Teilnehmenden:
-                                img(src="https://transfer.hft-stuttgart.de/img/help/partic2.png", class="img-fluid", style="border: 1px solid gray;")
-                                p Hier ändern Sie die Fußzeilenlogos z.B. zu denen von Projektpartnern. Wenn Sie das Logo nicht mit einer externen Webseite verlinken wollen, verwenden Sie EMPTY_LINK als Wert für href. Der Titel title wird bei Mouse-Hover über dem Logo erscheinen.
-                                img(src="https://transfer.hft-stuttgart.de/img/help/f_logos.png", class="img-fluid", style="border: 1px solid gray;")
-                                p Klicken Sie anschließend auf commit changes , um die Änderungen zu speichern.
-                                img(src="https://transfer.hft-stuttgart.de/img/help/edit_settings_generic.png", class="img-fluid", style="border: 1px solid gray;")
+                                ol
+                                    li Klicken Sie <a href=#{settingLink} target="_blank"><i>settings.js</i></a>, um Ihre <i>settings.js</i> in GitLab zu öffnen.
+                                    li Bearbeiten Sie ihre Datei.
+                                    li Hier sehen Sie die Standardwerde für Soziale Netzwerke und persönliche Webseiten eines Teilnehmers sowie den Standardavatar. Es wird empfohlen, diese Werte nicht zu ändern, aber Sie können weitere Soziale Netzwerke hinzufügen.
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/default_settings.png", class="img-fluid", style="border: 1px solid gray;")
+                                    li Diese Schalter kontrollieren, welche Teile der gitlab-Seite angezeigt werden sollen. Wenn Sie also beispielsweise nur eine einzige Seite haben, benötigen Sie kein Menü und können den Wert für 'menu' auf OFF stellen.
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/switches.png", class="img-fluid", style="border: 1px solid gray;")
+                                    li Hier ändern Sie das Projektlogo. Das Logo wird am oberen Rand der Seite mittig angezeigt. Wenn der Schalter für 'project logo' auf OFF steht, wird es nicht angezeigt.
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/pr_logo.png", class="img-fluid", style="border: 1px solid gray;")
+                                    li Hier ändern Sie das Menü Ihrer gitlab-Seite. Ein Menü kann entweder auf einen Unterordner/ template verweisen oder aber auf einen externen Link, z.B. eine Demo. Sie können Menüeinträge hinzufügen oder entfernen. Das Menü wird mit dem Schalter 'OFF' verborgen. Vergessen Sie nicht den Schrägstrich am Ende eines Menülinks, wenn dieser auf einen Ordner zeigt.
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/menu.png", class="img-fluid", style="border: 1px solid gray;")
+                                    li Hier ändern Sie die Teilnehmenden. Sie können die Standardwerte für Soziale Netzwerke (diese beinhalten die HFT-Kanäle) oder Ihr eigenen Profile verwenden. Sie können auf Ihre persönliche Webseite verlinken. Sie können soziale Netzwerke hinzufügen oder entfernen. Sie können auch einen persönlichen Avatar oder den Standard-Avatar (DEFAULT.avatar) verwenden.
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/partic.png", class="img-fluid", style="border: 1px solid gray;")
+                                    li Hier ist ein Beispiel mit zwei Teilnehmenden:
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/partic2.png", class="img-fluid", style="border: 1px solid gray;")
+                                    li Hier ändern Sie die Fußzeilenlogos z.B. zu denen von Projektpartnern. Wenn Sie das Logo nicht mit einer externen Webseite verlinken wollen, verwenden Sie EMPTY_LINK als Wert für href. Der Titel title wird bei Mouse-Hover über dem Logo erscheinen.
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/f_logos.png", class="img-fluid", style="border: 1px solid gray;")
+                                    li Klicken Sie anschließend auf <i>Commit changes</i>, um die Änderungen zu speichern.
+                                    img(src="https://transfer.hft-stuttgart.de/img/help/edit_settings_generic.png", class="img-fluid", style="border: 1px solid gray;")
 
                 hr
                 div(class="mx-4")