My home page has been restructured a redesigned. One interesting new feature is a blurred version of the teaser image as background.
What is new?
- Materializecss: The page does not use bootstrap and darkstrap anymore, but is now built upon materializecss with a custom dark theme.
- Blurred teaser image as page background: The page’s header now features a blurred version of the teaser image. Since CSS3 blurring is quite expensive concerning performance, the blurred image is generated using an automated preprocessing step.
- Restructured site: The landing site of the home page is now the blog. Google analytics has shown that many users were confused by the accordion on the landing page.
- Improved post layout: The layout of the post page has been refined. Here is a before-after comparison.
How does the blurring work?
As part of the build process, a script creates a small blurred version of all teaser images. It uses image-magick’s
convert to create the image with the following command:
Using the following style information to the body element will set the blurred image as background for each page.