Apply a custom stylesheet/theme

We should introduce an attribute named pdf-style (or maybe use the stylesheet and stylesdir attributes ?) to provide a custom stylesheet.

I think the default style should be named default.css and we should support the @import directive. The idea is to be able to extend the default style:

@import 'default.css';

.role.red {
  color: #ff0000;
}

To avoid path resolution issues, we will probably need to replace the directive with the actual content. default.css will be a reserved name.

It should also be possible to use @import to include stylesheets:

color.css

:root {
  --main-color: #2b2d2f;
}

@import 'default.css';
@import 'color.css';

.paragraph {
  color: var(--main-color);
}

.title {
  color: var(--main-color);
}

[mojavelinux]

Using a CSS framework is just not a good way to maintain this stylesheet long term.

The reason I say this is because when the framework gets updated, it changes in so many ways that you waste tons of time just trying to figure out what broke. So all the gains you had from the framework are lost. The frameworks are great for rapid prototyping, but aren’t good for long term maintenance (which is our use case).

[Mogztter]

The frameworks are great for rapid prototyping, but aren’t good for long term maintenance (which is our use case).

I couldn’t agree more 👍

It’s better to hand craft it. I find PostCSS to be perfect for this (which is just regular CSS with polyfills).

I do have a prototype (still based on Sass and foundation though it’s not a dependency anymore): https://github.com/Mogztter/asciidoctor-stylesheets

The plan is to use a new approach for the new semantic HTML 5 converter or do you also want to use this new approach on the existing/current HTML 5 converter ?