mirror of
https://github.com/thangisme/notes.git
synced 2024-12-30 13:26:36 -05:00
Make spacing consistent
This commit is contained in:
parent
b3fb5ebd87
commit
ff49d02f83
@ -9,7 +9,6 @@
|
||||
<br><br><br>
|
||||
</p>
|
||||
|
||||
|
||||
![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
|
||||
|
||||
## Installation
|
||||
|
@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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 }
|
||||
|
||||
|
@ -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.
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
```
|
||||
|
||||
|
@ -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 }
|
||||
|
||||
```
|
||||
|
@ -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
|
||||
|
8
index.md
8
index.md
@ -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.
|
||||
|
Loading…
Reference in New Issue
Block a user