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

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

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