Make spacing consistent

Mi-Lan · Jan 14, 2019 · ff49d02 · ff49d02
1 parent b3fb5eb
commit ff49d02
Show file tree

Hide file tree

Showing 16 changed files with 65 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,6 @@
     <br><br><br>
 </p>
 
-
 ![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
 
 ## Installation
@@ -60,7 +59,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/pmarsc
 
 To set up your environment to develop this theme, run `bundle install`.
 
-Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+Your theme is set up just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
 
 When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
 

diff --git a/bin/just-the-docs b/bin/just-the-docs
@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
 gem_dir = File.expand_path("..",File.dirname(__FILE__))
-$LOAD_PATH.unshift gem_dir# Look in gem directory for resources first.
+$LOAD_PATH.unshift gem_dir # Look in gem directory for resources first.
 exec_type = ARGV[0]
 
 if exec_type == 'rake' then

diff --git a/docs/configuration.md b/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.
diff --git a/docs/customization.md b/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.
 
 ---
-
diff --git a/docs/navigation-structure.md b/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"
 ```
 

diff --git a/docs/search.md b/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

diff --git a/docs/ui-components/buttons.md b/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,19 +56,16 @@ 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>
 
 <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 }
 ```
diff --git a/docs/ui-components/code.md b/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.

diff --git a/docs/ui-components/labels.md b/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 }
 ```
diff --git a/docs/ui-components/lists.md b/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,30 +43,31 @@ _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">
 - [ ] hello, this is a todo item
 - [ ] 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>
 ```
-