search

rikhuijzer / PlutoStaticHTML.jl

Convert Pluto notebooks to HTML in automated workflows
https://PlutoStaticHTML.huijzer.xyz
MIT License
81 stars 7 forks source link

Injected CSS causes all divs to have large margins #93

Closed sethaxen closed 2 years ago

sethaxen commented 2 years ago

This package injects the following code into the header: https://github.com/rikhuijzer/PlutoStaticHTML.jl/blob/f71e051c09b86219fcf7e50647d17b55a7d93106/src/build.jl#L178-L190

This can cause divs that appear regularly spaced in Pluto and Documenter to be very widely spaced with PlutoStaticHTML. e.g. see all of the InferenceData objects here: https://arviz-devs.github.io/ArviZ.jl/previews/PR136/quickstart/ image

sethaxen commented 2 years ago

@rikhuijzer is there a workaround for this? If not, is there a way to disable the addition of this CSS?

rikhuijzer commented 2 years ago

@rikhuijzer is there a workaround for this? If not, is there a way to disable the addition of this CSS?

You can always override the elements with your own CSS and !important. It should be pretty trivial if you know CSS. The difficulty is figuring out how elements are called and how they should look.

sethaxen commented 2 years ago

You can always override the elements with your own CSS and !important. It should be pretty trivial if you know CSS. The difficulty is figuring out how elements are called and how they should look.

I included the following in a custom.css file:

pre, div { 
    margin-top: inherit !important; 
    margin-bottom: inherit !important; 
}

But since the CSS added by this package is embedded in the md file, it takes precedent, so I'd need to modify all produced markdown files to remove the added CSS. As you noted in https://github.com/rikhuijzer/PlutoStaticHTML.jl/issues/89#issuecomment-1073120424, you've elsewhere made the decision to not insert CSS that users may not want. I doubt I'm the first person who will have this issue, so it would be nice to be able to opt out of this added CSS. For me personally, the pages look fine without the adjustment to the margins.

rikhuijzer commented 2 years ago

You can always override the elements with your own CSS and !important. It should be pretty trivial if you know CSS. The difficulty is figuring out how elements are called and how they should look.

I included the following in a custom.css file:

pre, div { 
    margin-top: inherit !important; 
    margin-bottom: inherit !important; 
}

But since the CSS added by this package is embedded in the md file, it takes precedent, so I'd need to modify all produced markdown files to remove the added CSS. As you noted in #89 (comment), you've elsewhere made the decision to not insert CSS that users may not want. I doubt I'm the first person who will have this issue, so it would be nice to be able to opt out of this added CSS. For me personally, the pages look fine without the adjustment to the margins.

Have you tried pinning the more narrow elements? CSS will take the style of the closest element. Otherwise, feel free to open a PR. I have been living from a laptop and travelling all week for my job so that‘s why I haven’t implemented a fix yet