Projekt: Wiki-Makeover

[Matthias Scharwies]

Servus!

Seit kurzem ist dieser Thread archiviert, deshalb hier der Zwischenstand:

Hilfe:Farbtabelle

Anstelle der kryptischen Namen kühles, lichtes und helles blau haben wir jetzt custom properties, die eine Kombination aus Farbname und Helligkeitsstufe sind. Die können wir so durchgehend im CSS verwenden.^[1]

Ich habe das neue CSS im Testwiki in Mediawiki:common.css draufgesetzt. (Das gibt beim Seitenwechsel einen netten FOUC!)

Probiert's im Firefox mal mit F12 und Mond-Symbol aus:

Hilfe:MediaWiki/Vorlagen

Mir sind so einige Fehler aufgefallen:

1. Link-Animation zu auffällig?
2. externe Links kennzeichnen, Links auf Blog und Forum aber nicht
3. .locale-anchor wird durch :hover-Animation überschrieben ( schaut mal ins "echte" Wiki: https://wiki.selfhtml.org/wiki/CSS Braucht's die Links nach den Überschriften überhaupt??? - Martin sagt nein) - Die SVG-Hintergrundgrafiken sind nicht hell-dunkel-responsiv, da schreib ich morgen was zu! (Alternativen: inline-SVG geht in Mediawiki nicht; img geht, muss man aber irgendwo hosten)
4. Beispiel-Vorlage hat gelben Hintergrund, aber auch BeispielText, der dann viel zu hell aussieht. (Evtl. entwerfen wir/man ein CSS für die ganzen Syntax-Highlighting-spans)
5. Tabellen mit class .wikitable haben festen weißen Hintergrund
6. SVG im Darkmode (schaut Euch mal https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform/Drehen,_Kreisen_und_Pendeln#rotate3d() im Dark Mode an!)

etc, pp

Herzliche Grüße

Matthias Scharwies

PS: Ich bin mal für ne Woche weg, lese aber mit!

---

1. Der IE verwendet die Browsereinstellungen. Nur Bei Logos und beim ersten Erscheinen von sicherheitskritischen Hinweisen gibt es noch HEX-Werte. ↩︎

[Der Martin]

Hallo Matthias,

ich war mal so frei, deinen Beitrag zu bereinigen (die Formatierungen z.B. bei der Aufzählung sind ein bisschen vor die Hunde gegangen).

1. Link-Animation zu auffällig?

Die Frage ist, ob man sie überhaupt möchte. Das ist weitgehend eine Frage der persönlichen Präferenzen, ich wüsste aber nicht, wie ich etwas im Sinne von prefers-reduced-motion auf meinem Linux-Desktop einstellen sollte. Im Forum hätte ich noch mein User-Stylesheet, mit dem ich die Animationen wegbügeln kann, im Wiki nicht (höchstens über die Browser-Extension Stylem).

3. .locale-anchor wird durch :hover-Animation überschrieben ( schau mal ins "echte" Wiki: https://wiki.selfhtml.org/wiki/CSS Braucht's die Links nach den Überschriften überhaupt??? - Martin sagt nein)

Das stimmt nicht ganz: Er sagt eher: Nein, aber stattdessen könnte die Überschrift ein Link auf sich selbst sein, damit man den bookmarken kann.
Alternativ: Das Kettenglied-Symbol nur beim Hovern auf die Überschrift einblenden. Wird bei vielen Webauftritten auch so gemacht, hab ich schon oft gesehen.

5. Tabellen mit class .wikitable haben festen weißen Hintergrund

Wofür ist das dann gedacht? Denn das kollidiert ja dann sehr stark mit dem Dark Mode.

Gute Erholung, soweit möglich
 Martin

[Matthias Scharwies]

Servus!

Hallo Matthias,

ich war mal so frei, deinen Beitrag zu bereinigen (die Formatierungen z.B. bei der Aufzählung sind ein bisschen vor die Hunde gegangen).

Danke!

1. Link-Animation zu auffällig?

Die Frage ist, ob man sie überhaupt möchte. Das ist weitgehend eine Frage der persönlichen Präferenzen, ich wüsste aber nicht, wie ich etwas im Sinne von prefers-reduced-motion auf meinem Linux-Desktop einstellen sollte. Im Forum hätte ich noch mein User-Stylesheet, mit dem ich die Animationen wegbügeln kann, im Wiki nicht (höchstens über die Browser-Extension Stylem).

Kurz auf SO gesucht, müsste aber auch einstellbar sein:^[1]

3. .locale-anchor wird durch :hover-Animation überschrieben ( schau mal ins "echte" Wiki: https://wiki.selfhtml.org/wiki/CSS Braucht's die Links nach den Überschriften überhaupt??? - Martin sagt nein)

Das stimmt nicht ganz: Er sagt eher: Nein, aber stattdessen könnte die Überschrift ein Link auf sich selbst sein, damit man den bookmarken kann.
Alternativ: Das Kettenglied-Symbol nur beim Hovern auf die Überschrift einblenden. Wird bei vielen Webauftritten auch so gemacht, hab ich schon oft gesehen.

Das hatte @RolfB ja angemerkt, das auf sich selbst gerichtete Links (,die zudem nicht als Links gekennzeichnet sind,) nicht so optimal sind. Ich fixe die SVG-Grafiken noch.

4. Beispiel-Vorlage hat gelben Hintergrund, aber auch BeispielText, der dann viel zu hell aussieht. (Evtl. entwerfen wir/man ein CSS für die ganzen Syntax-Highlighting-spans)

Wenn man nicht dem gesamten .example einen gelben Hintergrund gibt, um Kommentare, die zum Beispiel gehören, im Dark Mode darzustellen, ist der gelbe Hintergrund unschön vom gelben Rand getrennt.

Habe grad gesucht: Unser Syntax-Highlighting ist Bestandteil der MediaWiki-Software ^[2] und es gibt sogar schon einen Dark Mode: Dark theme for mediawiki SyntaxHighlight_GeSHi

[EDIT] ist eingearbeitet! [[/EDIT]]

5. Tabellen mit class .wikitable haben festen weißen Hintergrund

Wofür ist das dann gedacht? Denn das kollidiert ja dann sehr stark mit dem Dark Mode.

.wikitable ist eben schon alt. Und die Empfehlung, zu einer Textfarbe immer eine Hintergrundfarbe festzulegen, gilt ja immer noch. Ist mittlerweile gefixt.

Deshalb bin ich jetzt ins Test-Wiki gezogen, um mir möglichst viele Seiten anzuschauen und zu gucken, wo's noch hakt.

Gute Erholung, soweit möglich
 Martin

Vielen Dank!

Herzliche Grüße

Matthias Scharwies

---

1. TLDR: Go to system settings, move the "Animation speed" slider to another value that is not "Instant" and apply. Return to old value if preferred. ↩︎

2. https://de.wikipedia.org/wiki/Hilfe:Syntaxhighlight ↩︎

[Matthias Scharwies]

Servus Griaß euch!

wiki-test.selfhtml.org/wiki/SELFHTML

Probiert's im Firefox mal mit F12 und Mond-Symbol aus:

Mir sind so einige Fehler aufgefallen:

1. Link-Animation zu auffällig?

Ich hab jetzt ein prefers-reduced-motion{ } eingebaut.

2. externe Links kennzeichnen, Links auf Blog und Forum aber nicht

• CSS#Weblinks
• SELFHTML:Verein

Ist mittlerweile erledigt, habe auch Links auf pdf und mailto in Arbeit. Die überschreiben sich aber dauernd. Das muss ich zuhause auf dem großen Bildschirm sortieren.

4. Beispiel-Vorlage hat gelben Hintergrund, aber auch BeispielText, der dann viel zu hell aussieht. (Evtl. entwerfen wir/man ein CSS für die ganzen Syntax-Highlighting-spans)

Ist jetzt geändert:

Ich wollte eigentlich den {{BeispielText|...}} auch ganz dunkel haben, das sieht aber bei mehr Kombinationen komisch aus. Mittlerweile habe ich den Beispieltext oft als normalen Textabsatz druntergesetzt.

Das Syntax-Highlighting für den Dark Mode hat 10min gedauert. Leider ist es im Light Mode nicht konsistent:

Neuere Eigenschaften wie Border-radius werden getrennt, warum auch immer?

5. Tabellen mit class .wikitable haben festen weißen Hintergrund

Das ist mittlerweile auch gelöst: Tabellen#Auszeichnung_von_Tabellen_in_Wiki-Syntax

6. SVG im Darkmode (schaut Euch mal https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform/Drehen,_Kreisen_und_Pendeln#rotate3d() im Dark Mode an!)

Manche Seiten find ich gar nicht schlecht:

Was mir noch auffällt:

1. Sidebar-Links verschwinden bei :hover;
2. kbd ist hellgrau auf hellgrau
3. …

Und Euch? Wo hakt noch etwas?

Ich nehme die fehlende Rückmeldung mal als großes Kompliment, dass alles passt! („Net geschimpft ist Lob genug!“)

Herzliche Grüße

Matthias Scharwies

BTW: Die MDN hat seit gestern auch einen Dark Mode!

[Tabellenkalk]

Hallo,

Und Euch? Wo hakt noch etwas?

oben rechts wird bei mir der Link „Versionsgeschichte“ teilweise durch das Suchfeld überdeckt.

Links in der Navigation wechselt der Link auf die letzten Änderungen bei Hover auf zweizeilig und reagiert auch nur bei Hover über das Wort „Letzte“.

Der animierte Hintergrund ist jeweils rechts und links sehr knapp und könnte anderthalb Pixel Padding vertragen…

Gruß
Kalk

[Matthias Scharwies]

Servus!

Und Euch? Wo hakt noch etwas?

oben rechts wird bei mir der Link „Versionsgeschichte“ teilweise durch das Suchfeld überdeckt.

Ja, ich hatte eine statische Übungskopie erstellt: bplaced.net/makeover/

Die Buttons sind noch ohne Funktion. Mediawiki baut die Navi auf, das nachgelagerte JS versteckt sie und ein Klick auf die Buttons öffnet ein Popup. (Das wollte ich schon vor vier Wochen fertig haben. Für die Sidebar gab es früher eine Extension, die die einzlenen Bereiche collapsible machte.

Links in der Navigation wechselt der Link auf die letzten Änderungen bei Hover auf zweizeilig und reagiert auch nur bei Hover über das Wort „Letzte“.

Ja, da muss ich noch rüber. Arbeite zur Zeit mit dem Tablet. Das font-weight:bold zerschießt das Layout.

Der animierte Hintergrund ist jeweils rechts und links sehr knapp und könnte anderthalb Pixel Padding vertragen…

Danke wird eingebaut! (Anderthalb Pixel erinnert mich an @HaHaWe / @BerlinerTourGuide 's Diskussion, wie viel denn 1/16em nun wirklich ist!)

Herzliche Grüße und vielen Dank!

Matthias Scharwies