asciidoctor / asciidoctor-browser-extension

:white_circle: An extension for web browsers that converts AsciiDoc files to HTML using Asciidoctor.js.
https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia
MIT License
216 stars 53 forks source link

Add asciidoctor compact theme #112

Open leif81 opened 8 years ago

leif81 commented 8 years ago

The brackets-asciidoctor-preview project ships with a compact version of the asciidoctor theme:

https://github.com/asciidoctor/brackets-asciidoc-preview/blob/master/themes/asciidoctor-compact.css

Any chance of bringing this over to the chrome extension? I find it'd be especially useful when printing documents. As much as I like the the default asciidoctor theme (colours, fonts, etc) I find it is excessively generous with size of margins, padding, etc. Printed documents seem to be as much as twice as many pages as I'd expect the content to require.

mojavelinux commented 8 years ago

I'm completely in support of this, a compact them is important to have.

Getting there (the right way) means solving the underlying theme issue. We need to overhaul the stylesheet factory so that it builds themes for embedded documents (i.e., previews) in addition to full documents. (see https://github.com/asciidoctor/asciidoctor-stylesheet-factory/issues/18) Then, we need to publish them properly so that they can be pulled down as a dependency.

ggrossetie commented 8 years ago

Hello @leif81, you can already do it by adding a custom theme in the option page:

  1. Right click on the extension icon and click on "Options"
  2. "Add Stylesheet..." then select the compact.css file
  3. Save

compact

And here is the result (on left the standard theme and on the right the compact theme):

custom_css

I really like the compact theme and I think we should add it to the "Default" theme section (no manual upload required).

coptercopter commented 8 years ago

Based on @Mogztter idea I am using a slightly modified solution. I have added a custom JavaScript and experimented with zoom, transform and transform-origin attributes. In the end I found the following line of code solving my printing issues.

$('body').css('zoom','0.85');

It is theme-agnostic as well.