Hugo Theme Component: Asciidoctor Skin

Adds a fully styled Asciidoctor Stylesheet to your Hugo site so all your pages will look amazing.

Designed to be included as a theme component to your Hugo site, so code is separated nicely and you don’t have to worry so much about update related problems.

Features

• Dark and Light styles

• Customisable in many ways

• Great predesign for

  • Typography

  • Content elments

  • Forms

  • …​

Installation

1. Clone this theme component to your project’s themes directory

git submodule add https://github.com/devidw/hugo-theme-component-asciidoctor-skin ./themes/hugo-theme-component-asciidoctor-skin

2. Add this theme component to your list of themes inside your project’s config file (either .yaml, .toml or .json)

config.yaml

theme:
  - "…"
  - "hugo-theme-component-asciidoctor-skin"
  - "…"

config.toml

theme = ["…", "hugo-theme-component-asciidoctor-skin", "…"]

config.json

"theme": ["…", "hugo-theme-component-asciidoctor-skin", "…"]

3. Import the stylesheet

The styles are located inside the /assets/sass/vendor/devidw/asciidoctor-skin directory in the theme component and are available inside that directory in your project root and other themes and theme components at the same place because of the way Hugo merges all its sources into one site when building.

In SASS

/* /assets/sass/_custom.sass */
@import ./vendor/devidw/asciidoctor-skin/import

In SCSS

/* /assets/sass/_custom.scss */
@import './vendor/devidw/asciidoctor-skin/import';

Personalisation

With SASS or SCSS

Have a look into _variables.scss to get an idea of what you can change, also check out the files inside mixins and functions to see the available mixins and functions you can use.

With CSS

Once you added the stylesheet to your document you can see a list of all CSS custom properties in your browsers dev tools when you inspect the html node.