Redo Caption and Grid Callouts

[MasssiveJuice08]

Quartz now supports the following Obsidian CSS for callouts:

1. .callout-content - see here for use case: Place Callout contents within .callout-content div class
2. Support data-callout-metadata

Grid-Style Callouts

Proper grid-style callouts like this example should now be possible by use of the .callout-content class.

The current MMW grid callouts do not actually use the CSS grid property. Furthermore, clean, multi-column content without callout borders should now also be possible.

Caption Callouts

The [data-callout-metadata] property means we can now have just one [!caption] callout that gets styled to float left, right, or take up full page-width, all depending on what metadata gets applied via alt-text.

For example:

> [!caption|left]

> [!caption|right]

> [!caption]

Currently the MMW caption callout is actually three separate calliuts.

Support for callout metadata also means float properties can now be applied to existing callouts too (once the CSS is defined, that is).

[MasssiveJuice08]

Grid-style callouts completed by commit 987f05e

[MasssiveJuice08]

It would be useful to be able to control the number of columns for grid columns manually. The ITS Theme 'Columns' callout does this by adding a --columns: 2 variable to the parent callout, then modifying this through [data-callout-metadata~=" "].

Example:

.callout[data-callout*=column] {
  --callout-color: var(--text-normal);
  --callout-icon: layout-dashboard;
  --columns: 2;
  background: transparent;
  box-shadow: none;
  border: 0;
  width: auto;
  padding: 0;
}

.callout[data-callout*=column][data-callout-metadata~="3"] .callout-content {
  --columns: 3;
}

[MasssiveJuice08]

Caption callouts updated via commit d1a07f6

[MasssiveJuice08]

Closed via commit a3390ce