Wiki: Cards auf Portalseiten

[Matthias Scharwies]

Servus!

Ich versuche mal den Stand der Diskussion zusammenzufassen - evt. wird ein Blog-Artikel draus:

Problem/ Ausgangslage

Wir haben auf den Portalseiten eine Vielzahl von Tutorials, die in 3 Spalten gelistet sind. Fettgedruckte Unterüberschriften gliedern zusammengehörendes - aber nicht alles lässt sich kategorisieren.

Auf der Seite Wie fange ich an? sollen Cards die wichtigsten Tutorials prominent hervorheben.

Allerdings haben die großen Cards mehrere Nachteile:

• Neben den Icons aus der FAQ und in den Kursen benötigen wir eine mehr oder weniger aufwendige zusätzliche Card-Grafik.
• Es wäre gut, wenn zusätzlich zur Card Unterseiten oder ein Teaser gelistet werden könnten.
• Irgendwie gehören die Texte nicht zu den Cards, bzw. wird die ganze Seite zu lang.

Lösung / aktueller Stand

SVG/Tutorials

Eine Card besteht aus einem div:

<div class="card">
[[SVG/Tutorials/Einstieg|'''Einstieg in SVG''']] 
[[Datei:SVG Logo.svg||alt=Logo-SVG|link=SVG/Tutorials/Einstieg]]
* [[SVG/Tutorials/Einstieg#Warum_SVG_nutzen.3F|Warum SVG nutzen?]]
* [[SVG/Tutorials/Einstieg/SVG_mit_CSS_stylen|SVG mit CSS stylen]]
* [[SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren|SVG mit CSS animieren]]
* [[SVG/Tutorials/Einstieg/barrierefreie_SVGs|barrierefreie SVGs]]

Step by step eigene SVGs erstellen
</div>

Dabei können wir aus den Kursen die Links zu den Unterseiten und das Icon wiederverwenden.

Ein Teaser-Text müssen wir uns überlegen, können ihn aber auch später hinzufügen.

Das CSS ist einfach:

.card a b {font-size: 1.15em;}
.card img {width: 80px; float: right;}
.card .teaser img {width: 100%}

Finetuning

Das Layout für die Karten braucht noch ein bisschen Feintuning, find ich,

Ja!

in "Standalone SVGs" ist z.B. eine große Lücke zwischen Überschrift und Rest.

Wie groß soll die Schriftgröße des Titels sein? Jetzt sind es 1.15em und fett - reicht das?

Mit dem gefloateten Bild oben rechts müssen wir schauen, wie groß das sein darf. Jetzt sind es 80px (vorher 120px). Ich würde es am Stammtisch morgen schrittweise hochdrehen. Bei gewissen Größen rutscht das Bild nach unten.

• Möglichkeit 1: Unter dieser Größe bleiben
• Möglichkeit 2: Das Icon im Markup nach oben setzen.

Lasst uns morgen drüber reden und dann abstimmen.

Cards mit anderem Hintergrund.

Problem 1: Im Dark Mode müssen dann die Farben „von Hand“ geändert werden.

Problem 2: Der Text geht im Augenblick bis an den Rand. Bei einem padding würde der verfügbare Platz für Text weniger.

Schaut mal hier, ob das trotzdem geht: HTML#Tutorials

Umsetzung

Die Icons im Test-Wiki sind weitgehend für den Dark Mode vorbereitet - im Prod-Wiki wären sie teilweise unsichtbar.

Nicht für alle Tutorials gibt es gute Icons, nicht alle Tutorials sind vorzeigbar. Da müsste man mal drüber reden.

Ich würde mich freuen, wenn morgen Abend wieder ein paar SELFER da wären.

Herzliche Grüße

Matthias Scharwies