Make spacing consistent

This commit is contained in:
EricFromCanada 2019-01-14 14:18:09 -05:00
parent b3fb5ebd87
commit ff49d02f83
16 changed files with 65 additions and 78 deletions

View File

@ -9,7 +9,6 @@
<br><br><br>
</p>
![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
## Installation

View File

@ -49,7 +49,6 @@ addEvent(toggleDarkMode, 'click', function(){
})
</script>
## Specific visual customization
To customize your sites 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 its line and change its 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.
---

View File

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

View File

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

View File

@ -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,7 +82,6 @@ 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 }

View File

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

View File

@ -10,7 +10,6 @@ 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 }
@ -28,7 +27,6 @@ Coming soon
Deprecated
{: .label .label-red }
</div>
```markdown
Default label

View File

@ -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,8 +43,8 @@ _or_
* Item 3
```
## Ordered list
<div class="code-example" markdown="1">
1. Item 1
1. Item 2
@ -54,6 +55,7 @@ _or_
1. Item 2
1. Item 3
```
## Task list
<div class="code-example" markdown="1">
@ -95,4 +97,3 @@ Definition lists require HTML syntax and aren't supported with the GitHub flavor
<dd>Green</dd>
</dl>
```

View File

@ -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 }
```

View File

@ -117,8 +117,6 @@ 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

View File

@ -6,7 +6,6 @@ description: "Just the Docs is a responsive Jekyll theme with built-in search th
permalink: /
---
# Focus on writing good documentation
{: .fs-9 }
@ -18,10 +17,13 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them
---
## Getting started
### Dependencies
Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages standard Jekyll compiler.
### Quick start: Use as a GitHub Pages remote theme
1. Add Just the Docs to your Jekyll site's `_config.yml` as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/)
```yaml
remote_theme: pmarsceill/just-the-docs
@ -29,6 +31,7 @@ remote_theme: pmarsceill/just-the-docs
<small>You must have GitHub pages enabled on your repo, one or more markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote)</small>
### Local installation: Use the gem-based theme
1. Install the Ruby Gem
```bash
$ gem install just-the-docs
@ -56,8 +59,8 @@ $ bundle exec jekyll serve
4. Point your web browser to [http://localhost:4000](http://localhost:4000)
### Configure Just the Docs
- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
---
@ -74,7 +77,6 @@ Just the Docs is distributed by an [MIT license](https://github.com/pmarsceill/j
When contributing to this repository, please first discuss the change you wish to make via issue,
email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in [our GitHub repo](https://github.com/pmarsceill/just-the-docs#contributing).
### Code of Conduct
Just the Docs is committed to fostering a welcoming community.