Differences between Xeo and Simple Blog

by Ricky de Laveaga

2 min read

🏷️ Design Xeo

Wondering how Xeo differs from Simple Blog? This post is for you!

To recap How to install Xeo:

Xeo is Ricky de Laveaga’s variant of Simple Blog by Óscar Otero, a clean and minimal blog theme for Lume with support for tags and authors. Simple Blog and Xeo both provide Atom and JSON feeds for subscribers.

Where do they diverge?

Typography

  • Xeo uses Lume’s Google Fonts plugin in _config.ts to set display (for larger sized headings and titles) and text (normal body and smaller sizes) typefaces from the Google Font Library.

  • By default, Xeo uses Bebas Neue for display and Lexend for text. You can customize this when you set up your copy of Xeo.

  • To get the correct URL for your display and text font choices, I recommend selecting the “Get font” button at the top right on the specimen page, which will take you the selection page where you can select the “Share” button and then the “Copy share page link” button, which shows a copy icon that looks like one rectangle stacked on top of another rectangle. The share button should be underneath the text “1 font family selected.” Use the “Remove all” button to clear each choice before selecting another, so the share page links stay separate.

  • If you are looking for more options, Poppins is an alternative to Lexend we considered for Xeo. We chose Lexend over Poppins because variable fonts have performance benefits since they combine many different variations of a typeface into a single file, reducing requests. You can browse variable Google fonts or learn about Pairing and Combining Typefaces for inspiration and wisdom.

Tip

Lume’s Google Fonts plugin needs the share page link, or share URL, not the embed code.

Design

  • Spacing: Xeo adjusts spacing around various elements, particularly page headers and the search box, which is relocated to the bottom of pages to reduce layout shift when search results appear.

  • Color: Xeo has a foundation that will lead to eventual support of Rainbow Mode powered by Chromagen, like Xeo’s predecessor eleventeen. Chromagen generated Xeo’s current color scheme, but has not yet been wired up to Xeo to the degree it has been integrated into eleventeen.