Dark style is not rendered as expected
jfernandz opened this issue · comments
I'm trying to use the dark.css style but it is not rendered as espected. I'm getting this in vscode
and this one in Chrome after render the .adoc to an .html with asciidoctor
I was expecting something like this
I guess it is happening the same for other styles.
Well, apparently the point was I was missing the default asciidoc style framework asciidoctor.css
But still I have a few questions.
- Why that bad rendering in nested tables? I would say that's related with the
asciidoctor.cssfile provided by this repository. Why I cannot store bothI've solved that one usingdark.cssandasciidoctor.cssin a separate folder? When I paste both into mystylesheetsfolder thedark.cssis not properly importing theasciidoctor.css, I have to putascidoctor.cssin the same folder than.adocfile. I guess this is due:stylesheet:attribute is embedding thedark.cssin the generated.htmland thedark.csscode is importing directly theasciidoctor.cssthusasciidoctor.cssmust be placed in the same folder than.htmlfile, am I right?@import 'path/to/asciidoctor.css'in thedark.css(of course the path is relative to where is.htmlfile placed)
@wyre as you have discovered, the themes in this repository each pull in the base Asciidoctor theme first before overlaying other styles. So you do need to have the asciidoctor.css file in the same location as the theme file (or edit it to point to a different location).
Can you provide a link to the Asciidoctor document you are using for testing in your screenshots above? That would make it easier to debug any issues with the theme.
It's quite possible that you are right and that there is an issue with the version of the base Asciidoctor theme we are using -- after all it hasn't been updated in three years. One way to test this might be to change the @import link in your local version of the dark theme to the latest online version of the Asciidoctor theme (for example: https://asciidoctor.org/stylesheets/asciidoctor.css). If that resolves the problem, then it's probably an issue with the base theme.
Since it's so old now, it's probably worth updating our version of the base theme in any case, though we would want to do some thorough testing first to make sure it doesn't break anything unexpected.
Can you provide a link to the Asciidoctor document you are using for testing in your screenshots above? That would make it easier to debug any issues with the theme.
I've provided in the point 1.
One way to test this might be to change the @import link in your local version of the dark theme to the latest online version of the Asciidoctor theme (for example: https://asciidoctor.org/stylesheets/asciidoctor.css). If that resolves the problem, then it's probably an issue with the base theme.
Yes, it solves the problem.
@wyre point 1 above links to our version of the Asciidoctor base CSS. I was asking about the Asciidoctor text file you are using to create your screenshots (the one that includes nested tables and other formatting). If you are able to share that file it would be very helpful for testing.
@dohliam ah, I see you are asking for the MWE.
:stylesheet: stylesheets/dark.css
:icons: font
:stem: latexmath
:toc:
== Lorem ipsum dolor sit amet, consectetur
[NOTE]
.Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et hendrerit velit. Phasellus non mi vitae ante tempus semper in sed risus. Vivamus felis metus, lacinia quis malesuada vitae, vulputate eu turpis. Nullam vel metus sagittis, rutrum ante ut, feugiat ex. Quisque fringilla sapien in eleifend mattis. Integer sagittis, massa at blandit lobortis, libero metus condimentum leo, vitae bibendum risus nisl a arcu. Donec tempor justo sed orci molestie mollis. Cras urna erat, bibendum nec eros at, cursus fringilla felis.
====
.Sed orci molestie mollis. Cras urna erat, bibendum nec eros at, cursus fringilla felis.
[cols=".^,<.^a,>.^a"]
|===
| \[X_nY_m\]
| * \(X\) a ante \(i\)
* \(Y\) a ante \(j\)
| [cols=">.^"]
!===
! Trad. ! Stock. ! Esteq.
!===
|===
====
IMPORTANT: Cras lacus felis, consequat ac accumsan malesuada, lobortis a ante. Vestibulum hendrerit, ipsum id faucibus efficitur, nunc nisl luctus felis, aliquam facilisis justo dui ut diam. Proin sagittis egestas enim, a consequat justo tempor in.
== Cras lacus
=== ipsum id
[cols=".^,<.^a,>.^a"]
|===
| Compuesto ^.^| Valencias compuestos implicados | Nomenclaturas
| \[X_nY_m\]
| * \(X\) a ante \(i\)
* \(Y\) a ante \(j\)
| [cols=">.^"]
!===
! Trad. ! Stock. ! Esteq.
!===
Something like this should do the work.
@wyre Thanks! 👍
When we eventually update the base style CSS this will be helpful for testing against each of the themes to make sure they are working as expected.
@dohliam I would suggest to do the import with
@import "https://asciidoctor.org/stylesheets/asciidoctor.css"; /* Default asciidoc style framework - important */
In all your stylesheets in order to avoid this kind of stuff.
@wyre That's a good idea, and I believe we started off by doing that, however if I recall correctly there were some incompatibilities with custom stylesheets that required adjusting the base theme file, which is how we ended up with a local version. If that has changed, then of course it would be better to just link to the canonical version, but we'll have to run some tests first to make sure that nothing breaks as a result.
Also I would remark that
Once you've got an .adoc document going, download the asciidoctor.css and a css skin file of your choice into your project directory.
In your README.md as an IMPORTANT: admonition, though your REAMDE.md is not an .adoc file, what a pity.
@wyre that would make a great PR if you're interested (the conversion to .adoc should be fairly simple since it's a short and relatively uncomplicated document). I agree it makes more sense to have the Readme as an .adoc file!
(Now that I think of it, I can't recall if Github supported rendering Asciidoc back when the project started, so that may be why we decided to go with Markdown.)