search

oleeskild / obsidian-digital-garden

MIT License
1.36k stars 125 forks source link

Request: Compatibility with this CSS snippe group #360

Open oyes77 opened 1 year ago

oyes77 commented 1 year ago

https://github.com/efemkay/obsidian-modular-css-layout

This would allow lots of flexibility and more customization in the digital garden.

SemanticBeeng commented 1 year ago

+1 and w.r.t. modularity, it would be great to unify how embeds / transclusions are formatted.

This formatting is an issue in Obsidian client and also publishing.

As shown in https://github.com/oleeskild/obsidian-digital-garden/issues/361, even through embeds render correctly in Obsidian client they render with some form of padding around that breaks the parent page layout (for headings, lists, etc; can elaborate if needed).

See themes that do fix the formatting of embeds

But the solutions are partial, different (non canonical) and non modular.

Is there a way to introduce a canonical (uniform, shared between plugins), modular approach that works in both client and at publishing?

More context https://github.com/orgs/ObsidianPublisher/discussions/190#discussioncomment-6678905

/cc @uroybd

danielo515 commented 9 months ago

I was about opening an issue about this, but glad to see there is already awareness. Could it be possible to just include those CSS files as part of the eleventhly build? Or it will not be enough?

danielo515 commented 9 months ago

I think I found a suitable workaround for this. You need to add some custom css for it to work: You just copy this code under a css file at src/site/styles/user for example src/site/styles/user/multi-column.css

.callout[data-callout='multi-column']>.callout-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    grid-gap: .5rem;
}
.callout[data-callout='multi-column'] {
    padding: 0 1rem;
    margin: 0;
}
.callout[data-callout='multi-column']>.callout-content > p
 {
    display: none;
}
.callout[data-callout='multi-column']>.callout-title {
    display: none;
}

It will look like this

image