Increases the margin in maths blocks (#201)

* Add large math examples to the kitchen sink

* Add both list and none list large maths blocks

* Add margin to maths

* More to the kitchen sink maths page

* Formatting

* only apply to lists

* Headings and add in a few other scenarios

* Formatting

src/book/kitchen-sink/08-math.mdx

@@ -22,16 +22,88 @@ $$
 e^{i\phi} = \cos(\phi) + i \sin(\phi)
 $$
 
+### Large block
+
+$$
+\text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}
+$$
+
+$$
+\text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}
+$$
+
+### In a list
+
+- Large maths equations in a list
+
+  $$
+  \text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}
+  $$
+
+  $$
+  \text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}
+  $$
+
 ### In a grid
 
-<Grid columns='1fr 1fr'>
+<Grid columns='2fr 2fr'>
 
 $$
-e^{i\phi} = \cos(\phi) + i \sin(\phi)
+\text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}
 $$
 
 $$
-e^{i\phi} = \cos(\phi) + i \sin(\phi)
+\text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}
+$$
+
+$$
+\text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}
+$$
+
+$$
+\text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}
 $$
 
 </Grid>
+
+### In collapsible
+
+<details> 
+<summary> Maths is Fun! </summary>
+
+$$
+\text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}
+$$
+
+$$
+\text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}
+$$
+
+</details>
+
+### In a table
+
+| First Header                                                                          | Second Header | Third Header |
+| ------------------------------------------------------------------------------------- | ------------- | ------------ |
+| $\text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}$ | Content Cell  | Content Cell |
+| $\text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}$                                 | Content Cell  | Content Cell |
+
+### In a blockquote
+
+> $\text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}$
+>
+> $\text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}$
+
+### In an alert
+
+<Alert type='info'>
+
+$$
+\text{angle}_i = \frac{\text{axis} \cdot \text{ray}_i}{ \text{radius}_{\text{max}}}
+$$
+
+$$
+\text{mean} = \frac{\sum_{i=0}^n \text{angle}_i}{n}
+$$
+
+</Alert>

src/components/markdown/markdown.module.css

@@ -270,6 +270,14 @@
         @apply mt-0;
       }
     }
+
+    :global(.math-display) {
+      @apply mt-6;
+
+      &:first-child {
+        @apply mt-0;
+      }
+    }
   }
 
   :not(pre):not(h1):not(h2):not(h3):not(h4) > code,