Make spacing consistent

docs/configuration.md

@@ -39,12 +39,12 @@ const originalCssRef = cssFile.getAttribute('href')
 const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
 
 addEvent(toggleDarkMode, 'click', function(){
-if (cssFile.getAttribute('href') === originalCssRef) {
-cssFile.setAttribute('href', darkModeCssRef)
-} else {
-cssFile.setAttribute('href', originalCssRef)
-}
+  if (cssFile.getAttribute('href') === originalCssRef) {
+    cssFile.setAttribute('href', darkModeCssRef)
+  } else {
+    cssFile.setAttribute('href', originalCssRef)
+  }
 })
 </script>
 
-See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information.
+See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.

docs/customization.md

@@ -5,7 +5,7 @@ nav_order: 6
 ---
 
 # Customization
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -49,7 +49,6 @@ addEvent(toggleDarkMode, 'click', function(){
 })
 </script>
 
-
 ## Specific visual customization
 
 To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value.
@@ -72,4 +71,3 @@ $link-color: $blue-000;
 _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail.
 
 ---
-

docs/navigation-structure.md

@@ -29,6 +29,7 @@ To specify a page order, use the `nav_order` variable in your pages' YAML front
 
 #### Example
 {: .no_toc }
+
 ```yaml
 ---
 layout: default
@@ -45,6 +46,7 @@ For specific pages that you do not wish to include in the main navigation, e.g.
 
 #### Example
 {: .no_toc }
+
 ```yaml
 ---
 layout: default
@@ -92,6 +94,7 @@ On the parent pages, add 2 YAML front matter variables:
 
 #### Example
 {: .no_toc }
+
 ```yaml
 ---
 layout: default
@@ -111,6 +114,7 @@ On child pages, simply set the `parent:` YAML front matter to whatever the paren
 
 #### Example
 {: .no_toc }
+
 ```yaml
 ---
 layout: default
@@ -126,6 +130,7 @@ By default, all pages with children will automatically append a Table of Content
 
 #### Example
 {: .no_toc }
+
 ```yaml
 ---
 layout: default
@@ -142,7 +147,7 @@ The Buttons page appears a child of UI Components and appears second in the UI C
 ### Children with children
 {: .text-gamma }
 
-Child pages can also have children (grand children). This is achieved by using a similar pattern on the child and grand child pages.
+Child pages can also have children (grandchildren). This is achieved by using a similar pattern on the child and grandchild pages.
 
 1. Add the `has_children` attribute to the child
 1. Add the `parent` and `grand_parent` attribute to the grandchild
@@ -198,7 +203,7 @@ To add a auxiliary navigation item to your site (in the upper right on all pages
 ```yml
 # Aux links for the upper right navigation
 aux_links:
-"Just the Docs on GitHub":
+  "Just the Docs on GitHub":
     - "//github.com/pmarsceill/just-the-docs"
 ```
 

docs/search.md

@@ -5,7 +5,7 @@ nav_order: 7
 ---
 
 # Search
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -25,16 +25,13 @@ Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search inte
 
 ### Generate search index
 
-Before you can use search, you must initialize the feature by running this
-rake command that comes with the `just-the-docs`
+Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
 
 ```bash
 $ bundle exec just-the-docs rake search:init
 ```
 
-This command creates the `search-data.json` file that Jekyll uses to create
-your search index. Alternatively, you can create the file manually in the
-`assets/js/` of your Jekyll site with this content:
+This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the `assets/js/` directory of your Jekyll site with this content:
 
 ```{% raw %}
 ---
@@ -68,6 +65,7 @@ Sometimes you might have a page that you don't want indexed in the search and yo
 
 #### Example
 {: .no_toc }
+
 ```yaml
 ---
 layout: default

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                          |
 
 ---

docs/utilities/color.md

@@ -6,7 +6,7 @@ parent: Utilities
 ---
 
 # Color Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }

docs/utilities/layout.md

@@ -7,7 +7,7 @@ has_children: true
 ---
 
 # Layout Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -65,7 +65,6 @@ This paragraph will have a margin bottom of 1rem/16px at large screens.
 
 This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
 {: .px-6 }
-
 ```
 
 ## Vertical Alignment
@@ -111,5 +110,4 @@ These headings will be `inline-block`:
 
 ### heading 3
 { .d-inline-block }
-
 ```

docs/utilities/typography.md

@@ -6,7 +6,7 @@ parent: Utilities
 ---
 
 # Typography Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -117,33 +117,31 @@ Use the `lh-` classes to explicitly apply line height to text.
 | `.lh-tight`   | 1.1                  | Default for headings          |
 | `.lh-default` | 1.4                  | Default for body (paragraphs) |
 
-
-
 <div class="code-example" markdown="1">
-No Line height  
+No Line height
 No Line height
 {: .lh-0 }
 
-Tight line height  
+Tight line height
 Tight line height
 {: .lh-tight }
 
-Default line height  
+Default line height
 Default line height
 {: .fh-default }
 </div>
 ```markdown
 In Markdown, use the `{: }` wrapper to apply custom classes:
 
-No Line height  
+No Line height
 No Line height
 {: .lh-0 }
 
-Tight line height  
+Tight line height
 Tight line height
 {: .lh-tight }
 
-Default line height  
+Default line height
 Default line height
 {: .fh-default }
 ```

docs/utilities/utilities.md

@@ -7,7 +7,7 @@ permalink: docs/utilities
 ---
 
 # Utilities
-{:.no_toc}
+{: .no_toc }
 
 CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
 {: .fs-6 .fw-300 }