Feature: Update [!caption] callout to utilize metadata

- consolidated the three existing caption callouts into one `[!caption]` callout. Float can be applied using callout metadata now.
- Updated `MMW Design & Planning/Custom Formatting Features.md` to reflect changes.
- Renamed `MMW_Caption_Callouts` plural to `MMW_Caption_Callout` singular.

Author: MasssiveJuice08

content/.obsidian/snippets/MMW_Caption_Callout.css

@@ -0,0 +1,32 @@
+/*Captions*/
+.callout.callout[data-callout~=caption] {
+  background: transparent;
+  text-align: center;
+  box-shadow: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  --callout-content-padding: 0;
+  max-width: 30vh;
+}
+.callout.callout[data-callout~=caption] > .callout-content {
+  overflow: hidden;
+}
+.callout.callout[data-callout~=caption] > .callout-content > p :is(.image-embed, img) + br {
+  display: none;
+}
+.callout.callout[data-callout~=caption] > .callout-content img {
+  display: block;
+  margin: auto;
+}
+.callout.callout[data-callout~=caption] > .callout-title {
+  display: none;
+}
+.callout.callout[data-callout~=caption] p {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  color: var(--text-faint);
+}
+.callout.callout[data-callout~=caption]:is([data-callout-metadata~=sban], [data-callout-metadata~=banner]) .image-embed img {
+  width: 100%;
+}

content/.obsidian/snippets/MMW_Caption_Callouts.css

@@ -188,18 +188,26 @@ In addition to the default [Obsidian Callouts](https://help.obsidian.md/Editing+
 
 ### Captions
 
-> [!caption_right]
+> [!caption|right]
 > 
 > ![[PuzzleBoxOnly.png|wsmall]]
 > 
-> `[!caption_right]` callout
+> `[!caption|right]` callout
 
-Three callouts for adding captions to images. The callout title is hidden and text size reduced, similar to how Wikipedia and other wikis format their article image captions.
+A borderless callout for adding captions to images. 
 
-**Types:**
-- `[!caption_left]` - floats to the left of the page
-- `[!caption_right]` - floats to the right of the page
-- `[!caption]` - centered in the middle of the page
+Use [[Custom Formatting Features#Callout Positioning|Callout Positioning]] metadata to float these left or right for wiki-style article image captions
+
+```markdown title="syntax"
+> [!caption]
+> 
+> ![[image.png]]
+> 
+> Image caption.
+
+```
+
+<br>
 
 ### Infobox
 

content/MMW Design & Planning/Custom Formatting Features.md

@@ -280,103 +280,41 @@ img:active:not(.Logo) {
   /* First-child needs a margin-top of 16 to match the margin-top of other grid items - except codeblocks */
 }
 
-/*----Caption Callouts----*/
+/*----Caption Callout----*/
 
-/*---caption left callout---*/
-.callout[data-callout="caption_left"] {
-  --color: rgb(0, 176, 255);
-  --border: rgba(0, 176, 255, 0.44);
-  --bg: rgba(0, 176, 255, 0.1);
-  float: left;
-  max-width: 40%;
-  padding: 6px;
-  margin: 2px 12px 2px 0px;
-}
-
-.callout[data-callout="caption_left"] > .callout-title {
-  display: none;
-}
-
-.callout[data-callout="caption_left"] img {
-  display: block;
-  margin: auto;
-  max-width: 100%;
-}
-
-.callout[data-callout="caption_left"] p {
-  text-align: left;
-  padding: 2px;
-  margin: auto;
-  font-size: 0.875em;
-}
-
-/* mobile breakpoint */
-@media (max-width: 767px) {
-  .callout[data-callout="caption_left"] {
-    max-width: 50%;
-  }
+.callout.callout[data-callout~=caption] {
+  background: transparent;
+  text-align: center;
+  box-shadow: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  --callout-content-padding: 0;
+  max-width: 30vh;
 }
-
-/*---caption center callout---*/
-.callout[data-callout="caption"] {
-  --color: rgb(0, 176, 255);
-  --border: rgba(0, 176, 255, 0.44);
-  --bg: rgba(0, 176, 255, 0.1);
-  padding: 6px;
-  max-width: 80%;
-  margin: auto;
+.callout.callout[data-callout~=caption] > .callout-content {
+  overflow: hidden;
 }
-
-.callout[data-callout="caption"] > .callout-title {
+/*. callout.callout[data-callout~=caption] > .callout-content > p :is(.image-embed, img) + br {
   display: none;
-}
+} */ 
 
-.callout[data-callout="caption"] img {
-  display: block;
-  margin: auto;
-  max-width: 100%;
-}
+  /*unneeded as `.image-embed` relates to image embedding in Reading Mode vs Live Preview */
 
-.callout[data-callout="caption"] p {
-  text-align: center;
-  padding: 2px;
+.callout.callout[data-callout~=caption] > .callout-content img {
+  display: block;
   margin: auto;
-  font-size: 0.875em;
-}
-
-/*---caption right callout---*/
-.callout[data-callout="caption_right"] {
-  --color: rgb(0, 176, 255);
-  --border: rgba(0, 176, 255, 0.44);
-  --bg: rgba(0, 176, 255, 0.1);
-  float: right;
-  max-width: 40%;
-  padding: 6px;
-  margin: 2px 0px 2px 12px;
 }
-
-.callout[data-callout="caption_right"] > .callout-title {
+.callout.callout[data-callout~=caption] > .callout-title {
   display: none;
 }
-
-.callout[data-callout="caption_right"] img {
-  display: block;
-  margin: auto;
-  max-width: 100%;
-}
-
-.callout[data-callout="caption_right"] p {
-  text-align: left;
-  padding: 2px;
-  margin: auto;
-  font-size: 0.875em;
+.callout.callout[data-callout~=caption] p {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  color: var(--gray);
 }
-
-/* mobile breakpoint */
-@media (max-width: 767px) {
-  .callout[data-callout="caption_right"] {
-    max-width: 50%;
-  }
+.callout.callout[data-callout~=caption]:is([data-callout-metadata~=sban], [data-callout-metadata~=banner]) .image-embed img {
+  width: 100%;
 }
 
 /*----infobox callout----*/