Switched to the Astra theme for WordPress

During the years I have maintained this weblog I’ve used quite a few different themes for the appearance of WordPress, the software which powers this weblog. I didn’t like the default WordPress theme, so I used K2 instead. Eventually K2 was no longer maintained, meaning that it became incompatible with newer WordPress versions. Then I found Tarski, which also became unmaintained after several years.

At that point a switched back to the default themes of WordPress, which had gotten better by then. Even with the default themes I had to switch to newer versions over time, because more recent default themes make better use of new features in WordPress. I made minor modifications to those with the child theme functionality to suit my taste. However, I eventually became dissatisfied with them as well.

The current default theme, Twenty Nineteen, was the limit for me. First of all, the WordPress developers decided against giving users the option to add a sidebar, unlike past default themes. It may be true that the sidebar widgets are moved to the footer of the page if you visit this weblog on a mobile device with a small screen, but it’s still useful to have if you’re using a larger screen. Currently the sidebar shows the search bar and categories on my weblog.

But what is far worse is the layout of Twenty Nineteen. On smaller screens there is no issue, but you will notice it when you view the theme on a large 23 inch monitor with a Full HD resolution of 1920 by 1080 pixels. My knowledge of CSS is still limited, but what I understand from the CSS code of the theme is that the maximum width of the content is always relative to the screen size. I believe the following code is responsible for this in the style.css file of the theme:

@media only screen and (min-width: 1168px) {
  .entry .entry-content .wp-block-image .aligncenter {
    max-width: calc(6 * (100vw / 12) - 28px);
  }
}

As you can see the entry classes have a relative width calculated from the width of the viewport for screens which are at least 1168 pixels wide. This is a bad thing because this leads to long line length on large screens, which makes text uncomfortable to read. Unless I’m missing something in the code, it would also mean the line length would be even more extreme if you would view Twenty Nineteen on a larger monitor with a 4K resolution. Another gripe I have with the theme is that it uses system fonts for the content:

.entry .entry-content .wp-block-verse {
  font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.8;
}

This means that Twenty Nineteen first looks for common fonts which are shipped on Mac OS, iOS and Windows operating systems. If those are not present, it will fall back to the default serif font used on the system. On my Fedora Linux computer, that’s Liberation Serif. So in other words: the theme looks different based on what operating system is used to visit the weblog. To me, that’s undesirable. Also, note the rather large font size of 22 pixels in the CSS code, which is way to large for my taste. Do note that the px length in CSS doesn’t denote absolute pixel count, but is a relative length which depends on the pixel density of the screen. Because next to the 23 inch monitor with 1920 by 1080 pixels, you also have phones like the Samsung Galaxy S10 with a 6,4 inch screen and 3040 by 1440 pixels.

So in summary, with the Twenty Nineteen theme and a Full HD resolution on a 23 inch monitor, paragraphs of weblog entries are 932 pixels wide and use a 22 pixel font (this time in the absolute sense). Let’s compare this with the website of a popular Dutch newspaper, de Volkskrant. If I view that website with the same monitor, paragraphs have a maximum width of 590 pixels and the font CapitoliumNews at 20 pixels is used instead of system fonts. This causes the line length to be much shorter, what I consider normal and convenient. That website looks good and reads comfortably.

I could have spent a lot of time on making a child theme for Twenty Nineteen to tailor it to my needs, but I decided to switch to the Astra theme instead. This theme is quite popular, so I don’t expect it to become unmaintained any time soon. While it has some paid options, the basic functionality which you get for free is adequate for my purposes. I really like it for its sensible defaults, its sidebar option and the ease of customization. It offers many options which don’t require delving into CSS and making a child theme. Paragraphs of weblog entries appear to have a maximum width of 600 pixels by default, which I like.

I changed the following options in Astra’s customizer to change the theme to my liking:

  • Layout → Header → Site Identity = Enable “ Display Site Tagline”.
  • Layout → Blog → Blog / Archive = Set “Blog Post Content” to “Full Content” and set “Blog Meta” to “Publish Date, Category and Comments”.
  • Layout → Blog → Single Post = Set “Single Post Meta” to “Publish Date, Category and Comments”.
  • Typography → Base typography = Set “Font Family” to “Source Serif Pro” and “Font Size” to “18”.

Especially the option to select a different font is convenient. By default Astra also uses system fonts because they load faster. It also allows you to use all fonts available from Google Fonts, which gives you a massive amount of choice. Of these, I like the Source Serif Pro font. Unlike the system fonts option, this font will be used for the theme regardless of the operating system of the visitor. This guarantees a uniform appearance for my weblog.

Finally, I also added some custom CSS to modify the table layout. The default layout for tables in Twenty Nineteen is very unappealing to me, unfortunately Astra doesn’t do better in that regard. I borrowed this CSS code from the Lovecraft theme:

/* Tables */

table {
	border: 0;
	border-left: 0;
	border-right: 0;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	font-size: 1em;
	margin: 2.5em 0;
	width: 100%;
}

th, td {
	border-left: 0;
	border-right: 0;
	padding: 2%;
	margin: 0;
	overflow: visible;
	line-height: 100%;
	border-bottom: 1px solid #DDD;
}

caption {
	color: #111;
	text-align: center;
	padding: 2%;
}

thead {
	vertical-align: bottom;
	white-space: nowrap;
}

th {
	font-weight: bold;
}

table tbody > tr:nth-child(odd) > td { background: #f9f9f9; }

Leave a Comment

Your email address will not be published. Required fields are marked *