README

A clean and elegant multi-purpose theme for Automad that comes with a light and dark flavor. It provides several options to display your content. Please read below more about the main concepts of this theme.

Templates
Colors
Writing Content
Overriding Theme Styles
Pagelist Configuration
- Related Pages
Title, Navigation, Filtering and Sorting
Transparent Navbars
Logo and Brand
Labels
Date Formats
Social Media Cards
Header and Footer Items
Slideshows

Templates

The following templates are included in this theme.

Colors

While there is a light and a dark theme serving as presets, all the colors used in the templates are fully customizable.

Writing Content

There are two block areas — the teaser and the main area.

Overriding Theme Styles

Apart from colors, also other styles can be overriden using CSS custom properties. Those overrides can be easily defined by adding a <style> tag to the Items Header variable of either a page or in the Shared Data and Settings section of the dashboard. The following example demonstrates how to change the font weight of the h1 and h2 headlines:

<style>
    :root {
        --h1-font-weight: 500;
        --h2-font-weight: 480;
    }
</style>

It is also possible to change the font family for headings by embedding some Google fonts as well:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style>
    :root {
        --heading-font-family: 'Lobster', cursive;
    }
</style>

There are many other custom properties available. A full list can be found here.

Pagelist Configuration

This theme offers multiple options and two templates — Blog and Portfolio — to create pagelists. The following options can be used to control the content of such a pagelist. Pagelist templates can also be used to create a search results page.

Related pages are pages having one or more tags in common with the current page. By default they show up at the bottom below the page content. They can be disabled by checking the Hide Related Pages checkbox.

Title, Navigation, Filtering and Sorting

The following checkboxes can be used to control the visibility of pages and elements.

Transparent Navbars

By default the navbar inherits its background color from the page. In order to have a nice stretched teaser image that also serves as background for your navbar, you can toggle the Make Transparent Navbar checkbox to make the navbar fully transparent on load.

Logo and Brand

To set the brand name, a navbar logo and favicons, use the following options.

Labels

All labels, button text, placeholders and notification texts can be overriden or translated as needed. The following variables are therefore available.

Date Formats

This theme uses two different date formats. One for blog posts and another one for project pages. It is possible to override those formats to change the way a date appears on a page. Both, ICU and date() formats are supported.

Note that the locale option can be only used together with the ICU syntax. Therefore whenever you want your dates to be localized, you must use the ICU syntax.

Social Media Cards

This theme automatically generates preview cards when a page is linked in Twitter, Facebook or other social networks. The following options can be used to control the content of those cards.

Header and Footer Items

Sometimes it is required to add custom Javascript or CSS to one or more pages. This could be for example the case if you would want to add a Google Analytics tracking snippet to your site. Therefore this theme provides two variables for that purpose. The Items Header variable lets you add all kind of header items right before the closing </head> tag. To add any HTML or JS right before the closing </body> tag you can use the Items Footer variable.

Slideshows

As described before, it is either possible to used the block editor or the traditional Markdown editor to create content. Since the markdown editor is not able to create content like a slideshow, there are two separate variables available for project pages and posts to insert a slideshow right after the teaser when using Markdown.

automad / standard-v1

Maintainers

Details