Add caption and faux-grid callouts, update content/.obsidian/snippets folder

Author: MasssiveJuice08

content/.obsidian/snippets/MMW_Caption_Callouts.css

@@ -0,0 +1,93 @@
+/*----caption left callout----*/
+.callout[data-callout="caption_left"] {
+    border: 1px solid rgba(0, 176, 255, 0.44);
+    background-color: 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: center;
+    padding: 2px;
+    margin: 2px;
+  }
+
+  /* mobile breakpoint */
+  @media (max-width: 767px) {
+    .callout[data-callout="caption_left"] {
+      max-width: 50%;
+    }
+  }
+
+/*----caption center callout----*/
+.callout[data-callout="caption"] {
+  border: 1px solid rgba(0, 176, 255, 0.44);
+  background-color: rgba(0, 176, 255, 0.1);
+  padding: 6px;
+  max-width: 80%;
+  margin: auto;
+}
+
+.callout[data-callout="caption"] > .callout-title {
+  display: none;
+}
+
+.callout[data-callout="caption"] img {
+  display: block;
+  margin: auto;
+  max-width: 100%;
+}
+
+.callout[data-callout="caption"] p {
+  text-align: center;
+  padding: 2px;
+  margin: auto;
+  font-size: 0.875em;
+}
+
+/*----caption right callout----*/
+.callout[data-callout="caption_right"] {
+    border: 1px solid rgba(0, 176, 255, 0.44);
+    background-color: 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 {
+    display: none;
+  }
+
+  .callout[data-callout="caption_right"] img {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+  }
+
+  .callout[data-callout="caption_right"] p {
+    text-align: center;
+    padding: 2px;
+    margin: auto;
+  }
+
+  /* mobile breakpoint */
+  @media (max-width: 767px) {
+    .callout[data-callout="caption_right"] {
+      max-width: 50%;
+    }
+  }
+
+  

content/.obsidian/snippets/MMW_Faux-Grid_Callouts_Obsidian.css

@@ -0,0 +1,34 @@
+/*----float left----*/
+.callout[data-callout="gridfloatleft"] {
+    --callout-color: rgba(0, 0, 0, 0);
+    --callout-icon: lucide-alert-circle;
+    float: left;
+    width: 50%;
+    margin: auto;
+    clear: left;
+}
+
+  /* mobile breakpoint */
+  @media (max-width: 767px) {
+    .callout[data-callout="gridfloatleft"] {
+      width: 100%;
+      float: none;
+    }
+  }
+
+.callout[data-callout="gridfloatright"] {
+    --callout-color: rgba(0, 0, 0, 0);
+    --callout-icon: lucide-alert-circle;
+    float: right;
+    width: 50%;
+    margin: auto;
+    clear: right;
+  }
+  
+  /* mobile breakpoint */
+  @media (max-width: 767px) {
+    .callout[data-callout="gridfloatright"] {
+      width: 100%;
+      float: none;
+    }
+  }