diff --git a/mmw-content/.obsidian/snippets/mmw-callout-adjustments.css b/mmw-content/.obsidian/snippets/mmw-callout-adjustments.css index a065ee3e..6dafc96a 100644 --- a/mmw-content/.obsidian/snippets/mmw-callout-adjustments.css +++ b/mmw-content/.obsidian/snippets/mmw-callout-adjustments.css @@ -11,6 +11,16 @@ margin-left: 8px; } +@media screen and (max-width: 767px) { + .callout.callout.callout.callout[data-callout-metadata~=right]:not(.callout[data-callout-metadata~=fixed]), .callout.callout.callout.callout[data-callout-metadata~=left]:not(.callout[data-callout-metadata~=fixed]) { + float: unset; + margin: auto; + width: 100%; + max-width: 100%; + /* floating callouts lose float and expand to full width on mobile */ + } +} + .callout.callout.callout[data-callout-metadata~=center] { display: block; margin: auto; diff --git a/mmw-content/.obsidian/snippets/mmw-infobox-callout.css b/mmw-content/.obsidian/snippets/mmw-infobox-callout.css index f1f19562..1afd34fb 100644 --- a/mmw-content/.obsidian/snippets/mmw-infobox-callout.css +++ b/mmw-content/.obsidian/snippets/mmw-infobox-callout.css @@ -85,4 +85,5 @@ padding-left: 12px; padding-right: 0px; vertical-align: top; + line-height: 1.6rem; } diff --git a/mmw-content/contributing/custom-formatting-features.md b/mmw-content/contributing/custom-formatting-features.md index 02398496..10c2f819 100644 --- a/mmw-content/contributing/custom-formatting-features.md +++ b/mmw-content/contributing/custom-formatting-features.md @@ -75,7 +75,7 @@ MMW borrows a large number of [Callout Adjustments](https://publish.obsidian.md/ | Abbr. | Full Title | Description | | ------ | ----------------- | ----------------------------------------------------------- | | | `embed` | Remove callout padding to expand embed | -| | `clean` | Remove callout Styling | +| | `clean` | Remove callout styling | | | `collapse` | Remove all padding and margins for ultra compact look | | `nbrd` | `no-border` | Borderless callout | | | `clear` | Move any other floating elements near to under this callout | @@ -91,15 +91,16 @@ MMW borrows a large number of [Callout Adjustments](https://publish.obsidian.md/ ### Callout Positioning -| Attribute | Description | -| --------- | -------------------------- | -| `left` | Float callout to the left | -| `right` | Float callout to the right | -| `center` | Center the callout | +| Attribute | Description | +| --------- | ---------------------------------------------- | +| `left` | Float callout to the left | +| `right` | Float callout to the right | +| `center` | Center the callout | +| `fixed` | Maintains a callout's float position on mobile | ### Callout Sizing -Callouts can be resized using the keywords below. +Callouts can be resized using the keywords below (sizing is the same as [[custom-formatting-features#SIRvb's Image Adjustments|SIRvb's Image Adjustments]]) The sizing is a percentage, relative to the callout's parent. Using `|wmed` as an example: @@ -108,33 +109,18 @@ The sizing is a percentage, relative to the callout's parent. Using `|wmed` as a Sizing can be made to use pixels instead of percentage by adding `|static`. -> [!column|flex 2] -> -> > [!note|clean no-t] -> > -> > |Attributes|Callout Width `%`|Callout Width `px`| -> > |---|:-:|:-:| -> > |`wmicro`|10%|50px| -> > |`wtiny`|20%|100px| -> > |`wsmall`|30%|200px| -> > |`ws-med`|40%|300px| -> > |`wm-sm`|50%|400px| -> > |`wmed`|60%|500px| -> > |`wm-tl`|80%|600px| -> > |`wtall`|95%|700px| -> > |`wfull`|100%|| -> > |`wfit`|Auto|Auto| -> -> > [!note|clean no-t] -> > -> > > [!note] Add `|static` for sizing with pixels -> > > -> > > Callout sizing uses percentages by default. `|static` switches to pixels to use static sizing. -> > -> > > [!tip] -> > > -> > > Callout sizing is the same as [[custom-formatting-features#SIRvb's Image Adjustments|SIRvb's Image Adjustments]] - +|Attributes|Callout Width `%`|Callout Width `px`| +|---|:-:|:-:| +|`wmicro`|10%|50px| +|`wtiny`|20%|100px| +|`wsmall`|30%|200px| +|`ws-med`|40%|300px| +|`wm-sm`|50%|400px| +|`wmed`|60%|500px| +|`wm-tl`|80%|600px| +|`wtall`|95%|700px| +|`wfull`|100%|| +|`wfit`|Auto|Auto| --- diff --git a/quartz/styles/custom/callout-adjustments.scss b/quartz/styles/custom/callout-adjustments.scss index ae212715..d85196ad 100644 --- a/quartz/styles/custom/callout-adjustments.scss +++ b/quartz/styles/custom/callout-adjustments.scss @@ -16,6 +16,16 @@ margin-left: 8px; } +@media screen and (max-width: $mobileBreakpoint) { + .callout.callout.callout.callout[data-callout-metadata~=right]:not(.callout[data-callout-metadata~=fixed]), .callout.callout.callout.callout[data-callout-metadata~=left]:not(.callout[data-callout-metadata~=fixed]) { + float: unset; + margin: auto; + width: 100%; + max-width: 100%; + /* floating callouts lose float and expand to full width on mobile */ + } +} + .callout.callout.callout[data-callout-metadata~=center] { display: block; margin: auto; @@ -214,9 +224,20 @@ } .callout.callout:is([data-callout-metadata~=text-small], -[data-callout-metadata~=txt-s]) > .callout-content > * { +[data-callout-metadata~=txt-s]) > .callout-content * { font-size: 0.8rem; - line-height: 1rem; + line-height: 1.3rem; +} + +.callout.callout.callout:is([data-callout-metadata~=text-small], +[data-callout-metadata~=txt-s]) > .callout-content sup:has(a), .callout.callout.callout:is([data-callout-metadata~=text-small], +[data-callout-metadata~=txt-s]) > .callout-content sup a { + /* prevents sup elements like footnotes from pushing up line-height. Quartz-only; not needed for Obsidian */ + font-size: 0.6rem; + line-height: 0; + position: relative; + vertical-align: baseline; + top: -0.3em; } .callout:is([data-callout-metadata~=n-th], diff --git a/quartz/styles/custom/infobox-callout.scss b/quartz/styles/custom/infobox-callout.scss index 71977066..3f736999 100644 --- a/quartz/styles/custom/infobox-callout.scss +++ b/quartz/styles/custom/infobox-callout.scss @@ -93,4 +93,5 @@ padding-left: 12px; padding-right: 0px; vertical-align: top; + line-height: 1.6rem; }