Make spacing consistent

docs/ui-components/buttons.md

@@ -6,7 +6,7 @@ nav_order: 2
 ---
 
 # Buttons
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -28,7 +28,6 @@ nav_order: 2
 [Link button](http://example.com/){: .btn .btn-green }
 
 [Link button](http://example.com/){: .btn .btn-outline }
-
 </div>
 ```markdown
 [Link button](http://example.com/){: .btn }
@@ -44,11 +43,8 @@ nav_order: 2
 
 GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this:
 
-
 <div class="code-example">
-
 <button type="button" name="button" class="btn">Button element</button>
-
 </div>
 ```html
 <button type="button" name="button" class="btn">Button element</button>
@@ -60,11 +56,9 @@ GitHub flavored markdown does not support the `button` element, so you'll have t
 
 ### Button size
 
-Wrap the button in container that uses the [font-size utility classes]({{
-site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
+Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
 
 <div class="code-example" markdown="1">
-
 <span class="fs-6">
 [Big ass button](http://example.com/){: .btn }
 </span>
@@ -72,7 +66,6 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
 <span class="fs-3">
 [Tiny ass button](http://example.com/){: .btn }
 </span>
-
 </div>
 ```markdown
 <span class="fs-8">
@@ -89,17 +82,16 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
 Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
 
 <div class="code-example" markdown="1">
+[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
+[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
 
-[Button with space](http://example.com/){: .btn .btn-purple .mr-2}
-[Button ](http://example.com/){: .btn .btn-blue .mr-2}
-
-[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
+[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
 [Button ](http://example.com/){: .btn .btn-blue }
 </div>
 ```markdown
-[Button with space](http://example.com/){: .btn .btn-purple .mr-2}
+[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
 [Button ](http://example.com/){: .btn .btn-blue }
 
-[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
+[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
 [Button ](http://example.com/){: .btn .btn-blue }
 ```

docs/ui-components/code.md

@@ -6,7 +6,7 @@ nav_order: 6
 ---
 
 # Code
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -21,9 +21,7 @@ nav_order: 6
 Code can be rendered inline using single ticks by wrapping your code in single back ticks.
 
 <div class="code-example" markdown="1">
-
 Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
 </div>
 ```markdown
 Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

docs/ui-components/labels.md

@@ -10,42 +10,40 @@ nav_order: 3
 Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
 
 <div class="code-example" markdown="1">
-
 Default label
 {: .label }
 
 Blue label
-{: .label .label-blue}
+{: .label .label-blue }
 
 Stable
-{: .label .label-green}
+{: .label .label-green }
 
 New release
-{: .label .label-purple}
+{: .label .label-purple }
 
 Coming soon
-{: .label .label-yellow}
+{: .label .label-yellow }
 
 Deprecated
-{: .label .label-red}
-
+{: .label .label-red }
 </div>
 ```markdown
 Default label
 {: .label }
 
 Blue label
-{: .label .label-blue}
+{: .label .label-blue }
 
 Stable
-{: .label .label-green}
+{: .label .label-green }
 
 New release
-{: .label .label-purple}
+{: .label .label-purple }
 
 Coming soon
-{: .label .label-yellow}
+{: .label .label-yellow }
 
 Deprecated
-{: .label .label-red}
+{: .label .label-red }
 ```

docs/ui-components/lists.md

@@ -6,7 +6,7 @@ nav_order: 5
 ---
 
 # Lists
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -19,6 +19,7 @@ nav_order: 5
 Most lists can be rendered with pure markdown...
 
 ## Unordered list
+
 <div class="code-example" markdown="1">
 - Item 1
 - Item 2
@@ -42,18 +43,19 @@ _or_
 * Item 3
 ```
 
-
 ## Ordered list
+
 <div class="code-example" markdown="1">
 1. Item 1
 1. Item 2
 1. Item 3
 </div>
-  ```markdown
+```markdown
 1. Item 1
 1. Item 2
 1. Item 3
-  ```
+```
+
 ## Task list
 
 <div class="code-example" markdown="1">
@@ -61,11 +63,11 @@ _or_
 - [ ] hello, this is another todo item
 - [x] goodbye, this item is done
 </div>
-  ```markdown
+```markdown
 - [ ] hello, this is a todo item
 - [ ] hello, this is another todo item
 - [x] goodbye, this item is done
-  ```
+```
 
 ## Definition list
 
@@ -95,4 +97,3 @@ Definition lists require HTML syntax and aren't supported with the GitHub flavor
   <dd>Green</dd>
 </dl>
 ```
-

docs/ui-components/typography.md

@@ -6,7 +6,7 @@ nav_order: 1
 ---
 
 # Typography
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -24,7 +24,7 @@ By default, Just the Docs uses a native system font stack for sans-serif fonts:
 -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif
 ```
 
-ABCDEFGHIJKLMNOPQRSTUVWXYZ  
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
 abcdefghijklmnopqrstuvwxyz
 {: .fs-5 .ls-10 .code-example }
 
@@ -34,7 +34,7 @@ For monospace type, like code snippets or the pre `<pre>` element, Just the Docs
 "SFMono-Regular", Menlo, Consolas, Monospace
 ```
 
-ABCDEFGHIJKLMNOPQRSTUVWXYZ  
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
 abcdefghijklmnopqrstuvwxyz
 {: .fs-5 .ls-10 .text-mono .code-example }
 
@@ -51,7 +51,7 @@ Just the docs uses a responsive type scale that shifts depending on the viewport
 | `h3`, `.text-gamma`   | 16px                             | 18px                          |
 | `h4`, `.text-delta`   | 14px                             | 16px                          |
 | `h5`, `.text-epsilon` | 16px                             | 18px                          |
-| `h6`, `.text-zeta  `   | 18px                             | 24px                          |
+| `h6`, `.text-zeta`    | 18px                             | 24px                          |
 | `body`                | 14px                             | 16px                          |
 
 ---