devidw / hugo-theme-component-asciidoctor-skin Goto Github PK

View Code? Open in Web Editor NEW

Asciidoctor skin styles designed for usage inside Hugo Themes

License: GNU General Public License v3.0

hugo-theme-component-asciidoctor-skin's Introduction

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.

Recommend Projects

devidw / hugo-theme-component-asciidoctor-skin Goto Github PK