Gestern waren Julia, Udo, Raffaela und ich beim so genannten Haldenzauber in Hückelhoven. Auf der 70 Meter hohen Millicher Halde gibt es dort noch bis zum 6. Januar einen Parcours aus Lichtinstallationen, kunstvollen Objekten, interaktiven Figuren und musik-synchronen Inszenierungen.

Weiterlesen …

Nachdem ich vor einigen Tagen schon von einem Icon-Font zu SVG-Icons gewechselt bin, um das Rendering ein wenig zu beschleunigen, habe ich mir heute morgen noch ein kleines Gimmick zurecht gebastelt.

Das Uhr-Icon gibt nun die Uhrzeit des Posts wieder. Vorher war es lediglich ein statisches Vier-Uhr-Icon:

Dank SVG Transforms lassen sich die Pfade für die Zeiger aber wunderbar drehen, so kann ich z.B. jetzt 18:06 Uhr darstellen:

Den Stundenzeiger rotiere ich dabei jeweils um 30° (360° / 12), den Minutenzeiger jeweils um 6° (360° / 60):

<svg version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
  <title>18:06 Uhr</title>
  <circle cx="6" cy="6" r="5.425" stroke="black" stroke-width="1.15" fill="none"/>
  <line x1="6" y1="6" x2="6" y2="4" stroke="black" stroke-linecap="round" stroke-width="1.35" transform="rotate(180 6 6)"/>
  <line x1="6" y1="6" x2="6" y2="2.5" stroke="black" stroke-linecap="round" stroke-width="1.35" transform="rotate(36 6 6)"/>
</svg>

Mein Blog präsentiert sich seit Kurzem im Dark Mode, wenn das System und der Browser das unterstützen. In der Safari Technology Preview für macOS Mojave ist das zum Beispiel bereits möglich:

• 

• 

Seit Jahren verwende ich bereits dunkle Themes für die Editoren meiner Wahl, darum mag ich auch einen systemweiten Dark Mode. Ich finde ihn viel angenehmer für die Augen, und längere Texte lassen sich so – gerade am Abend – viel besser lesen. Darum denke ich auch, dass jedes Blog ein dunkles Theme mit sich bringen sollte. Ich habe das hier kurzerhand mit CSS Custom Properties (oder einfacher gesagt: CSS-Variablen) gelöst, etwa so:

:root {
  --text: gray;
  --background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: white;
    --background: gray;
  }
}

Schon ziemlich lässig.

Entdeckt habe ich das übrigens ursprünglich in den Show Notes zu ATP #299 und dem anschließenden Forschen im CSS. Dort war zunächst das bereits seit dem IE9 in allen großen Browsern unterstützte @media (color-index: ...) im Einsatz, der technischen Basis von prefers-color-scheme.

Die Syntax ist allerdings deutlich kruder:

• @media (color-index: 48) ist das Pendant zu @media (prefers-color-scheme: dark), weil 48 der Keycode für 0, dem Hexidezimalwert von Schwarz ist.
• @media (color-index: 70) ist das Pendant zu @media (prefers-color-scheme: light), weil 70 der Keycode für F, dem Hexidezimalwert von Weiß ist.
• @media (color-index: 22) ist das Pendant zu @media (prefers-color-scheme: no-preference).

Völlig Banane.

Andy Clarke geht in seinem Artikel Redesigning your product and website for dark mode noch etwas mehr ins Detail und zeigt auch einige typografische Anpassungen für den Dark Mode auf.