Cards im Wiki

[Matthias Scharwies]

Servus!

Hallo Matthias,

so, die Unterstreichung ist drin und die "Wie fange ich an" Seite ist auf die Vorlage umgestellt.

Danke! Ich hab mir die Cards angeschaut und versucht die einzelnen Parameter nachzuvollziehen.

wenn ein Kindelement der Card die Klasse can-glow hat, wird dafür, sobald der Link aktiv wird (Fokus oder Hover), die Farbe Orange und der Box-Shadow gesetzt.

Dammich, das wollte ich aufgeschrieben haben.

Die Vorlage setzt can-glow für das Icon bzw. das Logo sowie für das Inhaltsbild

Das geht in etwa so:

.card:has(a:hover, a:focus) .can-glow {
   color:orange;
   box-shadow: ...;
}

Die orange Linkfarbe ist ja ein Relikt aus dem braunen Theme des Jahres 2010^[1]

Mir geht es drum:

Eine Card ist ein Link .

Dann erwarte ich auch eine Umrandung um eben diesen und nicht um die Bilder, die nur einen Teil der Card ausmachen.

So wie bei der zweiten Card "Der richtige Code-Editor". Das würde ich nächste Woche auch bei den anderen Cards so einführen - nur eben in blau!

.card a:hover, 
.card a:focus {
  color: blue;
  box-shadow: ...;
}

Die dritte Card für den Seiteninspektor wird bei :hover schwarz! Da hätte ich den gleichen blauen glow erwartet, auch bei Card 4-6, aber eben ohne, dass die Icons dann extra gekennzeichnet werden.

Ich kann für den Titeltext bei aktivem Link auch noch eine Unterstreichung setzen.

Ja, wobei man eigentlich die Unterstreichung im Normaltext haben müsste. Das fände ich aber nicht so schön.

Ich habe noch einen Parameter vollbild= hinzugefügt. Der wird alternativ zu "bild" verwendet und führt dazu, dass der Titelbereich auf position:absolute gesetzt wird, so dass er über dem Bild schwebt. Die Card "der richtige Code-Editor" gewinnt dadurch. Und ich habe das Idee-Bild für "Vom der Idee zum Projekt" etwas niedriger gemacht, sonst war da zu viel Abstand drüber. Hätte ich auch lassen können, als "vollbild" wäre das viel einfacher gewesen. Aber das habe ich erst danach gebaut 🙄.

Sollte man, jetzt - bevor wir die div-Cards umbauen, die beiden Parameter zusammenfassen?

vollbild ist ja gut; Beim Erstellen des Bilds schaut man, wo sich der Titel befindet, für den Einsatz des normalen bild könnte man den Inhalt-Parameter nehmen.

Was mir jetzt noch fehlt, ist eine Idee, wie ich ein Bild bündig an die Unterkante der Card setze, wenn Nachbarcards die Höhe der Card-Zeile erhöhen. Das müsste man bei "Bilder im Internet" tun. Aber wie man das korrekt in den Rest des Card-Layouts integriert, das ist mir noch unklar. Eigentlich müsste der Card-Inhalt mit display:flex erstellt werden und der Inhaltsbereich mit flex:1 0 auto erstellt werden. Aber das hat andere Störeffekte, Flexitems haben ihren eigenen Blockformatierungskontext und das gefloatete Icon kann dann nicht mehr aus dem Titel hinausragen. Vermutlich gibt's da keine Universallösung 😟. Bild als Hintergrundbild erstellen und der Card eine Mindesthöhe geben ist auch nicht drin, weil die Bildhöhe ja mit der Card-Breite wechseln kann. Sollte man die Cards zu Containern machen?

Evtl. einfach die Konvention, dass alle SVG-Icons der Kategorie:Icon das gleiche Seitenverhälntis haben sollten? Dann wäre das - besonders beim Vollbild-Parameter - ohne magic numbers gelöst.

  {{Card|
    link...|                <<- Pflicht, Wikiseite auf die die Card verweist
    titel=...|              <<- Sollte genutzt werden, kann bei Vollbild-Card entfallen
    titelfarbe=...|         <<- Optional, Farbe für Titel
    hintergrund=...|        <<- background-Eigenschaft für Card
    farbe=...|              <<- color-Eigenschaft für Card
    icon=...|logo=...|      <<- Optional, nur eins von beiden verwenden
    neu=jjjjmmtt|           <<- Optional, jjjjmmtt=Tag an dem die Card hinzugefügt wurde
    inhalt=...|             <<- Wikitext
    bild=...|               <<- Wird unter Inhalt in Card-Breite angezeigt
    vollbild=...|           <<- Für Bilder, die die Card ganz ausfüllen. Inhalt und Teaser NICHT verwenden! 
                                Titel, Icon und Logo können verwendet werden und werden dem Bild überlagert.
    teaser=...|             <<- Nur Text, wird unter Inhalt und Bild angezeigt
    zeilen=...|spalten=...  <<- Optional, für Cards die größer als ein Rasterfeld sein sollen
  }}

titel find ich sehr wichtig, ich weiß nicht, ob man den Text durch ein SVG ersetzen könnte. Gut und flexibel, wenn es keine Pflicht ist

titelfarbe sollte wegfallen, Links sind immer blau!

iconund logo sind Synonyme, wäre es nicht ok, wenn man das unter Icon zusammenfasst?

inhalt und teaser sind imho Synonyme, da könnte man nur den Parameter inhalt verwenden.

Dann hätte man die Parameter titel, icon, vollbild und inhalt - damit könnte man alles abbilden.

Herzliche Grüße

Matthias Scharwies

---

1. Oranger Text auf weißem Grund? SELF-Blog 01.10.2022 ↩︎