Redesign Version #2


Finally, I redesigned this website during the Christmas and 2023 New Year break.

Even though I learned and wrote about block themes, I didn’t use the block theme in my website. I’m a complete hypocrite, I suppose. Not that I didn’t think it through. Indeed, I had been thinking of doing it for a while, but on the pretext of other urgent projects, it has fallen behind. One of the excuses was that I really liked two plugins I use. Both plugins seem to work on Block themes too, they are not yet completely embedded in Block themes.

Previous Layout

The previous design (see below) was based on a custom “classic” theme with a CSS grid-based single column layout. Though, it seemed a bit outdated, but I had spent so much time learning and creating this theme, it was more of my love work, likely.

Previous layout

New Layout

The new layout is based on one of my earlier demonstration projects, TT2 Gopher blocks, prepared for the CSS-Tricks articles. It’s theme.json file is updated following the recent Twenty Twenty-Three default theme.

New Layout

Front page

Its front page displays lists of posts inspired by the simplicity of Noren Ander’s Beamount. It’s bottom section contains a wide blockquote block.

Single posts and pages

Its single post or page layout is distraction free one column layout meant for text and images. All the template files, except home (front page) are the same from my earlier TT2 Gopher (branch-1) project.

Style variations

Currently, it has only three style variations: Dark (default), and two variations of White. However, I plan to add more variations with different fonts and color combinations.

Patterns

Currently, I have only a few patterns. However, its intended to be a pattern heavy theme.

Things to do

The theme is my work-in-progress project, with the following to-do list:

  • Restyling contents. I intended to organize the content of this site by merging the articles of my four other similar sites. Because of the heavy use of custom styles in my current classic theme, the block theme change makes it a little harder to display content properly.
  • Add more styles variations: I plan to add several more style variations following TT3 theme vibe.
  • Add more patterns: I plan to add more patterns and convert some page or post sections into patterns.
  • Top Navigation: I plan to add two sub-menu tabs The Desk and The Wall in a new More…, an inspiration from Sara Soueidan’s website.

Acknowledgements

Inspiration to write this post came from Chris’s redesign and Tania Racia’s Redesign post series.

Resources