asciidoctor-reveal.js icon indicating copy to clipboard operation
asciidoctor-reveal.js copied to clipboard

2-column for _part_ of a slide

Open jandot opened this issue 1 year ago • 1 comments

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
--

jandot avatar Mar 25 '23 09:03 jandot

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
--

johthor avatar May 14 '23 17:05 johthor