Feat: Mobile-responsive callouts + txt-s adjustments (#89)

* adjust txt-s to target all descendants

- also increase line-height slightly from 1rem to 1.2rem

* Feat: mobile-responsive callouts + line-height fix

- Callouts by default will have their `float` property unset on mobile, and will stretch to 100% width.
- adding `|fixed` callout metadata will force a callout to maintain its float on mobile, for exceptional situations where it is important to float a (preferably small) element even with limited screen space (i.e., mobile).
- adjustments to `txt-s` line-height for `<sup>` elements (i.e., footnotes) so they don't push line-height up. Slightly increased line-height as compromise to improve readability. Quartz-only; not needed for Obsidian.
- reduced line-height of table `<td>` for infobox callouts
- updated docs

Author: MasssiveJuice08

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;

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;
   }

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|
 
 ---
 

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],

quartz/styles/custom/infobox-callout.scss

@@ -93,4 +93,5 @@
   padding-left: 12px; 
   padding-right: 0px;
   vertical-align: top;
+  line-height: 1.6rem;
 }