Marc war hier: Marktplatz Heinsberg

Marc war hier: Millicher Höhe

Uhr-Icon mit Uhrzeit

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:

16:00 Uhr

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

18:06 Uhr

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>

Den „Dark Mode“ mit CSS abfragen

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.

Marc war hier:

Viel wird dieses Jahr nicht mehr passieren, oder zumindest nicht mehr so viel, dass es in den Top 9 für 2018 landen wird. Dieses Jahr habt Ihr nur zwei Essensfotos extrem geliket (und beide wurden nach einem Arbeitsamt-Besuch geknipst). Dafür hat es diesmal ein richtiges echtes Selfie in die Liste gebracht, WTF! 2018 war auf jeden Fall ein verrücktes Jahr, viel Auf und Ab und Hin und Her. 2019 kann gerne kommen! Bis nächstes Jahr, Internetfreunde! 🥂📸

Marc war hier: Egmont

Der alljährliche Weihnachtsbesuch aus Minneapolis läuft eigentlich ganz traditionell so ab: Currywurst, Star Wars im Kino und Kwak im Egmont. Star Wars gab‘s zwar dieses Jahr nicht, dafür viel Redebedarf bei einem guten Glas belgischen Bieres. In einem Jahr passiert doch schon so einiges … 🍻🎄

Marc war hier: Hanswurst

Marc war hier: El Pimiento

Weihnachtsessen mit der Familie. 🥘🍷

Marc war hier: Jumbo

Letzte Weihnachtseinkäufe … 🛒

Marc war hier: Aquis Plaza