How impossible is it to incorporate a 1000-line css theme intended for eg Hugo in SS 7.1?

I want to write most of my site in an offline Markdown editor, use Pandoc to convert it to HTML, and then add enough custom CSS to be able to style sidenotes and better epigraph-like blockquotes in, at least, the blog, but maybe everywhere.

I have the special HTML creation part working, but it needs the custom CSS to display properly. The custom CSS is not designed for Squarespace—more for Hugo, I think.

The (1000-line) css theme is here: https://github.com/jez/pandoc-markdown-css-theme/blob/master/public/css/theme.css

The SS Sitewide Custom CSS editor seems to detects a lot of errors/problems which is unsurprising.
 

I might be willing to debug the whole thing, but… it’s like working blindfolded if I don’t really understand what classes already exist in SS and can and can’t be adjusted. Maybe it’s all there in browser inspectors (is it?), but… is there a best-practice way to approach this kind of challenge in Squarespace with more efficiency / clarity? 

I’m a beginner, but have a front-end person on this, but… this is different from what they normally do, so still looking for good advice at this stage.

p.s. I’m willing to undergo a lot of struggle to get sidenotes* happening, but it would be great to find out sooner if this route is impossible  

(*sidenotes are like footnotes, but they live adjacent to referencing text for easier examination of sources. Kinda tricky to do manually, but someone already coded an efficient way to do this—just not for Squarespace).

Thanks for any guidance you can provide.

3 hours ago, court74 said:

I want to write most of my site in an offline Markdown editor, use Pandoc to convert it to HTML, and then add enough custom CSS to be able to style sidenotes and better epigraph-like blockquotes in, at least, the blog, but maybe everywhere.

I have the special HTML creation part working, but it needs the custom CSS to display properly. The custom CSS is not designed for Squarespace—more for Hugo, I think.

The (1000-line) css theme is here: https://github.com/jez/pandoc-markdown-css-theme/blob/master/public/css/theme.css

The SS Sitewide Custom CSS editor seems to detects a lot of errors/problems which is unsurprising.
 

I might be willing to debug the whole thing, but… it’s like working blindfolded if I don’t really understand what classes already exist in SS and can and can’t be adjusted. Maybe it’s all there in browser inspectors (is it?), but… is there a best-practice way to approach this kind of challenge in Squarespace with more efficiency / clarity? 

I’m a beginner, but have a front-end person on this, but… this is different from what they normally do, so still looking for good advice at this stage.

p.s. I’m willing to undergo a lot of struggle to get sidenotes* happening, but it would be great to find out sooner if this route is impossible  

(*sidenotes are like footnotes, but they live adjacent to referencing text for easier examination of sources. Kinda tricky to do manually, but someone already coded an efficient way to do this—just not for Squarespace).

Thanks for any guidance you can provide.

When I face a situation when the 3rd party css conflict with Squarespace css, I usually create a scoped version of the css, eg. add a class name in root node of the component. In this case I think the root node should be .sqs-block-markdown...

Once I use UIKit version 3 to integrate lightbox component to squarespace, I use a scope version built from the UIKit source and assign a unique class name for the scope so it won't mess up with ss's css. I guess you can build scope version directly from the css you have you or pasted it into custom css panel (which is less format) and wrap it with something like .scoped-hugo ...