Work with the CSS Stylesheets

The stylesheets are written in CSS. These stylesheets utilize CSS variables to keep the CSS DRY and easy to customize.

Stylesheet organization and processing

Within the default UI project, the stylesheet files are separated into modules to help organize the rules and make them easier to find. The UI build combines and minifies these files into a single file named site.css. During the build, the CSS is enhanced using PostCSS in much the same way as a CSS preprocessor works, only the modifications are made to the CSS directly. The modifications mostly revolve around injecting vendor prefixes for compatibility or backporting new features to more broadly supported syntax.

An Antora UI provides its own styles. While these styles are expected to support any roles defined in the AsciiDoc Language documentation, it does not provide all the selectors found in the Asciidoctor default stylesheet. If there’s a selector that the Asciidoctor default stylesheet provides that you need in your Antora site, you’ll need to add it to the CSS for your own UI.

Add a new CSS rule

Let’s consider the case when you want to modify the font size of a section title.

First, make sure you have set up the project and created a development branch. Next, open the file src/css/doc.css and modify the rule for the section title.

.doc h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  margin-top: 2rem
}

Save the file, commit it to git, push the branch, and allow the approval workflow to play out.