updated image layout in articles

This commit is contained in:
Samuel Philipp 2023-01-13 16:24:28 +01:00
parent a7fb132f02
commit 170fc28d15
2 changed files with 34 additions and 29 deletions

View file

@ -94,28 +94,28 @@ dein Matrix-Account erstellt. Es kann sein, dass du während des Erstellens dein
das kann je nach Server-Auslastung ein bisschen dauern.
<div class="row">
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/1start.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/1start.png">
<span>Zuerst die App starten.</span>
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/1start.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/1start.png">
<small class="flex-grow-1 p-2 bg-primary text-black">Zuerst die App starten.</small>
</a>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/2anbieter.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/2anbieter.png">
<span>„Andere“ auswählen um einen eigenen Anbieter zu verwenden.</span>
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/2anbieter.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/2anbieter.png">
<small class="flex-grow-1 p-2 bg-primary text-black">„Andere“ auswählen um einen eigenen Anbieter zu verwenden.</small>
</a>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/3server-name.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/3server-name.png">
<span>Die Server-Adresse des Anbieters eingeben und „Registrieren“ oder „Anmelden“ auswählen.</span>
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/3server-name.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/3server-name.png">
<small class="flex-grow-1 p-2 bg-primary text-black">Die Server-Adresse des Anbieters eingeben und „Registrieren“ oder „Anmelden“ auswählen.</small>
</a>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/4anmelden.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/4anmelden.png">
<span>Benutzername und Passwort eingeben.</span>
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/4anmelden.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/4anmelden.png">
<small class="flex-grow-1 p-2 bg-primary text-black">Benutzername und Passwort eingeben.</small>
</a>
</div>
</div>
@ -132,24 +132,28 @@ und tippst anschließend auf „Erstellen“. Jetzt heißt es ein bisschen warte
angenommen hat.
<div class="row">
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/6home.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/6home.png">
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/6home.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/6home.png">
<small class="flex-grow-1 p-2 bg-primary text-black">Einen neuen Chat mit dem grünen Button starten.</small>
</a>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/7neu.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/7neu.png">
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/7neu.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/7neu.png">
<small class="flex-grow-1 p-2 bg-primary text-black">„Mit Matrix-ID hinzufügen“ auswählen.</small>
</a>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/8matrix-id.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/8matrix-id.png">
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/8matrix-id.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/8matrix-id.png">
<small class="flex-grow-1 p-2 bg-primary text-black">Matrix-ID eingeben und Chat erstellen.</small>
</a>
</div>
<div class="col-lg-3 col-sm-6 col-12">
<a href="/img/matrix/setup/part-1/9chat.png">
<img class="d-block w-100" src="/img/matrix/setup/part-1/9chat.png">
<div class="col-lg-3 col-sm-6 col-12 my-3">
<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/9chat.png">
<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/9chat.png">
<small class="flex-grow-1 p-2 bg-primary text-black">Chatten.</small>
</a>
</div>
</div>

View file

@ -268,6 +268,7 @@ pre {
img {
display: block;
margin: 1rem auto;
max-width: 100%;
}
}