1
0
mirror of https://github.com/thangisme/notes.git synced 2024-11-19 21:56:00 -05:00

Fix grammar and capitalization

This commit is contained in:
EricFromCanada 2019-01-14 14:32:41 -05:00
parent ff49d02f83
commit ae5bcfe361
13 changed files with 36 additions and 36 deletions

View File

@ -10,7 +10,7 @@
@import "./vendor/normalize.scss/normalize.scss"; @import "./vendor/normalize.scss/normalize.scss";
// //
// Import Just the docs scss // Import Just the Docs scss
// //
// Support // Support

View File

@ -10,7 +10,7 @@
@import "./vendor/normalize.scss/normalize.scss"; @import "./vendor/normalize.scss/normalize.scss";
// //
// Import Just the docs scss // Import Just the Docs scss
// //
// Support // Support

View File

@ -51,9 +51,9 @@ addEvent(toggleDarkMode, 'click', function(){
## Specific visual customization ## 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. 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 its line and change its value.
For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing. For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing.
#### Example #### Example
{: no_toc } {: no_toc }

View File

@ -25,7 +25,7 @@ By default, all pages will appear as top level pages in the main nav unless a pa
## Ordering pages ## Ordering pages
To specify a page order, use the `nav_order` variable in your pages' YAML front matter. To specify a page order, use the `nav_order` parameter in your pages' YAML front matter.
#### Example #### Example
{: .no_toc } {: .no_toc }
@ -42,7 +42,7 @@ nav_order: 4
## Excluding pages ## Excluding pages
For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page. Use the `nav_exclude: true` parameter in the YAML front matter for that page. For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page, use the `nav_exclude: true` parameter in the YAML front matter for that page.
#### Example #### Example
{: .no_toc } {: .no_toc }
@ -59,7 +59,7 @@ nav_exclude: true
## Pages with children ## Pages with children
Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives us an organization like:
``` ```
+-- .. +-- ..
@ -88,9 +88,9 @@ Sometimes you will want to create a page with many children (a section). First,
+-- .. +-- ..
``` ```
On the parent pages, add 2 YAML front matter variables: On the parent pages, add 2 YAML front matter parameters:
- `has_children: true` (tells us that this a parent page) - `has_children: true` (tells us that this is a parent page)
- `permalink:` set this to the site directories that the contains the pages - `permalink:` set this to the site directory that contains the child pages
#### Example #### Example
{: .no_toc } {: .no_toc }
@ -105,7 +105,7 @@ permalink: /docs/ui-components
--- ---
``` ```
Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, it has children and is ordered second in the main nav. Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, which has children and is ordered second in the main nav.
### Child pages ### Child pages
{: .text-gamma } {: .text-gamma }
@ -124,9 +124,11 @@ nav_order: 2
--- ---
``` ```
The Buttons page appears as a child of UI Components and appears second in the UI Components section.
### Auto-generating Table of Contents ### Auto-generating Table of Contents
By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` on the parent page's YAML front matter. By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` in the parent page's YAML front matter.
#### Example #### Example
{: .no_toc } {: .no_toc }
@ -142,8 +144,6 @@ permalink: /docs/ui-components
--- ---
``` ```
The Buttons page appears a child of UI Components and appears second in the UI Components section.
### Children with children ### Children with children
{: .text-gamma } {: .text-gamma }
@ -175,7 +175,7 @@ nav_order: 1
--- ---
``` ```
Would create the following navigation structure: This would create the following navigation structure:
``` ```
+-- .. +-- ..
@ -211,7 +211,7 @@ aux_links:
## In-page navigation with Table of Contents ## In-page navigation with Table of Contents
To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in markdown. This will automatically generate an ordered list of anchor links to various sections of page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, to skip a particular heading use the `{: .no_toc }` CSS class. To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in Markdown. This will automatically generate an ordered list of anchor links to various sections of the page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, so to skip a particular heading use the `{: .no_toc }` CSS class.
#### Example #### Example
{: .no_toc } {: .no_toc }

View File

@ -15,7 +15,7 @@ nav_order: 7
--- ---
Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated html pages are indexed using the following data points: Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated HTML pages are indexed using the following data points:
- Page title - Page title
- Page content - Page content
@ -52,7 +52,7 @@ _Note: If you don't run this rake command or create this file manually, search w
### Enable search in configuration ### Enable search in configuration
In your site's `_config.yml` enable search: In your site's `_config.yml`, enable search:
```yml ```yml
# Enable or disable the site search # Enable or disable the site search
@ -61,7 +61,7 @@ search_enabled: true
## Hiding pages from search ## Hiding pages from search
Sometimes you might have a page that you don't want indexed in the search and you don't want it to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter: Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
#### Example #### Example
{: .no_toc } {: .no_toc }

View File

@ -41,7 +41,7 @@ nav_order: 2
### Button element ### Button element
GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this: GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this:
<div class="code-example"> <div class="code-example">
<button type="button" name="button" class="btn">Button element</button> <button type="button" name="button" class="btn">Button element</button>

View File

@ -18,7 +18,7 @@ nav_order: 6
## Inline code ## Inline code
Code can be rendered inline using single ticks by wrapping your code in single back ticks. Code can be rendered inline by wrapping it in single back ticks.
<div class="code-example" markdown="1"> <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. Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@ -31,7 +31,7 @@ Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiu
## Syntax highlighted code blocks ## Syntax highlighted code blocks
Use Jekyll's built in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name: Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">
```js ```js
@ -56,7 +56,7 @@ var fun = function lang(l) {
## Code blocks with rendered examples ## Code blocks with rendered examples
To demonstrate front end code, sometimes it useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a div with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta... To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `<div>` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">

View File

@ -16,7 +16,7 @@ nav_order: 5
--- ---
Most lists can be rendered with pure markdown... Most lists can be rendered with pure Markdown.
## Unordered list ## Unordered list
@ -71,7 +71,7 @@ _or_
## Definition list ## Definition list
Definition lists require HTML syntax and aren't supported with the GitHub flavored markdown compiler. Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
<div class="code-example" markdown="1"> <div class="code-example" markdown="1">
<dl> <dl>

View File

@ -28,7 +28,7 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
{: .fs-5 .ls-10 .code-example } {: .fs-5 .ls-10 .code-example }
For monospace type, like code snippets or the pre `<pre>` element, Just the Docs uses a native system font stack for monospace fonts: For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
```scss ```scss
"SFMono-Regular", Menlo, Consolas, Monospace "SFMono-Regular", Menlo, Consolas, Monospace
@ -42,7 +42,7 @@ abcdefghijklmnopqrstuvwxyz
## Responsive type scale ## Responsive type scale
Just the docs uses a responsive type scale that shifts depending on the viewport size. Common elements text elements rendered from markdown use a Just the Docs uses a responsive type scale that shifts depending on the viewport size.
| Selector | Small screen size `font-size` | Large screen size `font-size` | | Selector | Small screen size `font-size` | Large screen size `font-size` |
|:----------------------|:---------------------------------|:------------------------------| |:----------------------|:---------------------------------|:------------------------------|
@ -109,6 +109,6 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
## Typographic Utilities ## Typographic Utilities
There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization. There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
[View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline } [View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }

View File

@ -16,7 +16,7 @@ parent: Utilities
--- ---
All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes. All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes.
## Light Greys ## Light Greys

View File

@ -57,9 +57,9 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
#### Examples #### Examples
{: .no_toc } {: .no_toc }
```markdown
In Markdown, use the `{: }` wrapper to apply custom classes: In Markdown, use the `{: }` wrapper to apply custom classes:
```markdown
This paragraph will have a margin bottom of 1rem/16px at large screens. This paragraph will have a margin bottom of 1rem/16px at large screens.
{: .mb-lg-4 } {: .mb-lg-4 }
@ -95,9 +95,9 @@ Use these classes in conjunction with the responsive modifiers.
#### Examples #### Examples
{: .no_toc } {: .no_toc }
```markdown
In Markdown, use the `{: }` wrapper to apply custom classes: In Markdown, use the `{: }` wrapper to apply custom classes:
```markdown
This button will be hidden until medium screen sizes: This button will be hidden until medium screen sizes:
[ A button ](#url) [ A button ](#url)

View File

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

View File

@ -2,14 +2,14 @@
layout: default layout: default
title: Home title: Home
nav_order: 1 nav_order: 1
description: "Just the Docs is a responsive Jekyll theme with built-in search that is easily customizable and hosted on GitHub pages." description: "Just the Docs is a responsive Jekyll theme with built-in search that is easily customizable and hosted on GitHub Pages."
permalink: / permalink: /
--- ---
# Focus on writing good documentation # Focus on writing good documentation
{: .fs-9 } {: .fs-9 }
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages. Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub Pages.
{: .fs-6 .fw-300 } {: .fs-6 .fw-300 }
[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 .mb-4 .mb-md-0 } [Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 .mb-4 .mb-md-0 }
@ -19,8 +19,8 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them
## Getting started ## Getting started
### Dependencies ### 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.
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 ### Quick start: Use as a GitHub Pages remote theme
@ -28,7 +28,7 @@ Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generat
```yaml ```yaml
remote_theme: pmarsceill/just-the-docs 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> <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 ### Local installation: Use the gem-based theme