thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2024-11-14 01:37:37 -05:00
Code Issues Projects Releases Wiki Activity

Initial Draft

Browse Source
This commit is contained in:
Quang Thang 2020-12-14 12:38:40 +07:00
parent e842498637
commit 20213e4da7
27 changed files with 63 additions and 1963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_config.yml
View File

@ -13,10 +13,10 @@
# you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: Just the Docs
title: Quang Thắng
description: A Jekyll theme for documentation
baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
url: "https://pmarsceill.github.io" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
permalink: pretty
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"

198
docs/configuration.md
View File

@ -1,198 +0,0 @@
---
layout: default
title: Configuration
nav_order: 2
---
# Configuration
{: .no_toc }
Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's _config.yml file.
{: .fs-6 .fw-300 }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
## Site logo
```yaml
# Set a path/url to a logo that will be displayed instead of the title
logo: "/assets/images/just-the-docs.png"
```
## Search
```yaml
# Enable or disable the site search
# Supports true (default) or false
search_enabled: true
search:
# Split pages into sections that can be searched individually
# Supports 1 - 6, default: 2
heading_level: 2
# Maximum amount of previews per search result
# Default: 3
previews: 3
# Maximum amount of words to display before a matched word in the preview
# Default: 5
preview_words_before: 5
# Maximum amount of words to display after a matched word in the preview
# Default: 10
preview_words_after: 10
# Set the search token separator
# Default: /[\s\-/]+/
# Example: enable support for hyphenated search words
tokenizer_separator: /[\s/]+/
# Display the relative url in search results
# Supports true (default) or false
rel_url: true
# Enable or disable the search button that appears in the bottom right corner of every page
# Supports true or false (default)
button: false
```
## Aux links
```yaml
# Aux links for the upper right navigation
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
# Makes Aux links open in a new tab. Default is false
aux_links_new_tab: false
```
## Heading anchor links
```yaml
# Heading anchor links appear on hover over h1-h6 tags in page content
# allowing users to deep link to a particular heading on a page.
#
# Supports true (default) or false
heading_anchors: true
```
## Footer content
```yaml
# Footer content
# appears at the bottom of every page's main content
# Note: The footer_content option is deprecated and will be removed in a future major release. Please use `_includes/footer_custom.html` for more robust
markup / liquid-based content.
footer_content: "Copyright &copy; 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
# Footer last edited timestamp
last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
# Footer "Edit this page on GitHub" link text
gh_edit_link: true # show or hide edit this page link
gh_edit_link_text: "Edit this page on GitHub."
gh_edit_repository: "https://github.com/pmarsceill/just-the-docs" # the github URL for your repo
gh_edit_branch: "master" # the branch that your docs is served from
# gh_edit_source: docs # the source that your files originate from
gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
```
_note: `footer_content` is deprecated, but still supported. For a better experience we have moved this into an include called `_includes/footer_custom.html` which will allow for robust markup / liquid-based content._
- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format
- `last_edit_time_format` uses Ruby's DateTime formatter; see examples and more information [at this link.](https://apidock.com/ruby/DateTime/strftime)
- `gh_edit_repository` is the URL of the project's GitHub repository
- `gh_edit_branch` is the branch that the docs site is served from; defaults to `master`
- `gh_edit_source` is the source directory that your project files are stored in (should be the same as [site.source](https://jekyllrb.com/docs/configuration/options/))
- `gh_edit_view_mode` is `"tree"` by default, which brings the user to the github page; switch to `"edit"` to bring the user directly into editing mode
## Color scheme
```yaml
# Color scheme supports "light" (default) and "dark"
color_scheme: dark
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script>
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
jtd.addEvent(toggleDarkMode, 'click', function(){
if (jtd.getTheme() === 'dark') {
jtd.setTheme('light');
toggleDarkMode.textContent = 'Preview dark color scheme';
} else {
jtd.setTheme('dark');
toggleDarkMode.textContent = 'Return to the light side';
}
});
</script>
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
## Google Analytics
```yaml
# Google Analytics Tracking (optional)
# e.g, UA-1234567-89
ga_tracking: UA-5555555-55
ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true by default)
```
## Document collections
By default, the navigation and search include normal [pages](https://jekyllrb.com/docs/pages/).
Instead, you can also use [Jekyll collections](https://jekyllrb.com/docs/collections/) which group documents semantically together.
For example, put all your documentation files in the `_docs` folder and create the `docs` collection:
```yaml
# Define Jekyll collections
collections:
# Define a collection named "docs", its documents reside in the "_docs" directory
docs:
permalink: "/:collection/:path/"
output: true
just_the_docs:
# Define which collections are used in just-the-docs
collections:
# Reference the "docs" collection
docs:
# Give the collection a name
name: Documentation
# Exclude the collection from the navigation
# Supports true or false (default)
nav_exclude: false
# Exclude the collection from the search
# Supports true or false (default)
search_exclude: false
```
You can reference multiple collections.
This creates categories in the navigation with the configured names.
```yaml
collections:
docs:
permalink: "/:collection/:path/"
output: true
tutorials:
permalink: "/:collection/:path/"
output: true
just_the_docs:
collections:
docs:
name: Documentation
tutorials:
name: Tutorials
```

115
docs/customization.md
View File

@ -1,115 +0,0 @@
---
layout: default
title: Customization
nav_order: 6
---
# Customization
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Color schemes
{: .d-inline-block }
New
{: .label .label-green }
Just the Docs supports two color schemes: light (default), and dark.
To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file:
#### Example
{: .no_toc }
```yaml
# Color scheme supports "light" (default) and "dark"
color_scheme: dark
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script>
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
jtd.addEvent(toggleDarkMode, 'click', function(){
if (jtd.getTheme() === 'dark') {
jtd.setTheme('light');
toggleDarkMode.textContent = 'Preview dark color scheme';
} else {
jtd.setTheme('dark');
toggleDarkMode.textContent = 'Return to the light side';
}
});
</script>
## Custom schemes
### Define a custom scheme
You can add custom schemes.
If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name)
where you override theme variables to change colors, fonts, spacing, etc.
Available variables are listed in the [_variables.scss](https://github.com/pmarsceill/just-the-docs/tree/master/_sass/support/_variables.scss) file.
For example, to change the link color from the purple default to blue, include the following inside your scheme file:
#### Example
{: .no_toc }
```scss
$link-color: $blue-000;
```
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
Please use scheme files.
### Use a custom scheme
To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file:
```yaml
color_scheme: foo
```
### Switchable custom scheme
If you want to be able to change the scheme dynamically, for example via javascript, just add a file `assets/css/just-the-docs-foo.scss` (replace `foo` by your scheme name)
with the following content:`
{% raw %}
---
---
{% include css/just-the-docs.scss.liquid color_scheme="foo" %}
{% endraw %}
This allows you to switch the scheme via the following javascript.
```js
jtd.setTheme('foo');
```
## Override and completely custom styles
For styles that aren't defined as variables, you may want to modify specific CSS classes.
Additionally, you may want to add completely custom CSS specific to your content.
To do this, put your styles in the file `_sass/custom/custom.scss`.
This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
For example, if you'd like to add your own styles for printing a page, you could add the following styles.
#### Example
{: .no_toc }
```scss
// Print-only styles.
@media print {
.side-bar, .page-header { display: none; }
.main-content { max-width: auto; margin: 1em;}
}
```

9
docs/hoa-hoc/hoa-hoc.md Normal file
View File

@ -0,0 +1,9 @@
---
layout: default
title: Hóa học
has_children: true
permalink: hoa-hoc
nav_order: 4
---
# Hóa học

7
docs/hoa-hoc/lop-10/lop-10.md Normal file
View File

@ -0,0 +1,7 @@
---
layout: default
title: Hóa học 10
has_children: true
permalink: hoa-hoc/lop-10
parent: Hóa học
---

180
docs/index-test.md
View File

@ -1,180 +0,0 @@
---
layout: default
title: Markdown kitchen sink
nav_order: 99
---
Text can be **bold**, _italic_, or ~~strikethrough~~.
[Link to another page](another-page).
There should be whitespace between paragraphs.
There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
# [](#header-1)Header 1
This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
## [](#header-2)Header 2
> This is a blockquote following a header.
>
> When something is important enough, you do it even if the odds are not in your favor.
### [](#header-3)Header 3
```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l)
return true;
}
```
```ruby
# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
```
#### [](#header-4)Header 4 `with code not transformed`
* This is an unordered list following a header.
* This is an unordered list following a header.
* This is an unordered list following a header.
##### [](#header-5)Header 5
1. This is an ordered list following a header.
2. This is an ordered list following a header.
3. This is an ordered list following a header.
###### [](#header-6)Header 6
| head1 | head two | three |
|:-------------|:------------------|:------|
| ok | good swedish fish | nice |
| out of stock | good and plenty | nice |
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
### There's a horizontal rule below this.
* * *
### Here is an unordered list:
* Item foo
* Item bar
* Item baz
* Item zip
### And an ordered list:
1. Item one
1. Item two
1. Item three
1. Item four
### And a nested list:
- level 1 item
- level 2 item
- level 2 item
- level 3 item
- level 3 item
- level 1 item
- level 2 item
- level 2 item
- level 2 item
- level 1 item
- level 2 item
- level 2 item
- level 1 item
### Nesting an ol in ul in an ol
- level 1 item (ul)
1. level 2 item (ol)
1. level 2 item (ol)
- level 3 item (ul)
- level 3 item (ul)
- level 1 item (ul)
1. level 2 item (ol)
1. level 2 item (ol)
- level 3 item (ul)
- level 3 item (ul)
1. level 4 item (ol)
1. level 4 item (ol)
- level 3 item (ul)
- level 3 item (ul)
- level 1 item (ul)
### And a task list
- [ ] Hello, this is a TODO item
- [ ] Hello, this is another TODO item
- [x] Goodbye, this item is done
### Small image
![](https://assets-cdn.github.com/images/icons/emoji/octocat.png)
### Large image
![](https://guides.github.com/activities/hello-world/branching.png)
### Definition lists can be used with HTML syntax.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
#### Multiple description terms and values
Term
: Brief description of Term
Longer Term
: Longer description of Term,
possibly more than one line
Term
: First description of Term,
possibly more than one line
: Second description of Term,
possibly more than one line
Term1
Term2
: Single description of Term1 and Term2,
possibly more than one line
Term1
Term2
: First description of Term1 and Term2,
possibly more than one line
: Second description of Term1 and Term2,
possibly more than one line
### More code
```
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
```
```
The final element.
```

259
docs/navigation-structure.md
View File

@ -1,259 +0,0 @@
---
layout: default
title: Navigation Structure
nav_order: 5
---
# Navigation Structure
{: .no_toc }
<details open markdown="block">
<summary>
Table of contents
</summary>
{: .text-delta }
1. TOC
{:toc}
</details>
---
## Main navigation
The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren).
By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)).
---
## Ordering pages
To specify a page order, you can use the `nav_order` parameter in your pages' YAML front matter.
#### Example
{: .no_toc }
```yaml
---
layout: default
title: Customization
nav_order: 4
---
```
The parameter values determine the order of the top-level pages, and of child pages with the same parent. You can reuse the same parameter values (e.g., integers starting from 1) for the child pages of different parents.
The parameter values can be numbers (integers, floats) and/or strings. When you omit `nav_order` parameters, they default to the titles of the pages, which are ordered alphabetically. Pages with numerical `nav_order` parameters always come before those with strings or default `nav_order` parameters. If you want to make the page order independent of the page titles, you can set explicit `nav_order` parameters on all pages.
By default, all Capital letters come before all lowercase letters; you can add `nav_sort: case_insensitive` in the configuration file to ignore the case. Enclosing strings in quotation marks is optional.
> *Note for users of previous versions:* `nav_sort: case_insensitive` previously affected the ordering of numerical `nav_order` parameters: e.g., `10` came before `2`. Also, all pages with explicit `nav_order` parameters previously came before all pages with default parameters. Both were potentially confusing, and they have now been eliminated.
---
## 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.
#### Example
{: .no_toc }
```yaml
---
layout: default
title: 404
nav_exclude: true
---
```
The `nav_exclude` parameter does not affect the [auto-generating list of child pages](#auto-generating-table-of-contents), which you can use to access pages excluded from the main navigation.
Pages with no `title` are automatically excluded from the navigation.
---
## 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 us an organization like:
```
+-- ..
|-- (Jekyll files)
|
|-- docs
| |-- ui-components
| | |-- index.md (parent page)
| | |-- buttons.md
| | |-- code.md
| | |-- labels.md
| | |-- tables.md
| | +-- typography.md
| |
| |-- utilities
| | |-- index.md (parent page)
| | |-- color.md
| | |-- layout.md
| | |-- responsive-modifiers.md
| | +-- typography.md
| |
| |-- (other md files, pages with no children)
| +-- ..
|
|-- (Jekyll files)
+-- ..
```
On the parent pages, add this YAML front matter parameter:
- `has_children: true` (tells us that this is a parent page)
#### Example
{: .no_toc }
```yaml
---
layout: default
title: UI Components
nav_order: 2
has_children: true
---
```
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
{: .text-gamma }
On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section).
#### Example
{: .no_toc }
```yaml
---
layout: default
title: Buttons
parent: UI Components
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
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
{: .no_toc }
```yaml
---
layout: default
title: UI Components
nav_order: 2
has_children: true
has_toc: false
---
```
### Children with children
{: .text-gamma }
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
#### Example
{: .no_toc }
```yaml
---
layout: default
title: Buttons
parent: UI Components
nav_order: 2
has_children: true
---
```
```yaml
---
layout: default
title: Buttons Child Page
parent: Buttons
grand_parent: UI Components
nav_order: 1
---
```
This would create the following navigation structure:
```
+-- ..
|
|-- UI Components
| |-- ..
| |
| |-- Buttons
| | |-- Button Child Page
| |
| |-- ..
|
+-- ..
```
---
## Auxiliary Links
To add auxiliary links to your site (in the upper right on all pages), add it to the `aux_links` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-links) in your site's `_config.yml` file.
#### Example
{: .no_toc }
```yaml
# Aux links for the upper right navigation
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
```
---
## 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 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
{: .no_toc }
```markdown
# Navigation Structure
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
```
This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself. To get an unordered list, replace `1. TOC` above by `- TOC`.
### Collapsible Table of Contents
The Table of Contents can be made collapsible using the `<details>` and `<summary>` elements , as in the following example. The attribute `open` (expands the Table of Contents by default) and the styling with `{: .text-delta }` are optional.
```markdown
<details open markdown="block">
<summary>
Table of contents
</summary>
{: .text-delta }
1. TOC
{:toc}
</details>
```
The result is shown at [the top of this page](#navigation-structure) (`{:toc}` can be used only once on each page).

127
docs/search.md
View File

@ -1,127 +0,0 @@
---
layout: default
title: Search
nav_order: 7
---
# Search
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
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 content
- Page URL
## Enable search in configuration
In your site's `_config.yml`, enable search:
```yaml
# Enable or disable the site search
# Supports true (default) or false
search_enabled: true
```
### Search granularity
Pages are split into sections that can be searched individually.
The sections are defined by the headings on the page.
Each section is displayed in a separate search result.
```yaml
# Split pages into sections that can be searched individually
# Supports 1 - 6, default: 2
search.heading_level: 2
```
### Search previews
A search result can contain previews that show where the search words are found in the specific section.
```yaml
# Maximum amount of previews per search result
# Default: 3
search.previews: 3
# Maximum amount of words to display before a matched word in the preview
# Default: 5
search.preview_words_before: 5
# Maximum amount of words to display after a matched word in the preview
# Default: 10
search.preview_words_after: 10
```
### Search tokenizer
The default is for hyphens to separate tokens in search terms:
`gem-based` is equivalent to `gem based`, matching either word.
To allow search for hyphenated words:
```yaml
# Set the search token separator
# Default: /[\s\-/]+/
# Example: enable support for hyphenated search words
search.tokenizer_separator: /[\s/]+/
```
### Display URL in search results
```yaml
# Display the relative url in search results
# Supports true (default) or false
search.rel_url: false
```
### Display search button
The search button displays in the bottom right corner of the screen and triggers the search input when clicked.
```yaml
# Enable or disable the search button that appears in the bottom right corner of every page
# Supports true or false (default)
search.button: true
```
## Hiding pages from search
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
{: .no_toc }
```yaml
---
layout: default
title: Page not found
nav_exclude: true
search_exclude: true
---
```
## Generate search index when used as a gem
If you use Just the Docs as a remote theme, you do not need the following steps.
If you use the theme as a gem, you must initialize the search by running this `rake` command that comes with `just-the-docs`:
```bash
$ bundle exec just-the-docs rake search:init
```
This command creates the `assets/js/zzzz-search-data.json` file that Jekyll uses to create your search index.
Alternatively, you can create the file manually with [this content]({{ site.github.repository_url }}/blob/master/assets/js/zzzz-search-data.json).

8
docs/tieng-anh/tieng-anh.md Normal file
View File

@ -0,0 +1,8 @@
---
layout: default
title: Tiếng Anh
has_children: true
permalink: tieng-anh
---
# Tiếng Anh

7
docs/toan/lop-10/lop-10.md Normal file
View File

@ -0,0 +1,7 @@
---
layout: default
title: Toán 10
parent: Toán
has_children: true
permalink: toan/lop-10
---

9
docs/toan/toan.md Normal file
View File

@ -0,0 +1,9 @@
---
layout: default
title: Toán
nav_order: 1
has_children: true
permalink: toan
---
# Toán

97
docs/ui-components/buttons.md
View File

@ -1,97 +0,0 @@
---
layout: default
title: Buttons
parent: UI Components
nav_order: 2
---
# Buttons
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Basic button styles
### Links that look like buttons
<div class="code-example" markdown="1">
[Link button](http://example.com/){: .btn }
[Link button](http://example.com/){: .btn .btn-purple }
[Link button](http://example.com/){: .btn .btn-blue }
[Link button](http://example.com/){: .btn .btn-green }
[Link button](http://example.com/){: .btn .btn-outline }
</div>
```markdown
[Link button](http://example.com/){: .btn }
[Link button](http://example.com/){: .btn .btn-purple }
[Link button](http://example.com/){: .btn .btn-blue }
[Link button](http://example.com/){: .btn .btn-green }
[Link button](http://example.com/){: .btn .btn-outline }
```
### Button element
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>
```
---
## Using utilities with buttons
### Button size
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">
[Link button](http://example.com/){: .btn }
</span>
<span class="fs-3">
[Tiny ass button](http://example.com/){: .btn }
</span>
```
### Spacing between buttons
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout.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 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 ](http://example.com/){: .btn .btn-blue }
[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
[Button ](http://example.com/){: .btn .btn-blue }
```

88
docs/ui-components/code.md
View File

@ -1,88 +0,0 @@
---
layout: default
title: Code
parent: UI Components
has_children: true
nav_order: 6
---
# Code
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Inline code
Code can be rendered inline by wrapping it 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.
## Heading with `<inline code snippet>` in it.
{: .no_toc }
</div>
```markdown
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
## Heading with `<inline code snippet>` in it.
```
---
## 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:
<div class="code-example" markdown="1">
```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l)
return true;
}
```
</div>
{% highlight markdown %}
```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l)
return true;
}
```
{% endhighlight %}
---
## Code blocks with rendered examples
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">
[Link button](http://example.com/){: .btn }
</div>
```markdown
[Link button](http://example.com/){: .btn }
```
</div>
{% highlight markdown %}
<div class="code-example" markdown="1">
[Link button](http://example.com/){: .btn }
</div>
```markdown
[Link button](http://example.com/){: .btn }
```
{% endhighlight %}

49
docs/ui-components/labels.md
View File

@ -1,49 +0,0 @@
---
layout: default
title: Labels
parent: UI Components
nav_order: 3
---
# Labels
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 }
Stable
{: .label .label-green }
New release
{: .label .label-purple }
Coming soon
{: .label .label-yellow }
Deprecated
{: .label .label-red }
</div>
```markdown
Default label
{: .label }
Blue label
{: .label .label-blue }
Stable
{: .label .label-green }
New release
{: .label .label-purple }
Coming soon
{: .label .label-yellow }
Deprecated
{: .label .label-red }
```

115
docs/ui-components/line-nos.md
View File

@ -1,115 +0,0 @@
---
layout: default
title: Code with line numbers
parent: Code
grand_parent: UI Components
permalink: /docs/ui-components/code/line-numbers/
---
# Code snippets with line numbers
The default settings for HTML compression are incompatible with the HTML
produced by Jekyll (4.1.1 or earlier) for line numbers from highlighted code
-- both when using Kramdown code fences and when using Liquid highlight tags.
To avoid non-conforming HTML and unsatisfactory layout, HTML compression
can be turned off by using the following configuration option:
{% highlight yaml %}
compress_html:
ignore:
envs: all
{% endhighlight %}
When using Kramdown code fences, line numbers are turned on globally by the
following configuration option:
{% highlight yaml %}
kramdown:
syntax_highlighter_opts:
block:
line_numbers: true
{% endhighlight %}
Line numbers can then be suppressed locally using Liquid tags (_without_ the
`linenos` option) instead of fences:
{% highlight yaml %}
{% raw %}{% highlight some_language %}
Some code
{% endhighlight %}{% endraw %}
{% endhighlight %}
## Workarounds
To use HTML compression together with line numbers, all highlighted code
needs to be wrapped using one of the following workarounds.
(The variable name `some_var` can be changed to avoid clashes; it can also
be replaced by `code` -- but note that `code=code` cannot be removed).
### Code fences (three backticks)
{% highlight default %}
{% raw %}{% capture some_var %}
```some_language
Some code
```
{% endcapture %}
{% assign some_var = some_var | markdownify %}
{% include fix_linenos.html code=some_var %}{% endraw %}
{% endhighlight %}
### Liquid highlighting
{% highlight default %}
{% raw %}{% capture some_var %}
{% highlight some_language linenos %}
Some code
{% endhighlight %}
{% endcapture %}
{% include fix_linenos.html code=some_var %}{% endraw %}
{% endhighlight %}
_Credit:_ The original version of the above workaround was suggested by
Dmitry Hrabrov at
<https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901>.
## Examples
✅ Using code fences + workaround (will only show line numbers if enabled globally in `_config.yml`):
{% capture code_fence %}
```js
// Javascript code with syntax highlighting in fences
var fun = function lang(l) {
dateformat.i18n = require('./lang/' + l)
return true;
}
```
{% endcapture %}
{% assign code_fence = code_fence | markdownify %}
{% include fix_linenos.html code=code_fence %}
✅ Using liquid highlighting + workaround:
{% capture code %}
{% highlight ruby linenos %}
# Ruby code with syntax highlighting and fixed line numbers using Liquid
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
{% endhighlight %}
{% endcapture %}
{% include fix_linenos.html code=code %}
{% assign code = nil %}
❌ With the default configuration options, the following example illustrates
the **incorrect** formatting arising from the incompatibility of HTML compression
and the non-conforming HTML produced by Jekyll for line numbers:
{% highlight ruby linenos %}
# Ruby code with syntax highlighting and unfixed line numbers using Liquid
GitHubPages::Dependencies.gems.each do |gem, version|
s.add_dependency(gem, "= #{version}")
end
{% endhighlight %}

99
docs/ui-components/lists.md
View File

@ -1,99 +0,0 @@
---
layout: default
title: Lists
parent: UI Components
nav_order: 5
---
# Lists
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
Most lists can be rendered with pure Markdown.
## Unordered list
<div class="code-example" markdown="1">
- Item 1
- Item 2
- Item 3
_or_
* Item 1
* Item 2
* Item 3
</div>
```markdown
- Item 1
- Item 2
- Item 3
_or_
* Item 1
* Item 2
* Item 3
```
## Ordered list
<div class="code-example" markdown="1">
1. Item 1
1. Item 2
1. Item 3
</div>
```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
- [ ] hello, this is a todo item
- [ ] hello, this is another todo item
- [x] goodbye, this item is done
```
## Definition list
Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
<div class="code-example" markdown="1">
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
</div>
```html
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
```

29
docs/ui-components/tables.md
View File

@ -1,29 +0,0 @@
---
layout: default
title: Tables
parent: UI Components
nav_order: 4
---
# Tables
Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
<div class="code-example" markdown="1">
| head1 | head two | three |
|:-------------|:------------------|:------|
| ok | good swedish fish | nice |
| out of stock | good and plenty | nice |
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
</div>
```markdown
| head1 | head two | three |
|:-------------|:------------------|:------|
| ok | good swedish fish | nice |
| out of stock | good and plenty | nice |
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
```

114
docs/ui-components/typography.md
View File

@ -1,114 +0,0 @@
---
layout: default
title: Typography
parent: UI Components
nav_order: 1
---
# Typography
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Font stack
By default, Just the Docs uses a native system font stack for sans-serif fonts:
```scss
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
```
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
{: .fs-5 .ls-10 .code-example }
For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
```scss
"SFMono-Regular", Menlo, Consolas, Monospace
```
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
{: .fs-5 .ls-10 .text-mono .code-example }
---
## Responsive type scale
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` |
|:----------------------|:---------------------------------|:------------------------------|
| `h1`, `.text-alpha` | 32px | 36px |
| `h2`, `.text-beta` | 18px | 24px |
| `h3`, `.text-gamma` | 16px | 18px |
| `h4`, `.text-delta` | 14px | 16px |
| `h5`, `.text-epsilon` | 16px | 18px |
| `h6`, `.text-zeta` | 18px | 24px |
| `body` | 14px | 16px |
---
## Headings
Headings are rendered like this:
<div class="code-example">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
```markdown
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
```
---
## Body text
Default body text is rendered like this:
<div class="code-example" markdown="1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
```markdown
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```
---
## Inline elements
<div class="code-example" markdown="1">
Text can be **bold**, _italic_, or ~~strikethrough~~.
[Link to another page](another-page).
</div>
```markdown
Text can be **bold**, _italic_, or ~~strikethrough~~.
[Link to another page](another-page).
```
---
## Typographic Utilities
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 }

12
docs/ui-components/ui-components.md
View File

@ -1,12 +0,0 @@
---
layout: default
title: UI Components
nav_order: 3
has_children: true
permalink: /docs/ui-components
---
# UI Components
To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
{: .fs-6 .fw-300 }

82
docs/utilities/color.md
View File

@ -1,82 +0,0 @@
---
layout: default
title: Color
parent: Utilities
---
# Color Utilities
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
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
| Color value | Font color utility | Background color utility |
|:---------------|:---------------------|:-------------------------|
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-000"></span> `grey-lt-000` | `.text-grey-lt-000` | `.bg-grey-lt-000` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-100"></span> `grey-lt-100` | `.text-grey-lt-100` | `.bg-grey-lt-100` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-200"></span> `grey-lt-200` | `.text-grey-lt-200` | `.bg-grey-lt-200` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-300"></span> `grey-lt-300` | `.text-grey-lt-300` | `.bg-grey-lt-300` |
## Dark Greys
| Color value | Font color utility | Background color utility |
|:---------------|:---------------------|:-------------------------|
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-250"></span> `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
## Purples
| Color value | Font color utility | Background color utility |
|:---------------|:---------------------|:-------------------------|
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-000"></span> `purple-000` | `.text-purple-000` | `.bg-purple-000` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-100"></span> `purple-100` | `.text-purple-100` | `.bg-purple-100` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-200"></span> `purple-200` | `.text-purple-200` | `.bg-purple-200` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-300"></span> `purple-300` | `.text-purple-300` | `.bg-purple-300` |
## Blues
| Color value | Font color utility | Background color utility |
|:---------------|:---------------------|:-------------------------|
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-000"></span> `blue-000` | `.text-blue-000` | `.bg-blue-000` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-100"></span> `blue-100` | `.text-blue-100` | `.bg-blue-100` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-200"></span> `blue-200` | `.text-blue-200` | `.bg-blue-200` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-300"></span> `blue-300` | `.text-blue-300` | `.bg-blue-300` |
## Greens
| Color value | Font color utility | Background color utility |
|:---------------|:---------------------|:-------------------------|
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"></span> `green-000` | `.text-green-000` | `.bg-green-000` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-100"></span> `green-100` | `.text-green-100` | `.bg-green-100` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-200"></span> `green-200` | `.text-green-200` | `.bg-green-200` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-300"></span> `green-300` | `.text-green-300` | `.bg-green-300` |
## Yellows
| Color value | Font color utility | Background color utility |
|:---------------|:---------------------|:-------------------------|
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"></span> `yellow-000` | `.text-yellow-000` | `.bg-yellow-000` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-100"></span> `yellow-100` | `.text-yellow-100` | `.bg-yellow-100` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-200"></span> `yellow-200` | `.text-yellow-200` | `.bg-yellow-200` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-300"></span> `yellow-300` | `.text-yellow-300` | `.bg-yellow-300` |
## Reds
| Color value | Font color utility | Background color utility |
|:---------------|:---------------------|:-------------------------|
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-000"></span> `red-000` | `.text-red-000` | `.bg-red-000` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-100"></span> `red-100` | `.text-red-100` | `.bg-red-100` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-200"></span> `red-200` | `.text-red-200` | `.bg-red-200` |
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-300"></span> `red-300` | `.text-red-300` | `.bg-red-300` |

127
docs/utilities/layout.md
View File

@ -1,127 +0,0 @@
---
layout: default
title: Layout
parent: Utilities
---
# Layout Utilities
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Spacing
These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
| Classname prefix | What it does |
|:-----------------|:------------------------------|
| `.m-` | `margin` |
| `.mx-` | `margin-left`, `margin-right` |
| `.my-` | `margin top`, `margin bottom` |
| `.mt-` | `margin-top` |
| `.mr-` | `margin-right` |
| `.mb-` | `margin-bottom` |
| `.ml-` | `margin-left` |
| Classname prefix | What it does |
|:-----------------|:--------------------------------|
| `.p-` | `padding` |
| `.px-` | `padding-left`, `padding-right` |
| `.py-` | `padding top`, `padding bottom` |
| `.pt-` | `padding-top` |
| `.pr-` | `padding-right` |
| `.pb-` | `padding-bottom` |
| `.pl-` | `padding-left` |
Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units:
| Spacer/suffix | Size in rems | Rem converted to px |
|:---------------|:--------------|:--------------------|
| `1` | 0.25rem | 4px |
| `2` | 0.5rem | 8px |
| `3` | 0.75rem | 12px |
| `4` | 1rem | 16px |
| `5` | 1.5rem | 24px |
| `6` | 2rem | 32px |
| `7` | 2.5rem | 40px |
| `8` | 3rem | 48px |
| `auto` | auto | auto |
Use `mx-auto` to horizontally center elements.
#### Examples
{: .no_toc }
In Markdown, use the `{: }` wrapper to apply custom classes:
```markdown
This paragraph will have a margin bottom of 1rem/16px at large screens.
{: .mb-lg-4 }
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
{: .px-6 }
```
## Horizontal Alignment
| Classname | What it does |
|:------------------------|:---------------------------------|
| `.float-left` | `float: left` |
| `.float-right` | `float: right` |
| `.flex-justify-start` | `justify-content: flex-start` |
| `.flex-justify-end` | `justify-content: flex-end` |
| `.flex-justify-between` | `justify-content: space-between` |
| `.flex-justify-around` | `justify-content: space-around` |
_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._
## Vertical Alignment
| Classname | What it does |
|:-----------------------|:--------------------------------|
| `.v-align-baseline` | `vertical-align: baseline` |
| `.v-align-bottom` | `vertical-align: bottom` |
| `.v-align-middle` | `vertical-align: middle` |
| `.v-align-text-bottom` | `vertical-align: text-bottom` |
| `.v-align-text-top` | `vertical-align: text-top` |
| `.v-align-top` | `vertical-align: top` |
## Display
Display classes aid in adapting the layout of the elements on a page:
| Class | |
|:------------------|:------------------------|
| `.d-block` | `display: block` |
| `.d-flex` | `display: flex` |
| `.d-inline` | `display: inline` |
| `.d-inline-block` | `display: inline-block` |
| `.d-none` | `display: none` |
Use these classes in conjunction with the responsive modifiers.
#### Examples
{: .no_toc }
In Markdown, use the `{: }` wrapper to apply custom classes:
```markdown
This button will be hidden until medium screen sizes:
[ A button ](#url)
{: .d-none .d-md-inline-block }
These headings will be `inline-block`:
### heading 3
{: .d-inline-block }
### heading 3
{: .d-inline-block }
```

18
docs/utilities/responsive-modifiers.md
View File

@ -1,18 +0,0 @@
---
layout: default
title: Responsive Modifiers
parent: Utilities
---
# Responsive modifiers
Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes.
| Modifier | Screen size |
|:----------|:-------------------------------------|
| (none) | All screens until the next modifier |
| `xs` | 320px (20rem) and up |
| `sm` | 500px (31.25rem) and up |
| `md` | 740px (46.25rem) and up |
| `lg` | 1120px (70rem) and up |
| `xl` | 1400px (87.5rem) and up |

156
docs/utilities/typography.md
View File

@ -1,156 +0,0 @@
---
layout: default
title: Typography
parent: Utilities
---
# Typography Utilities
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
## Font size
Use the `.fs-1` - `.fs-10` to set an explicit font-size.
| Class | Small screen size `font-size` | Large screen size `font-size` |
|:--------|:-------------------------------|:------------------------------|
| `.fs-1` | 9px | 10px |
| `.fs-2` | 11px | 12px |
| `.fs-3` | 12px | 14px |
| `.fs-4` | 14px | 16px |
| `.fs-5` | 16px | 18px |
| `.fs-6` | 18px | 24px |
| `.fs-7` | 24px | 32px |
| `.fs-8` | 32px | 38px |
| `.fs-9` | 38px | 42px |
| `.fs-10`| 42px | 48px |
<div class="code-example" markdown="1">
Font size 1
{: .fs-1 }
Font size 2
{: .fs-2 }
Font size 3
{: .fs-3 }
Font size 4
{: .fs-4 }
Font size 5
{: .fs-5 }
Font size 6
{: .fs-6 }
Font size 7
{: .fs-7 }
Font size 8
{: .fs-8 }
Font size 9
{: .fs-9 }
Font size 10
{: .fs-10 }
</div>
```markdown
In Markdown, use the `{: }` wrapper to apply custom classes:
Font size 1
{: .fs-1 }
Font size 2
{: .fs-2 }
Font size 3
{: .fs-3 }
Font size 4
{: .fs-4 }
Font size 5
{: .fs-5 }
Font size 6
{: .fs-6 }
Font size 7
{: .fs-7 }
Font size 8
{: .fs-8 }
Font size 9
{: .fs-9 }
Font size 10
{: .fs-10 }
```
## Font weight
Use the `.fw-300` - `.fw-700` to set an explicit font-size.
<div class="code-example" markdown="1">
Font weight 300
{: .fw-300 }
Font weight 400
{: .fw-400 }
Font weight 500
{: .fw-500 }
Font weight 700
{: .fw-700 }
</div>
```markdown
In Markdown, use the `{: }` wrapper to apply custom classes:
Font weight 300
{: .fw-300 }
Font weight 400
{: .fw-400 }
Font weight 500
{: .fw-500 }
Font weight 700
{: .fw-700 }
```
## Line height
Use the `lh-` classes to explicitly apply line height to text.
| Class | `line-height` value | Notes |
|:--------------|:---------------------|:------------------------------|
| `.lh-0` | 0 | |
| `.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
{: .lh-0 }
Tight line height
Tight line height
{: .lh-tight }
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
{: .lh-0 }
Tight line height
Tight line height
{: .lh-tight }
Default line height
Default line height
{: .fh-default }
```
## Text justification
By default text is justified left. Use these `text-` classes to override settings:
| Class | What it does |
|:---------------|:---------------------|
| `.text-left` | `text-align: left` |
| `.text-right` | `text-align: right` |
| `.text-center` | `text-align: center` |

13
docs/utilities/utilities.md
View File

@ -1,13 +0,0 @@
---
layout: default
title: Utilities
nav_order: 4
has_children: true
permalink: docs/utilities
---
# Utilities
{: .no_toc }
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 }

8
docs/vat-li/lop-10/lop-10.md Normal file
View File

@ -0,0 +1,8 @@
---
layout: default
title: Vật lí 10
has_children: true
nav_order: 1
parent: Vật lí
permalink: vat-li/lop-10
---

9
docs/vat-li/vat-li.md Normal file
View File

@ -0,0 +1,9 @@
---
layout: default
title: Vật lí
nav_order: 3
has_children: true
permalink: vat-li
---
# Vật lí

85
index.md
View File

@ -6,91 +6,12 @@ description: "Just the Docs is a responsive Jekyll theme with built-in search th
permalink: /
---
# Focus on writing good documentation
# Chia sẻ kiến thức cá nhân
{: .fs-9 }
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub Pages.
Đây là nơi tổng hợp những kiến thức mình học được. Một số nội dung mang tính cá nhân và có thể có sai sót.
{: .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 }
[Khám phá](#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 }
---
## 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/) for more information. Just the Docs requires no special plugins and can run on GitHub Pages' standard Jekyll compiler. The [Jekyll SEO Tag plugin](https://github.com/jekyll/jekyll-seo-tag) is included by default (no need to run any special installation) to inject SEO and open graph metadata on docs pages. For information on how to configure SEO and open graph metadata visit the [Jekyll SEO Tag usage guide](https://jekyll.github.io/jekyll-seo-tag/usage/).
### 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
```
<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
```
```yaml
# .. or add it to your your Jekyll site’s Gemfile
gem "just-the-docs"
```
2. Add Just the Docs to your Jekyll site’s `_config.yml`
```yaml
theme: "just-the-docs"
```
3. _Optional:_ Initialize search data (creates `search-data.json`)
```bash
$ bundle exec just-the-docs rake search:init
```
3. Run you local Jekyll server
```bash
$ jekyll serve
```
```bash
# .. or if you're using a Gemfile (bundler)
$ bundle exec jekyll serve
```
4. Point your web browser to [http://localhost:4000](http://localhost:4000)
If you're hosting your site on GitHub Pages, [set up GitHub Pages and Jekyll locally](https://help.github.com/en/articles/setting-up-your-github-pages-site-locally-with-jekyll) so that you can more easily work in your development environment.
### Configure Just the Docs
- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
---
## About the project
Just the Docs is &copy; 2017-{{ "now" | date: "%Y" }} by [Patrick Marsceill](http://patrickmarsceill.com).
### License
Just the Docs is distributed by an [MIT license](https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt).
### Contributing
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).
#### Thank you to the contributors of Just the Docs!
<ul class="list-style-none">
{% for contributor in site.github.contributors %}
<li class="d-inline-block mr-1">
<a href="{{ contributor.html_url }}"><img src="{{ contributor.avatar_url }}" width="32" height="32" alt="{{ contributor.login }}"/></a>
</li>
{% endfor %}
</ul>
### Code of Conduct
Just the Docs is committed to fostering a welcoming community.
[View our Code of Conduct](https://github.com/pmarsceill/just-the-docs/tree/master/CODE_OF_CONDUCT.md) on our GitHub repository.