https://github.com/devidw/hugo-theme-component-asciidoctor-skin
Asciidoctor skin styles designed for usage inside Hugo Themes
https://github.com/devidw/hugo-theme-component-asciidoctor-skin
asciidoctor asciidoctor-theme dark dark-mode dark-theme hugo hugo-theme-component sass sass-files skin static style
Last synced: 3 months ago
JSON representation
Asciidoctor skin styles designed for usage inside Hugo Themes
- Host: GitHub
- URL: https://github.com/devidw/hugo-theme-component-asciidoctor-skin
- Owner: devidw
- License: gpl-3.0
- Created: 2021-07-24T06:47:58.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-03T10:11:27.000Z (about 3 years ago)
- Last Synced: 2024-10-18T20:44:42.808Z (8 months ago)
- Topics: asciidoctor, asciidoctor-theme, dark, dark-mode, dark-theme, hugo, hugo-theme-component, sass, sass-files, skin, static, style
- Homepage:
- Size: 160 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.adoc
- License: LICENSE
Awesome Lists containing this project
README
= 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
[source,cmd]
----
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`
[source,yaml]
----
theme:
- "…"
- "hugo-theme-component-asciidoctor-skin"
- "…"
----
.`config.toml`
[source,toml]
----
theme = ["…", "hugo-theme-component-asciidoctor-skin", "…"]
----
.`config.json`
[source,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.
// When you are writing your styles inside a subfolder of `assets` like `/assets/sass`, `/assets/scss`, `/assets/css` or `/assets/styles` you can import like so:
.In SASS
[source,sass]
----
/* /assets/sass/_custom.sass */
@import ./vendor/devidw/asciidoctor-skin/import
----
.In SCSS
[source,scss]
----
/* /assets/sass/_custom.scss */
@import './vendor/devidw/asciidoctor-skin/import';
----
////
.In CSS
[source, css]
----
@import url('/asciidoctor-skin/import.min.css');
----
////
== 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.
// Include the partial `vendor/devidw/asciidoctor-skin/include.html` in the `` section of your theme's template files.
// [source,html]
// ----
//
//
//
// {{ if templates.Exists "partials/vendor/devidw/asciidoctor-skin/include.html" }}
// {{ partial "vendor/devidw/asciidoctor-skin/include.html" . }}
// {{ end }}
//
//
//
// ----