Added margin to figures

Resets the browser defaults.

dist/mini-default.css

@@ -207,6 +207,10 @@ sub {
   bottom: -0.25em;
 }
 
+figure {
+  margin: var(--universal-margin);
+}
+
 figcaption {
   color: var(--secondary-fore-color);
 }

docs/doc-fragments/images.js

@@ -12,7 +12,8 @@ module.exports = {
 <span class="code-line"><span class="highlight-a">&lt;/figure&gt;</span></span></pre>`],
   notes: [`While not mandatory, it is considered a good practice to always add a <code>alt</code> attribute to image elements on your web apps.`],
   customization: [
-    `You can change the text color of <code>&lt;figcaption&gt;</code> elements by changing the value of the <code>--secondary-fore-color</code> variable.`
+    `You can change the text color of <code>&lt;figcaption&gt;</code> elements by changing the value of the <code>--secondary-fore-color</code> variable.`,
+    `Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`
   ],
   modifiers: [],
   dos: [],

docs/v3/DEVLOG.md

@@ -162,3 +162,4 @@
 - Documented code and quotations.
 - Documented lists.
 - Documented images.
+- Added `margin` to `figcaption` elements to reset the browser defaults.

docs/v3/docs.html

@@ -71,7 +71,7 @@
 <span class="code-line"><span class="highlight-a">&lt;/figure&gt;</span></span></pre></div>
   
   <div class="section double-padded"><h3>Notes</h3><ul><li>While not mandatory, it is considered a good practice to always add a <code>alt</code> attribute to image elements on your web apps.</li></ul></div>
-  <div class="section double-padded"><h3>Customization</h3><ul><li>You can change the text color of <code>&lt;figcaption&gt;</code> elements by changing the value of the <code>--secondary-fore-color</code> variable.</li></ul></div>
+  <div class="section double-padded"><h3>Customization</h3><ul><li>You can change the text color of <code>&lt;figcaption&gt;</code> elements by changing the value of the <code>--secondary-fore-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li></ul></div>
 </div><br/><div id="lists" class="card fluid">
   <h2 class="section double-padded">Lists</h2>
   <div class="section"><p>List elements, both unordered and ordered, are minimally styled to match with the rest of the framework's aesthetics. Their margins and padding are reset to properly align with the rest of the common HTML5 elements, providing a stable foundation for all of your web app's lists.</p></div>

src/mini/_core.scss

@@ -283,6 +283,9 @@ sub {
   bottom: $sub-bottom;
 }
 
+figure {
+  margin: var(#{$universal-margin-var});
+}
 figcaption {
     color: var(#{$secondary-fore-color-var});
 }