But I think it’s not too late to still write a little post about it.

The goal: make the blog look like the rest of lgk.io

The blog runs with WordPress and now with a new child theme of the preinstalled Twenty Twenty-One, I just called „Twenty Twenty-One LGK“. In the past I used a theme I totally created myself, it was called „Winegum“. It’s still available on GitHub (https://github.com/lgkonline/Winegum1), but I really don’t recommend to use it anymore. It’s very outdated not compatible with modern WordPress features and third-party plugins. It might also be better for security reasons to use a theme, which is activity maintained. That’s why I switched to Twenty Twenty-One.

I used the color customisation options of the theme to make it match better with my portfolio site. That was the first step to the current look of the blog. From there I created my child theme and replaced parts of the theme, most important part is the header.

By the way: my portfolio site and this blog are running on completely different technologies. The blog is a PHP-server-rendered WordPress site and my portfolio is a React Single-Page-Application. So my task was to bring the header of my React app to the WordPress theme and make it look as seamless as possible.

I’m pretty happy with the result. When you switch between „Blog“ and „Start“ for example, you are switching between two totally separated sites, hopefully without mentioning it. The blog uses the same colors and the same font now.

The new search bar

One thing was still missing on the new theme: a search bar. But hey, better late than never, right? It’s now there too!

This was actually a more difficult because I had to use some JavaScript here. I started coding the search bar on my portfolio and then brought it to the blog theme as a small React app only for the search bar. The search bar is just executing a simple WordPress search request (/?s=my+request). Right now, the request only shows results from my blog. It would be awesome, to also show results from my portfolio site. Maybe I will bring that in the future when I have time. ^^

With Photopea you can open, edit and save many different formats like .PSD, .AI, .XD and .sketch. Right in your browser, for free. So it might be perfect if Adobe’s subscription model is too expensive for you. With browsers like Chrome or Edge you can even install Photopea as a PWA on your desktop, so it will act like a native app. Then you even have direct access to files on your machine.

Because it’s free, you’ll see some ads on the side. If you want to remove it, you can spend a little money.

To have a dark mode is a more and more common thing. But it can be pretty tricky.

Lea Verou wrote an awesome article how you can handle this task with CSS and custom properties in a pretty nice way:

Dark mode in 5 minutes, with inverted lightness variables – Lea Verou

I already followed that guide for my latest web project.

Auf der Website bekommst du auch einen guten Eindruck, was sich geändert hat. Unter anderem neue Formen und neue Animationen.

Was ich am spannendsten finde: dynamische Farben.

Google hat in Android 12 ein Algorithmus integriert, der Farbtöne aus dem Wallpaper der Nutzer:innen extrahiert, die vom UI verwendet werden können. So bekommen die Apps eine persönlichere Note.

Ich habe kein Android-Gerät, deswegen konnte ich das Feature noch nicht selbst ausprobieren.

Umsetzung für Webseiten?

Bisher ist Material You hauptsächlich für Android vorgesehen, es wird aber eine Frage der Zeit sein, dass auch an Web gedacht wird. Webseiten haben keine direkte Möglichkeit, den Wallpaper vom Betriebssystem abzugreifen.

Möglicherweise wird Google für Chrome die Theme-Farben als CSS-Variablen liefern, sodass Webentwickler:innen diese einfach nutzen können. Andere Chromium-Browser (wie Edge) könnten diese API dann ebenfalls erhalten.

Übergangslösung

Ich habe ein wenig experimentiert und Farben aus dem Standard-Wallpaper aus macOS Monterey mit Hilfe von Adobe Color extrahiert.

Den Dark Mode habe ich ebenfalls berücksichtigt:

In nächsten Schritten könnte man mit JavaScript herausfinden, welches Betriebssystem verwendet wird und jeweils Farben der Standard-Wallpaper anwenden.

Oder man erlaubt, Benutzer:innen ein Bild zum Analysieren hochzuladen/auszuwählen. Das halte ich allerdings für einen nicht sehr eleganten Ansatz.

Before the update:

After the update:

I now use display: grid; to show the latest blog post link next to my introduction card. This way, I waste less space and the user can see more, the links to the featured apps are visible again on the first view. ^^

I also like the new blog post view, I now show the thumbnail image of the post in the background.

Of course the grid view is designed mobile-first. On mobile, the introduction card and the blog post will be just underneath each other.

Beim Noun Project geht es den Gründern darum, Informationen durch Symbole anstatt von Wörtern zu vermitteln.

Auf der Website hat jeder registrierte Nutzer die Möglichkeit eigene Icons hochzuladen und anderen zur Verfügung zu stellen.

Außerdem kann man selbst Icons runterladen und für eigene Projekte nutzen. Die meistens Icons stehen unter Creative Commons-Lizenz. Will man ein Icon für kommerzielle Zwecke nutzen, kann man diesen auch kaufen.

Zur Website von The Noun Project »

Dieses Board habe ich nun durch ein Menü ersetzt, welches man stets ganz oben auf jeder Seite findet.

Durch das Menü gelangst du zu LGK Start, LGK Design und LGK Blog. Über das LGK-Logo gelangst du zu Kontakt und Impressum.

Außerdem habe ich Links zu meiner deviantART-Seite und zu meinem Twitter-Account gesetzt.

Nur ne kurze Durchsage: Die Amazon-Website erstrahlt nun in einem modernerem Look.

Seht euch das neue Design an: amazon.de