search

cboettig / quarto-material

https://cboettig.github.io/quarto-material/
1 stars 0 forks source link

drop in css works but not drop-in sass #2

Open cboettig opened 1 year ago

cboettig commented 1 year ago

Theming with pre-built material-kit css seems to work (roughly speaking), by just pointing at the css:

https://github.com/cboettig/quarto-material/blob/13ba89709b877e93b53b3d7b0ba389459ca4083c/_quarto.yml#L23

We should be able to point quarto at the SCSS instead:

https://github.com/cboettig/quarto-material/blob/13ba89709b877e93b53b3d7b0ba389459ca4083c/_quarto.yml#L22

I've added the scss section comments (I think, I don't actually know anything about sass)

https://github.com/cboettig/quarto-material/blob/13ba89709b877e93b53b3d7b0ba389459ca4083c/assets/scss/quarto-material-kit.scss#L16-L34

but quarto still fails with these, complaining it doesn't understand some color variables.

If we use the R package sass to 'manually' compile to CSS, that works fine: 

library(sass)
sass(sass_file("assets/scss/quarto-material-kit.scss"),
     output  = "assets/css/quarto-material-kit.css")

Still some minor css issues (probably a lot more I haven't yet uncovered...), e.g. setting background: primary in the navbar uses the default primary background as originally defined by quarto, not the "primary" color defined by the material kit scss + css files. Inspecting the navbar, it's not obvious where the color is defined though, I'm not spotting an html element with a class that mentions 'primary'.