Pardon my dust 2 – redesigning christianheilmann.com

OK, the shift from Wordpress and Godaddy is happening. I managed to convert most of the old blog to static pages and you can see the result already at the old domain Wait-till-i.com.

It's a highly responsive and fully static site now, build with lots of dirty PHP conversion scripts and Jekyll. I did use GitHub pages at first, but the build took 10 minutes each time, and that's not the idea of Github. You can see what the design looks like and how it behaves in the following screencast, click to see it on YouTube:

Here's what's done so far:

• Fully written by hand without any AI
• Hiding and showing of sections using details and summary
• Grid layout for responsiveness
• dark/light version (light still in the making)
• Images and links should all be there, but many are dead 😢
• Highlight of current section and dimming of the others using has()

The most amazing thing so far is that the only thing I use JavaScript for is the search, which also means that it is almost instant.

Here are the main new-ish things I used to avoid having to use any script:

Accordion with animated details and summary using allow-keywords and name

If you give several detail elements the same name, they become an accordion as the others get automatically closed when you expand one.

<details name="weirdal">
    <summary>One</summary>
    <p>Lorem ipsum dolor sit amet…</p>
</details>
<details name="weirdal">
    <summary>Two</summary>
    <p>Lorem ipsum dolor sit amet…</p>
</details>
<details name="weirdal">
    <summary>Three</summary>
    <p>Lorem ipsum dolor sit amet…</p>
</details>

And now we also have a way to "animate to auto" and other keywords using interpolate-size. Which means you can make the accordion open smoothly using the following:

:root {
    interpolate-size: allow-keywords;
}
details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.4s ease,
    content-visibility 0.4s allow-discrete;
}

details[open]::details-content {
    height: auto;
}

You can play with this on the accordion demo page:

Currently (November 2026) this works only in Chromium browsers, but it is progressively enhanced, as other browsers snap to the expanded stage.

I found this explained by Theodore Lefevre on LinkedIn

Card layout using grid and hero highlight using not(:hover)

The layout of the different sections on the homepage uses CSS grid and is pretty straight forward:

.deck {
    pointer-events: none;
}
.deck:hover .card:not(:hover),
.deck:focus-within .card:not(:focus-within){
    scale: 0.8;
    opacity: 0.3;
}
.card {
    pointer-events: auto;
    transition: scale 300ms, opacity 300ms;
}
.card:hover, .card:focus-within {
    background: skyblue;
    border-color: cornflowerblue;
}
.deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: 3rem;
}

Highlighting the current section is done using hover and focus-within (to support keyboard users). Making the other cards less prominent uses not(:hover), which in the past would have needed a class on the parent elenent or having to loop through the other cards.

.deck {
    pointer-events: none;
}
.deck:hover .card:not(:hover),
.deck:focus-within .card:not(:focus-within){
    scale: 0.8;
    opacity: 0.3;
}
.card {
    pointer-events: auto;
    transition: scale 300ms, opacity 300ms;
}
.card:hover, .card:focus-within {
    background: skyblue;
    border-color: cornflowerblue;
}
.deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: 3rem;
}

You can play with this on the cards demo page (make sure to resize the outer element):

I found this on CSS Tricks by Krzysztof Gonciarz.

What's next?

The other thing that's costing me a lot of time is cleaning up the markup of older posts. I'm writing a very messy PHP script to do that and I am almost done removing all the defunct embed codes from old Flash versions of YouTube and many other dead services.

I also moved to Jekyll to do all of this offline as building the page on GitHub Pages took 8 minutes at a time, which got me scarily close to the 10 minute timeout limit…

See you in part 3!