Styles with CSS

This theme uses SCSS as a better CSS for preprocessing. You can add your own custom styles by creating assets/_custom.scss in your blog and putting your custom styling in that file.

In order to have Hugo use CSS styling for code blocks, you must configure the highlighting engine to generate CSS classes. You can inherit the theme properties by adding the following to your config.toml:

[markup]
  _merge = 'shallow'

Note that _merge = 'deep' would also work.

Colors

You may want to change the default theme colors. The easiest way to do this is by changing parameters in your config.toml file as documented in the color configuration section.

CSS Color Variables

These are controlled by the following CSS variables:

--color-text

The default color for text.

--color-background

Base background color.

--color-main-background

Backround color for posts and lists. This is the main content area.

--color-link

Default color for links.

--color-link-highlight

Color for a link that is being hovered over or clicked on.

Code Styling

Code is styled in a monochrome fashion with the exception of diff outputs which are colorized. You can see the code styling in assets/syntax.css. The code styling variables are:

--color-line-no

Color for line numbers in listings with line numbers.

--color-highlight

Color of highlighted code lines.

--color-background-diff-insert

Highlight color for diff insertions.

--color-background-diff-delete

Highlight color for diff deletions.

--code-bold-weight

Font weight for bolded keywords. Set at 650.

If you would like to use one of the traditional chroma styles you can generate CSS files for a given color scheme by running the chromastyles command from the top level directory as follows. In the example below we are using the “borland” theme color.

hugo gen chromastyles --style=borland > assets/_syntax.css

Color Table

All together the colors are:

Horizontal Rules

As you can see above, horizontal rules have a flourish in the middle of them. You can configure this by changing the CSS styling for <hr> to use nothing (as the theme does for the footnote separator) or any set of characters. If you wanted to change the seperator to be the victorry hand (✌) with spaces on either side you would add the following CSS rule:

main hr::after {
  content: "\00A0\2766\00A0";
}

This works because \00A0 is the hex encoding of a nonbreaking space and \2766 is the hex encoding for ✌.