asciidoctor / asciidoctor-reveal.js

:crystal_ball: A reveal.js converter for Asciidoctor and Asciidoctor.js. Write your slides in AsciiDoc!
http://asciidoctor.org
Other
287 stars 189 forks source link

2-column for _part_ of a slide #494

Open jandot opened 1 year ago

jandot commented 1 year ago

First of all: thank you for all the work put into this library. I did unfortunately run into a possible use case with columns that is not covered yet: what if only part of the slide should be in columns?

From what I understand, the [.columns] needs to be put before the slide separator as in the example below. However, when the header you want to show is of a lower level than what triggers a new slide (i.e. == or ===, that header is also put in a column instead of across the whole width of the slide. In the example below, the text "Some explanation goes here..." should also be across the whole width of the slide.

Any help appreciated.

[.columns]
=== !
==== Two columns with a list in each
Some explanation goes here...

[.column]
--
* List item 1
** Item 1-1
** Item 1-2
* List item 2
--

[.column]
--
* List item 3
** Item 3-1
** Item 3-2
--
johthor commented 1 year ago

Hi @jandot i've got a partial solution for you. In https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/templates/asciidoctor-compatibility.css you will find some more classes which control how the columns is displayed. In this case all contents of the .columns slide are .column blocks but the first is a block which covers the full width of the slide.

[.columns.wrap]
=== Two columns with a list in each

[.column.is-full]
--
Some explanation goes here...
--

[.column.is-half]
--
* List item 1
** Item 1-1
** Item 1-2
* List item 2
--

[.column.is-half]
--
* List item 3
** Item 3-1
** Item 3-2
--