mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2025-01-18 08:54:46 +01:00
Merge branch 'feature/insiders-prairie-fire'
This commit is contained in:
squidfunk
commit
dd5a92b3db
@ -1,13 +1,13 @@
|
||||
mkdocs-material-6.1.7+insiders-1.13.1 (2020-12-20)
|
||||
|
||||
* Removed horizontal scrollbars on language and version selector
|
||||
* Fixed horizontal scrollbars for language and version selection
|
||||
* Fixed type conversion in JavaScript config (#6)
|
||||
|
||||
mkdocs-material-6.1.7+insiders-1.13.0 (2020-12-13)
|
||||
|
||||
* Refactored navigation tabs to simplify grouping behavior
|
||||
* Added support for sticky navigation tabs
|
||||
* Added support for arbitrary links in navigation tabs
|
||||
* Refactored navigation tabs to simplify grouping behavior
|
||||
* Fixed #2098: Subsequent active subsection not highlighted correctly
|
||||
|
||||
mkdocs-material-6.1.7+insiders-1.12.1 (2020-12-08)
|
||||
|
||||
BIN
docs/assets/screenshots/color-palette-toggle.png
Normal file
BIN
docs/assets/screenshots/color-palette-toggle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
@ -4,100 +4,6 @@ template: overrides/main.html
|
||||
|
||||
# Changelog
|
||||
|
||||
## Material for MkDocs Insiders
|
||||
|
||||
### 1.13.1 <small>_ December 13, 2020</small>
|
||||
|
||||
- Removed horizontal scrollbars on language and version selector
|
||||
- Fixed type conversion in JavaScript config
|
||||
|
||||
### 1.13.0 <small>_ December 13, 2020</small>
|
||||
|
||||
- Refactored navigation tabs to simplify grouping behavior
|
||||
- Added support for sticky navigation tabs
|
||||
- Added support for arbitrary links in navigation tabs
|
||||
- Fixed #2098: Subsequent active subsection not highlighted correctly
|
||||
|
||||
### 1.12.1 <small>_ December 8, 2020</small>
|
||||
|
||||
- Fixed empty language selector being shown
|
||||
|
||||
### 1.12.0 <small>_ December 6, 2020</small>
|
||||
|
||||
- Added support for adding a language selector
|
||||
|
||||
### 1.11.2 <small>_ November 29, 2020</small>
|
||||
|
||||
- Fixed #2068: Search highlight interprets code blocks as JavaScript
|
||||
|
||||
### 1.11.1 <small>_ November 29, 2020</small>
|
||||
|
||||
- Refactored styling to be more stable and easier to adjust
|
||||
- Fixed some styling regressions from latest features
|
||||
|
||||
### 1.11.0 <small>_ November 22, 2020</small>
|
||||
|
||||
- Added support for rendering admonitions as inline blocks
|
||||
|
||||
### 1.10.0 <small>_ November 15, 2020</small>
|
||||
|
||||
- Added support for integrating table of contents into navigation
|
||||
|
||||
### 1.9.0 <small>_ November 7, 2020</small>
|
||||
|
||||
- Added support for hiding navigation and table of contents on any page
|
||||
- Removed autohiding table of contents when empty
|
||||
|
||||
### 1.8.0 <small>_ November 1, 2020</small>
|
||||
|
||||
- Added support for navigation sections
|
||||
- Fixed appearance of inactive search suggestions
|
||||
|
||||
### 1.7.0 <small>_ October 25, 2020</small>
|
||||
|
||||
- Added support for deploying multiple versions
|
||||
- Fixed alignment of sidebar when content area is too small
|
||||
|
||||
### 1.6.0 <small>_ October 11, 2020</small>
|
||||
|
||||
- Added support for search suggestions to save keystrokes
|
||||
- Added support for removing __Made with Material for MkDocs__ from footer
|
||||
- Fixed #1915: search should go to first result by pressing ++enter++
|
||||
|
||||
### 1.5.1 <small>_ September 21, 2020</small>
|
||||
|
||||
- Fixed content area stretching to whole width for long code blocks
|
||||
|
||||
### 1.5.0 <small>_ September 19, 2020</small>
|
||||
|
||||
- Added support for autohiding table of contents when empty
|
||||
|
||||
### 1.4.1 <small>_ September 6, 2020</small>
|
||||
|
||||
- Improved typeahead and search result relevance and scoring
|
||||
|
||||
### 1.4.0 <small>_ August 30, 2020</small>
|
||||
|
||||
- Added support for autohiding header on scroll
|
||||
|
||||
### 1.3.0 <small>_ August 26, 2020</small>
|
||||
|
||||
- Added support for user-selectable color palettes
|
||||
|
||||
### 1.2.0 <small>_ August 11, 2020</small>
|
||||
|
||||
- Added feature to expand navigation by default
|
||||
|
||||
### 1.1.0 <small>_ August 3, 2020</small>
|
||||
|
||||
- Added highlighting of search results
|
||||
|
||||
### 1.0.0 <small>_ July 14, 2020</small>
|
||||
|
||||
- Added grouping of search results
|
||||
- Added missing query terms to search result
|
||||
- Improved search result relevance and scoring
|
||||
|
||||
## Material for MkDocs
|
||||
|
||||
### 6.1.7 <small>_ December 6, 2020</small>
|
||||
|
||||
99
docs/changelog/insiders.md
Normal file
99
docs/changelog/insiders.md
Normal file
@ -0,0 +1,99 @@
|
||||
---
|
||||
template: overrides/main.html
|
||||
---
|
||||
|
||||
# Changelog
|
||||
|
||||
## Material for MkDocs Insiders
|
||||
|
||||
### 1.13.1 <small>_ December 20, 2020</small>
|
||||
|
||||
- Removed horizontal scrollbars on language and version selector
|
||||
- Fixed type conversion in JavaScript config
|
||||
|
||||
### 1.13.0 <small>_ December 13, 2020</small>
|
||||
|
||||
- Refactored navigation tabs to simplify grouping behavior
|
||||
- Added support for sticky navigation tabs
|
||||
- Added support for arbitrary links in navigation tabs
|
||||
- Fixed #2098: Subsequent active subsection not highlighted correctly
|
||||
|
||||
### 1.12.1 <small>_ December 8, 2020</small>
|
||||
|
||||
- Fixed empty language selector being shown
|
||||
|
||||
### 1.12.0 <small>_ December 6, 2020</small>
|
||||
|
||||
- Added support for adding a language selector
|
||||
|
||||
### 1.11.2 <small>_ November 29, 2020</small>
|
||||
|
||||
- Fixed #2068: Search highlight interprets code blocks as JavaScript
|
||||
|
||||
### 1.11.1 <small>_ November 29, 2020</small>
|
||||
|
||||
- Refactored styling to be more stable and easier to adjust
|
||||
- Fixed some styling regressions from latest features
|
||||
|
||||
### 1.11.0 <small>_ November 22, 2020</small>
|
||||
|
||||
- Added support for rendering admonitions as inline blocks
|
||||
|
||||
### 1.10.0 <small>_ November 15, 2020</small>
|
||||
|
||||
- Added support for integrating table of contents into navigation
|
||||
|
||||
### 1.9.0 <small>_ November 7, 2020</small>
|
||||
|
||||
- Added support for hiding navigation and table of contents on any page
|
||||
- Removed autohiding table of contents when empty
|
||||
|
||||
### 1.8.0 <small>_ November 1, 2020</small>
|
||||
|
||||
- Added support for navigation sections
|
||||
- Fixed appearance of inactive search suggestions
|
||||
|
||||
### 1.7.0 <small>_ October 25, 2020</small>
|
||||
|
||||
- Added support for deploying multiple versions
|
||||
- Fixed alignment of sidebar when content area is too small
|
||||
|
||||
### 1.6.0 <small>_ October 11, 2020</small>
|
||||
|
||||
- Added support for search suggestions to save keystrokes
|
||||
- Added support for removing __Made with Material for MkDocs__ from footer
|
||||
- Fixed #1915: search should go to first result by pressing ++enter++
|
||||
|
||||
### 1.5.1 <small>_ September 21, 2020</small>
|
||||
|
||||
- Fixed content area stretching to whole width for long code blocks
|
||||
|
||||
### 1.5.0 <small>_ September 19, 2020</small>
|
||||
|
||||
- Added support for autohiding table of contents when empty
|
||||
|
||||
### 1.4.1 <small>_ September 6, 2020</small>
|
||||
|
||||
- Improved typeahead and search result relevance and scoring
|
||||
|
||||
### 1.4.0 <small>_ August 30, 2020</small>
|
||||
|
||||
- Added support for autohiding header on scroll
|
||||
|
||||
### 1.3.0 <small>_ August 26, 2020</small>
|
||||
|
||||
- Added support for user-selectable color palettes
|
||||
|
||||
### 1.2.0 <small>_ August 11, 2020</small>
|
||||
|
||||
- Added feature to expand navigation by default
|
||||
|
||||
### 1.1.0 <small>_ August 3, 2020</small>
|
||||
|
||||
- Added highlighting of search results
|
||||
|
||||
### 1.0.0 <small>_ July 14, 2020</small>
|
||||
|
||||
- Added grouping of search results
|
||||
- Added missing query terms to search result
|
||||
- Improved search result relevance and scoring
|
||||
@ -87,9 +87,11 @@ defaults, because_ [`mkdocs_theme.yml`][3] _is not loaded automatically as
|
||||
|
||||
### Advanced configuration
|
||||
|
||||
Material for MkDocs comes with a lot of configuration options. The _setup_
|
||||
section explains in great detail how to configure and customize colors, fonts,
|
||||
icons and much more:
|
||||
Material for MkDocs comes with many configuration options. The _setup_ section
|
||||
explains in great detail how to configure and customize colors, fonts, icons
|
||||
and much more:
|
||||
|
||||
<div class="tx-columns" markdown="1">
|
||||
|
||||
- [Changing the colors][5]
|
||||
- [Changing the fonts][6]
|
||||
@ -104,6 +106,8 @@ icons and much more:
|
||||
- [Adding a git repository][15]
|
||||
- [Adding a comment system][16]
|
||||
|
||||
</div>
|
||||
|
||||
[5]: setup/changing-the-colors.md
|
||||
[6]: setup/changing-the-fonts.md
|
||||
[7]: setup/changing-the-language.md
|
||||
|
||||
@ -40,9 +40,16 @@ This will automatically install compatible versions of all dependencies:
|
||||
Material for MkDocs always strives to support the latest versions, so there's
|
||||
no need to install those packages separately.
|
||||
|
||||
_Note that in order to install [Material for MkDocs Insiders][8], you'll
|
||||
need to [become a sponsor][9], create a personal access token[^1], and
|
||||
set the_ `GH_TOKEN` _environment variable to the token's value._
|
||||
_Note that in order to install [Insiders][8], you'll need to [become a
|
||||
sponsor][9], create a personal access token[^1], and set the_ `GH_TOKEN`
|
||||
_environment variable to the token's value._
|
||||
|
||||
[^1]:
|
||||
In order to use `pip` to install from the private repository over HTTPS, the
|
||||
[personal access token][14] requires the [`repo`][15] scope. The creation
|
||||
and usage of an access token is only necessary when installing Insiders
|
||||
over HTTPS, which is the recommended way when building from within a CI/CD
|
||||
workflow, e.g. using [GitHub Pages][16] or [GitLab Pages][17].
|
||||
|
||||
[5]: https://python-markdown.github.io/
|
||||
[6]: https://pygments.org/
|
||||
@ -78,15 +85,22 @@ The following plugins are bundled with the Docker image:
|
||||
- [mkdocs-minify-plugin][11]
|
||||
- [mkdocs-redirects][12]
|
||||
|
||||
_Note that in order to install [Material for MkDocs Insiders][8], you'll
|
||||
need to [become a sponsor][9], create a personal access token[^2], and
|
||||
set the_ `GH_TOKEN` _environment variable to the token's value._
|
||||
_Note that in order to install [Insiders][8], you'll need to [become a
|
||||
sponsor][9], create a personal access token[^2], and set the_ `GH_TOKEN`
|
||||
_environment variable to the token's value._
|
||||
|
||||
[^2]:
|
||||
If you want to use `docker` to pull the private Docker image from the
|
||||
[GitHub Container Registry][18], the [personal access token][14] requires
|
||||
the [`read:packages`][15] scope. Note that you need to login before pulling
|
||||
the Docker image. As an example, see the [`publish`][19] workflow of the
|
||||
Material for MkDocs repository.
|
||||
|
||||
[10]: https://hub.docker.com/r/squidfunk/mkdocs-material/
|
||||
[11]: https://github.com/byrnereese/mkdocs-minify-plugin
|
||||
[12]: https://github.com/datarobot/mkdocs-redirects
|
||||
|
||||
??? question "How can I add plugins to the Docker image?"
|
||||
??? question "How to add plugins to the Docker image?"
|
||||
|
||||
Material for MkDocs bundles useful and common plugins while trying not to
|
||||
blow up the size of the official image. If the plugin you want to use is
|
||||
@ -131,28 +145,14 @@ from `git`, you must install all required dependencies yourself:
|
||||
pip install -r mkdocs-material/requirements.txt
|
||||
```
|
||||
|
||||
_Note that in order to install [Material for MkDocs Insiders][8], you'll
|
||||
need to [become a sponsor][9]._
|
||||
_Note that in order to install [Insiders][8], you'll need to [become a
|
||||
sponsor][9]._
|
||||
|
||||
[13]: https://github.com/squidfunk/mkdocs-material
|
||||
|
||||
[^1]:
|
||||
In order to use `pip` to install from the private repository over HTTPS, the
|
||||
[personal access token][14] requires the [`repo`][15] scope. The creation
|
||||
and usage of an access token is only necessary when installing Insiders
|
||||
over HTTPS, which is the recommended way when building from within a CI/CD
|
||||
workflow, e.g. using [GitHub Pages][16] or [GitLab Pages][17].
|
||||
|
||||
[^2]:
|
||||
If you want to use `docker` to pull the private Docker image from the
|
||||
[GitHub Container Registry][18], the [personal access token][14] requires
|
||||
the [`read:packages`][15] scope. Note that you need to login before pulling
|
||||
the Docker image. As an example, see the [`publish`][19] workflow of the
|
||||
Material for MkDocs repository.
|
||||
|
||||
[14]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
|
||||
[15]: https://docs.github.com/en/developers/apps/scopes-for-oauth-apps#available-scopes
|
||||
[16]: publishing-your-site.md#github-pages
|
||||
[17]: publishing-your-site.md#gitlab-pages
|
||||
[18]: https://docs.github.com/en/free-pro-team@latest/packages/getting-started-with-github-container-registry/about-github-container-registry
|
||||
[19]: https://github.com/squidfunk/mkdocs-material/blob/master/.github/workflows/publish.yml#L72-L77
|
||||
[19]: https://github.com/squidfunk/mkdocs-material/blob/master/.github/workflows/publish.yml
|
||||
|
||||
369
docs/insiders.md
369
docs/insiders.md
@ -4,267 +4,230 @@ template: overrides/main.html
|
||||
|
||||
# <span hidden>Insiders</span> :logo: :material-plus: :octicons-heart-fill-24:{: .tx-heart }
|
||||
|
||||
Material for MkDocs uses the [sponsorware][1] release strategy, which means
|
||||
Material for MkDocs uses the _sponsorware_ release strategy, which means
|
||||
that _new features are first exclusively released to sponsors_ as part of
|
||||
__Material for MkDocs Insiders__. Read on to learn [how sponsorship works][2],
|
||||
and how you can [become a sponsor][3].
|
||||
__Insiders__. Read on to learn [how sponsorship works][1], and how easy it is
|
||||
to [get access to Insiders][2].
|
||||
|
||||
[1]: https://github.com/sponsorware/docs
|
||||
[2]: #how-sponsorship-works
|
||||
[3]: #how-to-become-a-sponsor
|
||||
<figure class="tx-video" markdown="1">
|
||||
<div class="tx-video__inner">
|
||||
<iframe src="https://streamable.com/e/b6ij21" allowfullscreen></iframe>
|
||||
</div>
|
||||
<figcaption markdown="1">
|
||||
A demo is worth a thousand words — check it out at
|
||||
[squidfunk.github.io/mkdocs-material-insiders][3]
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<div style="width:100%;height:0px;position:relative;padding-bottom:56.138%;">
|
||||
<iframe src="https://streamable.com/e/b6ij21" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe>
|
||||
</div>
|
||||
<p style="text-align: center; font-style: oblique">
|
||||
A demo is worth a thousand words — check it out at<br />
|
||||
<a href="https://squidfunk.github.io/mkdocs-material-insiders/">
|
||||
squidfunk.github.io/mkdocs-material-insiders
|
||||
</a>
|
||||
</p>
|
||||
[1]: #how-sponsorship-works
|
||||
[2]: #how-to-become-a-sponsor
|
||||
[3]: https://squidfunk.github.io/mkdocs-material-insiders/
|
||||
|
||||
## How sponsorship works
|
||||
|
||||
New features will first land in Material for MkDocs Insiders, which means that
|
||||
_sponsors will have access immediately_. Every feature is tied to a funding
|
||||
goal in monthly subscriptions. If a funding goal is hit, the features that are
|
||||
tied to it are merged back into Material for MkDocs and released for general
|
||||
availability. Bugfixes will always be released simultaneously in both editions.
|
||||
New features first land in Insiders, which means that _sponsors will have access
|
||||
immediately_. Every feature is tied to a funding goal in monthly subscriptions.
|
||||
When a funding goal is hit, the features that are tied to it are merged back
|
||||
into Material for MkDocs and released for general availability. Bugfixes are
|
||||
always released simultaneously in both editions.
|
||||
|
||||
See the [roadmap][4] for a list of already available and upcoming features, and
|
||||
for demonstration purposes, [the official documentation][5] built with Material
|
||||
for MkDocs Insiders.
|
||||
_Don't want to sponsor? No problem, Material for MkDocs already has tons of
|
||||
features available, so chances are that most of your requirements are already
|
||||
satisfied. See the [list of exclusive features][4] to learn which features are
|
||||
currently only available to sponsors._
|
||||
|
||||
[4]: #roadmap
|
||||
[5]: https://squidfunk.github.io/mkdocs-material-insiders/
|
||||
|
||||
<div class="tx-sponsor" hidden>
|
||||
<h3>Join <span class="tx-sponsor__count"></span> awesome sponsors</h3>
|
||||
<div class="tx-sponsor__list"></div>
|
||||
<p>
|
||||
You can sponsor publicly or privately. As a public sponsor, you'll be listed
|
||||
here with your GitHub avatar, showing your support for Material for MkDocs!
|
||||
</p>
|
||||
<a class="md-button md-button--primary" href="https://github.com/sponsors/squidfunk">
|
||||
<span class="twemoji tx-heart"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 20.408c-.492.308-.903.546-1.192.709-.153.086-.308.17-.463.252h-.002a.75.75 0 01-.686 0 16.709 16.709 0 01-.465-.252 31.147 31.147 0 01-4.803-3.34C3.8 15.572 1 12.331 1 8.513 1 5.052 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262A31.146 31.146 0 0114 20.408z"></path></svg> </span> Become a sponsor
|
||||
</a>
|
||||
</div>
|
||||
<script>
|
||||
fetch("https://gpiqp43wvb.execute-api.us-east-1.amazonaws.com/_/").then(function(e){return e.json()}).then(function(e){var t=document.querySelector(".tx-sponsor__list"),n=0;for(var o of e.sponsors)if("PUBLIC"===o.type){var s;(s=document.createElement("a")).href=o.url,s.title="@"+o.name,s.className="tx-sponsor__item",t.appendChild(s);var r=document.createElement("img");r.src=o.image,s.appendChild(r)}else n++;(s=document.createElement("a")).href="https://github.com/sponsors/squidfunk",s.title="[private]",s.innerText="+"+n,s.className="tx-sponsor__item tx-sponsor__item--private",t.appendChild(s),document.querySelector(".tx-sponsor__count").innerText=e.sponsors.length,document.querySelector(".tx-sponsor").removeAttribute("hidden")}).catch(console.log);
|
||||
</script>
|
||||
<style>
|
||||
.tx-sponsor {
|
||||
margin: 2em 0;
|
||||
}
|
||||
.tx-sponsor .md-button {
|
||||
background-color: #e91e63;
|
||||
border-color: #e91e63;
|
||||
}
|
||||
.tx-sponsor__list {
|
||||
overflow: auto;
|
||||
}
|
||||
.tx-sponsor__item {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
margin: 0.1rem;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tx-sponsor__item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.md-typeset .tx-sponsor__item--private {
|
||||
background: #CCC;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
line-height: 3.2rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
[4]: #exclusive-features
|
||||
|
||||
## How to become a sponsor
|
||||
|
||||
So you've decided to become a sponsor? Great! You're just __three easy steps__
|
||||
away from enjoying the latest features of Material for MkDocs Insiders.
|
||||
Complete the following steps and you're in:
|
||||
You can become a sponsor using your individual or organization's GitHub account.
|
||||
Just visit __[squidfunk's sponsor profile][5]__, pick any tier __from
|
||||
$10/month__, and complete the checkout. Then, after a few hours, @squidfunk will
|
||||
add you as a collaborator to the super-secret private GitHub repositority
|
||||
containing the Insiders edition, which contains all [brand new and exclusive
|
||||
features][4].
|
||||
|
||||
- Visit [squidfunk's sponsor profile][6] and pick a tier that includes exclusive
|
||||
access to squidfunk's sponsorware, which is _any tier from $10/month_. Select
|
||||
the tier and complete the checkout.
|
||||
- Within 24 hours, you will become a collaborator of the private Material for
|
||||
MkDocs Insiders GitHub repository, a fork of Material for MkDocs with
|
||||
[brand new and exclusive features][7].
|
||||
- Create a [personal access token][8], which allows installing Material for
|
||||
MkDocs Insiders from any destination, including other CI providers like
|
||||
[GitLab][9] or [Bitbucket][10].
|
||||
__Important__: If you're sponsoring @squidfunk through a GitHub organization,
|
||||
please send a short email to sponsors@squidfunk.com with the name of your
|
||||
organization and the account that should be added as a collaborator.[^1]
|
||||
|
||||
__Congratulations! :partying_face: You're now officially a sponsor and will
|
||||
get updates for Material for MkDocs Insiders, until you decide to cancel your
|
||||
monthly subscription, which you can do at any time.__
|
||||
|
||||
??? info "Sponsoring via a GitHub organization?"
|
||||
|
||||
If you sponsor @squidfunk through a GitHub organization (which is currently
|
||||
in beta), please note that it's not possible to grant access to all
|
||||
organization members, as GitHub does not allow to do that. Thus, after
|
||||
sponsoring, please send an email to sponsors@squidfunk.com, explaining
|
||||
which account should become a collaborator of the Insiders repository.
|
||||
To ensure that access is not tied to a particular individual, it's best to
|
||||
[^1]:
|
||||
It's currently not possible to grant access to each member of an
|
||||
organization, as GitHub only allows for adding users. Thus, after
|
||||
sponsoring, please send an email to sponsors@squidfunk.com, stating which
|
||||
account should become a collaborator of the Insiders repository. We're
|
||||
working on a solution which will make access to organizations much simpler.
|
||||
To ensure that access is not tied to a particular individual GitHub account,
|
||||
create a bot account (i.e. a GitHub account that is not tied to a specific
|
||||
individual), and use that for the sponsoring. After being added to the list
|
||||
of collaborators, the bot account can create a private fork of the private
|
||||
Insiders GitHub repository, effectively granting access to all members.
|
||||
individual), and use this account for the sponsoring. After being added to
|
||||
the list of collaborators, the bot account can create a private fork of the
|
||||
private Insiders GitHub repository, and grant access to all members of the
|
||||
organizations.
|
||||
|
||||
[6]: https://github.com/sponsors/squidfunk
|
||||
[7]: #available-features
|
||||
[8]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
|
||||
[9]: https://gitlab.com
|
||||
[10]: https://bitbucket.org
|
||||
You can cancel your sponsorship anytime.[^2]
|
||||
|
||||
## Available features
|
||||
[^2]:
|
||||
All charges are processed by GitHub through Stripe. As we don't receive any
|
||||
information regarding your payment, and GitHub doesn't offer refunds,
|
||||
sponsorships are also non-refundable. If you cancel your sponsorship, GitHub
|
||||
schedules a cancellation request which will become effective at the end of
|
||||
the billing cycle, which ends at the 22nd of a month for monthly
|
||||
sponsorships. This means that even though you cancel your sponsorship, you
|
||||
will keep your access to Insiders as long as your cancellation isn't
|
||||
effective.
|
||||
|
||||
The following list shows which features are currently only available in Material
|
||||
for MkDocs Insiders. You can click on each feature to learn more about it:
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Join our <span class="tx-insiders-count"></span> awesome sponsors][5]{: .md-button .md-button--primary .tx-insiders-button }
|
||||
|
||||
- [x] [Remove _Made with Material for MkDocs_ from footer][11]
|
||||
- [x] [Support for user-toggleable themes (light/dark mode switch)][12]
|
||||
- [x] [Support for deploying multiple versions][13]
|
||||
- [x] [Support for deploying multiple languages][22]
|
||||
- [x] [Search suggestions help to save keystrokes][14]
|
||||
- [x] [Highlighting of matched search terms in content area][15]
|
||||
- [x] Search goes to first result on ++enter++ (I'm feeling lucky)
|
||||
- [x] [Navigation tabs can be made sticky][23]
|
||||
- [x] [Navigation can be grouped into sections][17]
|
||||
- [x] [Navigation can be always expanded][17]
|
||||
- [x] [Navigation and table of contents can be hidden][18]
|
||||
- [x] [Table of contents can be integrated into navigation][19]
|
||||
- [x] [Header can be automatically hidden on scrolling][20]
|
||||
- [x] [Support for Admonitions as inline blocks][21]
|
||||
<div class="tx-insiders-container" markdown="1" hidden>
|
||||
<div class="tx-insiders-list"></div>
|
||||
_If you sponsor publicly, you're automatically added here with a link to
|
||||
your profile and avatar to show your support for Material for MkDocs.
|
||||
Alternatively, if you wish to keep your sponsorship private, you'll be a
|
||||
silent +1. You can select visibility during checkout and change it
|
||||
afterwards._
|
||||
</div>
|
||||
|
||||
[11]: setup/setting-up-the-footer.md#remove-generator
|
||||
[12]: setup/changing-the-colors.md#color-palette-toggle
|
||||
[13]: setup/setting-up-versioning.md#versioning
|
||||
[14]: setup/setting-up-site-search.md#search-suggestions
|
||||
[15]: setup/setting-up-site-search.md#search-highlighting
|
||||
[16]: setup/setting-up-navigation.md#navigation-sections
|
||||
[17]: setup/setting-up-navigation.md#navigation-expansion
|
||||
[18]: setup/setting-up-navigation.md#hide-the-sidebars
|
||||
[19]: setup/setting-up-navigation.md#navigation-integration
|
||||
[20]: setup/setting-up-the-header.md#automatic-hiding
|
||||
[21]: reference/admonitions.md#inline-blocks
|
||||
[22]: setup/changing-the-language.md#site-language-selector
|
||||
[23]: setup/setting-up-navigation.md#sticky-navigation-tabs
|
||||
<script>
|
||||
fetch("https://gpiqp43wvb.execute-api.us-east-1.amazonaws.com/_/").then(function(e){return e.json()}).then(function(e){var t=document.querySelector(".tx-insiders-list"),n=0;for(var o of e.sponsors)if("PUBLIC"===o.type){var s;(s=document.createElement("a")).href=o.url,s.title="@"+o.name,s.className="tx-insiders-list__item",t.appendChild(s);var r=document.createElement("img");r.src=o.image,s.appendChild(r)}else n++;(s=document.createElement("a")).href="https://github.com/sponsors/squidfunk",s.title="[private]",s.innerText="+"+n,s.className="tx-insiders-list__item tx-insiders-list__item--private",t.appendChild(s),document.querySelector(".tx-insiders-count").innerText=e.sponsors.length,document.querySelector(".tx-insiders-container").removeAttribute("hidden"),document.querySelector('.tx-insiders-total').innerText=" – $ "+e.total.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}).catch(console.log);
|
||||
</script>
|
||||
|
||||
## Roadmap
|
||||
[5]: https://github.com/sponsors/squidfunk
|
||||
|
||||
The following list of funding goals – named after varieties of chili peppers
|
||||
[I'm growing on my balcony][24] – shows which features are already available
|
||||
in Material for MkDocs Insiders.
|
||||
## Exclusive features
|
||||
|
||||
[24]: https://www.instagram.com/squidfunk/
|
||||
The following features are currently exclusively available to sponsors:
|
||||
|
||||
### Madame Jeanette
|
||||
<div class="tx-columns" markdown="1">
|
||||
|
||||
[:octicons-flame-24: Funding goal: __$500__][6] ·
|
||||
:octicons-unlock-24: Status: _Generally available_
|
||||
- [x] [Color palette toggle][15]
|
||||
- [x] [Versioning][14]
|
||||
- [x] [Site language selection][13]
|
||||
- [x] [Sticky navigation tabs][18]
|
||||
- [x] [Search suggestions][16]
|
||||
- [x] [Search highlighting][17]
|
||||
- [x] [Admonition inline blocks][12]
|
||||
- [x] [Remove generator notice][19]
|
||||
|
||||
- [x] Improved search result grouping (pages + headings)
|
||||
- [x] Improved search result relevance and scoring
|
||||
- [x] Display of missing query terms in search results
|
||||
</div>
|
||||
|
||||
### Prairie Fire
|
||||
_New features are added to this list every few weeks, so be sure to come back
|
||||
from time to time to learn about what's new, or follow [@squidfunk on
|
||||
:fontawesome-brands-twitter:{: .twitter } Twitter][6] to stay updated._
|
||||
|
||||
[:octicons-flame-24: Funding goal: __$1,000__][6] ·
|
||||
:octicons-lock-24: Status: _Insiders only_
|
||||
[6]: https://twitter.com/squidfunk
|
||||
|
||||
- [x] [Navigation can be grouped into sections][16]
|
||||
- [x] [Navigation can be always expanded][17]
|
||||
- [x] [Navigation and table of contents can be hidden][18]
|
||||
- [x] [Table of contents can be integrated into navigation][19]
|
||||
- [x] [Header can be automatically hidden on scrolling][20]
|
||||
## Funding<span class="tx-insiders-total"></span>
|
||||
|
||||
### Bhut Jolokia
|
||||
### Goals
|
||||
|
||||
[:octicons-flame-24: Funding goal: __$1,500__][6] ·
|
||||
:octicons-lock-24: Status: _Insiders only_
|
||||
Following is a list of funding goals. When a funding goal is hit, the features
|
||||
that are tied to it are merged back into Material for MkDocs and released to
|
||||
the public for general availability.
|
||||
|
||||
- [x] [Support for Admonitions as inline blocks][21]
|
||||
- [x] [Support for deploying multiple versions][13]
|
||||
- [x] [Support for deploying multiple languages][22]
|
||||
#### $ 1,500 – Bhut Jolokia
|
||||
|
||||
### Black Pearl
|
||||
- [x] [Admonition inline blocks][12]
|
||||
- [x] [Site language selection][13]
|
||||
- [x] [Versioning][14]
|
||||
|
||||
[:octicons-flame-24: Funding goal: __$2,000__][6] ·
|
||||
:octicons-lock-24: Status: _Insiders only_
|
||||
[12]: reference/admonitions.md#inline-blocks
|
||||
[13]: setup/changing-the-language.md#site-language-selector
|
||||
[14]: setup/setting-up-versioning.md#versioning
|
||||
|
||||
- [x] [Support for user-toggleable themes (light/dark mode switch)][12]
|
||||
- [ ] Support for user-toggleable code-block styles (light/dark mode switch)
|
||||
- [ ] Table of contents auto-collapses and expands only the active section
|
||||
#### $ 2,000 – Black Pearl
|
||||
|
||||
### Biquinho Vermelho
|
||||
- [x] Deep linking of search results
|
||||
- [x] [Color palette toggle][15]
|
||||
- [ ] Code block palette toggle
|
||||
|
||||
[:octicons-flame-24: Funding goal: __$2,500__][6] ·
|
||||
:octicons-lock-24: Status: _Insiders only_
|
||||
[15]: setup/changing-the-colors.md#color-palette-toggle
|
||||
|
||||
- [x] [Search suggestions help to save keystrokes][14]
|
||||
- [x] [Highlighting of matched search terms in content area][15]
|
||||
- [x] Search goes to first result on ++enter++ (I'm feeling lucky)
|
||||
- [ ] Table of contents shows which sections have search results
|
||||
- [ ] Support for displaying a user's last searches
|
||||
#### $ 2,500 – Biquinho Vermelho
|
||||
|
||||
- [x] [Search suggestions][16]
|
||||
- [x] [Search highlighting][17]
|
||||
- [ ] List of last searches
|
||||
|
||||
[16]: setup/setting-up-site-search.md#search-suggestions
|
||||
[17]: setup/setting-up-site-search.md#search-highlighting
|
||||
|
||||
#### $ 3,000 – Caribbean Red
|
||||
|
||||
- [x] [Sticky navigation tabs][18]
|
||||
- [x] [Remove generator notice][19]
|
||||
|
||||
[18]: setup/setting-up-navigation.md#sticky-navigation-tabs
|
||||
[19]: setup/setting-up-the-footer.md#remove-generator
|
||||
|
||||
#### Future
|
||||
|
||||
- [ ] [Material for MkDocs Live Edit][20]
|
||||
- [ ] Improved search result summaries
|
||||
- [ ] Table of contents auto-collapse
|
||||
- [ ] Table of contents shows which sections have search results
|
||||
- [ ] New layouts and styles (e.g. vertical)
|
||||
- [ ] ... and much more ...
|
||||
|
||||
### Caribbean Red
|
||||
[20]: https://twitter.com/squidfunk/status/1338252230265360391
|
||||
|
||||
[:octicons-flame-24: Funding goal: __$3,000__][6] ·
|
||||
:octicons-lock-24: Status: _Insiders only_
|
||||
### Goals completed
|
||||
|
||||
- [x] [Navigation tabs can be made sticky][23]
|
||||
- [x] [Remove _Made with Material for MkDocs_ from footer][11]
|
||||
- [ ] Brand-new and exclusive vertical layout
|
||||
#### $ 500 – Madame Jeanette
|
||||
|
||||
- [x] Improved search result grouping
|
||||
- [x] Improved search result relevance and scoring
|
||||
- [x] Missing query terms in search results
|
||||
|
||||
#### $ 1,000 – Prairie Fire
|
||||
|
||||
- [x] [Navigation sections][7]
|
||||
- [x] [Navigation expansion][8]
|
||||
- [x] [Hiding the sidebars][9]
|
||||
- [x] [Table of contents in navigation][10]
|
||||
- [x] [Header hides on scroll][11]
|
||||
|
||||
[7]: setup/setting-up-navigation.md#navigation-sections
|
||||
[8]: setup/setting-up-navigation.md#navigation-expansion
|
||||
[9]: setup/setting-up-navigation.md#hide-the-sidebars
|
||||
[10]: setup/setting-up-navigation.md#navigation-integration
|
||||
[11]: setup/setting-up-the-header.md#automatic-hiding
|
||||
|
||||
## Frequently asked questions
|
||||
|
||||
### Compatibility
|
||||
|
||||
_We're running an open source project and want to make sure that users can build
|
||||
the documentation without having access to Insiders. Is that still possible?_
|
||||
the documentation without having access to Insiders. Is this still possible?_
|
||||
|
||||
Yes. Material for MkDocs Insiders strives to be compatible with Material for
|
||||
MkDocs, so all new features are implemented as feature flags and all
|
||||
improvements (e.g. search) do not require any changes to existing configuration.
|
||||
This means that your users will be able to build the docs locally with the
|
||||
regular version and when they push their changes to CI/CD, they will be built
|
||||
with Material for MkDocs Insiders. For this reason, it's recommended to
|
||||
[install Insiders][25] only in CI, as you don't want to expose your `GH_TOKEN`
|
||||
to users.
|
||||
Yes. Insiders is compatible with Material for MkDocs. All new features are
|
||||
implemented behind feature flags; all configuration changes are
|
||||
backward-compatible. This means that your users will be able to build the
|
||||
documentation locally with Material for MkDocs and when they push their changes,
|
||||
it can be built with Insiders (e.g. as part of GitHub Actions). Thus, it's
|
||||
recommended to [install Insiders][21] only in CI, as you don't want to expose
|
||||
your `GH_TOKEN` to users.
|
||||
|
||||
[25]: publishing-your-site.md#github-pages
|
||||
[21]: publishing-your-site.md#github-pages
|
||||
|
||||
### Terms
|
||||
|
||||
_We're using Material for MkDocs to build the developer documentation of a
|
||||
commercial project. Can we use Material for MkDocs Insiders under the same
|
||||
terms?_
|
||||
commercial project. Can we use Insiders under the same terms and conditions?_
|
||||
|
||||
Yes. Whether you're an individual or a company, you may use _Material for MkDocs
|
||||
Insiders_ precisely under the same terms as Material for MkDocs, which are given
|
||||
by the [MIT license][26]. However, we kindly ask you to respect the following
|
||||
by the [MIT license][22]. However, we kindly ask you to respect the following
|
||||
guidelines:
|
||||
|
||||
- Please __don't distribute the source code__ from Material for MkDocs Insiders.
|
||||
You may freely use it for public, private or commercial projects, fork it,
|
||||
mirror it, do whatever you want with it, but please don't release the source
|
||||
code, as it would cannibalize the sponsorware strategy.
|
||||
- Please __don't distribute the source code__ of Insiders. You may freely use
|
||||
it for public, private or commercial projects, fork it, mirror it, do whatever
|
||||
you want with it, but please don't release the source code, as it would
|
||||
counteract the sponsorware strategy.
|
||||
|
||||
- If you cancel your subscription, you're removed as a collaborator and will
|
||||
miss out on future updates of Material for MkDocs Insiders. However, you may
|
||||
__use the latest version__ that's available to you __as long as you like__.
|
||||
Just remember that __[GitHub deletes private forks][27]__.
|
||||
miss out on future updates of Insiders. However, you may __use the latest
|
||||
version__ that's available to you __as long as you like__. Just remember that
|
||||
[GitHub deletes private forks][23].
|
||||
|
||||
[26]: license.md
|
||||
[27]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository
|
||||
[22]: license.md
|
||||
[23]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository
|
||||
|
||||
@ -75,8 +75,8 @@ to your repository to see the workflow in action.
|
||||
Your documentation should shortly appear at `<username>.github.io/<repository>`.
|
||||
|
||||
_Remember to set the_ `GH_TOKEN` _environment variable to the value of your
|
||||
[personal access token][3] when using [Material for MkDocs Insiders][4], which
|
||||
can be done using [secrets][5]._
|
||||
[personal access token][3] when deploying [Insiders][4], which can be done
|
||||
using [secrets][5]._
|
||||
|
||||
[2]: https://github.com/features/actions
|
||||
[3]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
|
||||
@ -119,7 +119,7 @@ following contents:
|
||||
|
||||
``` yaml
|
||||
image: python:latest
|
||||
deploy:
|
||||
pages:
|
||||
stage: deploy
|
||||
only:
|
||||
- master
|
||||
@ -138,8 +138,8 @@ workflow in action.
|
||||
Your documentation should shortly appear at `<username>.gitlab.io/<repository>`.
|
||||
|
||||
_Remember to set the_ `GH_TOKEN` _environment variable to the value of your
|
||||
[personal access token][3] when using [Material for MkDocs Insiders][4], which
|
||||
can be done using [masked custom variables][8]._
|
||||
[personal access token][3] when deploying [Insiders][4], which can be done
|
||||
using [masked custom variables][8]._
|
||||
|
||||
[6]: https://gitlab.com/pages
|
||||
[7]: https://docs.gitlab.com/ee/ci/
|
||||
|
||||
@ -13,7 +13,9 @@ enable site-wide glossaries.
|
||||
|
||||
### Abbreviations
|
||||
|
||||
The [Abbreviations][1] extension, which is part of the standard Markdown
|
||||
[:octicons-file-code-24: Source][1] · [:octicons-workflow-24: Extension][2]
|
||||
|
||||
The [Abbreviations][2] extension, which is part of the standard Markdown
|
||||
library, allows to __add additional content to parts of the text which are then
|
||||
shown on hover__, e.g. for glossaries:
|
||||
|
||||
@ -22,11 +24,12 @@ markdown_extensions:
|
||||
- abbr
|
||||
```
|
||||
|
||||
[1]: https://python-markdown.github.io/extensions/abbreviations/
|
||||
[1]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_typeset.scss
|
||||
[2]: https://python-markdown.github.io/extensions/abbreviations/
|
||||
|
||||
### Snippets
|
||||
|
||||
The [Snippets][2] extension, which is part of [Python Markdown Extensions][3],
|
||||
The [Snippets][3] extension, which is part of [Python Markdown Extensions][4],
|
||||
allows to __insert content from other files__ or other, regular content, and can
|
||||
be enabled via `mkdocs.yml`:
|
||||
|
||||
@ -35,15 +38,15 @@ markdown_extensions:
|
||||
- pymdownx.snippets
|
||||
```
|
||||
|
||||
[2]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/
|
||||
[3]: https://facelessuser.github.io/pymdown-extensions/
|
||||
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/snippets/
|
||||
[4]: https://facelessuser.github.io/pymdown-extensions/
|
||||
|
||||
## Usage
|
||||
|
||||
### Adding abbreviations
|
||||
|
||||
When the [Abbreviations][4] extension is enabled, abbreviations can be defined
|
||||
with a special syntax similar to URLs and [footnotes][5] at any point in the
|
||||
When the [Abbreviations][5] extension is enabled, abbreviations can be defined
|
||||
with a special syntax similar to URLs and [footnotes][6] at any point in the
|
||||
Markdown document.
|
||||
|
||||
_Example_:
|
||||
@ -62,12 +65,12 @@ The HTML specification is maintained by the W3C.
|
||||
*[HTML]: Hyper Text Markup Language
|
||||
*[W3C]: World Wide Web Consortium
|
||||
|
||||
[4]: #abbreviations_1
|
||||
[5]: footnotes.md
|
||||
[5]: #abbreviations_1
|
||||
[6]: footnotes.md
|
||||
|
||||
### Adding a glossary
|
||||
|
||||
When [Snippets][6] is enabled, content from other files can be embedded, which
|
||||
When [Snippets][7] is enabled, content from other files can be embedded, which
|
||||
is especially useful to include abbreviations from a central file – a glossary –
|
||||
and embed them into any other file.
|
||||
|
||||
@ -96,4 +99,4 @@ _Remember to locate the Markdown file containing the definitions outside of the_
|
||||
`docs` _folder (here_ `includes` _is used), or MkDocs may complain about an
|
||||
unreferenced file._
|
||||
|
||||
[6]: #snippets
|
||||
[7]: #snippets
|
||||
|
||||
@ -380,8 +380,8 @@ override it as part of your additional stylesheet:
|
||||
}
|
||||
```
|
||||
|
||||
[22]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss#L60-L73
|
||||
[22]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss#
|
||||
[23]: #use-pygments
|
||||
[24]: ../setup/changing-the-colors.md#color-scheme
|
||||
[25]: https://pygments.org/docs/tokens/#literals
|
||||
[26]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/markdown/_codehilite.scss#L42
|
||||
[26]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/markdown/_codehilite.scss
|
||||
|
||||
@ -91,19 +91,19 @@ _Example_:
|
||||
```
|
||||
- :material-account-circle: – `.icons/material/account-circle.svg`
|
||||
- :fontawesome-regular-laugh-wink: – `.icons/fontawesome/regular/laugh-wink.svg`
|
||||
- :octicons-octoface-16: – `.icons/octicons/octoface-16.svg`
|
||||
- :octicons-octoface-24: – `.icons/octicons/octoface-24.svg`
|
||||
```
|
||||
|
||||
_Result_:
|
||||
|
||||
- :material-account-circle: – [`.icons/material/account-circle.svg`][14]
|
||||
- :fontawesome-regular-laugh-wink: – [`.icons/fontawesome/regular/laugh-wink.svg`][15]
|
||||
- :octicons-octoface-16: – [`.icons/octicons/octoface-16.svg`][16]
|
||||
- :octicons-octoface-24: – [`.icons/octicons/octoface-24.svg`][16]
|
||||
|
||||
[13]: #emoji
|
||||
[14]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/material/account-circle.svg
|
||||
[15]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/fontawesome/regular/laugh-wink.svg
|
||||
[16]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/octicons/octoface-16.svg
|
||||
[16]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/octicons/octoface-24.svg
|
||||
|
||||
#### with colors
|
||||
|
||||
@ -178,20 +178,6 @@ and adding the dedicated CSS class to the icon:
|
||||
|
||||
Then, simply add the CSS class to the icon.
|
||||
|
||||
<style>
|
||||
@keyframes heart {
|
||||
0%, 40%, 80%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
20%, 60% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
.heart {
|
||||
animation: heart 1000ms infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
_Example_:
|
||||
|
||||
``` markdown
|
||||
@ -200,7 +186,7 @@ _Example_:
|
||||
|
||||
_Result_:
|
||||
|
||||
:octicons-heart-fill-24:{: .heart }
|
||||
:octicons-heart-fill-24:{: .tx-heart }
|
||||
|
||||
[20]: #with-colors
|
||||
[21]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
|
||||
|
||||
@ -55,6 +55,7 @@ Markdown document, delimited by a blank line which ends the YAML context.
|
||||
### Selective integration
|
||||
|
||||
[:octicons-file-code-24: Source][2] ·
|
||||
:octicons-note-24: Metadata ·
|
||||
:octicons-mortar-board-24: Difficulty: _easy_
|
||||
|
||||
If the [Metadata][7] extension is enabled, you can disable or enable Disqus for
|
||||
@ -96,6 +97,6 @@ In order to integrate another JavaScript-based comment system provider, you can
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
[8]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L325-L328
|
||||
[8]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
||||
[9]: ../customization.md#extending-the-theme
|
||||
[10]: ../customization.md#overriding-blocks
|
||||
|
||||
@ -93,7 +93,7 @@ behavior can be changed by setting [`edit_uri`][9] in `mkdocs.yml`:
|
||||
edit_uri: ""
|
||||
```
|
||||
|
||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L292-L301
|
||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
||||
[6]: https://github.com/
|
||||
[7]: https://about.gitlab.com/
|
||||
[8]: https://bitbucket.org/
|
||||
|
||||
@ -30,8 +30,7 @@ theme:
|
||||
scheme: default
|
||||
```
|
||||
|
||||
:material-cursor-default-click-outline: Click on a tile to change the color
|
||||
scheme:
|
||||
_Click on a tile to change the color scheme_:
|
||||
|
||||
<div class="tx-switch">
|
||||
<button data-md-color-scheme="default"><code>default</code></button>
|
||||
@ -76,8 +75,7 @@ theme:
|
||||
primary: indigo
|
||||
```
|
||||
|
||||
:material-cursor-default-click-outline: Click on a tile to change the primary
|
||||
color:
|
||||
_Click on a tile to change the primary color_:
|
||||
|
||||
<div class="tx-switch">
|
||||
<button data-md-color-primary="red"><code>red</code></button>
|
||||
@ -131,8 +129,7 @@ theme:
|
||||
accent: indigo
|
||||
```
|
||||
|
||||
:material-cursor-default-click-outline: Click on a tile to change the accent
|
||||
color:
|
||||
_Click on a tile to change the accent color_:
|
||||
|
||||
<style>
|
||||
.md-typeset button[data-md-color-accent] > code {
|
||||
@ -186,23 +183,27 @@ color:
|
||||
|
||||
### Color palette toggle
|
||||
|
||||
[:octicons-file-code-24: Source][6] ·
|
||||
:octicons-beaker-24: Experimental ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][6]{: .tx-insiders }
|
||||
[:octicons-file-code-24: Source][6] ·
|
||||
:octicons-beaker-24: Experimental ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][6]{: .tx-insiders }
|
||||
|
||||
[Material for MkDocs Insiders][6] makes it possible to define multiple color
|
||||
palettes, including a [scheme][7], [primary][8] and [accent][9] color each, and
|
||||
let the user choose. Define them via `mkdocs.yml`:
|
||||
[Insiders][6] can easily add multiple color palettes, including a [scheme][8],
|
||||
[primary][9] and [accent][10] color each, and let the user choose. A color
|
||||
palette toggle can be added via `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
theme:
|
||||
palette:
|
||||
|
||||
# Toggle light mode
|
||||
- scheme: default
|
||||
primary: indigo
|
||||
accent: indigo
|
||||
toggle:
|
||||
icon: material/toggle-switch
|
||||
name: Switch to light mode
|
||||
|
||||
# Toggle dark mode
|
||||
- scheme: slate
|
||||
primary: blue
|
||||
accent: blue
|
||||
@ -211,6 +212,16 @@ theme:
|
||||
name: Switch to dark mode
|
||||
```
|
||||
|
||||
This will render a color palette toggle in the header next to the search bar:
|
||||
|
||||
<figure markdown="1">
|
||||
[![Color palette toggle][11]][11]
|
||||
<figcaption markdown="1">
|
||||
A demo is worth a thousand words — check it out at
|
||||
[squidfunk.github.io/mkdocs-material-insiders][7]
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
The `toggle` field allows to specify an `icon` and `name` for each palette. The
|
||||
toggle is rendered next to the search bar and will cycle through all defined
|
||||
color palettes:
|
||||
@ -219,7 +230,7 @@ color palettes:
|
||||
|
||||
: :octicons-milestone-24: Default: _none_ · :octicons-alert-24: Required –
|
||||
This field must point to a valid icon path referencing [any icon bundled
|
||||
with the theme][10], or the build will not succeed. Some popular
|
||||
with the theme][12], or the build will not succeed. Some popular
|
||||
combinations:
|
||||
|
||||
* :material-toggle-switch-off-outline: + :material-toggle-switch: – `material/toggle-switch-off-outline` + `material/toggle-switch`
|
||||
@ -233,28 +244,24 @@ color palettes:
|
||||
This field is used as the toggle's `title` attribute and should be set to a
|
||||
discernable name to improve accessibility.
|
||||
|
||||
[Try this feature][11]{: .md-button .md-button--primary }
|
||||
|
||||
_This feature is enabled on the [official documentation][11] built with
|
||||
Insiders._
|
||||
|
||||
[6]: ../insiders.md
|
||||
[7]: #color-scheme
|
||||
[8]: #primary-color
|
||||
[9]: #accent-color
|
||||
[10]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
||||
[11]: https://squidfunk.github.io/mkdocs-material-insiders/setup/changing-the-colors
|
||||
[7]: https://squidfunk.github.io/mkdocs-material-insiders/setup/changing-the-colors
|
||||
[8]: #color-scheme
|
||||
[9]: #primary-color
|
||||
[10]: #accent-color
|
||||
[11]: ../assets/screenshots/color-palette-toggle.png
|
||||
[12]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
|
||||
|
||||
## Customization
|
||||
|
||||
### Custom colors
|
||||
|
||||
[:octicons-file-code-24: Source][12] ·
|
||||
[:octicons-file-code-24: Source][13] ·
|
||||
:octicons-mortar-board-24: Difficulty: _easy_
|
||||
|
||||
Material for MkDocs implements colors using [CSS variables][13] (custom
|
||||
Material for MkDocs implements colors using [CSS variables][14] (custom
|
||||
properties). If you want to customize the colors beyond the palette (e.g. to
|
||||
use your brand-specific colors), you can add an [additional stylesheet][14] and
|
||||
use your brand-specific colors), you can add an [additional stylesheet][15] and
|
||||
tweak the values of the CSS variables.
|
||||
|
||||
Let's say you're :fontawesome-brands-youtube:{: style="color: #EE0F0F" }
|
||||
@ -269,23 +276,23 @@ add:
|
||||
}
|
||||
```
|
||||
|
||||
See the file containing the [color definitions][12] for a list of all CSS
|
||||
See the file containing the [color definitions][13] for a list of all CSS
|
||||
variables.
|
||||
|
||||
[12]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss
|
||||
[13]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
||||
[14]: ../customization.md#additional-css
|
||||
[13]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss
|
||||
[14]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
||||
[15]: ../customization.md#additional-css
|
||||
|
||||
|
||||
### Custom color schemes
|
||||
|
||||
[:octicons-file-code-24: Source][3] ·
|
||||
[:octicons-file-code-24: Source][13] ·
|
||||
:octicons-mortar-board-24: Difficulty: _easy_
|
||||
|
||||
Besides overriding specific colors, you can create your own, named color scheme
|
||||
by wrapping the definitions in the `#!css [data-md-color-scheme="..."]`
|
||||
[attribute selector][15], which you can then set via `mkdocs.yml` as described
|
||||
in the [color schemes][7] section:
|
||||
[attribute selector][16], which you can then set via `mkdocs.yml` as described
|
||||
in the [color schemes][8] section:
|
||||
|
||||
``` css
|
||||
[data-md-color-scheme="youtube"] {
|
||||
@ -305,4 +312,4 @@ can tune the `slate` theme with:
|
||||
}
|
||||
```
|
||||
|
||||
[15]: https://www.w3.org/TR/selectors-4/#attribute-selectors
|
||||
[16]: https://www.w3.org/TR/selectors-4/#attribute-selectors
|
||||
|
||||
@ -30,7 +30,7 @@ theme:
|
||||
|
||||
The typeface will be loaded in 300, 400, _400i_ and __700__.
|
||||
|
||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L107-L132
|
||||
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
||||
[3]: https://fonts.google.com/specimen/Roboto
|
||||
|
||||
### Proportional font
|
||||
|
||||
@ -24,58 +24,56 @@ theme:
|
||||
|
||||
The following languages are supported:
|
||||
|
||||
<ul class="tx-columns">
|
||||
<li><code>af</code> – Afrikaans</li>
|
||||
<li><code>ar</code> – Arabic</li>
|
||||
<li><code>bn</code> – Bengali (Bangla)</li>
|
||||
<li><code>ca</code> – Catalan</li>
|
||||
<li><code>cs</code> – Czech</li>
|
||||
<li><code>da</code> – Danish</li>
|
||||
<li><code>de</code> – German</li>
|
||||
<li><code>en</code> – English</li>
|
||||
<li><code>eo</code> – Esperanto</li>
|
||||
<li><code>es</code> – Spanish</li>
|
||||
<li><code>et</code> – Estonian</li>
|
||||
<li><code>fa</code> – Persian (Farsi)</li>
|
||||
<li><code>fi</code> – Finnish</li>
|
||||
<li><code>fr</code> – French</li>
|
||||
<li><code>gl</code> – Galician</li>
|
||||
<li><code>gr</code> – Greek</li>
|
||||
<li><code>he</code> – Hebrew</li>
|
||||
<li><code>hi</code> – Hindi</li>
|
||||
<li><code>hr</code> – Croatian</li>
|
||||
<li><code>hu</code> – Hungarian</li>
|
||||
<li><code>id</code> – Indonesian</li>
|
||||
<li><code>it</code> – Italian</li>
|
||||
<li><code>ja</code> – Japanese</li>
|
||||
<li><code>ka</code> – Georgian</li>
|
||||
<li><code>kr</code> – Korean</li>
|
||||
<li><code>my</code> – Burmese</li>
|
||||
<li><code>nl</code> – Dutch</li>
|
||||
<li><code>nn</code> – Norwegian (Nynorsk)</li>
|
||||
<li><code>no</code> – Norwegian</li>
|
||||
<li><code>pl</code> – Polish</li>
|
||||
<li><code>pt</code> – Portuguese</li>
|
||||
<li><code>ro</code> – Romanian</li>
|
||||
<li><code>ru</code> – Russian</li>
|
||||
<li><code>sh</code> – Serbo-Croatian</li>
|
||||
<li><code>si</code> – Slovenian</li>
|
||||
<li><code>sk</code> – Slovak</li>
|
||||
<li><code>sr</code> – Serbian</li>
|
||||
<li><code>sv</code> – Swedish</li>
|
||||
<li><code>th</code> – Thai</li>
|
||||
<li><code>tr</code> – Turkish</li>
|
||||
<li><code>uk</code> – Ukrainian</li>
|
||||
<li><code>vi</code> – Vietnamese</li>
|
||||
<li><code>zh</code> – Chinese (Simplified)</li>
|
||||
<li><code>zh-Hant</code> – Chinese (Traditional)</li>
|
||||
<li><code>zh-TW</code> – Chinese (Taiwanese)</li>
|
||||
<li>
|
||||
<a href="https://bit.ly/38F5RCa">
|
||||
Add language
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tx-columns" markdown="1">
|
||||
|
||||
- `af` – Afrikaans
|
||||
- `ar` – Arabic
|
||||
- `bn` – Bengali (Bangla)
|
||||
- `ca` – Catalan
|
||||
- `cs` – Czech
|
||||
- `da` – Danish
|
||||
- `de` – German
|
||||
- `en` – English
|
||||
- `eo` – Esperanto
|
||||
- `es` – Spanish
|
||||
- `et` – Estonian
|
||||
- `fa` – Persian (Farsi)
|
||||
- `fi` – Finnish
|
||||
- `fr` – French
|
||||
- `gl` – Galician
|
||||
- `gr` – Greek
|
||||
- `he` – Hebrew
|
||||
- `hi` – Hindi
|
||||
- `hr` – Croatian
|
||||
- `hu` – Hungarian
|
||||
- `id` – Indonesian
|
||||
- `it` – Italian
|
||||
- `ja` – Japanese
|
||||
- `ka` – Georgian
|
||||
- `kr` – Korean
|
||||
- `my` – Burmese
|
||||
- `nl` – Dutch
|
||||
- `nn` – Norwegian (Nynorsk)
|
||||
- `no` – Norwegian
|
||||
- `pl` – Polish
|
||||
- `pt` – Portuguese
|
||||
- `ro` – Romanian
|
||||
- `ru` – Russian
|
||||
- `sh` – Serbo-Croatian
|
||||
- `si` – Slovenian
|
||||
- `sk` – Slovak
|
||||
- `sr` – Serbian
|
||||
- `sv` – Swedish
|
||||
- `th` – Thai
|
||||
- `tr` – Turkish
|
||||
- `uk` – Ukrainian
|
||||
- `vi` – Vietnamese
|
||||
- `zh` – Chinese (Simplified)
|
||||
- `zh-Hant` – Chinese (Traditional)
|
||||
- `zh-TW` – Chinese (Taiwanese)
|
||||
- [Add language](https://bit.ly/38F5RCa)
|
||||
|
||||
</div>
|
||||
|
||||
_Note that some languages will produce unreadable anchor links, due to the way
|
||||
the default slug function works. Consider using a Unicode-aware slug function,
|
||||
@ -97,40 +95,30 @@ can be added to the header next to the search bar. Languages can be defined via
|
||||
``` yaml
|
||||
extra:
|
||||
alternate:
|
||||
|
||||
# Switch to English
|
||||
- name: English
|
||||
link: https://squidfunk.github.io/mkdocs-material-insiders/en/
|
||||
link: <your-site>/en/
|
||||
lang: en
|
||||
|
||||
# Switch to German
|
||||
- name: Deutsch
|
||||
link: https://squidfunk.github.io/mkdocs-material-insiders/de/
|
||||
link: <your-site>/de/
|
||||
lang: de
|
||||
|
||||
# Switch to Japanese
|
||||
- name: 日本語
|
||||
link: https://squidfunk.github.io/mkdocs-material-insiders/jp/
|
||||
lang: jp
|
||||
link: <your-site>/ja/
|
||||
lang: ja
|
||||
```
|
||||
|
||||
This will render a language selector in the header next to the search bar:
|
||||
|
||||
[![Language selection][4]][4]
|
||||
[![Language selection][4]][4]
|
||||
|
||||
[3]: ../insiders.md
|
||||
[4]: ../assets/screenshots/language-selection.png
|
||||
|
||||
This assumes that your project is structured into multiple subfolders, each of
|
||||
which contain the entire documentation for a given language, e.g.:
|
||||
|
||||
``` sh
|
||||
.
|
||||
├─ en/
|
||||
│ ├─ docs/
|
||||
│ └─ mkdocs.yml
|
||||
├─ de/
|
||||
│ ├─ docs/
|
||||
│ └─ mkdocs.yml
|
||||
└─ jp/
|
||||
├─ docs/
|
||||
└─ mkdocs.yml
|
||||
```
|
||||
|
||||
### Site search language
|
||||
|
||||
[:octicons-file-code-24: Source][5] ·
|
||||
@ -141,7 +129,7 @@ work properly. Material for MkDocs relies on [lunr-languages][6] to provide this
|
||||
functionality. See the guide detailing how to [set up site search][7] for
|
||||
more information.
|
||||
|
||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/search/worker/main/index.ts#L77-L108
|
||||
[5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/search/worker/main/index.ts
|
||||
[6]: https://github.com/MihaiValentin/lunr-languages
|
||||
[7]: setting-up-site-search.md
|
||||
|
||||
@ -159,8 +147,7 @@ theme:
|
||||
direction: ltr
|
||||
```
|
||||
|
||||
:material-cursor-default-click-outline: Click on a tile to change the
|
||||
directionality:
|
||||
Click on a tile to change the directionality:
|
||||
|
||||
<div class="tx-switch">
|
||||
<button data-md-dir="ltr"><code>ltr</code></button>
|
||||
@ -179,7 +166,7 @@ directionality:
|
||||
})
|
||||
</script>
|
||||
|
||||
[8]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L185
|
||||
[8]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
||||
|
||||
## Customization
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ theme:
|
||||
favicon: images/favicon.png
|
||||
```
|
||||
|
||||
[4]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L60-L61
|
||||
[4]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
||||
|
||||
### Icons
|
||||
|
||||
|
||||
@ -63,60 +63,16 @@ theme:
|
||||
|
||||
[![Without tabs][8]][8]
|
||||
|
||||
Note that all __top-level pages__ (i.e. all top-level entries that directly
|
||||
refer to an `*.md` file) defined inside the [`nav`][9] entry of `mkdocs.yml`
|
||||
will be grouped under the first tab which will receive the title of the first
|
||||
page.
|
||||
|
||||
This means that there will effectively be no collapsible subsections for the
|
||||
first tab, because each subsection is rendered as another tab. If you want more
|
||||
fine-grained control, _i.e. collapsible subsections for the first tab_, you can
|
||||
use __top-level sections__, so that the top-level is entirely made up of
|
||||
sections. This is illustrated in the following example:
|
||||
|
||||
=== "Top-level pages"
|
||||
|
||||
``` yaml
|
||||
nav:
|
||||
- Tab 1 + Page 1.1
|
||||
- Page 1.2
|
||||
- Tab 2:
|
||||
- Page 2.1
|
||||
- Page 2.2
|
||||
- Page 2.3
|
||||
- Page 1.3
|
||||
```
|
||||
|
||||
=== "Top-level sections"
|
||||
|
||||
``` yaml
|
||||
nav:
|
||||
- Tab 1:
|
||||
- Page 1.1
|
||||
- Page 1.2
|
||||
- Page 1.3
|
||||
- Tab 2:
|
||||
- Page 2.1
|
||||
- Page 2.2
|
||||
- Page 2.3
|
||||
```
|
||||
|
||||
Also note that tabs are only shown for larger screens, so make sure that
|
||||
navigation is plausible on mobile devices. As another example, see the
|
||||
[`mkdocs.yml`][10] used to render these pages.
|
||||
|
||||
[6]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/tabs.html
|
||||
[7]: ../assets/screenshots/navigation-tabs.png
|
||||
[8]: ../assets/screenshots/navigation.png
|
||||
[9]: https://www.mkdocs.org/user-guide/configuration/#nav
|
||||
[10]: https://github.com/squidfunk/mkdocs-material/blob/master/mkdocs.yml
|
||||
|
||||
#### Sticky navigation tabs
|
||||
|
||||
[:octicons-file-code-24: Source][11] ·
|
||||
[:octicons-file-code-24: Source][9] ·
|
||||
:octicons-unlock-24: Feature flag ·
|
||||
:octicons-beaker-24: Experimental ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][9]{: .tx-insiders }
|
||||
|
||||
When _sticky tabs_ are enabled, navigation tabs will lock below the header and
|
||||
always remain visible when scrolling down. Just add the following two feature
|
||||
@ -131,21 +87,20 @@ theme:
|
||||
|
||||
=== "With sticky tabs"
|
||||
|
||||
[![With sticky tabs][12]][12]
|
||||
[![With sticky tabs][10]][10]
|
||||
|
||||
=== "Without sticky tabs"
|
||||
|
||||
[![Without sticky tabs][13]][13]
|
||||
[![Without sticky tabs][11]][11]
|
||||
|
||||
[11]: ../insiders.md
|
||||
[12]: ../assets/screenshots/navigation-tabs-sticky.png
|
||||
[13]: ../assets/screenshots/navigation-tabs-collapsed.png
|
||||
[9]: ../insiders.md
|
||||
[10]: ../assets/screenshots/navigation-tabs-sticky.png
|
||||
[11]: ../assets/screenshots/navigation-tabs-collapsed.png
|
||||
|
||||
### Navigation sections
|
||||
|
||||
[:octicons-file-code-24: Source][11] ·
|
||||
:octicons-unlock-24: Feature flag ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
||||
[:octicons-file-code-24: Source][12] ·
|
||||
:octicons-unlock-24: Feature flag
|
||||
|
||||
When _sections_ are enabled, top-level sections are rendered as groups in the
|
||||
sidebar for viewports above `1220px`, but remain as-is on mobile. They can also
|
||||
@ -159,23 +114,23 @@ theme:
|
||||
|
||||
=== "With sections"
|
||||
|
||||
[![With sections][14]][14]
|
||||
[![With sections][13]][13]
|
||||
|
||||
=== "Without sections"
|
||||
|
||||
[![Without sections][8]][8]
|
||||
|
||||
[14]: ../assets/screenshots/navigation-sections.png
|
||||
[12]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/nav-item.html
|
||||
[13]: ../assets/screenshots/navigation-sections.png
|
||||
|
||||
Both feature flags, _tabs_ and _sections_, can be combined with each other. If
|
||||
both feature flags are enabled, sections are rendered for 2nd level navigation
|
||||
both feature flags are enabled, sections are rendered for level 2 navigation
|
||||
items.
|
||||
|
||||
### Navigation expansion
|
||||
|
||||
[:octicons-file-code-24: Source][11] ·
|
||||
:octicons-unlock-24: Feature flag ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
||||
[:octicons-file-code-24: Source][12] ·
|
||||
:octicons-unlock-24: Feature flag
|
||||
|
||||
When _expansion_ is enabled, the left sidebar will expand all collapsible
|
||||
subsections by default, so the user doesn't have to open subsections manually.
|
||||
@ -189,19 +144,19 @@ theme:
|
||||
|
||||
=== "With expansion"
|
||||
|
||||
[![With expansion][15]][15]
|
||||
[![With expansion][14]][14]
|
||||
|
||||
=== "Without expansion"
|
||||
|
||||
[![Without expansion][8]][8]
|
||||
|
||||
[15]: ../assets/screenshots/navigation-expand.png
|
||||
[14]: ../assets/screenshots/navigation-expand.png
|
||||
|
||||
### Table of contents
|
||||
|
||||
[:octicons-file-code-24: Source][16] · [:octicons-workflow-24: Extension][17]
|
||||
[:octicons-file-code-24: Source][15] · [:octicons-workflow-24: Extension][16]
|
||||
|
||||
The [Table of contents][18] extension, which is part of the standard Markdown
|
||||
The [Table of contents][17] extension, which is part of the standard Markdown
|
||||
library, provides some options that are supported by Material for MkDocs to
|
||||
customize its appearance:
|
||||
|
||||
@ -232,8 +187,8 @@ customize its appearance:
|
||||
|
||||
: :octicons-milestone-24: Default: `headerid.slugify` – This option allows for
|
||||
customization of the slug function. For some languages, the default may not
|
||||
produce good and readable identifiers. Consider using another slug function
|
||||
like for example those from [Python Markdown Extensions][19]:
|
||||
produce good and readable identifiers – consider using another slug function
|
||||
like for example those from [Python Markdown Extensions][18]:
|
||||
|
||||
=== "Unicode"
|
||||
|
||||
@ -274,30 +229,29 @@ customize its appearance:
|
||||
toc_depth: 0
|
||||
```
|
||||
|
||||
Note that MkDocs will not generate [anchor links][20] for levels outside
|
||||
Note that MkDocs will not generate [anchor links][19] for levels outside
|
||||
the range defined with `toc_depth`. However, Material for MkDocs also allows
|
||||
to [hide the table of contents][21] on a specific page while keeping
|
||||
to [hide the table of contents][20] on a specific page while keeping
|
||||
permalinks.
|
||||
|
||||
_Material for MkDocs doesn't provide official support for the other options of
|
||||
this extension, so they may be supported but can also yield weird results. Use
|
||||
them at your own risk._
|
||||
|
||||
[16]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/toc.html
|
||||
[17]: https://python-markdown.github.io/extensions/toc/
|
||||
[18]: https://python-markdown.github.io/extensions/toc/#usage
|
||||
[19]: https://facelessuser.github.io/pymdown-extensions/extras/slugs/
|
||||
[20]: #permalink
|
||||
[21]: #hide-the-sidebars
|
||||
[15]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/toc.html
|
||||
[16]: https://python-markdown.github.io/extensions/toc/
|
||||
[17]: https://python-markdown.github.io/extensions/toc/#usage
|
||||
[18]: https://facelessuser.github.io/pymdown-extensions/extras/slugs/
|
||||
[19]: #permalink
|
||||
[20]: #hide-the-sidebars
|
||||
|
||||
#### Navigation integration
|
||||
|
||||
[:octicons-file-code-24: Source][11] ·
|
||||
:octicons-unlock-24: Feature flag ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
||||
[:octicons-file-code-24: Source][21] ·
|
||||
:octicons-unlock-24: Feature flag
|
||||
|
||||
When _integration_ is enabled, the table of contents is rendered as part of
|
||||
the navigation for viewports above `1220px`, but remain as-is on mobile. This
|
||||
the navigation for viewports above `1220px`, but remains as-is on mobile. This
|
||||
can be enabled via `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
@ -314,6 +268,7 @@ theme:
|
||||
|
||||
[![Separate table of contents][8]][8]
|
||||
|
||||
[21]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/layout/_nav.scss
|
||||
[22]: ../assets/screenshots/toc-integrate.png
|
||||
|
||||
The content section will now always stretch to the right side, resulting in
|
||||
@ -322,12 +277,12 @@ feature flags, e.g. [tabs][1] and [sections][2].
|
||||
|
||||
### Hide the sidebars
|
||||
|
||||
[:octicons-file-code-24: Source][11] ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
||||
[:octicons-file-code-24: Source][23] ·
|
||||
:octicons-note-24: Metadata
|
||||
|
||||
Sometimes it's desirable to hide the navigation and/or table of contents
|
||||
sidebar, especially when there's a single navigation item. This can be done for
|
||||
any page using the [Metadata][23] extension:
|
||||
any page using the [Metadata][24] extension:
|
||||
|
||||
``` yaml
|
||||
---
|
||||
@ -341,26 +296,27 @@ hide:
|
||||
|
||||
=== "Hide navigation"
|
||||
|
||||
[![Hide navigation][24]][24]
|
||||
[![Hide navigation][25]][25]
|
||||
|
||||
=== "Hide table of contents"
|
||||
|
||||
[![Hide table of contents][25]][25]
|
||||
[![Hide table of contents][26]][26]
|
||||
|
||||
=== "Hide both"
|
||||
|
||||
[![Hide navigation and table of contents][26]][26]
|
||||
[![Hide navigation and table of contents][27]][27]
|
||||
|
||||
[23]: ../../reference/meta-tags/#metadata
|
||||
[24]: ../assets/screenshots/hide-navigation.png
|
||||
[25]: ../assets/screenshots/hide-toc.png
|
||||
[26]: ../assets/screenshots/hide-navigation-toc.png
|
||||
[23]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
||||
[24]: ../../reference/meta-tags/#metadata
|
||||
[25]: ../assets/screenshots/hide-navigation.png
|
||||
[26]: ../assets/screenshots/hide-toc.png
|
||||
[27]: ../assets/screenshots/hide-navigation-toc.png
|
||||
|
||||
## Customization
|
||||
|
||||
### Keyboard shortcuts
|
||||
|
||||
[:octicons-file-code-24: Source][27] ·
|
||||
[:octicons-file-code-24: Source][28] ·
|
||||
:octicons-mortar-board-24: Difficulty: _easy_
|
||||
|
||||
Material for MkDocs includes several keyboard shortcuts that make it possible
|
||||
@ -386,7 +342,7 @@ to navigate your project documentation via keyboard. There're two modes:
|
||||
* ++n++ , ++period++ : go to next page
|
||||
|
||||
Let's say you want to bind some action to the ++x++ key. By using [additional
|
||||
JavaScript][28], you can subscribe to the `keyboard$` observable and attach
|
||||
JavaScript][29], you can subscribe to the `keyboard$` observable and attach
|
||||
your custom event listener:
|
||||
|
||||
``` js
|
||||
@ -402,12 +358,12 @@ The call to `#!js key.claim()` will essentially execute `#!js preventDefault()`
|
||||
on the underlying event, so the keypress will not propagate further and touch
|
||||
other event listeners.
|
||||
|
||||
[27]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/keyboard/index.ts
|
||||
[28]: ../customization.md#additional-javascript
|
||||
[28]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/keyboard/index.ts
|
||||
[29]: ../customization.md#additional-javascript
|
||||
|
||||
### Content area width
|
||||
|
||||
[:octicons-file-code-24: Source][29] ·
|
||||
[:octicons-file-code-24: Source][30] ·
|
||||
:octicons-mortar-board-24: Difficulty: _easy_
|
||||
|
||||
The width of the content area is set so the length of each line doesn't exceed
|
||||
@ -416,7 +372,7 @@ is a reasonable default, as longer lines tend to be harder to read, it may be
|
||||
desirable to increase the overall width of the content area, or even make it
|
||||
stretch to the entire available space.
|
||||
|
||||
This can easily be achieved with an [additional stylesheet][30] and a few lines
|
||||
This can easily be achieved with an [additional stylesheet][31] and a few lines
|
||||
of CSS:
|
||||
|
||||
=== "Increase width"
|
||||
@ -435,5 +391,5 @@ of CSS:
|
||||
}
|
||||
```
|
||||
|
||||
[29]: https://github.com/squidfunk/mkdocs-material/blob/aeaa00a625abf952f355164de02c539b061e6127/src/assets/stylesheets/main/layout/_base.scss#L99-L104
|
||||
[30]: ../customization.md#additional-css
|
||||
[30]: https://github.com/squidfunk/mkdocs-material/blob/aeaa00a625abf952f355164de02c539b061e6127/src/assets/stylesheets/main/layout/_base.scss
|
||||
[31]: ../customization.md#additional-css
|
||||
|
||||
@ -6,8 +6,8 @@ template: overrides/main.html
|
||||
|
||||
Material for MkDocs provides an excellent, client-side search implementation,
|
||||
omitting the need for the integration of third-party services, which might
|
||||
violate data privacy regulations. Moreover, with some effort, search can be
|
||||
made available [offline][1].
|
||||
be tricky to integrate to be compliant with data privacy regulations. Moreover,
|
||||
with some effort, search can be made available [offline][1].
|
||||
|
||||
[1]: #offline-search
|
||||
|
||||
@ -58,27 +58,29 @@ The following options are supported:
|
||||
|
||||
The following languages are supported:
|
||||
|
||||
<ul class="tx-columns">
|
||||
<li><code>ar</code> – Arabic</li>
|
||||
<li><code>da</code> – Danish</li>
|
||||
<li><code>du</code> – Dutch</li>
|
||||
<li><code>en</code> – English</li>
|
||||
<li><code>fi</code> – Finnish</li>
|
||||
<li><code>fr</code> – French</li>
|
||||
<li><code>de</code> – German</li>
|
||||
<li><code>hu</code> – Hungarian</li>
|
||||
<li><code>it</code> – Italian</li>
|
||||
<li><code>ja</code> – Japanese</li>
|
||||
<li><code>no</code> – Norwegian</li>
|
||||
<li><code>pt</code> – Portuguese</li>
|
||||
<li><code>ro</code> – Romanian</li>
|
||||
<li><code>ru</code> – Russian</li>
|
||||
<li><code>es</code> – Spanish</li>
|
||||
<li><code>sv</code> – Swedish</li>
|
||||
<li><code>th</code> – Thai</li>
|
||||
<li><code>tr</code> – Turkish</li>
|
||||
<li><code>vi</code> – Vietnamese</li>
|
||||
</ul>
|
||||
<div class="tx-columns" markdown="1">
|
||||
|
||||
- `ar` – Arabic
|
||||
- `da` – Danish
|
||||
- `du` – Dutch
|
||||
- `en` – English
|
||||
- `fi` – Finnish
|
||||
- `fr` – French
|
||||
- `de` – German
|
||||
- `hu` – Hungarian
|
||||
- `it` – Italian
|
||||
- `ja` – Japanese
|
||||
- `no` – Norwegian
|
||||
- `pt` – Portuguese
|
||||
- `ro` – Romanian
|
||||
- `ru` – Russian
|
||||
- `es` – Spanish
|
||||
- `sv` – Swedish
|
||||
- `th` – Thai
|
||||
- `tr` – Turkish
|
||||
- `vi` – Vietnamese
|
||||
|
||||
</div>
|
||||
|
||||
_Material for MkDocs also tries to support languages that are not part of
|
||||
this list by choosing the stemmer yielding the best result automatically_.
|
||||
@ -149,19 +151,19 @@ theme:
|
||||
- search.suggest
|
||||
```
|
||||
|
||||
Searching for [ :material-magnify: ^^code high^^ ] yields [ :material-magnify:
|
||||
^^code highlighting^^ ] as a suggestion:
|
||||
Searching for ^^code high^^ yields ^^code highlighting^^ as a suggestion:
|
||||
|
||||
[![Search suggestions][9]][9]
|
||||
|
||||
[Try this feature][10]{: .md-button .md-button--primary }
|
||||
|
||||
_This feature is enabled on the [official documentation][10] built with
|
||||
Insiders._
|
||||
<figure markdown="1">
|
||||
[![Search suggestions][9]][9]
|
||||
<figcaption markdown="1">
|
||||
A demo is worth a thousand words — check it out at
|
||||
[squidfunk.github.io/mkdocs-material-insiders][10]
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
[8]: ../insiders.md
|
||||
[9]: ../assets/screenshots/search-suggestions.png
|
||||
[10]: https://squidfunk.github.io/mkdocs-material-insiders/setup/setting-up-site-search
|
||||
[10]: https://squidfunk.github.io/mkdocs-material-insiders/reference/code-blocks/?q=code+high
|
||||
|
||||
### Search highlighting
|
||||
|
||||
@ -180,14 +182,15 @@ theme:
|
||||
- search.highlight
|
||||
```
|
||||
|
||||
Searching for [ :material-magnify: ^^code blocks^^ ] yields:
|
||||
Searching for ^^code blocks^^ yields:
|
||||
|
||||
[![Search highlighting][11]][11]
|
||||
|
||||
[Try this feature][12]{: .md-button .md-button--primary }
|
||||
|
||||
_This feature is enabled on the [official documentation][12] built with
|
||||
Insiders._
|
||||
<figure markdown="1">
|
||||
[![Search highlighting][11]][11]
|
||||
<figcaption markdown="1">
|
||||
A demo is worth a thousand words — check it out at
|
||||
[squidfunk.github.io/mkdocs-material-insiders][12]
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
[11]: ../assets/screenshots/search-highlighting.png
|
||||
[12]: https://squidfunk.github.io/mkdocs-material-insiders/reference/code-blocks/?h=code+blocks
|
||||
@ -204,7 +207,7 @@ combination with @squidfunk's [iframe-worker][15] polyfill.
|
||||
|
||||
For setup instructions, refer to the [official documentation][16].
|
||||
|
||||
[13]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html#L368-L369
|
||||
[13]: https://github.com/squidfunk/mkdocs-material/blob/master/src/base.html
|
||||
[14]: https://github.com/wilhelmer/mkdocs-localsearch/
|
||||
[15]: https://github.com/squidfunk/iframe-worker
|
||||
[16]: https://github.com/wilhelmer/mkdocs-localsearch#installation-material-v5
|
||||
|
||||
@ -101,7 +101,7 @@ displayed next to the social links. It can be defined as part of `mkdocs.yml`:
|
||||
copyright: Copyright © 2016 - 2020 Martin Donath
|
||||
```
|
||||
|
||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/footer.html#L85-L99
|
||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/footer.html
|
||||
|
||||
### Remove generator
|
||||
|
||||
|
||||
@ -18,8 +18,7 @@ It also includes the [search bar][1] and a place to display your project's
|
||||
|
||||
[:octicons-file-code-24: Source][3] ·
|
||||
:octicons-unlock-24: Feature flag ·
|
||||
:octicons-beaker-24: Experimental ·
|
||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][3]{: .tx-insiders }
|
||||
:octicons-beaker-24: Experimental
|
||||
|
||||
When _autohiding_ is enabled, the header is automatically hidden when the
|
||||
user scrolls past a certain threshold, leaving more space for content. It can
|
||||
@ -31,7 +30,7 @@ theme:
|
||||
- header.autohide
|
||||
```
|
||||
|
||||
[3]: ../insiders.md
|
||||
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/layout/_header.scss
|
||||
|
||||
## Customization
|
||||
|
||||
|
||||
@ -33,11 +33,13 @@ extra:
|
||||
This will render a version selector in the header next to the title of your
|
||||
project:
|
||||
|
||||
[![Version selection][3]][3]
|
||||
|
||||
[Try this feature][4]{: .md-button .md-button--primary }
|
||||
|
||||
_This feature is enabled in the [versioning example][4] built with Insiders._
|
||||
<figure markdown="1">
|
||||
[![Version selection][3]][3]
|
||||
<figcaption markdown="1">
|
||||
A demo is worth a thousand words — check it out at
|
||||
[squidfunk.github.io/mkdocs-material-example-versioning][4]
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
!!! quote "[Why use mike?][5]"
|
||||
|
||||
@ -52,7 +54,7 @@ _This feature is enabled in the [versioning example][4] built with Insiders._
|
||||
to particularly notable versions. This makes it easy to make permalinks to
|
||||
whatever version of the documentation you want to direct people to.
|
||||
|
||||
_Note that you don't need to run `mike install-extras` as noted in the
|
||||
_Note that you don't need to run_ `mike install-extras` _as noted in the
|
||||
[official documentation][6], as [mike][1] is now natively integrated with
|
||||
Material for MkDocs._
|
||||
|
||||
|
||||
2
material/assets/javascripts/bundle.4a6c075e.min.js
vendored
Normal file
2
material/assets/javascripts/bundle.4a6c075e.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/bundle.4a6c075e.min.js.map
Normal file
1
material/assets/javascripts/bundle.4a6c075e.min.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,14 +1,14 @@
|
||||
{
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.f81dfb4d.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.f81dfb4d.min.js.map",
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.4a6c075e.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4a6c075e.min.js.map",
|
||||
"assets/javascripts/vendor.js": "assets/javascripts/vendor.0ac82a11.min.js",
|
||||
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0ac82a11.min.js.map",
|
||||
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.4ac00218.min.js",
|
||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.4ac00218.min.js.map",
|
||||
"assets/stylesheets/main.css": "assets/stylesheets/main.19753c6b.min.css",
|
||||
"assets/stylesheets/main.css.map": "assets/stylesheets/main.19753c6b.min.css.map",
|
||||
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.9ed35d6f.min.css",
|
||||
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.9ed35d6f.min.css.map",
|
||||
"assets/stylesheets/palette.css": "assets/stylesheets/palette.196e0c26.min.css",
|
||||
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.196e0c26.min.css.map"
|
||||
"assets/stylesheets/main.css": "assets/stylesheets/main.e86bb7d5.min.css",
|
||||
"assets/stylesheets/main.css.map": "assets/stylesheets/main.e86bb7d5.min.css.map",
|
||||
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.1a64f041.min.css",
|
||||
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.1a64f041.min.css.map",
|
||||
"assets/stylesheets/palette.css": "assets/stylesheets/palette.7cb87594.min.css",
|
||||
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.7cb87594.min.css.map"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
3
material/assets/stylesheets/main.e86bb7d5.min.css
vendored
Normal file
3
material/assets/stylesheets/main.e86bb7d5.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/main.e86bb7d5.min.css.map
Normal file
1
material/assets/stylesheets/main.e86bb7d5.min.css.map
Normal file
File diff suppressed because one or more lines are too long
3
material/assets/stylesheets/overrides.1a64f041.min.css
vendored
Normal file
3
material/assets/stylesheets/overrides.1a64f041.min.css
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.md-typeset figure>p+figcaption{margin-top:-1.2rem}.md-typeset .twitter{color:#00acee}.md-typeset .tx-video{width:auto}.md-typeset .tx-video__inner{position:relative;width:100%;height:0;padding-bottom:56.138%}.md-typeset .tx-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border:none}.md-typeset .tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-insiders-button{font-weight:400}.md-typeset .tx-insiders-count{font-weight:700}.md-typeset .tx-insiders-list{margin:2em 0;overflow:auto}.md-typeset .tx-insiders-list__item{display:block;float:left;width:3rem;height:3rem;margin:.2rem;overflow:hidden;border-radius:100%;transform:scale(1);transition:color 125ms,transform 125ms}.md-typeset .tx-insiders-list__item img{display:block;width:100%;height:auto;-webkit-filter:grayscale(100%);filter:grayscale(100%);transition:-webkit-filter 125ms;transition:filter 125ms;transition:filter 125ms, -webkit-filter 125ms}.md-typeset .tx-insiders-list__item:focus,.md-typeset .tx-insiders-list__item:hover{transform:scale(1.1)}.md-typeset .tx-insiders-list__item:focus img,.md-typeset .tx-insiders-list__item:hover img{-webkit-filter:grayscale(0%);filter:grayscale(0%)}.md-typeset .tx-insiders-list__item--private{color:var(--md-default-fg-color--lighter);font-weight:700;font-size:1.2rem;line-height:3rem;text-align:center;background:var(--md-default-fg-color--lightest)}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:focus,.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:2;columns:2}@media screen and (max-width: 29.9375em){.md-typeset .tx-columns ol,.md-typeset .tx-columns ul{-moz-columns:initial;columns:initial}}.md-typeset .tx-columns li{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
|
||||
|
||||
/*# sourceMappingURL=overrides.1a64f041.min.css.map*/
|
||||
File diff suppressed because one or more lines are too long
@ -1,3 +0,0 @@
|
||||
.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}@media screen and (max-width: 29.9375em){.md-typeset .tx-columns{-moz-columns:initial;columns:initial}}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:hover,.tx-hero .md-button:focus{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
|
||||
|
||||
/*# sourceMappingURL=overrides.9ed35d6f.min.css.map*/
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/palette.7cb87594.min.css.map
Normal file
1
material/assets/stylesheets/palette.7cb87594.min.css.map
Normal file
File diff suppressed because one or more lines are too long
@ -18,14 +18,14 @@
|
||||
{% elif config.site_keywords %}
|
||||
<meta name="keywords" content="{{ config.site_keywords }}">
|
||||
{% endif %}
|
||||
{% if page.canonical_url %}
|
||||
<link rel="canonical" href="{{ page.canonical_url }}">
|
||||
{% endif %}
|
||||
{% if page and page.meta and page.meta.author %}
|
||||
<meta name="author" content="{{ page.meta.author }}">
|
||||
{% elif config.site_author %}
|
||||
<meta name="author" content="{{ config.site_author }}">
|
||||
{% endif %}
|
||||
{% if page.canonical_url %}
|
||||
<link rel="canonical" href="{{ page.canonical_url }}">
|
||||
{% endif %}
|
||||
<link rel="shortcut icon" href="{{ config.theme.favicon | url }}">
|
||||
<meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-6.1.7">
|
||||
{% endblock %}
|
||||
@ -39,10 +39,10 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.19753c6b.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.e86bb7d5.min.css' | url }}">
|
||||
{% if config.theme.palette %}
|
||||
{% set palette = config.theme.palette %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.196e0c26.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.7cb87594.min.css' | url }}">
|
||||
{% if palette.primary %}
|
||||
{% import "partials/palette.html" as map %}
|
||||
{% set primary = map.primary(
|
||||
@ -56,7 +56,7 @@
|
||||
{% block fonts %}
|
||||
{% if config.theme.font != false %}
|
||||
{% set font = config.theme.font %}
|
||||
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{
|
||||
font.text | replace(' ', '+') + ':300,400,400i,700%7C' +
|
||||
font.code | replace(' ', '+')
|
||||
@ -93,6 +93,7 @@
|
||||
{% else %}
|
||||
<body dir="{{ direction }}">
|
||||
{% endif %}
|
||||
{% set features = config.theme.features or [] %}
|
||||
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
|
||||
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
|
||||
<label class="md-overlay" for="__drawer"></label>
|
||||
@ -119,7 +120,7 @@
|
||||
<div class="md-container" data-md-component="container">
|
||||
{% block hero %}{% endblock %}
|
||||
{% block tabs %}
|
||||
{% if "navigation.tabs" in config.theme.features %}
|
||||
{% if "navigation.tabs" in features %}
|
||||
{% include "partials/tabs.html" %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@ -127,7 +128,10 @@
|
||||
<div class="md-main__inner md-grid">
|
||||
{% block site_nav %}
|
||||
{% if nav %}
|
||||
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
|
||||
{% if page and page.meta and page.meta.hide %}
|
||||
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
|
||||
{% endif %}
|
||||
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation" {{ hidden }}>
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner">
|
||||
{% include "partials/nav.html" %}
|
||||
@ -135,8 +139,11 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if page.toc %}
|
||||
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
|
||||
{% if page.toc and not "toc.integrate" in features %}
|
||||
{% if page and page.meta and page.meta.hide %}
|
||||
{% set hidden = "hidden" if "toc" in page.meta.hide %}
|
||||
{% endif %}
|
||||
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc" {{ hidden }}>
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner">
|
||||
{% include "partials/toc.html" %}
|
||||
@ -154,7 +161,7 @@
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if not "\x3ch1" in page.content %}
|
||||
<h1>{{ page.title | default(config.site_name, true)}}</h1>
|
||||
<h1>{{ page.title | d(config.site_name, true)}}</h1>
|
||||
{% endif %}
|
||||
{{ page.content }}
|
||||
{% if page and page.meta %}
|
||||
@ -178,7 +185,7 @@
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/vendor.0ac82a11.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.f81dfb4d.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.4a6c075e.min.js' | url }}"></script>
|
||||
{%- set translations = {} -%}
|
||||
{%- for key in [
|
||||
"clipboard.copy",
|
||||
@ -204,7 +211,7 @@
|
||||
<script>
|
||||
app = initialize({
|
||||
base: "{{ base_url }}",
|
||||
features: {{ config.theme.features or [] | tojson }},
|
||||
features: {{ features or [] | tojson }},
|
||||
search: Object.assign({
|
||||
worker: "{{ 'assets/javascripts/worker/search.4ac00218.min.js' | url }}"
|
||||
}, typeof search !== "undefined" && search)
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<meta name="twitter:title" content="{{ title }}">
|
||||
<meta name="twitter:description" content="{{ config.site_description }}">
|
||||
<meta name="twitter:image" content="{{ image }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.9ed35d6f.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.1a64f041.min.css' | url }}">
|
||||
{% endblock %}
|
||||
{% block announce %}
|
||||
<a href="https://twitter.com/squidfunk">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
|
||||
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
|
||||
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
|
||||
{% set site_url = site_url ~ "/index.html" %}
|
||||
{% endif %}
|
||||
@ -14,16 +14,14 @@
|
||||
{% include ".icons/material/menu" ~ ".svg" %}
|
||||
</label>
|
||||
<div class="md-header-nav__title" data-md-component="header-title">
|
||||
{% if config.site_name == page.title %}
|
||||
<div class="md-header-nav__ellipsis md-ellipsis">
|
||||
{{ config.site_name }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="md-header-nav__ellipsis">
|
||||
<span class="md-header-nav__topic md-ellipsis">
|
||||
<div class="md-header-nav__ellipsis">
|
||||
<div class="md-header-nav__topic">
|
||||
<span class="md-ellipsis">
|
||||
{{ config.site_name }}
|
||||
</span>
|
||||
<span class="md-header-nav__topic md-ellipsis">
|
||||
</div>
|
||||
<div class="md-header-nav__topic">
|
||||
<span class="md-ellipsis">
|
||||
{% if page and page.meta and page.meta.title %}
|
||||
{{ page.meta.title }}
|
||||
{% else %}
|
||||
@ -31,7 +29,7 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if "search" in config["plugins"] %}
|
||||
<label class="md-header-nav__button md-icon" for="__search">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
"search.result.other": "# documentos encontrados",
|
||||
"search.result.more.one": "1 más en esta página",
|
||||
"search.result.more.other": "# más en esta página",
|
||||
"search.result.term.missing": "Desaparecido",
|
||||
"search.result.term.missing": "Falta",
|
||||
"skip.link.title": "Saltar a contenido",
|
||||
"source.link.title": "Ir al repositorio",
|
||||
"source.revision.date": "Última actualización",
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% set features = config.theme.features or [] %}
|
||||
{% set class = "md-nav__item" %}
|
||||
{% if nav_item.active %}
|
||||
{% set class = "md-nav__item md-nav__item--active" %}
|
||||
{% set class = class ~ " md-nav__item--active" %}
|
||||
{% endif %}
|
||||
{% if nav_item.children %}
|
||||
{% if "navigation.sections" in features and level == 1 + (
|
||||
"navigation.tabs" in features
|
||||
) %}
|
||||
{% set class = class ~ " md-nav__item--section" %}
|
||||
{% endif %}
|
||||
<li class="{{ class }} md-nav__item--nested">
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
|
||||
{% if "navigation.expand" in features and not checked %}
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" data-md-state="indeterminate" type="checkbox" id="{{ path }}" checked>
|
||||
{% else %}
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
|
||||
{% endif %}
|
||||
<label class="md-nav__link" for="{{ path }}">
|
||||
{{ nav_item.title }}
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
|
||||
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
|
||||
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
|
||||
{% set site_url = site_url ~ "/index.html" %}
|
||||
{% endif %}
|
||||
<nav class="md-nav md-nav--primary" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
|
||||
{% set class = "md-nav md-nav--primary" %}
|
||||
{% if "navigation.tabs" in features %}
|
||||
{% set class = class ~ " md-nav--lifted" %}
|
||||
{% endif %}
|
||||
{% if "toc.integrate" in features %}
|
||||
{% set class = class ~ " md-nav--integrated" %}
|
||||
{% endif %}
|
||||
<nav class="{{ class }}" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
|
||||
<label class="md-nav__title" for="__drawer">
|
||||
<a href="{{ site_url }}" title="{{ config.site_name | e }}" class="md-nav__button md-logo" aria-label="{{ config.site_name }}">
|
||||
{% include "partials/logo.html" %}
|
||||
|
||||
@ -1,35 +1,27 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% if nav_item.is_homepage or nav_item.url == "index.html" %}
|
||||
<li class="md-tabs__item">
|
||||
{% set class = "md-tabs__link" %}
|
||||
{% if not page.ancestors | length and nav | selectattr("url", page.url) %}
|
||||
{% set class = "md-tabs__link md-tabs__link--active" %}
|
||||
{% endif %}
|
||||
<a href="{{ nav_item.url | url }}" class="{{ class }}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% elif nav_item.children and nav_item.children | length > 0 %}
|
||||
{% set title = title | default(nav_item.title) %}
|
||||
{% if (nav_item.children | first).children %}
|
||||
{% set nav_item = nav_item.children | first %}
|
||||
{% if not class %}
|
||||
{% set class = "md-tabs__link" %}
|
||||
{% if nav_item.active %}
|
||||
{% set class = class ~ " md-tabs__link--active" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if nav_item.children %}
|
||||
{% set title = title | d(nav_item.title) %}
|
||||
{% set nav_item = nav_item.children | first %}
|
||||
{% if nav_item.children %}
|
||||
{% include "partials/tabs-item.html" %}
|
||||
{% else %}
|
||||
<li class="md-tabs__item">
|
||||
{% set class = "md-tabs__link" %}
|
||||
{% if nav_item.active %}
|
||||
{% set class = "md-tabs__link md-tabs__link--active" %}
|
||||
{% endif %}
|
||||
<a href="{{ (nav_item.children | first).url | url }}" class="{{ class }}">
|
||||
<a href="{{ nav_item.url | url }}" class="{{ class }}">
|
||||
{{ title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% elif nav_item.url.startswith("http") %}
|
||||
{% else %}
|
||||
<li class="md-tabs__item">
|
||||
<a href="{{ nav_item.url | url }}" class="md-tabs__link">
|
||||
<a href="{{ nav_item.url | url }}" class="{{ class }}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% set class = "md-tabs" %}
|
||||
{% if page.ancestors | length > 0 %}
|
||||
{% set class = "md-tabs md-tabs--active" %}
|
||||
{% endif %}
|
||||
<nav class="{{ class }}" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
|
||||
{% set class = "" %}
|
||||
<nav class="md-tabs" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
|
||||
<div class="md-tabs__inner md-grid">
|
||||
<ul class="md-tabs__list">
|
||||
{% for nav_item in nav %}
|
||||
|
||||
11
mkdocs.yml
11
mkdocs.yml
@ -51,8 +51,8 @@ theme:
|
||||
# Default values, taken from mkdocs_theme.yml
|
||||
language: en
|
||||
features:
|
||||
- navigation.sections
|
||||
- navigation.tabs
|
||||
#- navigation.instant
|
||||
palette:
|
||||
scheme: default
|
||||
primary: indigo
|
||||
@ -109,6 +109,7 @@ markdown_extensions:
|
||||
- def_list
|
||||
- footnotes
|
||||
- meta
|
||||
- md_in_html
|
||||
- toc:
|
||||
permalink: true
|
||||
- pymdownx.arithmatex:
|
||||
@ -183,9 +184,11 @@ nav:
|
||||
- Meta tags: reference/meta-tags.md
|
||||
- Variables: reference/variables.md
|
||||
- Changelog:
|
||||
- Release notes: changelog.md
|
||||
- Upgrading: upgrading.md
|
||||
- Deprecations: deprecations.md
|
||||
- Material for MkDocs: changelog.md
|
||||
- Material for MkDocs Insiders: changelog/insiders.md
|
||||
- Guides:
|
||||
- Upgrading: upgrading.md
|
||||
- Deprecations: deprecations.md
|
||||
|
||||
# Google Analytics
|
||||
google_analytics:
|
||||
|
||||
@ -46,7 +46,9 @@ import {
|
||||
take,
|
||||
shareReplay,
|
||||
catchError,
|
||||
map
|
||||
map,
|
||||
bufferCount,
|
||||
distinctUntilKeyChanged
|
||||
} from "rxjs/operators"
|
||||
|
||||
import {
|
||||
@ -60,7 +62,8 @@ import {
|
||||
watchViewport,
|
||||
isLocalLocation,
|
||||
setLocationHash,
|
||||
watchLocationBase
|
||||
watchLocationBase,
|
||||
getElement
|
||||
} from "browser"
|
||||
import {
|
||||
mountHeader,
|
||||
@ -397,16 +400,42 @@ export function initialize(config: unknown) {
|
||||
|
||||
/* ----------------------------------------------------------------------- */
|
||||
|
||||
/* Unhide permalinks on first tab */
|
||||
keyboard$
|
||||
.pipe(
|
||||
filter(key => key.mode === "global" && key.type === "Tab"),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
for (const link of getElements(".headerlink"))
|
||||
link.style.visibility = "visible"
|
||||
})
|
||||
// Make indeterminate toggles indeterminate to expand navigation on screen
|
||||
document$.subscribe(() => {
|
||||
const toggles = getElements<HTMLInputElement>("[data-md-state=indeterminate]")
|
||||
for (const toggle of toggles) {
|
||||
toggle.dataset.mdState = ""
|
||||
toggle.indeterminate = true
|
||||
toggle.checked = false
|
||||
}
|
||||
})
|
||||
|
||||
// Auto hide header - this is still experimental, so there might be some
|
||||
// opportunities for refactoring, but we'll address them when this feature
|
||||
// got some feedback from the community.
|
||||
if (config.features.includes("header.autohide")) {
|
||||
viewport$
|
||||
.pipe(
|
||||
map(({ offset }) => offset.y),
|
||||
bufferCount(2, 1),
|
||||
map(([a, b]) => [a < b, b] as const),
|
||||
distinctUntilKeyChanged(0),
|
||||
switchMap(([direction, y0]) => viewport$
|
||||
.pipe(
|
||||
map(({ offset }) => offset.y),
|
||||
filter(y1 => y1 > 400),
|
||||
map(y1 => Math.abs(y0 - y1)),
|
||||
filter(y => y > 100),
|
||||
map(() => direction),
|
||||
take(1)
|
||||
)
|
||||
)
|
||||
)
|
||||
.subscribe(hide => {
|
||||
const header = getElement("[data-md-component=header]")
|
||||
header?.setAttribute("data-md-state", hide ? "hidden": "shadow")
|
||||
})
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------- */
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ import { SearchIndex, SearchTransformFn } from "integrations"
|
||||
* Feature flags
|
||||
*/
|
||||
export type Feature =
|
||||
| "header.autohide" /* Hide header */
|
||||
| "navigation.tabs" /* Tabs navigation */
|
||||
| "navigation.instant" /* Instant loading */
|
||||
|
||||
|
||||
@ -56,7 +56,6 @@
|
||||
@import "main/layout/tabs";
|
||||
|
||||
@import "main/extensions/markdown/admonition";
|
||||
@import "main/extensions/markdown/codehilite";
|
||||
@import "main/extensions/markdown/footnotes";
|
||||
@import "main/extensions/markdown/toc";
|
||||
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
display: block;
|
||||
width: px2rem(24px);
|
||||
height: px2rem(24px);
|
||||
margin: 0 auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,8 +20,6 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// stylelint-disable no-duplicate-selectors
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -45,12 +43,6 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Reset horizontal rules in FF
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Reset tap outlines on iOS and Android
|
||||
a,
|
||||
button,
|
||||
@ -65,6 +57,16 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Normalize horizontal separator styles
|
||||
hr {
|
||||
display: block;
|
||||
box-sizing: content-box;
|
||||
height: px2rem(1px);
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Normalize font-size in all browsers
|
||||
small {
|
||||
font-size: 80%;
|
||||
@ -76,7 +78,7 @@ sup {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
// Remove borders on images
|
||||
// Remove border on image
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
@ -90,7 +92,7 @@ table {
|
||||
// Reset table cell styles
|
||||
td,
|
||||
th {
|
||||
font-weight: normal; // stylelint-disable-line
|
||||
font-weight: 400;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Default fonts
|
||||
// Define default fonts
|
||||
body,
|
||||
input {
|
||||
color: var(--md-typeset-color);
|
||||
@ -38,7 +38,7 @@ input {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
// Proportionally spaced fonts
|
||||
// Define proportionally spaced fonts
|
||||
code,
|
||||
pre,
|
||||
kbd {
|
||||
@ -60,16 +60,14 @@ kbd {
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Content that is typeset - if possible, all margins, paddings and font sizes
|
||||
// should be set in ems, so nested blocks (e.g. admonitions) render correctly,
|
||||
// except headlines that should only appear on the top level and need to have
|
||||
// consistent spacing due to layout constraints.
|
||||
// should be set in ems, so nested blocks (e.g. admonitions) render correctly.
|
||||
.md-typeset {
|
||||
font-size: px2rem(16px);
|
||||
line-height: 1.6;
|
||||
color-adjust: exact;
|
||||
|
||||
// We'll use a smaller font-size for printing, so code examples don't break
|
||||
// too early, and 16px looks too big anyway.
|
||||
// [print]: We'll use a smaller `font-size` for printing, so code examples
|
||||
// don't break too early, and `16px` looks too big anyway.
|
||||
@media print {
|
||||
font-size: px2rem(13.6px);
|
||||
}
|
||||
@ -78,11 +76,12 @@ kbd {
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
// 1st level headline
|
||||
// Headline on level 1
|
||||
h1 {
|
||||
margin: 0 0 px2em(40px, 32px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
@ -92,7 +91,7 @@ kbd {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// 2nd level headline
|
||||
// Headline on level 2
|
||||
h2 {
|
||||
margin: px2em(40px, 25px) 0 px2em(16px, 25px);
|
||||
font-weight: 300;
|
||||
@ -101,7 +100,7 @@ kbd {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// 3rd level headline
|
||||
// Headline on level 3
|
||||
h3 {
|
||||
margin: px2em(32px, 20px) 0 px2em(16px, 20px);
|
||||
font-weight: 400;
|
||||
@ -110,19 +109,19 @@ kbd {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// 3rd level headline following an 2nd level headline
|
||||
// Headline on level 3 following level 2
|
||||
h2 + h3 {
|
||||
margin-top: px2em(16px, 20px);
|
||||
}
|
||||
|
||||
// 4th level headline
|
||||
// Headline on level 4
|
||||
h4 {
|
||||
margin: px2em(16px) 0;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// 5th and 6th level headline
|
||||
// Headline on level 5-6
|
||||
h5,
|
||||
h6 {
|
||||
margin: px2em(16px, 12.8px) 0;
|
||||
@ -132,18 +131,18 @@ kbd {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// Overrides for 5th level headline
|
||||
// Headline on level 5
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Horizontal separators
|
||||
// Horizontal separator
|
||||
hr {
|
||||
margin: 1.5em 0;
|
||||
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--lighter);
|
||||
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
|
||||
}
|
||||
|
||||
// Links
|
||||
// Text link
|
||||
a {
|
||||
color: var(--md-typeset-a-color);
|
||||
word-break: break-word;
|
||||
@ -154,7 +153,7 @@ kbd {
|
||||
transition: color 125ms;
|
||||
}
|
||||
|
||||
// Focused or hovered links
|
||||
// Text link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
@ -168,7 +167,7 @@ kbd {
|
||||
color: var(--md-code-fg-color);
|
||||
direction: ltr;
|
||||
|
||||
// Wrap text and hide scollbars
|
||||
// [print]: Wrap text and hide scollbars
|
||||
@media print {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@ -183,14 +182,14 @@ kbd {
|
||||
border-radius: px2rem(2px);
|
||||
box-decoration-break: clone;
|
||||
|
||||
// Disable focus indicator for pointer devices
|
||||
// Hide outline for pointer devices
|
||||
&:not(.focus-visible) {
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable containing block inside headlines
|
||||
// Code block in headline
|
||||
h1 code,
|
||||
h2 code,
|
||||
h3 code,
|
||||
@ -208,13 +207,13 @@ kbd {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
// Unformatted code blocks
|
||||
// Unformatted content
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 1em 0;
|
||||
line-height: 1.4;
|
||||
|
||||
// Actual container with code, overflowing
|
||||
// Code block
|
||||
> code {
|
||||
display: block;
|
||||
margin: 0;
|
||||
@ -224,26 +223,25 @@ kbd {
|
||||
box-shadow: none;
|
||||
box-decoration-break: slice;
|
||||
touch-action: auto;
|
||||
// Override Firefox scrollbar style
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
|
||||
|
||||
// Override Firefox scrollbar hover color
|
||||
// Code block on hover
|
||||
&:hover {
|
||||
scrollbar-color: var(--md-accent-fg-color) transparent;
|
||||
}
|
||||
|
||||
// Override native scrollbar styles
|
||||
// Webkit scrollbar
|
||||
&::-webkit-scrollbar {
|
||||
width: px2rem(4px);
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Scrollbar thumb
|
||||
// Webkit scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--md-default-fg-color--lighter);
|
||||
|
||||
// Hovered scrollbar thumb
|
||||
// Webkit scrollbar thumb on hover
|
||||
&:hover {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
}
|
||||
@ -251,14 +249,14 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
// [mobile -]: Align with body copy
|
||||
@include break-to-device(mobile) {
|
||||
|
||||
// Stretch top-level containers
|
||||
// Unformatted text
|
||||
> pre {
|
||||
margin: 1em px2rem(-16px);
|
||||
|
||||
// Remove rounded borders
|
||||
// Code block
|
||||
code {
|
||||
border-radius: 0;
|
||||
}
|
||||
@ -289,13 +287,13 @@ kbd {
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
// Abbreviation
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
|
||||
cursor: help;
|
||||
|
||||
// Render a tooltip for touch devices
|
||||
// Show tooltip for touch devices
|
||||
@media (hover: none) {
|
||||
position: relative;
|
||||
|
||||
@ -314,7 +312,7 @@ kbd {
|
||||
padding: px2rem(4px) px2rem(6px);
|
||||
color: var(--md-default-bg-color);
|
||||
font-size: px2rem(14px);
|
||||
background: var(--md-default-fg-color);
|
||||
background-color: var(--md-default-fg-color);
|
||||
border-radius: px2rem(2px);
|
||||
content: attr(title);
|
||||
}
|
||||
@ -354,12 +352,12 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// Unordered lists
|
||||
// Unordered list
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
// Unordered and ordered lists
|
||||
// Unordered and ordered list
|
||||
ul,
|
||||
ol {
|
||||
margin-left: px2em(10px);
|
||||
@ -371,7 +369,7 @@ kbd {
|
||||
margin-left: initial;
|
||||
}
|
||||
|
||||
// Nested ordered lists
|
||||
// Nested ordered list
|
||||
ol {
|
||||
list-style-type: lower-alpha;
|
||||
|
||||
@ -381,7 +379,7 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// List elements
|
||||
// List element
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: px2em(20px);
|
||||
@ -392,18 +390,18 @@ kbd {
|
||||
margin-left: initial;
|
||||
}
|
||||
|
||||
// Decrease vertical spacing
|
||||
// Adjust spacing
|
||||
p,
|
||||
blockquote {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
// Remove margin on last element
|
||||
// Adjust spacing on last child
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Nested lists
|
||||
// Nested list
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.5em 0 0.5em px2em(10px);
|
||||
@ -417,7 +415,7 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// Definition lists
|
||||
// Definition list
|
||||
dd {
|
||||
margin: 1em 0 1.5em px2em(30px);
|
||||
|
||||
@ -428,42 +426,47 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// Limit width to container, scale height proportionally
|
||||
// Image or icon
|
||||
img,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
// Left-aligned
|
||||
// Adjust spacing when left-aligned
|
||||
&[align="left"] {
|
||||
margin: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Right-aligned
|
||||
// Adjust spacing when right-aligned
|
||||
&[align="right"] {
|
||||
margin: 1em;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Remove top spacing of sole children
|
||||
// Adjust spacing when sole children
|
||||
&[align]:only-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Figures
|
||||
// Figure
|
||||
figure {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
// Figure images
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Figure captions
|
||||
// Figure caption
|
||||
figcaption {
|
||||
max-width: px2rem(480px);
|
||||
margin: 0.5em auto 2em;
|
||||
margin: 1em auto 2em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@ -472,20 +475,20 @@ kbd {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Data tables
|
||||
// Data table
|
||||
table:not([class]) {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
font-size: px2rem(12.8px);
|
||||
background: var(--md-default-bg-color);
|
||||
background-color: var(--md-default-bg-color);
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow:
|
||||
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
|
||||
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
|
||||
touch-action: auto;
|
||||
|
||||
// Reset display mode so table header wraps correctly when printing
|
||||
// [print]: Reset display mode so table header wraps when printing
|
||||
@media print {
|
||||
display: table;
|
||||
}
|
||||
@ -497,22 +500,22 @@ kbd {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
// Elements inside cells
|
||||
// Elements in table heading and cell
|
||||
th > *,
|
||||
td > * {
|
||||
|
||||
// Remove top spacing of first child
|
||||
// Adjust spacing on first child
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Remove bottom spacing of last child
|
||||
// Adjust spacing on last child
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Table headings and cells
|
||||
// Table heading and cell
|
||||
th:not([align]),
|
||||
td:not([align]) {
|
||||
text-align: left;
|
||||
@ -523,7 +526,7 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// Table headings
|
||||
// Table heading
|
||||
th {
|
||||
min-width: px2rem(100px);
|
||||
padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
|
||||
@ -537,36 +540,36 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// Table cells
|
||||
// Table cell
|
||||
td {
|
||||
padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
|
||||
vertical-align: top;
|
||||
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
|
||||
}
|
||||
|
||||
// Table rows
|
||||
// Table row
|
||||
tr {
|
||||
transition: background-color 125ms;
|
||||
|
||||
// Add background on hover
|
||||
// Table row on hover
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.035);
|
||||
box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
|
||||
}
|
||||
|
||||
// Remove top border on first row
|
||||
// Hide border on first table row
|
||||
&:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Do not wrap links in tables
|
||||
// Text link in table
|
||||
a {
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Sortable tables
|
||||
// Sortable table
|
||||
table th[role="columnheader"] {
|
||||
cursor: pointer;
|
||||
|
||||
@ -595,25 +598,25 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
// Data table scroll wrapper
|
||||
&__scrollwrap {
|
||||
margin: 1em px2rem(-16px);
|
||||
overflow-x: auto;
|
||||
touch-action: auto;
|
||||
}
|
||||
|
||||
// Data table wrapper, in case JavaScript is available
|
||||
// Data table wrapper
|
||||
&__table {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0 px2rem(16px);
|
||||
|
||||
// Reset display mode so table header wraps correctly when printing
|
||||
// [print]: Reset display mode so table header wraps when printing
|
||||
@media print {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Data tables
|
||||
// Data table
|
||||
html & table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
@ -47,11 +47,9 @@ $admonitions: (
|
||||
// Icon definitions
|
||||
:root {
|
||||
@each $names, $props in $admonitions {
|
||||
$name: nth($names, 1);
|
||||
$icon: nth($props, 1);
|
||||
|
||||
// Inline icon through PostCSS in Webpack
|
||||
--md-admonition-icon--#{$name}: svg-load("@mdi/svg/svg/#{$icon}.svg");
|
||||
--md-admonition-icon--#{nth($names, 1)}: svg-load(
|
||||
"@mdi/svg/svg/#{nth($props, 1)}.svg"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,7 +58,7 @@ $admonitions: (
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Admonition extension
|
||||
// Admonition
|
||||
.admonition {
|
||||
margin: px2em(20px, 12.8px) 0;
|
||||
padding: 0 px2rem(12px);
|
||||
@ -72,44 +70,44 @@ $admonitions: (
|
||||
border-left: px2rem(4px) solid $clr-blue-a200;
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow:
|
||||
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
|
||||
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
|
||||
0 px2rem(0.5px) px2rem(1px) hsla(0, 0%, 0%, 0.05);
|
||||
|
||||
// [print]: Omit shadow as it may lead to rendering errors
|
||||
@media print {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
border-right: px2rem(4px) solid $clr-blue-a200;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// Hack: omit rendering errors for print
|
||||
@media print {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Adjust spacing on last element
|
||||
html & > :last-child {
|
||||
margin-bottom: px2rem(12px);
|
||||
}
|
||||
|
||||
// Adjust margin for nested admonition blocks
|
||||
// Adjust spacing for nested admonitions
|
||||
.admonition {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
// Adjust spacing for contained table wrappers
|
||||
.md-typeset__scrollwrap {
|
||||
margin: 1em px2rem(-12px);
|
||||
}
|
||||
|
||||
// Data table wrapper, in case JavaScript is available
|
||||
// Adjust spacing for contained tables
|
||||
.md-typeset__table {
|
||||
padding: 0 px2rem(12px);
|
||||
}
|
||||
|
||||
// Tabbed block container is the only child
|
||||
// Adjust spacing for single-child tabbed block container
|
||||
> .tabbed-set:only-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Adjust spacing on last child
|
||||
html & > :last-child {
|
||||
margin-bottom: px2rem(12px);
|
||||
}
|
||||
}
|
||||
|
||||
// Admonition title
|
||||
@ -129,7 +127,7 @@ $admonitions: (
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// Reset spacing, if title is the only element
|
||||
// Adjust spacing for title-only admonitions
|
||||
html &:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -153,7 +151,8 @@ $admonitions: (
|
||||
}
|
||||
}
|
||||
|
||||
// Reset code inside admonition titles
|
||||
// Omit background on inline code blocks, as they don't go well with the
|
||||
// pastelly tones applied to admonition titles
|
||||
code {
|
||||
margin: initial;
|
||||
padding: initial;
|
||||
@ -163,7 +162,8 @@ $admonitions: (
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Tabbed block container is the last child
|
||||
// Adjust spacing on last tabbed block container child - if the tabbed
|
||||
// block container is the sole child, it looks better to omit the margin
|
||||
+ .tabbed-set:last-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -178,12 +178,12 @@ $admonitions: (
|
||||
$name: nth($names, 1);
|
||||
$tint: nth($props, 2);
|
||||
|
||||
// Admonition base class
|
||||
// Admonition flavour
|
||||
.md-typeset .admonition.#{$name} {
|
||||
border-color: $tint;
|
||||
}
|
||||
|
||||
// Admonition title
|
||||
// Admonition flavour title
|
||||
.md-typeset .#{$name} > .admonition-title {
|
||||
background-color: transparentize($tint, 0.9);
|
||||
border-color: $tint;
|
||||
@ -197,7 +197,7 @@ $admonitions: (
|
||||
}
|
||||
}
|
||||
|
||||
// Define synonyms for base class
|
||||
// Define synonyms for flavours
|
||||
@if length($names) > 1 {
|
||||
@for $n from 2 through length($names) {
|
||||
.#{nth($names, $n)} {
|
||||
|
||||
@ -1,259 +0,0 @@
|
||||
////
|
||||
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
|
||||
///
|
||||
/// Permission is hereby granted, free of charge, to any person obtaining a
|
||||
/// copy of this software and associated documentation files (the "Software"),
|
||||
/// to deal in the Software without restriction, including without limitation
|
||||
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||
/// and/or sell copies of the Software, and to permit persons to whom the
|
||||
/// Software is furnished to do so, subject to the following conditions:
|
||||
///
|
||||
/// The above copyright notice and this permission notice shall be included in
|
||||
/// all copies or substantial portions of the Software.
|
||||
///
|
||||
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
|
||||
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: syntax highlighting
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Codehilite extension
|
||||
.codehilite {
|
||||
|
||||
.o, // Operator
|
||||
.ow { // Operator, word
|
||||
color: var(--md-code-hl-operator-color);
|
||||
}
|
||||
|
||||
.p { // Punctuation
|
||||
color: var(--md-code-hl-punctuation-color);
|
||||
}
|
||||
|
||||
.cpf, // Comment, preprocessor file
|
||||
.l, // Literal
|
||||
.s, // Literal, string
|
||||
.sb, // Literal, string backticks
|
||||
.sc, // Literal, string char
|
||||
.s2, // Literal, string double
|
||||
.si, // Literal, string interpol
|
||||
.s1, // Literal, string single
|
||||
.ss { // Literal, string symbol
|
||||
color: var(--md-code-hl-string-color);
|
||||
}
|
||||
|
||||
.cp, // Comment, pre-processor
|
||||
.se, // Literal, string escape
|
||||
.sh, // Literal, string heredoc
|
||||
.sr, // Literal, string regex
|
||||
.sx { // Literal, string other
|
||||
color: var(--md-code-hl-special-color);
|
||||
}
|
||||
|
||||
.m, // Number
|
||||
.mf, // Number, float
|
||||
.mh, // Number, hex
|
||||
.mi, // Number, integer
|
||||
.il, // Number, integer long
|
||||
.mo { // Number, octal
|
||||
color: var(--md-code-hl-number-color);
|
||||
}
|
||||
|
||||
.k, // Keyword,
|
||||
.kd, // Keyword, declaration
|
||||
.kn, // Keyword, namespace
|
||||
.kp, // Keyword, pseudo
|
||||
.kr, // Keyword, reserved
|
||||
.kt { // Keyword, type
|
||||
color: var(--md-code-hl-keyword-color);
|
||||
}
|
||||
|
||||
.kc, // Keyword, constant
|
||||
.n { // Name
|
||||
color: var(--md-code-hl-name-color);
|
||||
}
|
||||
|
||||
.no, // Name, constant
|
||||
.nb, // Name, builtin
|
||||
.bp { // Name, builtin pseudo
|
||||
color: var(--md-code-hl-constant-color);
|
||||
}
|
||||
|
||||
.nc, // Name, class
|
||||
.ne, // Name, exception
|
||||
.nf, // Name, function
|
||||
.nn { // Name, namespace
|
||||
color: var(--md-code-hl-function-color);
|
||||
}
|
||||
|
||||
.nd, // Name, decorator
|
||||
.ni, // Name, entity
|
||||
.nl, // Name, label
|
||||
.nt { // Name, tag
|
||||
color: var(--md-code-hl-keyword-color);
|
||||
}
|
||||
|
||||
.c, // Comment
|
||||
.cm, // Comment, multiline
|
||||
.c1, // Comment, single
|
||||
.ch, // Comment, shebang
|
||||
.cs, // Comment, special
|
||||
.sd { // Literal, string doc
|
||||
color: var(--md-code-hl-comment-color);
|
||||
}
|
||||
|
||||
.na, // Name, attribute
|
||||
.nv, // Variable,
|
||||
.vc, // Variable, class
|
||||
.vg, // Variable, global
|
||||
.vi { // Variable, instance
|
||||
color: var(--md-code-hl-variable-color);
|
||||
}
|
||||
|
||||
.ge, // Generic, emph
|
||||
.gr, // Generic, error
|
||||
.gh, // Generic, heading
|
||||
.go, // Generic, output
|
||||
.gp, // Generic, prompt
|
||||
.gs, // Generic, strong
|
||||
.gu, // Generic, subheading
|
||||
.gt { // Generic, traceback
|
||||
color: var(--md-code-hl-generic-color);
|
||||
}
|
||||
|
||||
.gd, // Diff, delete
|
||||
.gi { // Diff, insert
|
||||
margin: 0 px2em(-2px);
|
||||
padding: 0 px2em(2px);
|
||||
border-radius: px2rem(2px);
|
||||
}
|
||||
|
||||
.gd { // Diff, delete
|
||||
background-color: var(--md-typeset-del-color);
|
||||
}
|
||||
|
||||
.gi { // Diff, insert
|
||||
background-color: var(--md-typeset-ins-color)
|
||||
}
|
||||
|
||||
// Highlighted lines
|
||||
.hll {
|
||||
display: block;
|
||||
margin: 0 px2em(-16px, 13.6px);
|
||||
padding: 0 px2em(16px, 13.6px);
|
||||
background-color: var(--md-code-hl-color)
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: layout
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Block with line numbers
|
||||
.codehilitetable {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
// Set table elements to block layout, because otherwise the whole flexbox
|
||||
// hacking won't work correctly
|
||||
tbody,
|
||||
td {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// We need to use flexbox layout, because otherwise it's not possible to
|
||||
// make the code container scroll while keeping the line numbers static
|
||||
tr {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// The pre tags are nested inside a table, so we need to remove the
|
||||
// margin because it collapses below all the overflows
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Disable user selection, so code can be easily copied without
|
||||
// accidentally also copying the line numbers
|
||||
.linenos {
|
||||
padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
|
||||
padding-right: 0;
|
||||
font-size: px2em(13.6px);
|
||||
background-color: var(--md-code-bg-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Add spacing to line number container
|
||||
.linenodiv {
|
||||
padding-right: px2em(8px, 13.6px);
|
||||
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lighter) inset;
|
||||
|
||||
// Reset spacings
|
||||
pre {
|
||||
color: var(--md-default-fg-color--light);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// The table cell containing the code container wrapper and code should
|
||||
// stretch horizontally to the remaining space
|
||||
.code {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Block with line numbers
|
||||
.codehilitetable {
|
||||
margin: 1em 0;
|
||||
direction: ltr;
|
||||
border-radius: px2rem(2px);
|
||||
|
||||
// Remove rounded borders
|
||||
code {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
|
||||
// Full-width container
|
||||
> .codehilite {
|
||||
margin: 1em px2rem(-16px);
|
||||
|
||||
// Stretch highlighted lines
|
||||
.hll {
|
||||
margin: 0 px2rem(-16px);
|
||||
padding: 0 px2rem(16px);
|
||||
}
|
||||
|
||||
// Remove rounded borders
|
||||
code {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Full-width container on top-level
|
||||
> .codehilitetable {
|
||||
margin: 1em px2rem(-16px);
|
||||
border-radius: 0;
|
||||
|
||||
// Stretch highlighted lines
|
||||
.hll {
|
||||
margin: 0 px2rem(-16px);
|
||||
padding: 0 px2rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -34,92 +34,50 @@
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// All footnote references
|
||||
[id^="fnref:"] {
|
||||
// Footnote reference container - improve alignment
|
||||
html & [id^="fnref:"] {
|
||||
display: inline-block;
|
||||
|
||||
// Targeted anchor
|
||||
&:target {
|
||||
margin-top: -1 * px2rem(48px + 12px + 16px);
|
||||
padding-top: px2rem(48px + 12px + 16px);
|
||||
pointer-events: none;
|
||||
scroll-margin-top: initial;
|
||||
}
|
||||
scroll-margin-top: px2rem(48px + 24px - 3px);
|
||||
}
|
||||
|
||||
// All footnote back references
|
||||
[id^="fn:"] {
|
||||
|
||||
// Add spacing to anchor for offset
|
||||
&::before {
|
||||
display: none;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Reset, as we use the anchor-correction hack here.
|
||||
&:target {
|
||||
scroll-margin-top: initial;
|
||||
}
|
||||
|
||||
// Targeted anchor
|
||||
&:target::before {
|
||||
display: block;
|
||||
margin-top: -1 * px2rem(48px + 12px + 10px);
|
||||
padding-top: px2rem(48px + 12px + 10px);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Footnotes extension
|
||||
// Footnote container
|
||||
.footnote {
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: px2rem(12.8px);
|
||||
|
||||
// Remove additional spacing on footnotes
|
||||
// Footnote list - omit left indentation
|
||||
ol {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Footnote
|
||||
// Footnote list item
|
||||
li {
|
||||
transition: color 125ms;
|
||||
|
||||
// Darken color for targeted footnote
|
||||
// Darken color on target
|
||||
&:target {
|
||||
color: var(--md-default-fg-color);
|
||||
}
|
||||
|
||||
// Remove spacing on first element
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Make back references visible on container hover
|
||||
// Show backreferences on footnote hover
|
||||
&:hover .footnote-backref,
|
||||
&:target .footnote-backref {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Hovered back reference
|
||||
&:hover .footnote-backref:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
// Adjust spacing on first child
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footnote reference
|
||||
.footnote-ref {
|
||||
display: inline-block;
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
// Footnote back reference
|
||||
// Footnote backreference
|
||||
.footnote-backref {
|
||||
display: inline-block;
|
||||
color: var(--md-typeset-a-color);
|
||||
// Hack: remove Unicode arrow for icon
|
||||
// Hack: omit Unicode arrow for replacement with icon
|
||||
font-size: 0;
|
||||
vertical-align: text-bottom;
|
||||
transform: translateX(px2rem(5px));
|
||||
@ -129,12 +87,24 @@
|
||||
transform 250ms 250ms,
|
||||
opacity 125ms 250ms;
|
||||
|
||||
// [print]: Show footnote backreferences
|
||||
@media print {
|
||||
color: var(--md-typeset-a-color);
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(px2rem(-5px));
|
||||
}
|
||||
|
||||
// Back reference icon
|
||||
// Adjust color on hover
|
||||
&:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
}
|
||||
|
||||
// Footnote backreference icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: px2rem(16px);
|
||||
@ -154,12 +124,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Always show for print
|
||||
@media print {
|
||||
color: var(--md-typeset-a-color);
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,95 +27,59 @@
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Permalinks extension
|
||||
// Headerlink
|
||||
.headerlink {
|
||||
display: inline-block;
|
||||
margin-left: px2rem(10px);
|
||||
// Hack: if we don't set visibility hidden, the text content of the node
|
||||
// will include the headerlink character, which is why Google indexes them.
|
||||
visibility: hidden;
|
||||
color: var(--md-default-fg-color--lighter);
|
||||
opacity: 0;
|
||||
transition:
|
||||
color 250ms,
|
||||
visibility 0ms 500ms,
|
||||
opacity 125ms;
|
||||
|
||||
// Adjust for RTL languages
|
||||
// [print]: Hide headerlinks
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(10px);
|
||||
margin-left: initial;
|
||||
}
|
||||
|
||||
// Higher specificity for color due to palettes integration
|
||||
html body & {
|
||||
color: var(--md-default-fg-color--lighter);
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Make permalink visible on hover
|
||||
// Show headerlinks on parent hover
|
||||
:hover > .headerlink,
|
||||
:target > .headerlink,
|
||||
.headerlink:focus {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition:
|
||||
color 250ms,
|
||||
visibility 0ms,
|
||||
opacity 125ms;
|
||||
}
|
||||
|
||||
// Active or targeted permalink
|
||||
// Adjust color on parent target or focus/hover
|
||||
:target > .headerlink,
|
||||
.headerlink:focus,
|
||||
.headerlink:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
}
|
||||
|
||||
// General scroll margin offset for anything that can be targeted. Browser
|
||||
// support is pretty decent by now, and if we wait until Edge 79+ has more
|
||||
// adoption, we can get rid of all anchor-correction hacks.
|
||||
// Adjust scroll offset for all elements with `id` attributes
|
||||
:target {
|
||||
scroll-margin-top: px2rem(48px + 24px);
|
||||
}
|
||||
|
||||
// Correct anchor offset for link blurring
|
||||
@each $level, $delta in (
|
||||
h1 h2 h3: 8px,
|
||||
h4: 9px,
|
||||
h5 h6: 12px,
|
||||
) {
|
||||
%#{nth($level, 1)} {
|
||||
// Adjust scroll offset for headlines of level 1-3
|
||||
h1:target,
|
||||
h2:target,
|
||||
h3:target {
|
||||
scroll-margin-top: px2rem(48px + 24px - 4px);
|
||||
}
|
||||
|
||||
// Reset, as we use the anchor-correction hack here.
|
||||
&:target {
|
||||
scroll-margin-top: initial;
|
||||
}
|
||||
|
||||
// Un-targeted anchor
|
||||
&::before {
|
||||
display: block;
|
||||
margin-top: -1 * px2rem($delta);
|
||||
padding-top: px2rem($delta);
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Targeted anchor (48px from header, 12px from sidebar offset)
|
||||
&:target::before {
|
||||
margin-top: -1 * px2rem(48px + 12px + $delta);
|
||||
padding-top: px2rem(48px + 12px + $delta);
|
||||
}
|
||||
}
|
||||
|
||||
// Define levels
|
||||
@for $n from 1 through length($level) {
|
||||
#{nth($level, $n)}[id] {
|
||||
@extend %#{nth($level, 1)};
|
||||
}
|
||||
}
|
||||
// Adjust scroll offset for headlines of level 4
|
||||
h4:target {
|
||||
scroll-margin-top: px2rem(48px + 24px - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,16 +27,16 @@
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Scroll math block on overflow
|
||||
// Arithmatex container
|
||||
div.arithmatex {
|
||||
overflow: auto;
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
// [mobile -]: Align with body copy
|
||||
@include break-to-device(mobile) {
|
||||
margin: 0 px2rem(-16px);
|
||||
}
|
||||
|
||||
// MathJax integration
|
||||
// Arithmatex content
|
||||
> * {
|
||||
width: min-content;
|
||||
margin: 1em auto !important;
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Block
|
||||
// Critic block
|
||||
.critic.block {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
@ -68,13 +68,13 @@
|
||||
overflow: auto;
|
||||
box-shadow: none;
|
||||
|
||||
// Decrease spacing on first element
|
||||
:first-child {
|
||||
// Adjust spacing on first child
|
||||
> :first-child {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
// Decrease spacing on last element
|
||||
:last-child {
|
||||
// Adjust spacing on last child
|
||||
> :last-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Details extension
|
||||
// Details
|
||||
details {
|
||||
@extend .admonition;
|
||||
|
||||
@ -42,18 +42,20 @@
|
||||
padding-top: 0;
|
||||
overflow: visible;
|
||||
|
||||
// Rotate title icon
|
||||
// Details title icon - rotate icon on transition to open state
|
||||
&[open] > summary::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
// Remove bottom spacing for closed details
|
||||
// Adjust spacing for details in closed state
|
||||
&:not([open]) {
|
||||
padding-bottom: 0;
|
||||
box-shadow: none;
|
||||
|
||||
// We cannot set overflow: hidden, as the outline would not be visible,
|
||||
// so we need to correct the border radius
|
||||
// Hack: we cannot set `overflow: hidden` on the `details` element (which
|
||||
// is why we set it to `overflow: visible`, as the outline would not be
|
||||
// visible when focusing. Therefore, we must set the border radius on the
|
||||
// summary explicitly.
|
||||
> summary {
|
||||
border-radius: px2rem(2px);
|
||||
}
|
||||
@ -77,20 +79,15 @@
|
||||
border-top-right-radius: px2rem(2px);
|
||||
cursor: pointer;
|
||||
|
||||
// Disable focus indicator for pointer devices
|
||||
&:not(.focus-visible) {
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding: px2rem(8px) px2rem(44px) px2rem(8px) px2rem(36px);
|
||||
}
|
||||
|
||||
// Remove default details marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
// Hide outline for pointer devices
|
||||
&:not(.focus-visible) {
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
// Details marker
|
||||
@ -115,5 +112,10 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide native details marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,22 +27,15 @@
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Emojis
|
||||
img.emojione,
|
||||
img.twemoji,
|
||||
img.gemoji {
|
||||
width: px2em(18px);
|
||||
max-height: 100%;
|
||||
vertical-align: -15%;
|
||||
}
|
||||
|
||||
// Inlined SVG icons via mkdocs-material-extensions
|
||||
span.twemoji {
|
||||
// Emoji and icon container
|
||||
.emojione,
|
||||
.twemoji,
|
||||
.gemoji {
|
||||
display: inline-block;
|
||||
height: px2em(18px);
|
||||
vertical-align: text-top;
|
||||
|
||||
// Icon
|
||||
// Icon - inlined via mkdocs-material-extensions
|
||||
svg {
|
||||
width: px2em(18px);
|
||||
max-height: 100%;
|
||||
|
||||
@ -21,16 +21,136 @@
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// Rules: syntax highlighting
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// When pymdownx.superfences is enabled but codehilite is disabled,
|
||||
// pymdownx.highlight will be used. When this happens, the outer container
|
||||
// and tables get this class names by default
|
||||
// Code block
|
||||
.highlight {
|
||||
@extend .codehilite;
|
||||
|
||||
// Inline line numbers
|
||||
.o, // Operator
|
||||
.ow { // Operator, word
|
||||
color: var(--md-code-hl-operator-color);
|
||||
}
|
||||
|
||||
.p { // Punctuation
|
||||
color: var(--md-code-hl-punctuation-color);
|
||||
}
|
||||
|
||||
.cpf, // Comment, preprocessor file
|
||||
.l, // Literal
|
||||
.s, // Literal, string
|
||||
.sb, // Literal, string backticks
|
||||
.sc, // Literal, string char
|
||||
.s2, // Literal, string double
|
||||
.si, // Literal, string interpol
|
||||
.s1, // Literal, string single
|
||||
.ss { // Literal, string symbol
|
||||
color: var(--md-code-hl-string-color);
|
||||
}
|
||||
|
||||
.cp, // Comment, pre-processor
|
||||
.se, // Literal, string escape
|
||||
.sh, // Literal, string heredoc
|
||||
.sr, // Literal, string regex
|
||||
.sx { // Literal, string other
|
||||
color: var(--md-code-hl-special-color);
|
||||
}
|
||||
|
||||
.m, // Number
|
||||
.mf, // Number, float
|
||||
.mh, // Number, hex
|
||||
.mi, // Number, integer
|
||||
.il, // Number, integer long
|
||||
.mo { // Number, octal
|
||||
color: var(--md-code-hl-number-color);
|
||||
}
|
||||
|
||||
.k, // Keyword,
|
||||
.kd, // Keyword, declaration
|
||||
.kn, // Keyword, namespace
|
||||
.kp, // Keyword, pseudo
|
||||
.kr, // Keyword, reserved
|
||||
.kt { // Keyword, type
|
||||
color: var(--md-code-hl-keyword-color);
|
||||
}
|
||||
|
||||
.kc, // Keyword, constant
|
||||
.n { // Name
|
||||
color: var(--md-code-hl-name-color);
|
||||
}
|
||||
|
||||
.no, // Name, constant
|
||||
.nb, // Name, builtin
|
||||
.bp { // Name, builtin pseudo
|
||||
color: var(--md-code-hl-constant-color);
|
||||
}
|
||||
|
||||
.nc, // Name, class
|
||||
.ne, // Name, exception
|
||||
.nf, // Name, function
|
||||
.nn { // Name, namespace
|
||||
color: var(--md-code-hl-function-color);
|
||||
}
|
||||
|
||||
.nd, // Name, decorator
|
||||
.ni, // Name, entity
|
||||
.nl, // Name, label
|
||||
.nt { // Name, tag
|
||||
color: var(--md-code-hl-keyword-color);
|
||||
}
|
||||
|
||||
.c, // Comment
|
||||
.cm, // Comment, multiline
|
||||
.c1, // Comment, single
|
||||
.ch, // Comment, shebang
|
||||
.cs, // Comment, special
|
||||
.sd { // Literal, string doc
|
||||
color: var(--md-code-hl-comment-color);
|
||||
}
|
||||
|
||||
.na, // Name, attribute
|
||||
.nv, // Variable,
|
||||
.vc, // Variable, class
|
||||
.vg, // Variable, global
|
||||
.vi { // Variable, instance
|
||||
color: var(--md-code-hl-variable-color);
|
||||
}
|
||||
|
||||
.ge, // Generic, emph
|
||||
.gr, // Generic, error
|
||||
.gh, // Generic, heading
|
||||
.go, // Generic, output
|
||||
.gp, // Generic, prompt
|
||||
.gs, // Generic, strong
|
||||
.gu, // Generic, subheading
|
||||
.gt { // Generic, traceback
|
||||
color: var(--md-code-hl-generic-color);
|
||||
}
|
||||
|
||||
.gd, // Diff, delete
|
||||
.gi { // Diff, insert
|
||||
margin: 0 px2em(-2px);
|
||||
padding: 0 px2em(2px);
|
||||
border-radius: px2rem(2px);
|
||||
}
|
||||
|
||||
.gd { // Diff, delete
|
||||
background-color: var(--md-typeset-del-color);
|
||||
}
|
||||
|
||||
.gi { // Diff, insert
|
||||
background-color: var(--md-typeset-ins-color)
|
||||
}
|
||||
|
||||
// Highlighted line
|
||||
.hll {
|
||||
display: block;
|
||||
margin: 0 px2em(-16px, 13.6px);
|
||||
padding: 0 px2em(16px, 13.6px);
|
||||
background-color: var(--md-code-hl-color)
|
||||
}
|
||||
|
||||
// Code block line numbers (inline)
|
||||
[data-linenos]::before {
|
||||
position: sticky;
|
||||
left: px2em(-16px, 13.6px);
|
||||
@ -40,13 +160,116 @@
|
||||
padding-left: px2em(16px, 13.6px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
background-color: var(--md-code-bg-color);
|
||||
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lighter) inset;
|
||||
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
|
||||
content: attr(data-linenos);
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Same as above, but for code blocks with line numbers enabled
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: layout
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Code block with line numbers
|
||||
.highlighttable {
|
||||
@extend .codehilitetable;
|
||||
display: flow-root;
|
||||
overflow: hidden;
|
||||
|
||||
// Set table elements to block layout, because otherwise the whole flexbox
|
||||
// hacking won't work correctly
|
||||
tbody,
|
||||
td {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// We need to use flexbox layout, because otherwise it's not possible to
|
||||
// make the code container scroll while keeping the line numbers static
|
||||
tr {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// The pre tags are nested inside a table, so we need to omit the margin
|
||||
// because it collapses below all the overflows
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Code block line numbers - disable user selection, so code can be easily
|
||||
// copied without accidentally also copying the line numbers
|
||||
.linenos {
|
||||
padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
|
||||
padding-right: 0;
|
||||
font-size: px2em(13.6px);
|
||||
background-color: var(--md-code-bg-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Code block line numbers container
|
||||
.linenodiv {
|
||||
padding-right: px2em(8px, 13.6px);
|
||||
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
|
||||
|
||||
// Adjust colors and alignment
|
||||
pre {
|
||||
color: var(--md-default-fg-color--light);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Code block container - stretch to remaining space
|
||||
.code {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Code block with line numbers
|
||||
.highlighttable {
|
||||
margin: 1em 0;
|
||||
direction: ltr;
|
||||
border-radius: px2rem(2px);
|
||||
|
||||
// Omit rounded borders on contained code block
|
||||
code {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// [mobile -]: Align with body copy
|
||||
@include break-to-device(mobile) {
|
||||
|
||||
// Top-level code block
|
||||
> .highlight {
|
||||
margin: 1em px2rem(-16px);
|
||||
|
||||
// Highlighted line
|
||||
.hll {
|
||||
margin: 0 px2rem(-16px);
|
||||
padding: 0 px2rem(16px);
|
||||
}
|
||||
|
||||
// Omit rounded borders
|
||||
code {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Top-level code block with line numbers
|
||||
> .highlighttable {
|
||||
margin: 1em px2rem(-16px);
|
||||
border-radius: 0;
|
||||
|
||||
// Highlighted line
|
||||
.hll {
|
||||
margin: 0 px2rem(-16px);
|
||||
padding: 0 px2rem(16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,91 +25,95 @@
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset .keys {
|
||||
.md-typeset {
|
||||
|
||||
// Keyboard key icon
|
||||
kbd::before,
|
||||
kbd::after {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
}
|
||||
// Keyboard key
|
||||
.keys {
|
||||
|
||||
// Surrounding text
|
||||
span {
|
||||
padding: 0 px2em(3.2px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
// Keyboard key icon
|
||||
kbd::before,
|
||||
kbd::after {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
}
|
||||
|
||||
// Build special keys with left icon
|
||||
@each $name, $code in (
|
||||
// Surrounding text
|
||||
span {
|
||||
padding: 0 px2em(3.2px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
"alt": "\2387",
|
||||
"left-alt": "\2387",
|
||||
"right-alt": "\2387",
|
||||
"command": "\2318",
|
||||
"left-command": "\2318",
|
||||
"right-command": "\2318",
|
||||
"control": "\2303",
|
||||
"left-control": "\2303",
|
||||
"right-control": "\2303",
|
||||
"meta": "\25C6",
|
||||
"left-meta": "\25C6",
|
||||
"right-meta": "\25C6",
|
||||
"option": "\2325",
|
||||
"left-option": "\2325",
|
||||
"right-option": "\2325",
|
||||
"shift": "\21E7",
|
||||
"left-shift": "\21E7",
|
||||
"right-shift": "\21E7",
|
||||
"super": "\2756",
|
||||
"left-super": "\2756",
|
||||
"right-super": "\2756",
|
||||
"windows": "\229E",
|
||||
"left-windows": "\229E",
|
||||
"right-windows": "\229E",
|
||||
// Define keyboard keys with left icon
|
||||
@each $name, $code in (
|
||||
|
||||
// Other keys
|
||||
"arrow-down": "\2193",
|
||||
"arrow-left": "\2190",
|
||||
"arrow-right": "\2192",
|
||||
"arrow-up": "\2191",
|
||||
"backspace": "\232B",
|
||||
"backtab": "\21E4",
|
||||
"caps-lock": "\21EA",
|
||||
"clear": "\2327",
|
||||
"context-menu": "\2630",
|
||||
"delete": "\2326",
|
||||
"eject": "\23CF",
|
||||
"end": "\2913",
|
||||
"escape": "\238B",
|
||||
"home": "\2912",
|
||||
"insert": "\2380",
|
||||
"page-down": "\21DF",
|
||||
"page-up": "\21DE",
|
||||
"print-screen": "\2399"
|
||||
) {
|
||||
.key-#{$name} {
|
||||
&::before {
|
||||
padding-right: px2em(6.4px);
|
||||
content: $code;
|
||||
// Modifiers
|
||||
"alt": "\2387",
|
||||
"left-alt": "\2387",
|
||||
"right-alt": "\2387",
|
||||
"command": "\2318",
|
||||
"left-command": "\2318",
|
||||
"right-command": "\2318",
|
||||
"control": "\2303",
|
||||
"left-control": "\2303",
|
||||
"right-control": "\2303",
|
||||
"meta": "\25C6",
|
||||
"left-meta": "\25C6",
|
||||
"right-meta": "\25C6",
|
||||
"option": "\2325",
|
||||
"left-option": "\2325",
|
||||
"right-option": "\2325",
|
||||
"shift": "\21E7",
|
||||
"left-shift": "\21E7",
|
||||
"right-shift": "\21E7",
|
||||
"super": "\2756",
|
||||
"left-super": "\2756",
|
||||
"right-super": "\2756",
|
||||
"windows": "\229E",
|
||||
"left-windows": "\229E",
|
||||
"right-windows": "\229E",
|
||||
|
||||
// Other keys
|
||||
"arrow-down": "\2193",
|
||||
"arrow-left": "\2190",
|
||||
"arrow-right": "\2192",
|
||||
"arrow-up": "\2191",
|
||||
"backspace": "\232B",
|
||||
"backtab": "\21E4",
|
||||
"caps-lock": "\21EA",
|
||||
"clear": "\2327",
|
||||
"context-menu": "\2630",
|
||||
"delete": "\2326",
|
||||
"eject": "\23CF",
|
||||
"end": "\2913",
|
||||
"escape": "\238B",
|
||||
"home": "\2912",
|
||||
"insert": "\2380",
|
||||
"page-down": "\21DF",
|
||||
"page-up": "\21DE",
|
||||
"print-screen": "\2399"
|
||||
) {
|
||||
.key-#{$name} {
|
||||
&::before {
|
||||
padding-right: px2em(6.4px);
|
||||
content: $code;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Build special keys with right icon
|
||||
@each $name, $code in (
|
||||
"tab": "\21E5",
|
||||
"num-enter": "\2324",
|
||||
"enter": "\23CE"
|
||||
) {
|
||||
.key-#{$name} {
|
||||
&::after {
|
||||
padding-left: px2em(6.4px);
|
||||
content: $code;
|
||||
// Define keyboard keys with right icon
|
||||
@each $name, $code in (
|
||||
"tab": "\21E5",
|
||||
"num-enter": "\2324",
|
||||
"enter": "\23CE"
|
||||
) {
|
||||
.key-#{$name} {
|
||||
&::after {
|
||||
padding-left: px2em(6.4px);
|
||||
content: $code;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,28 +34,27 @@
|
||||
width: 100%;
|
||||
box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest);
|
||||
|
||||
// Show all tabs when printing
|
||||
// [print]: Show all tabs (even hidden ones) when printing
|
||||
@media print {
|
||||
display: block;
|
||||
order: initial;
|
||||
}
|
||||
|
||||
// Mirror old superfences behavior, if there's only a single code block.
|
||||
// Code block is the only child of a tab - remove margin and mirror
|
||||
// previous (now deprecated) SuperFences code block grouping behavior
|
||||
> pre:only-child,
|
||||
> .codehilite:only-child pre,
|
||||
> .codehilitetable:only-child,
|
||||
> .highlight:only-child pre,
|
||||
> .highlighttable:only-child {
|
||||
margin: 0;
|
||||
|
||||
// Remove rounded borders at the top
|
||||
// Omit rounded borders
|
||||
> code {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Nested tabs
|
||||
// Adjust spacing for nested tab
|
||||
> .tabbed-set {
|
||||
margin: 0;
|
||||
}
|
||||
@ -69,14 +68,17 @@
|
||||
margin: 1em 0;
|
||||
border-radius: px2rem(2px);
|
||||
|
||||
// Hide radio buttons
|
||||
// Tab radio button - the Tabbed extension will generate radio buttons with
|
||||
// labels, so tabs can be triggered without the necessity for JavaScript.
|
||||
// This is pretty cool, as it has great accessibility out-of-the box, so
|
||||
// we just hide the radio button and toggle the label color for indication.
|
||||
> input {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
|
||||
// Active tab label
|
||||
// Tab label for checked radio button
|
||||
&:checked + label {
|
||||
color: var(--md-accent-fg-color);
|
||||
border-color: var(--md-accent-fg-color);
|
||||
@ -87,12 +89,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Focused tab label
|
||||
// Tab label on focus
|
||||
&:focus + label {
|
||||
outline-style: auto;
|
||||
}
|
||||
|
||||
// Disable focus indicator for pointer devices
|
||||
// Hide outline for pointer devices
|
||||
&:not(.focus-visible) + label {
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@ -111,8 +113,8 @@
|
||||
cursor: pointer;
|
||||
transition: color 250ms;
|
||||
|
||||
// Hovered label
|
||||
html &:hover {
|
||||
// Tab label on hover
|
||||
&:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Remove list icon on task items
|
||||
// Tasklist item
|
||||
.task-list-item {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
@ -59,39 +59,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for list controls, in case custom checkboxes are enabled
|
||||
.task-list-control {
|
||||
// Hide native checkbox, when custom classes are enabled
|
||||
.task-list-control [type="checkbox"] {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Checkbox icon in unchecked state
|
||||
.task-list-indicator::before {
|
||||
position: absolute;
|
||||
top: 0.15em;
|
||||
left: px2em(-24px);
|
||||
width: px2em(20px);
|
||||
height: px2em(20px);
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
mask-image: var(--md-tasklist-icon);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
// Tasklist indicator in unchecked state
|
||||
.task-list-indicator::before {
|
||||
position: absolute;
|
||||
top: 0.15em;
|
||||
left: px2em(-24px);
|
||||
width: px2em(20px);
|
||||
height: px2em(20px);
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
mask-image: var(--md-tasklist-icon);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2em(-24px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox icon in checked state
|
||||
[type="checkbox"]:checked + .task-list-indicator::before {
|
||||
background-color: $clr-green-a400;
|
||||
mask-image: var(--md-tasklist-icon--checked);
|
||||
}
|
||||
|
||||
// Hide original checkbox behind icon
|
||||
[type="checkbox"] {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2em(-24px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Tasklist indicator in checked state
|
||||
[type="checkbox"]:checked + .task-list-indicator::before {
|
||||
background-color: $clr-green-a400;
|
||||
mask-image: var(--md-tasklist-icon--checked);
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,16 +29,16 @@
|
||||
overflow: auto;
|
||||
background-color: var(--md-footer-bg-color);
|
||||
|
||||
// Actual content
|
||||
// [print]: Hide announcement bar
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Announcement wrapper
|
||||
&__inner {
|
||||
margin: px2rem(12px) auto;
|
||||
padding: 0 px2rem(16px);
|
||||
color: var(--md-footer-fg-color);
|
||||
font-size: px2rem(14px);
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,107 +20,88 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Variables
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Active (toggled) drawer
|
||||
$md-toggle__drawer--checked:
|
||||
"[data-md-toggle=\"drawer\"]:checked ~";
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: base grid and containers
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Stretch container to viewport and set base font-sizefor simple calculations
|
||||
// based on relative ems (rems)
|
||||
// Stretch container to viewport and set base `font-size`
|
||||
html {
|
||||
height: 100%;
|
||||
// Hack: some browsers on some operating systems don't account for scroll
|
||||
// bars when firing media queries, so we need to do this for safety. This
|
||||
// currently impacts the table of contents component between 1220 and 1234px
|
||||
// and is to current knowledge not fixable.
|
||||
overflow-x: hidden;
|
||||
// Hack: normally, we would set the base font-size to 62.5%, so we can base
|
||||
// all calculations on 10px, but Chromium and Chrome define a minimal font
|
||||
// size of 12 if the system language is set to Chinese. For this reason we
|
||||
// just double the font-size, set it to 20px which seems to do the trick.
|
||||
// Hack: normally, we would set the base `font-size` to `62.5%`, so we can
|
||||
// base all calculations on `10px`, but Chromium and Chrome define a minimal
|
||||
// `font-size` of `12px` if the system language is set to Chinese. For this
|
||||
// reason we just double the `font-size` and set it to `20px`.
|
||||
//
|
||||
// See https://github.com/squidfunk/mkdocs-material/issues/911
|
||||
font-size: 125%;
|
||||
|
||||
// [screen medium +]: Set base font-size to 11px
|
||||
// [screen medium +]: Set base `font-size` to `11px`
|
||||
@include break-from-device(screen medium) {
|
||||
font-size: 137.50%;
|
||||
}
|
||||
|
||||
// [screen large +]: Set base font-size to 12px
|
||||
// [screen large +]: Set base `font-size` to `12px`
|
||||
@include break-from-device(screen large) {
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch body to container and leave room for footer
|
||||
// Stretch body to container - flexbox is used, so the footer will always be
|
||||
// aligned to the bottom of the viewport
|
||||
body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
// Hack: reset font-size to 10px, so the spacing for all inline elements is
|
||||
// correct again. Otherwise the spacing would be based on 20px.
|
||||
font-size: 0.5rem; // stylelint-disable-line unit-allowed-list
|
||||
// Hack: reset `font-size` to `10px`, so the spacing for all inline elements
|
||||
// is correct again. Otherwise the spacing would be based on `20px`.
|
||||
font-size: px2rem(10px);
|
||||
background-color: var(--md-default-bg-color);
|
||||
|
||||
// [tablet portrait -]: Lock body to disable scroll bubbling
|
||||
@include break-to-device(tablet portrait) {
|
||||
|
||||
// Lock body to viewport height (e.g. in search mode)
|
||||
&[data-md-state="lock"] {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
// Hack: we must not use flex, or Firefox will only print the first page
|
||||
// see https://mzl.la/39DgR3m
|
||||
// [print]: Omit flexbox layout due to a Firefox bug (https://mzl.la/39DgR3m)
|
||||
@media print {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Body in locked state
|
||||
&[data-md-state="lock"] {
|
||||
|
||||
// [tablet portrait -]: Omit scroll bubbling
|
||||
@include break-to-device(tablet portrait) {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal separators
|
||||
hr {
|
||||
display: block;
|
||||
height: px2rem(1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Template-wide grid
|
||||
// Grid container - this class is applied to wrapper elements within the
|
||||
// header, content area and footer, and makes sure that their width is limited
|
||||
// to `1220px`, and they are rendered centered if the screen is larger.
|
||||
.md-grid {
|
||||
max-width: px2rem(1220px);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Content wrapper
|
||||
// Main container
|
||||
.md-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
// Hack: we must not use flex, or Firefox will only print the first page
|
||||
// see https://mzl.la/39DgR3m
|
||||
// [print]: Omit flexbox layout due to a Firefox bug (https://mzl.la/39DgR3m)
|
||||
@media print {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// The main content should stretch to maximum height in the table
|
||||
// Main area - stretch to remaining space of container
|
||||
.md-main {
|
||||
flex-grow: 1;
|
||||
|
||||
// Increase top spacing of content area to give typography more room
|
||||
// Main area wrapper
|
||||
&__inner {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@ -128,9 +109,8 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
// Apply ellipsis in case of overflowing text
|
||||
// Add ellipsis in case of overflowing text
|
||||
.md-ellipsis {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -140,49 +120,16 @@ hr {
|
||||
// Rules: navigational elements
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Toggle checkbox
|
||||
// Toggle - this class is applied to the checkbox elements, which are used to
|
||||
// implement the CSS-only drawer and navigation, as well as the search
|
||||
.md-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Overlay below expanded drawer
|
||||
.md-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: hsla(0, 0%, 0%, 0.54);
|
||||
opacity: 0;
|
||||
transition:
|
||||
width 0ms 250ms,
|
||||
height 0ms 250ms,
|
||||
opacity 250ms;
|
||||
|
||||
// [tablet -]: Trigger overlay
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Expanded drawer
|
||||
#{$md-toggle__drawer--checked} & {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition:
|
||||
width 0ms,
|
||||
height 0ms,
|
||||
opacity 250ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules: skip link
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Skip link
|
||||
.md-skip {
|
||||
position: fixed;
|
||||
// Hack: if we don't set the negative z-index, the skip link will induce the
|
||||
// Hack: if we don't set the negative `z-index`, the skip link will force the
|
||||
// creation of new layers when code blocks are near the header on scrolling
|
||||
z-index: -1;
|
||||
margin: px2rem(10px);
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
border-color: var(--md-primary-fg-color);
|
||||
}
|
||||
|
||||
// Focused or hovered button
|
||||
// Button on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-accent-bg-color);
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Copy to clipboard
|
||||
// Button to copy to clipboard
|
||||
.md-clipboard {
|
||||
position: absolute;
|
||||
top: px2em(8px);
|
||||
@ -40,22 +40,28 @@
|
||||
width: px2em(24px);
|
||||
height: px2em(24px);
|
||||
color: var(--md-default-fg-color--lightest);
|
||||
// background-color: var(--md-code-bg-color);
|
||||
border-radius: px2rem(2px);
|
||||
cursor: pointer;
|
||||
transition: color 125ms;
|
||||
transition: color 250ms;
|
||||
|
||||
// Hide for print
|
||||
// [print]: Hide button
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// // Make room for clipboard button in case of overflowing code
|
||||
// .md-typeset & + code {
|
||||
// padding-right: px2em(24px + 2 * 8px, 13.6px);
|
||||
// }
|
||||
// Darken color on code block hover
|
||||
:hover > & {
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
|
||||
// Slightly smaller icon
|
||||
// Button on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
}
|
||||
|
||||
// Button icon - the width and height are defined in `em`, so the size is
|
||||
// automatically adjusted for nested code blocks (e.g. in admonitions)
|
||||
&::after {
|
||||
display: block;
|
||||
width: px2em(18px);
|
||||
@ -67,15 +73,4 @@
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Show on container hover
|
||||
pre:hover & {
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
|
||||
// Focused or hovered icon
|
||||
pre &:focus,
|
||||
pre &:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,30 +24,46 @@
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Content container
|
||||
// Content area
|
||||
.md-content {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
// Hack: we must use `overflow: auto`, so the content area is capped by the
|
||||
// dimensions of its parent. Otherwise, long code blocks might lead to a
|
||||
// wider content area which will break everything. This, however, induces
|
||||
// margin collapse, which will break scroll margins. Adding a large enough
|
||||
// scroll padding seems to do the trick, at least in Chrome and Firefox.
|
||||
overflow: auto;
|
||||
scroll-padding-top: px2rem(1024px);
|
||||
|
||||
// [tablet landscape]: Decrease horizontal width
|
||||
@include break-at-device(tablet landscape) {
|
||||
max-width: calc(100% - #{px2rem(242px)});
|
||||
}
|
||||
|
||||
// [screen +]: Decrease horizontal width
|
||||
@include break-from-device(screen) {
|
||||
max-width: calc(100% - #{px2rem(242px)} * 2);
|
||||
}
|
||||
|
||||
// Define spacing
|
||||
// Content wrapper
|
||||
&__inner {
|
||||
margin: 0 px2rem(16px) px2rem(24px);
|
||||
padding-top: px2rem(12px);
|
||||
|
||||
// [screen +]: Increase horizontal spacing
|
||||
// [screen +]: Adjust spacing between content area and sidebars
|
||||
@include break-from-device(screen) {
|
||||
margin-right: px2rem(24px);
|
||||
margin-left: px2rem(24px);
|
||||
|
||||
// Sidebar with navigation is visible
|
||||
.md-sidebar--primary:not([hidden]) ~ .md-content > & {
|
||||
margin-left: px2rem(24px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(24px);
|
||||
margin-left: px2rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar with table of contents is visible
|
||||
.md-sidebar--secondary:not([hidden]) ~ .md-content > & {
|
||||
margin-right: px2rem(24px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
margin-right: px2rem(16px);
|
||||
margin-left: px2rem(24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hack: add pseudo element for spacing, as the overflow of the content
|
||||
@ -58,19 +74,25 @@
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Hack: remove bottom spacing of last element, due to margin collapse
|
||||
// Adjust spacing on last child
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Button next to the title
|
||||
// Button inside of the content area - these buttons are meant for actions on
|
||||
// a document-level, i.e. linking to related source code files, printing etc.
|
||||
&__button {
|
||||
float: right;
|
||||
margin: px2rem(8px) 0;
|
||||
margin-left: px2rem(8px);
|
||||
padding: 0;
|
||||
|
||||
// [print]: Hide buttons
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: left;
|
||||
@ -83,20 +105,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Override default link color for icons
|
||||
// Adjust default link color for icons
|
||||
.md-typeset & {
|
||||
color: var(--md-default-fg-color--lighter);
|
||||
}
|
||||
|
||||
// Align text with icon
|
||||
// Align with body copy located next to icon
|
||||
svg {
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Dialog rendered as snackbar
|
||||
// Dialog
|
||||
.md-dialog {
|
||||
@include z-depth(2);
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
padding: px2rem(8px) px2rem(12px);
|
||||
color: var(--md-default-bg-color);
|
||||
font-size: px2rem(14px);
|
||||
background: var(--md-default-fg-color);
|
||||
background-color: var(--md-default-fg-color);
|
||||
border: none;
|
||||
border-radius: px2rem(2px);
|
||||
transform: translateY(100%);
|
||||
@ -47,13 +47,18 @@
|
||||
transform 0ms 400ms,
|
||||
opacity 400ms;
|
||||
|
||||
// [print]: Hide dialog
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: px2rem(16px);
|
||||
}
|
||||
|
||||
// Show open dialog
|
||||
// Dialog in open state
|
||||
&[data-md-state="open"] {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
@ -61,9 +66,4 @@
|
||||
transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
|
||||
opacity 400ms;
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,48 +24,58 @@
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Application footer
|
||||
// Footer
|
||||
.md-footer {
|
||||
color: var(--md-footer-fg-color);
|
||||
background-color: var(--md-footer-bg-color);
|
||||
|
||||
// Hide for print
|
||||
// [print]: Hide footer
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation within footer
|
||||
// Footer navigation
|
||||
.md-footer-nav {
|
||||
|
||||
// Set spacing
|
||||
// Footer navigation wrapper
|
||||
&__inner {
|
||||
padding: px2rem(4px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Links to previous and next page
|
||||
// Footer link to previous and next page
|
||||
&__link {
|
||||
display: flex;
|
||||
padding-top: px2rem(28px);
|
||||
padding-bottom: px2rem(8px);
|
||||
transition: opacity 250ms;
|
||||
|
||||
// [tablet +]: Set proportional width
|
||||
// [tablet +]: Adjust width to 50/50
|
||||
@include break-from-device(tablet) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
// Focused or hovered links
|
||||
// Footer link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Link to previous page
|
||||
// Footer link to previous page
|
||||
&--prev {
|
||||
float: left;
|
||||
|
||||
// [mobile -]: Adjust width to 25/75 and hide title
|
||||
@include break-to-device(mobile) {
|
||||
width: 25%;
|
||||
|
||||
// Hide footer navigation title
|
||||
.md-footer-nav__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
@ -75,23 +85,18 @@
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// [mobile -]: Hide title for previous page
|
||||
@include break-to-device(mobile) {
|
||||
width: 25%;
|
||||
|
||||
// Title
|
||||
.md-footer-nav__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link to next page
|
||||
// Footer link to next page
|
||||
&--next {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
// [mobile -]: Adjust width to 25/75
|
||||
@include break-to-device(mobile) {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
float: left;
|
||||
@ -102,15 +107,10 @@
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// [mobile -]: Hide title for previous page
|
||||
@include break-to-device(mobile) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link title - set line height to match icon for correct alignment
|
||||
// Footer navigation title
|
||||
&__title {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
@ -120,13 +120,13 @@
|
||||
line-height: px2rem(48px);
|
||||
}
|
||||
|
||||
// Link button
|
||||
// Footer navigation link button
|
||||
&__button {
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
}
|
||||
|
||||
// Link direction
|
||||
// Footer navigation link direction (i.e. prev and next)
|
||||
&__direction {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -138,11 +138,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Non-navigational information
|
||||
// Footer metadata
|
||||
.md-footer-meta {
|
||||
background-color: var(--md-footer-bg-color--dark);
|
||||
|
||||
// Set spacing
|
||||
// Footer metadata wrapper
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -150,11 +150,11 @@
|
||||
padding: px2rem(4px);
|
||||
}
|
||||
|
||||
// Use a decent color for non-hovered links and ensure specificity
|
||||
// Lighten color for non-hovered text links
|
||||
html &.md-typeset a {
|
||||
color: var(--md-footer-fg-color--light);
|
||||
|
||||
// Focused or hovered link
|
||||
// Text link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-footer-fg-color);
|
||||
@ -162,7 +162,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Copyright and theme information
|
||||
// Footer copyright metadata
|
||||
.md-footer-copyright {
|
||||
width: 100%;
|
||||
margin: auto px2rem(12px);
|
||||
@ -170,28 +170,29 @@
|
||||
color: var(--md-footer-fg-color--lighter);
|
||||
font-size: px2rem(12.8px);
|
||||
|
||||
// [tablet portrait +]: Show next to social media links
|
||||
// [tablet portrait +]: Show copyright and social links in one line
|
||||
@include break-from-device(tablet portrait) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Highlight copyright information
|
||||
// Footer copyright highlight - this is the upper part of the copyright and
|
||||
// theme information, which will include a darker color than the theme link
|
||||
&__highlight {
|
||||
color: var(--md-footer-fg-color--light);
|
||||
}
|
||||
}
|
||||
|
||||
// Social links
|
||||
// Footer social metadata
|
||||
.md-footer-social {
|
||||
margin: 0 px2rem(8px);
|
||||
padding: px2rem(4px) 0 px2rem(12px);
|
||||
|
||||
// [tablet portrait +]: Show next to copyright information
|
||||
// [tablet portrait +]: Show copyright and social links in one line
|
||||
@include break-from-device(tablet portrait) {
|
||||
padding: px2rem(12px) 0;
|
||||
}
|
||||
|
||||
// Link with icon
|
||||
// Footer social link
|
||||
&__link {
|
||||
display: inline-block;
|
||||
width: px2rem(32px);
|
||||
@ -203,7 +204,7 @@
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
// Social icon
|
||||
// Fill icon with current color
|
||||
svg {
|
||||
max-height: px2rem(16px);
|
||||
vertical-align: -25%;
|
||||
|
||||
@ -24,14 +24,14 @@
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Application header (stays always on top)
|
||||
// Header - by default, the header will be sticky and stay always on top of the
|
||||
// viewport. If this behavior is not desired, just set `position: static`.
|
||||
.md-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: px2rem(48px);
|
||||
color: var(--md-primary-bg-color);
|
||||
background-color: var(--md-primary-fg-color);
|
||||
// Hack: reduce jitter by adding a transparent box shadow of the same size
|
||||
@ -43,64 +43,74 @@
|
||||
color 250ms,
|
||||
background-color 250ms;
|
||||
|
||||
// Always hide shadow, in case JavaScript is not available
|
||||
.no-js & {
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
// [print]: Hide header
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show and animate shadow
|
||||
// Header in shadow state, i.e. shadow is visible
|
||||
&[data-md-state="shadow"] {
|
||||
box-shadow:
|
||||
0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
|
||||
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
color 250ms,
|
||||
background-color 250ms,
|
||||
box-shadow 250ms;
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@media print {
|
||||
display: none;
|
||||
// Header in hidden state, i.e. moved out of sight
|
||||
&[data-md-state="hidden"] {
|
||||
transform: translateY(-100%);
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
|
||||
color 250ms,
|
||||
background-color 250ms,
|
||||
box-shadow 250ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation within header
|
||||
// Header navigation - if the header exceeds the default height of `48px`, i.e.
|
||||
// by adding a bigger logo, the items are agned at the center
|
||||
.md-header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 px2rem(4px);
|
||||
|
||||
// Icon buttons
|
||||
// Header navigation button
|
||||
&__button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
color: currentColor;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: opacity 250ms;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Focused or hovered icon
|
||||
// Button on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Logo
|
||||
// Hide outline for pointer devices
|
||||
&:not(.focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Button with logo, pointing to `config.site_url`
|
||||
&.md-logo {
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
|
||||
// [tablet -]: Hide button
|
||||
@include break-to-device(tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Image or icon
|
||||
img,
|
||||
svg {
|
||||
@ -111,48 +121,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Hide search icon, if JavaScript is not available.
|
||||
.no-js &[for="__search"] {
|
||||
display: none;
|
||||
}
|
||||
// Button for search
|
||||
&[for="__search"] {
|
||||
|
||||
// [tablet landscape +]: Hide the search button
|
||||
@include break-from-device(tablet landscape) {
|
||||
|
||||
// Search button
|
||||
&[for="__search"] {
|
||||
// [tablet landscape +]: Hide button
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// [no-js]: Hide button
|
||||
.no-js & {
|
||||
display: none
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
// Flip icon vertically
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet -]: Hide the logo
|
||||
@include break-to-device(tablet) {
|
||||
// Button for drawer
|
||||
&[for="__drawer"] {
|
||||
|
||||
// Logo
|
||||
&.md-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Hide the menu button
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Menu button
|
||||
&[for="__drawer"] {
|
||||
// [screen +]: Hide button
|
||||
@include break-from-device(screen) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header topics
|
||||
// Header navigation topic
|
||||
&__topic {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
transition:
|
||||
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 150ms;
|
||||
|
||||
// Page title
|
||||
// Second header topic - title of the current page
|
||||
& + & {
|
||||
z-index: -1;
|
||||
transform: translateX(px2rem(25px));
|
||||
@ -167,26 +178,18 @@
|
||||
transform: translateX(px2rem(-25px));
|
||||
}
|
||||
}
|
||||
|
||||
// Induce ellipsis, if no JavaScript is available
|
||||
.no-js & {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
// Hide page title as it is invisible anyway and will overflow the header
|
||||
.no-js & + & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Header title - set line height to match icon for correct alignment
|
||||
// Header navigation title
|
||||
&__title {
|
||||
flex-grow: 1;
|
||||
padding: 0 px2rem(20px);
|
||||
height: px2rem(48px);
|
||||
margin-right: px2rem(8px);
|
||||
margin-left: px2rem(20px);
|
||||
font-size: px2rem(18px);
|
||||
line-height: px2rem(48px);
|
||||
|
||||
// Show page title
|
||||
// Header title in active state, i.e. page title is visible
|
||||
&[data-md-state="active"] .md-header-nav__topic {
|
||||
z-index: -1;
|
||||
transform: translateX(px2rem(-25px));
|
||||
@ -201,7 +204,7 @@
|
||||
transform: translateX(px2rem(25px));
|
||||
}
|
||||
|
||||
// Page title
|
||||
// Second header topic - title of the current page
|
||||
& + .md-header-nav__topic {
|
||||
z-index: 0;
|
||||
transform: translateX(0);
|
||||
@ -213,7 +216,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Patch ellipsis
|
||||
// Add ellipsis in case of overflowing text
|
||||
> .md-header-nav__ellipsis {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -221,11 +224,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Repository containing source
|
||||
// Repository information container
|
||||
&__source {
|
||||
display: none;
|
||||
|
||||
// [tablet landscape +]: Show the reposistory from tablet
|
||||
// [tablet landscape +]: Show repository information
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: block;
|
||||
width: px2rem(234px);
|
||||
@ -239,7 +242,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Increase spacing of search bar
|
||||
// [screen +]: Adjust spacing of search bar
|
||||
@include break-from-device(screen) {
|
||||
margin-left: px2rem(28px);
|
||||
|
||||
|
||||
@ -33,12 +33,12 @@
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Navigation container
|
||||
// Navigation
|
||||
.md-nav {
|
||||
font-size: px2rem(14px);
|
||||
line-height: 1.3;
|
||||
|
||||
// List title
|
||||
// Navigation title
|
||||
&__title {
|
||||
display: block;
|
||||
padding: 0 px2rem(12px);
|
||||
@ -46,17 +46,17 @@
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// Hide buttons by default
|
||||
// Navigaton button
|
||||
.md-nav__button {
|
||||
display: none;
|
||||
|
||||
// Stretch images
|
||||
// Stretch images based on height, as it's the smaller dimension
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Logo
|
||||
// Button with logo, pointing to `config.site_url`
|
||||
&.md-logo {
|
||||
|
||||
// Image or icon
|
||||
@ -65,33 +65,24 @@
|
||||
display: block;
|
||||
width: px2rem(48px);
|
||||
height: px2rem(48px);
|
||||
}
|
||||
|
||||
// Icon
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List of items
|
||||
// Navigation list
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// List item
|
||||
// Navigation item
|
||||
&__item {
|
||||
padding: 0 px2rem(12px);
|
||||
|
||||
// Add bottom spacing to last item
|
||||
&:last-child {
|
||||
padding-bottom: px2rem(12px);
|
||||
}
|
||||
|
||||
// 2nd+ level items
|
||||
// Navigation item on level 2
|
||||
& & {
|
||||
padding-right: 0;
|
||||
|
||||
@ -100,15 +91,10 @@
|
||||
padding-right: px2rem(12px);
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
// Remove bottom spacing for nested items
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link inside item
|
||||
// Navigation link
|
||||
&__link {
|
||||
display: block;
|
||||
margin-top: 0.625em;
|
||||
@ -118,18 +104,7 @@
|
||||
transition: color 125ms;
|
||||
scroll-snap-align: start;
|
||||
|
||||
// Hide link to table of contents by default - this will only match the
|
||||
// table of contents inside the drawer below and including tablet portrait
|
||||
html &[for="__toc"] {
|
||||
display: none;
|
||||
|
||||
// Hide table of contents by default
|
||||
& ~ .md-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Blurred link
|
||||
// Link in blurred state
|
||||
&[data-md-state="blur"] {
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
@ -139,19 +114,38 @@
|
||||
color: var(--md-typeset-a-color);
|
||||
}
|
||||
|
||||
// Reset active color for nested list titles
|
||||
// Navigation link in nested list
|
||||
.md-nav__item--nested > & {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Focused or hovered link
|
||||
// Navigation link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
}
|
||||
|
||||
// Navigation link to table of contents
|
||||
.md-nav--primary &[for="__toc"] {
|
||||
display: none;
|
||||
|
||||
// Table of contents icon
|
||||
.md-icon::after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: var(--md-toc-icon);
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
// Hide table of contents
|
||||
& ~ .md-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Repository containing source
|
||||
// Repository information container
|
||||
&__source {
|
||||
display: none;
|
||||
}
|
||||
@ -159,9 +153,9 @@
|
||||
// [tablet -]: Layered navigation
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Stretch primary navigation to drawer
|
||||
// Primary and nested navigation
|
||||
&--primary,
|
||||
&--primary .md-nav {
|
||||
&--primary & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -173,17 +167,17 @@
|
||||
background-color: var(--md-default-bg-color);
|
||||
}
|
||||
|
||||
// Adjust styles for primary navigation
|
||||
// Primary navigation
|
||||
&--primary {
|
||||
|
||||
// List title and item
|
||||
// Navigation title and item
|
||||
.md-nav__title,
|
||||
.md-nav__item {
|
||||
font-size: px2rem(16px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// List title
|
||||
// Navigation title
|
||||
.md-nav__title {
|
||||
position: relative;
|
||||
height: px2rem(112px);
|
||||
@ -205,7 +199,13 @@
|
||||
height: px2rem(24px);
|
||||
margin: px2rem(4px);
|
||||
|
||||
// Previous navigation item icon
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(8px);
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Navigation icon in link to previous level
|
||||
&::after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -216,15 +216,9 @@
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(8px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Main lists
|
||||
// Navigation list
|
||||
~ .md-nav__list {
|
||||
overflow-y: auto;
|
||||
background-color: var(--md-default-bg-color);
|
||||
@ -233,57 +227,46 @@
|
||||
scroll-snap-type: y mandatory;
|
||||
touch-action: pan-y;
|
||||
|
||||
// Remove border for first list item
|
||||
> .md-nav__item:first-child {
|
||||
// Omit border on first child
|
||||
> :first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Site title in main navigation
|
||||
// Top-level navigation title
|
||||
&[for="__drawer"] {
|
||||
position: relative;
|
||||
color: var(--md-primary-bg-color);
|
||||
background-color: var(--md-primary-fg-color);
|
||||
}
|
||||
|
||||
// Site logo
|
||||
.md-nav__button {
|
||||
position: absolute;
|
||||
top: px2rem(4px);
|
||||
left: px2rem(4px);
|
||||
display: block;
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
font-size: px2rem(48px);
|
||||
// Button with logo, pointing to `config.site_url`
|
||||
.md-logo {
|
||||
position: absolute;
|
||||
top: px2rem(4px);
|
||||
left: px2rem(4px);
|
||||
display: block;
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: px2rem(4px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
html [dir="rtl"] & .md-nav__title {
|
||||
|
||||
// Site title in main navigation
|
||||
&[for="__drawer"] .md-nav__button {
|
||||
right: px2rem(4px);
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// List of items
|
||||
// Navigation list
|
||||
.md-nav__list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// List item
|
||||
// Navigation item
|
||||
.md-nav__item {
|
||||
padding: 0;
|
||||
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Increase spacing to account for icon
|
||||
// Navigation link in nested navigation
|
||||
&--nested > .md-nav__link {
|
||||
padding-right: px2rem(48px);
|
||||
|
||||
@ -294,11 +277,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Active parent item
|
||||
// Navigation link in active navigation
|
||||
&--active > .md-nav__link {
|
||||
color: var(--md-typeset-a-color);
|
||||
|
||||
// Focused or hovered linl
|
||||
// Navigation link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
@ -306,7 +289,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Link inside item
|
||||
// Navigation link
|
||||
.md-nav__link {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
@ -323,7 +306,13 @@
|
||||
color: inherit;
|
||||
font-size: px2rem(24px);
|
||||
|
||||
// Next navigation item icon
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: px2rem(12px);
|
||||
}
|
||||
|
||||
// Navigation icon in link to next level
|
||||
&::after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -334,38 +323,32 @@
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
right: initial;
|
||||
left: px2rem(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flip icon vertically
|
||||
.md-nav__icon::after {
|
||||
.md-nav__icon {
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
[dir="rtl"] &::after {
|
||||
transform: scale(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// Table of contents inside navigation
|
||||
// Table of contents contained in primary navigation
|
||||
.md-nav--secondary {
|
||||
|
||||
// Set links to static to avoid unnecessary layering
|
||||
// Navigation link - omit unnecessary layering
|
||||
.md-nav__link {
|
||||
position: static;
|
||||
}
|
||||
|
||||
// Set nested navigation for table of contents to static
|
||||
// Navigation on level 2-6
|
||||
.md-nav {
|
||||
position: static;
|
||||
background-color: transparent;
|
||||
|
||||
// 3rd level link
|
||||
// Navigation link on level 3
|
||||
.md-nav__link {
|
||||
padding-left: px2rem(28px);
|
||||
|
||||
@ -376,7 +359,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 4th level link
|
||||
// Navigation link on level 4
|
||||
.md-nav .md-nav__link {
|
||||
padding-left: px2rem(40px);
|
||||
|
||||
@ -387,7 +370,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 5th level link
|
||||
// Navigation link on level 5
|
||||
.md-nav .md-nav .md-nav__link {
|
||||
padding-left: px2rem(52px);
|
||||
|
||||
@ -398,7 +381,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 6th level link
|
||||
// Navigation link on level 6
|
||||
.md-nav .md-nav .md-nav .md-nav__link {
|
||||
padding-left: px2rem(64px);
|
||||
|
||||
@ -412,13 +395,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust styles for secondary navigation
|
||||
// Table of contents
|
||||
&--secondary {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Hide nested navigation by default
|
||||
.md-nav__toggle ~ & {
|
||||
// Toggle for nested navigation
|
||||
&__toggle ~ & {
|
||||
display: flex;
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
@ -432,58 +415,53 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Expand nested navigation, if toggle is checked
|
||||
.md-nav__toggle:checked ~ & {
|
||||
// Show nested navigation when toggle is active
|
||||
&__toggle:checked ~ & {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 125ms 125ms;
|
||||
|
||||
// Hack: reduce jitter
|
||||
// Navigation list
|
||||
> .md-nav__list {
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Show table of contents in drawer
|
||||
// [tablet portrait -]: Layered navigation with table of contents
|
||||
@include break-to-device(tablet portrait) {
|
||||
|
||||
// Show link to table of contents - higher specificity is necessary to
|
||||
// display the table of contents inside the drawer
|
||||
html &__link[for="__toc"] {
|
||||
// Show link to table of contents
|
||||
&--primary &__link[for="__toc"] {
|
||||
display: block;
|
||||
padding-right: px2rem(48px);
|
||||
|
||||
// Hide link to current item
|
||||
+ .md-nav__link {
|
||||
display: none;
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(48px);
|
||||
}
|
||||
|
||||
// Table of contents icon
|
||||
// Show table of contents icon
|
||||
.md-icon::after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: var(--md-toc-icon);
|
||||
background-color: currentColor;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Hide navigation link to current page
|
||||
+ .md-nav__link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show table of contents
|
||||
& ~ .md-nav {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
html [dir="rtl"] &__link {
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(48px);
|
||||
}
|
||||
|
||||
// Repository containing source
|
||||
// Repository information container
|
||||
&__source {
|
||||
display: block;
|
||||
padding: 0 px2rem(4px);
|
||||
@ -492,18 +470,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Tree-like navigation
|
||||
// [tablet landscape]: Layered navigation with table of contents
|
||||
@include break-at-device(tablet landscape) {
|
||||
|
||||
// Show link to integrated table of contents
|
||||
&--integrated &__link[for="__toc"] {
|
||||
display: block;
|
||||
padding-right: px2rem(48px);
|
||||
scroll-snap-align: initial;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(16px);
|
||||
padding-left: px2rem(48px);
|
||||
}
|
||||
|
||||
// Show table of contents icon
|
||||
.md-icon::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Hide navigation link to current page
|
||||
+ .md-nav__link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show table of contents
|
||||
& ~ .md-nav {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Tree-like table of contents
|
||||
@include break-from-device(tablet landscape) {
|
||||
|
||||
// List title
|
||||
&--secondary .md-nav__title {
|
||||
// Navigation title
|
||||
&--secondary &__title {
|
||||
|
||||
// Snap to table of contents title
|
||||
// Adjust snapping behavior
|
||||
&[for="__toc"] {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
// Hide icon
|
||||
// Hide navigation icon
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
}
|
||||
@ -514,35 +524,70 @@
|
||||
@include break-from-device(screen) {
|
||||
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
||||
// List title
|
||||
&--primary .md-nav__title {
|
||||
// Navigation title
|
||||
&--primary &__title {
|
||||
|
||||
// Snap to site title
|
||||
// Adjust snapping behavior
|
||||
&[for="__drawer"] {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
// Hide icon
|
||||
// Hide navigation icon
|
||||
.md-nav__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide nested navigation by default
|
||||
.md-nav__toggle ~ & {
|
||||
// Hide toggle for nested navigation
|
||||
&__toggle ~ & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show nested navigation, if toggle is checked
|
||||
.md-nav__toggle:checked ~ & {
|
||||
// Show nested navigation when toggle is active or indeterminate
|
||||
&__toggle:checked ~ &,
|
||||
&__toggle:indeterminate ~ & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Hide titles for nested navigation
|
||||
&__item--nested > .md-nav > &__title {
|
||||
// Hide navigation title in nested navigation
|
||||
&__item--nested > & > &__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Navigation section
|
||||
&__item--section {
|
||||
display: block;
|
||||
margin: 1.25em 0;
|
||||
|
||||
// Adjust spacing on last child
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Hide navigation link, as sections are always expanded
|
||||
> .md-nav__link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
> .md-nav {
|
||||
display: block;
|
||||
|
||||
// Navigation title
|
||||
> .md-nav__title {
|
||||
display: block;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
// Adjust spacing on next level item
|
||||
> .md-nav__list > .md-nav__item {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation icon
|
||||
&__icon {
|
||||
float: right;
|
||||
@ -556,7 +601,7 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// Inline icon and adjust icon to match font size
|
||||
// Navigation icon content
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@ -569,10 +614,68 @@
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Rotate icon for expanded lists
|
||||
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
|
||||
// Navigation icon - rotate icon when toggle is active or indeterminate
|
||||
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link &,
|
||||
.md-nav__item--nested .md-nav__toggle:indeterminate ~ .md-nav__link & {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier for when navigation tabs are rendered
|
||||
&--lifted {
|
||||
|
||||
// Hide nested items on level 1 and site title
|
||||
> .md-nav__list > .md-nav__item--nested,
|
||||
> .md-nav__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide level 1 items
|
||||
> .md-nav__list > .md-nav__item {
|
||||
display: none;
|
||||
|
||||
// Active parent navigation item
|
||||
&--active {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
// Hide nested links
|
||||
> .md-nav__link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show title and adjust spacing
|
||||
> .md-nav > .md-nav__title {
|
||||
display: block;
|
||||
padding: 0 px2rem(12px);
|
||||
pointer-events: none;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust spacing for navigation item on level 2
|
||||
> .md-nav__item {
|
||||
padding-right: px2rem(12px);
|
||||
}
|
||||
}
|
||||
|
||||
// Hack: Always show active navigation tab on breakpoint screen, despite
|
||||
// of checkbox being checked or not. Fixes #1655.
|
||||
.md-nav[data-md-level="1"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Modifier for when table of contents is rendered in primary navigation
|
||||
&--integrated &__link[for="__toc"] ~ .md-nav {
|
||||
display: block;
|
||||
margin-bottom: 1.25em;
|
||||
border-left: px2rem(1px) solid var(--md-primary-fg-color);
|
||||
|
||||
// Hide navigation title
|
||||
> .md-nav__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,14 +20,6 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Variables
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Active (toggled) search
|
||||
$md-toggle__search--checked:
|
||||
"[data-md-toggle=\"search\"]:checked ~ .md-header";
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -39,26 +31,26 @@ $md-toggle__search--checked:
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Search container
|
||||
// Search
|
||||
.md-search {
|
||||
position: relative;
|
||||
|
||||
// Hide search, if JavaScript is not available.
|
||||
.no-js & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding: px2rem(4px) 0;
|
||||
}
|
||||
|
||||
// Search modal overlay
|
||||
// [no-js]: Hide search
|
||||
.no-js & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Search overlay
|
||||
&__overlay {
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
// [tablet portrait -]: Search modal
|
||||
@include break-to-device(tablet portrait) {
|
||||
position: absolute;
|
||||
top: px2rem(4px);
|
||||
@ -80,8 +72,8 @@ $md-toggle__search--checked:
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Expanded overlay
|
||||
#{$md-toggle__search--checked} & {
|
||||
// Show overlay when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 400ms,
|
||||
@ -89,26 +81,7 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Set scale factors
|
||||
#{$md-toggle__search--checked} & {
|
||||
|
||||
// [mobile portrait -]: Scale up 45 times
|
||||
@include break-to-device(mobile portrait) {
|
||||
transform: scale(45);
|
||||
}
|
||||
|
||||
// [mobile landscape]: Scale up 60 times
|
||||
@include break-at-device(mobile landscape) {
|
||||
transform: scale(60);
|
||||
}
|
||||
|
||||
// [tablet portrait]: Scale up 75 times
|
||||
@include break-at-device(tablet portrait) {
|
||||
transform: scale(75);
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Overlay for better focus on search
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -128,8 +101,8 @@ $md-toggle__search--checked:
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Expanded overlay
|
||||
#{$md-toggle__search--checked} & {
|
||||
// Show overlay when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
@ -139,14 +112,33 @@ $md-toggle__search--checked:
|
||||
opacity 250ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust appearance when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
|
||||
// [mobile portrait -]: Scale up 45 times
|
||||
@include break-to-device(mobile portrait) {
|
||||
transform: scale(45);
|
||||
}
|
||||
|
||||
// [mobile landscape]: Scale up 60 times
|
||||
@include break-at-device(mobile landscape) {
|
||||
transform: scale(60);
|
||||
}
|
||||
|
||||
// [tablet portrait]: Scale up 75 times
|
||||
@include break-at-device(tablet portrait) {
|
||||
transform: scale(75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search modal wrapper
|
||||
// Search wrapper
|
||||
&__inner {
|
||||
// Hack: reduce jitter
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
|
||||
// [tablet portrait -]: Put search modal off-canvas by default
|
||||
// [tablet portrait -]: Search modal
|
||||
@include break-to-device(tablet portrait) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -162,8 +154,8 @@ $md-toggle__search--checked:
|
||||
transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 150ms 150ms;
|
||||
|
||||
// Active search modal
|
||||
#{$md-toggle__search--checked} & {
|
||||
// Adjust appearance when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
@ -202,15 +194,15 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Set maximum width
|
||||
#{$md-toggle__search--checked} & {
|
||||
// Adjust appearance when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
|
||||
// [tablet landscape]: Do not overlay title
|
||||
// [tablet landscape]: Omit overlaying header title
|
||||
@include break-at-device(tablet landscape) {
|
||||
width: px2rem(468px);
|
||||
}
|
||||
|
||||
// [screen +]: Match content width
|
||||
// [screen +]: Match width of content area
|
||||
@include break-from-device(screen) {
|
||||
width: px2rem(688px);
|
||||
}
|
||||
@ -243,12 +235,12 @@ $md-toggle__search--checked:
|
||||
padding: 0 px2rem(72px) 0 px2rem(44px);
|
||||
}
|
||||
|
||||
// Transition on placeholder
|
||||
// Search placeholder
|
||||
&::placeholder {
|
||||
transition: color 250ms;
|
||||
}
|
||||
|
||||
// Placeholder and icon color in active state
|
||||
// Search icon and placeholder
|
||||
~ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: var(--md-default-fg-color--light);
|
||||
@ -259,7 +251,7 @@ $md-toggle__search--checked:
|
||||
display: none;
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
// [tablet portrait -]: Search modal
|
||||
@include break-to-device(tablet portrait) {
|
||||
width: 100%;
|
||||
height: px2rem(48px);
|
||||
@ -281,29 +273,29 @@ $md-toggle__search--checked:
|
||||
padding-right: px2rem(44px);
|
||||
}
|
||||
|
||||
// Search icon color
|
||||
// Search icon
|
||||
+ .md-search__icon {
|
||||
color: var(--md-primary-bg-color);
|
||||
}
|
||||
|
||||
// Placeholder color
|
||||
// Search placeholder
|
||||
&::placeholder {
|
||||
color: var(--md-primary-bg-color--light);
|
||||
}
|
||||
|
||||
// Hovered search field
|
||||
// Search input on hover
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 100%, 0.12);
|
||||
}
|
||||
|
||||
// Set light background on active search field
|
||||
#{$md-toggle__search--checked} & {
|
||||
// Adjust appearance when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
color: var(--md-default-fg-color);
|
||||
text-overflow: clip;
|
||||
background-color: var(--md-default-bg-color);
|
||||
border-radius: px2rem(2px) px2rem(2px) 0 0;
|
||||
|
||||
// Search icon and placeholder color in active state
|
||||
// Search icon and placeholder
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: var(--md-default-fg-color--light);
|
||||
@ -323,12 +315,12 @@ $md-toggle__search--checked:
|
||||
color 250ms,
|
||||
opacity 250ms;
|
||||
|
||||
// Hovered icon
|
||||
// Search icon on hover
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Search icon
|
||||
// Search focus button
|
||||
&[for="__search"] {
|
||||
top: px2rem(6px);
|
||||
left: px2rem(10px);
|
||||
@ -344,7 +336,7 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
// [tablet portrait -]: Search modal
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: px2rem(12px);
|
||||
left: px2rem(16px);
|
||||
@ -355,7 +347,7 @@ $md-toggle__search--checked:
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Hide the magnifying glass (1st icon)
|
||||
// Hide the magnifying glass
|
||||
svg:first-child {
|
||||
display: none;
|
||||
}
|
||||
@ -365,14 +357,14 @@ $md-toggle__search--checked:
|
||||
@include break-from-device(tablet landscape) {
|
||||
pointer-events: none;
|
||||
|
||||
// Hide the arrow (2nd icon)
|
||||
// Hide the back arrow
|
||||
svg:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset button
|
||||
// Search reset button
|
||||
&[type="reset"] {
|
||||
top: px2rem(6px);
|
||||
right: px2rem(10px);
|
||||
@ -389,7 +381,7 @@ $md-toggle__search--checked:
|
||||
left: px2rem(10px);
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
// [tablet portrait -]: Search modal
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: px2rem(12px);
|
||||
right: px2rem(16px);
|
||||
@ -401,14 +393,14 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Show reset button if search is active and input non-empty
|
||||
#{$md-toggle__search--checked}
|
||||
// Show reset button when search is active and input non-empty
|
||||
[data-md-toggle="search"]:checked ~ .md-header
|
||||
.md-search__input:valid ~ & {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
|
||||
// Hovered icon
|
||||
// Search focus icon
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
@ -416,7 +408,7 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Search output container
|
||||
// Search output
|
||||
&__output {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@ -424,7 +416,7 @@ $md-toggle__search--checked:
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 px2rem(2px) px2rem(2px);
|
||||
|
||||
// [tablet portrait -]: Full-screen search bar
|
||||
// [tablet portrait -]: Search modal
|
||||
@include break-to-device(tablet portrait) {
|
||||
top: px2rem(48px);
|
||||
bottom: 0;
|
||||
@ -436,8 +428,8 @@ $md-toggle__search--checked:
|
||||
opacity: 0;
|
||||
transition: opacity 400ms;
|
||||
|
||||
// Show search output in active state
|
||||
#{$md-toggle__search--checked} & {
|
||||
// Show output when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
@include z-depth(6);
|
||||
|
||||
opacity: 1;
|
||||
@ -445,12 +437,12 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
// Search scroll wrapper
|
||||
&__scrollwrap {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: var(--md-default-bg-color);
|
||||
// Hack: reduce jitter
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
scroll-snap-type: y mandatory;
|
||||
touch-action: pan-y;
|
||||
@ -460,12 +452,12 @@ $md-toggle__search--checked:
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
// [tablet landscape]: Set absolute width to omit unnecessary reflow
|
||||
// [tablet landscape]: Set fixed width to omit unnecessary reflow
|
||||
@include break-at-device(tablet landscape) {
|
||||
width: px2rem(468px);
|
||||
}
|
||||
|
||||
// [screen +]: Set absolute width to omit unnecessary reflow
|
||||
// [screen +]: Set fixed width to omit unnecessary reflow
|
||||
@include break-from-device(screen) {
|
||||
width: px2rem(688px);
|
||||
}
|
||||
@ -473,31 +465,30 @@ $md-toggle__search--checked:
|
||||
// [tablet landscape +]: Limit height to viewport
|
||||
@include break-from-device(tablet landscape) {
|
||||
max-height: 0;
|
||||
// Override Firefox scrollbar style
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
|
||||
|
||||
// Expand in active state
|
||||
#{$md-toggle__search--checked} & {
|
||||
// Show scroll wrapper when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
// Override Firefox scrollbar hover color
|
||||
// Search scroll wrapper on hover
|
||||
&:hover {
|
||||
scrollbar-color: var(--md-accent-fg-color) transparent;
|
||||
}
|
||||
|
||||
// Override native scrollbar styles
|
||||
// Webkit scrollbar
|
||||
&::-webkit-scrollbar {
|
||||
width: px2rem(4px);
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Scrollbar thumb
|
||||
// Webkit scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--md-default-fg-color--lighter);
|
||||
|
||||
// Hovered scrollbar thumb
|
||||
// Webkit scrollbar thumb on hover
|
||||
&:hover {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
}
|
||||
@ -511,7 +502,7 @@ $md-toggle__search--checked:
|
||||
color: var(--md-default-fg-color);
|
||||
word-break: break-word;
|
||||
|
||||
// Search metadata
|
||||
// Search result metadata
|
||||
&__meta {
|
||||
padding: 0 px2rem(16px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
@ -520,7 +511,7 @@ $md-toggle__search--checked:
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
scroll-snap-align: start;
|
||||
|
||||
// [tablet landscape +]: Increase left indent
|
||||
// [tablet landscape +]: Adjust spacing
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
@ -532,48 +523,43 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// List of items
|
||||
// Search result list
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// List item
|
||||
// Search result item
|
||||
&__item {
|
||||
box-shadow: 0 px2rem(-1px) 0 var(--md-default-fg-color--lightest);
|
||||
|
||||
// No border for first item
|
||||
// Omit border on first child
|
||||
&:first-child {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Link inside item
|
||||
// Search result link
|
||||
&__link {
|
||||
display: block;
|
||||
outline: none;
|
||||
transition: background 250ms;
|
||||
transition: background-color 250ms;
|
||||
scroll-snap-align: start;
|
||||
|
||||
// Focused or hovered link
|
||||
// Search result link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--md-accent-fg-color--transparent);
|
||||
|
||||
// Slightly transparent icon
|
||||
.md-search-result__article::before {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Add a little spacing on the last element of the last link
|
||||
// Adjust spacing on last child of last link
|
||||
&:last-child p:last-child {
|
||||
margin-bottom: px2rem(12px);
|
||||
}
|
||||
}
|
||||
|
||||
// Search result container
|
||||
// Search result more link
|
||||
&__more summary {
|
||||
display: block;
|
||||
padding: px2em(12px) px2rem(16px);
|
||||
@ -586,46 +572,42 @@ $md-toggle__search--checked:
|
||||
background-color 250ms;
|
||||
scroll-snap-align: start;
|
||||
|
||||
// Focused or hovered button
|
||||
// [tablet landscape +]: Adjust spacing
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(44px);
|
||||
padding-left: px2rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
// Search result more link on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-accent-fg-color);
|
||||
background-color: var(--md-accent-fg-color--transparent);
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Increase left indent
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(44px);
|
||||
padding-left: px2rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove default details marker
|
||||
// Hide native details marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// All following elements
|
||||
& ~ * {
|
||||
|
||||
// Make less relevant terms more transparent
|
||||
> * {
|
||||
opacity: 0.65;
|
||||
}
|
||||
// Adjust transparency of less relevant results
|
||||
& ~ * > * {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
// Article - document or section
|
||||
// Search result article
|
||||
&__article {
|
||||
position: relative;
|
||||
padding: 0 px2rem(16px);
|
||||
overflow: hidden;
|
||||
|
||||
// [tablet landscape +]: Increase left indent
|
||||
// [tablet landscape +]: Adjust spacing
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-left: px2rem(44px);
|
||||
|
||||
@ -636,10 +618,10 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Document
|
||||
// Search result article document
|
||||
&--document {
|
||||
|
||||
// Title
|
||||
// Search result title
|
||||
.md-search-result__title {
|
||||
margin: px2rem(11px) 0;
|
||||
font-weight: 400;
|
||||
@ -658,7 +640,12 @@ $md-toggle__search--checked:
|
||||
margin: px2rem(10px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
|
||||
// Inline icon and adjust icon to match font size
|
||||
// [tablet portrait -]: Hide icon
|
||||
@include break-to-device(tablet portrait) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Search result icon content
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@ -680,14 +667,9 @@ $md-toggle__search--checked:
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet portrait -]: Hide page icon
|
||||
@include break-to-device(tablet portrait) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
// Search result title
|
||||
&__title {
|
||||
margin: 0.5em 0;
|
||||
font-weight: 700;
|
||||
@ -695,7 +677,7 @@ $md-toggle__search--checked:
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// Teaser
|
||||
// Search result teaser
|
||||
&__teaser {
|
||||
display: -webkit-box;
|
||||
max-height: px2rem(40px);
|
||||
@ -708,13 +690,13 @@ $md-toggle__search--checked:
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
// [mobile -]: Increase number of lines
|
||||
// [mobile -]: Adjust number of lines
|
||||
@include break-to-device(mobile) {
|
||||
max-height: px2rem(60px);
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
// [tablet landscape]: Increase number of lines
|
||||
// [tablet landscape]: Adjust number of lines
|
||||
@include break-at-device(tablet landscape) {
|
||||
max-height: px2rem(60px);
|
||||
-webkit-line-clamp: 3;
|
||||
@ -727,7 +709,7 @@ $md-toggle__search--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Terms
|
||||
// Search result terms
|
||||
&__terms {
|
||||
margin: 0.5em 0;
|
||||
font-size: px2rem(12.8px);
|
||||
|
||||
@ -20,56 +20,35 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Variables
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Active (toggled) drawer
|
||||
$md-toggle__drawer--checked:
|
||||
"[data-md-toggle=\"drawer\"]:checked ~ .md-container";
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Keyframes
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Activate scroll snapping with delay
|
||||
@keyframes md-sidebar__scrollwrap--hack {
|
||||
0%, 99% {
|
||||
scroll-snap-type: none;
|
||||
}
|
||||
|
||||
100% {
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Sidebar container
|
||||
// Sidebar
|
||||
.md-sidebar {
|
||||
position: sticky;
|
||||
top: px2rem(48px);
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
width: px2rem(242px);
|
||||
height: 0;
|
||||
padding: px2rem(24px) 0;
|
||||
|
||||
// Hide for print
|
||||
// [print]: Hide sidebar
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// [tablet -]: Convert navigation to drawer
|
||||
// [tablet -]: Show navigation as drawer
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Render primary sidebar as a slideout container
|
||||
// Primary sidebar with navigation
|
||||
&--primary {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: px2rem(-242px);
|
||||
z-index: 3;
|
||||
display: block;
|
||||
width: px2rem(242px);
|
||||
height: 100%;
|
||||
background-color: var(--md-default-bg-color);
|
||||
@ -84,8 +63,8 @@ $md-toggle__drawer--checked:
|
||||
left: initial;
|
||||
}
|
||||
|
||||
// Expanded drawer
|
||||
#{$md-toggle__drawer--checked} & {
|
||||
// Show sidebar when drawer is active
|
||||
[data-md-toggle="drawer"]:checked ~ .md-container & {
|
||||
@include z-depth(8);
|
||||
|
||||
transform: translateX(px2rem(242px));
|
||||
@ -96,18 +75,25 @@ $md-toggle__drawer--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Hide overflow for nested navigation
|
||||
// Stretch scroll wrapper for primary sidebar
|
||||
.md-sidebar__scrollwrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
scroll-snap-type: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Convert navigation to sidebar
|
||||
// [screen +]: Show navigation as sidebar
|
||||
@include break-from-device(screen) {
|
||||
height: 0;
|
||||
|
||||
// Normal sticky behavior, if JavaScript is not available.
|
||||
// [no-js]: Switch to native sticky behavior
|
||||
.no-js & {
|
||||
height: auto;
|
||||
}
|
||||
@ -118,16 +104,20 @@ $md-toggle__drawer--checked:
|
||||
display: none;
|
||||
order: 2;
|
||||
|
||||
// [tablet landscape +]: Show table of contents next to body copy
|
||||
// [tablet landscape +]: Show table of contents as sidebar
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: block;
|
||||
height: 0;
|
||||
|
||||
// Normal sticky behavior, if JavaScript is not available.
|
||||
// [no-js]: Switch to native sticky behavior
|
||||
.no-js & {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Sidebar is visible
|
||||
&:not([hidden]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Ensure smooth scrolling on iOS
|
||||
.md-sidebar__scrollwrap {
|
||||
touch-action: pan-y;
|
||||
@ -135,58 +125,68 @@ $md-toggle__drawer--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
// Sidebar scroll wrapper
|
||||
&__scrollwrap {
|
||||
margin: 0 px2rem(4px);
|
||||
overflow-y: auto;
|
||||
// Hack: reduce jitter
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
// Override Firefox scrollbar style
|
||||
// Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container
|
||||
// to the bottom if `scroll-snap-type` is set on the initial render. For
|
||||
// this reason, we disable scroll snapping until this is resolved (#1667).
|
||||
// scroll-snap-type: y mandatory;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
|
||||
|
||||
// Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container
|
||||
// to the bottom if `scroll-snap-type` is set on the initial render. For
|
||||
// this reason, we use an animation to set scroll snaping with a slight
|
||||
// delay, which seems to fix the issue (#1667).
|
||||
.js & {
|
||||
animation: md-sidebar__scrollwrap--hack 1000ms forwards;
|
||||
}
|
||||
|
||||
// [tablet -]: Adjust margins
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Stretch scrollwrap for primary sidebar
|
||||
.md-sidebar--primary & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
scroll-snap-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Override Firefox scrollbar hover color
|
||||
// Sidebar scroll wrapper on hover
|
||||
&:hover {
|
||||
scrollbar-color: var(--md-accent-fg-color) transparent;
|
||||
}
|
||||
|
||||
// Override native scrollbar styles
|
||||
// Webkit scrollbar
|
||||
&::-webkit-scrollbar {
|
||||
width: px2rem(4px);
|
||||
height: px2rem(4px);
|
||||
}
|
||||
|
||||
// Scrollbar thumb
|
||||
// Webkit scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--md-default-fg-color--lighter);
|
||||
|
||||
// Hovered scrollbar thumb
|
||||
// Webkit scrollbar thumb on hover
|
||||
&:hover {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// [tablet -]: Show overlay on active drawer
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
// Sidebar overlay
|
||||
.md-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: hsla(0, 0%, 0%, 0.54);
|
||||
opacity: 0;
|
||||
transition:
|
||||
width 0ms 250ms,
|
||||
height 0ms 250ms,
|
||||
opacity 250ms;
|
||||
|
||||
// Show overlay when drawer is active
|
||||
[data-md-toggle="drawer"]:checked ~ & {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition:
|
||||
width 0ms,
|
||||
height 0ms,
|
||||
opacity 250ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,6 @@
|
||||
0% {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: px2rem(13px);
|
||||
}
|
||||
@ -41,11 +40,9 @@
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
@ -56,22 +53,23 @@
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Source container
|
||||
// Repository information
|
||||
.md-source {
|
||||
display: block;
|
||||
font-size: px2rem(13px);
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
// Hack: reduce jitter
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
transition: opacity 250ms;
|
||||
|
||||
// Hovered source container
|
||||
// Repository information on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Repository platform icon
|
||||
// Repository icon
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
width: px2rem(48px);
|
||||
@ -90,7 +88,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Correct alignment, if icon is present
|
||||
// Adjust spacing if icon is present
|
||||
+ .md-source__repository {
|
||||
margin-left: px2rem(-40px);
|
||||
padding-left: px2rem(40px);
|
||||
@ -116,7 +114,7 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Source facts (statistics etc.)
|
||||
// Repository facts
|
||||
&__facts {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -132,7 +130,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Fact
|
||||
// Repository fact
|
||||
&__fact {
|
||||
float: left;
|
||||
|
||||
|
||||
@ -24,30 +24,30 @@
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Tabs with outline
|
||||
// Navigation tabs
|
||||
.md-tabs {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
color: var(--md-primary-bg-color);
|
||||
background-color: var(--md-primary-fg-color);
|
||||
transition: background 250ms;
|
||||
transition: background-color 250ms;
|
||||
|
||||
// Omit transitions, in case JavaScript is not available
|
||||
.no-js & {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// [tablet -]: Hide tabs for tablet and below, as they don't make any sense
|
||||
@include break-to-device(tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
// [print]: Hide tabs
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// List of items
|
||||
// [tablet -]: Hide tabs
|
||||
@include break-to-device(tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Tabs in hidden state, i.e. when scrolling down
|
||||
&[data-md-state="hidden"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Navigation tabs list
|
||||
&__list {
|
||||
margin: 0;
|
||||
margin-left: px2rem(4px);
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// List item
|
||||
// Navigation tabs item
|
||||
&__item {
|
||||
display: inline-block;
|
||||
height: px2rem(48px);
|
||||
@ -71,26 +71,22 @@
|
||||
padding-left: px2rem(12px);
|
||||
}
|
||||
|
||||
// Link inside item - could be defined as block elements and aligned via
|
||||
// Navigation tabs link - could be defined as block elements and aligned via
|
||||
// line height, but this would imply more repaints when scrolling
|
||||
&__link {
|
||||
display: block;
|
||||
margin-top: px2rem(16px);
|
||||
font-size: px2rem(14px);
|
||||
// Hack: save a repaint when the tabs are appearing when scrolling up
|
||||
// Hack: save a repaint when tabs are appearing on scrolling up
|
||||
backface-visibility: hidden;
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 250ms;
|
||||
|
||||
// Omit transitions, in case JavaScript is not available
|
||||
.no-js & {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// Active or hovered link
|
||||
// Active link and link on focus/hover
|
||||
&--active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
@ -102,15 +98,10 @@
|
||||
transition-delay: 20ms * ($i - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fade-out tabs background upon scrolling
|
||||
&[data-md-state="hidden"] {
|
||||
pointer-events: none;
|
||||
|
||||
// Hide tabs upon scrolling - disable transition to minimizes repaints
|
||||
// while scrolling down, while scrolling up seems to be okay
|
||||
.md-tabs__link {
|
||||
.md-tabs[data-md-state="hidden"] & {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
@ -118,77 +109,4 @@
|
||||
opacity 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Adjust main navigation styles
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Hide 1st level nested items, as they are listed in the tabs
|
||||
~ .md-main .md-nav--primary > .md-nav__list > .md-nav__item--nested {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Active tab
|
||||
&--active ~ .md-main {
|
||||
|
||||
// Adjust 1st level styles
|
||||
.md-nav--primary {
|
||||
|
||||
// Show title and remove spacing
|
||||
.md-nav__title {
|
||||
display: block;
|
||||
padding: 0 px2rem(12px);
|
||||
pointer-events: none;
|
||||
scroll-snap-align: start;
|
||||
|
||||
// Hide site title
|
||||
&[for="__drawer"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide 1st level items
|
||||
> .md-nav__list > .md-nav__item {
|
||||
display: none;
|
||||
|
||||
// Show 1st level active nested items
|
||||
&--active {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
// Hide nested links
|
||||
> .md-nav__link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Always expand nested navigation on 2nd level
|
||||
.md-nav[data-md-level="1"] {
|
||||
// Hack: always show active navigation tab on breakpoint screen, despite
|
||||
// of checkbox being checked or not. Fixes #1655.
|
||||
display: block;
|
||||
|
||||
// Remove spacing on 2nd level items
|
||||
> .md-nav__list > .md-nav__item {
|
||||
padding: 0 px2rem(12px);
|
||||
|
||||
// Add bottom spacing to last item
|
||||
&:last-child {
|
||||
padding-bottom: px2rem(12px);
|
||||
|
||||
// Remove bottom spacing for nested items
|
||||
.md-nav__item {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide titles from 2nd level on
|
||||
.md-nav .md-nav__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,6 +38,5 @@
|
||||
@import "overrides/typeset";
|
||||
|
||||
@import "overrides/layout/announce";
|
||||
@import "overrides/layout/base";
|
||||
@import "overrides/layout/content";
|
||||
@import "overrides/layout/hero";
|
||||
|
||||
@ -20,24 +20,139 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Keyframes
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Pumping heart animation
|
||||
@keyframes tx-heart {
|
||||
0%, 40%, 80%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
20%, 60% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Typesetted content
|
||||
// Scoped in typesetted content to match specificity of regular content
|
||||
.md-typeset {
|
||||
|
||||
// Screenshot caption
|
||||
figure > p + figcaption {
|
||||
margin-top: px2rem(-24px);
|
||||
}
|
||||
|
||||
// Twitter icon
|
||||
.twitter {
|
||||
color: #00ACEE;
|
||||
}
|
||||
|
||||
// Insiders video
|
||||
.tx-video {
|
||||
width: auto;
|
||||
|
||||
// Insiders video container
|
||||
&__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.138%;
|
||||
}
|
||||
|
||||
// Insiders video iframe
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Pumping heart
|
||||
.tx-heart {
|
||||
animation: tx-heart 1000ms infinite;
|
||||
}
|
||||
|
||||
// Insiders color (for links, etc.)
|
||||
.tx-insiders {
|
||||
color: $clr-pink-500;
|
||||
}
|
||||
|
||||
// Extension: switch buttons
|
||||
// Insiders button
|
||||
.tx-insiders-button {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Insiders count
|
||||
.tx-insiders-count {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// Insiders list
|
||||
.tx-insiders-list {
|
||||
margin: 2em 0;
|
||||
overflow: auto;
|
||||
|
||||
// Insiders list item
|
||||
&__item {
|
||||
display: block;
|
||||
float: left;
|
||||
width: px2rem(60px);
|
||||
height: px2rem(60px);
|
||||
margin: px2rem(4px);
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
transform: scale(1);
|
||||
transition:
|
||||
color 125ms,
|
||||
transform 125ms;
|
||||
|
||||
// Sponsor avatar
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 125ms;
|
||||
}
|
||||
|
||||
// Sponsor item on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
|
||||
// Sponsor avatar
|
||||
img {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
}
|
||||
|
||||
// Private sponsor
|
||||
&--private {
|
||||
color: var(--md-default-fg-color--lighter);
|
||||
font-weight: 700;
|
||||
font-size: px2rem(24px);
|
||||
line-height: px2rem(60px);
|
||||
text-align: center;
|
||||
background: var(--md-default-fg-color--lightest);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Switch buttons
|
||||
.tx-switch button {
|
||||
cursor: pointer;
|
||||
transition: opacity 250ms;
|
||||
|
||||
// Hovered button
|
||||
// Button on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
@ -52,16 +167,21 @@
|
||||
|
||||
// Two-column layout
|
||||
.tx-columns {
|
||||
columns: 2;
|
||||
|
||||
// Column
|
||||
> * {
|
||||
break-inside: avoid;
|
||||
ol,
|
||||
ul {
|
||||
columns: 2;
|
||||
|
||||
// [mobile portrait -]: Reset columns on mobile
|
||||
@include break-to-device(mobile portrait) {
|
||||
columns: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// [mobile portrait -]: Reset columns on mobile
|
||||
@include break-to-device(mobile portrait) {
|
||||
columns: initial;
|
||||
// Column item
|
||||
li {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
// Announcement bar
|
||||
.md-announce {
|
||||
|
||||
// Preserve link colors
|
||||
// Text link, also on focus/hover
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
@ -42,6 +42,5 @@
|
||||
// Twitter icon
|
||||
.twitter {
|
||||
margin-left: .2em;
|
||||
color: #00ACEE;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
////
|
||||
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
|
||||
///
|
||||
/// Permission is hereby granted, free of charge, to any person obtaining a
|
||||
/// copy of this software and associated documentation files (the "Software"),
|
||||
/// to deal in the Software without restriction, including without limitation
|
||||
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||
/// and/or sell copies of the Software, and to permit persons to whom the
|
||||
/// Software is furnished to do so, subject to the following conditions:
|
||||
///
|
||||
/// The above copyright notice and this permission notice shall be included in
|
||||
/// all copies or substantial portions of the Software.
|
||||
///
|
||||
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
|
||||
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Landing page container
|
||||
.tx-container {
|
||||
padding-top: px2rem(20px);
|
||||
background:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--md-primary-fg-color),
|
||||
hsla(280, 67%, 55%, 1) 99%,
|
||||
var(--md-default-bg-color) 99%
|
||||
);
|
||||
|
||||
// Adjust background for slate theme
|
||||
[data-md-color-scheme="slate"] & {
|
||||
background:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--md-primary-fg-color),
|
||||
hsla(280, 67%, 55%, 1) 99%,
|
||||
var(--md-default-bg-color) 99%
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -20,20 +20,6 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Keyframes
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Heart animation
|
||||
@keyframes tx-heart {
|
||||
0%, 40%, 80%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
20%, 60% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -43,7 +29,7 @@
|
||||
margin-top: px2rem(20px);
|
||||
text-align: center;
|
||||
|
||||
// Link container
|
||||
// Link to Insiders
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $clr-pink-500;
|
||||
@ -51,14 +37,14 @@
|
||||
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
color 125ms;
|
||||
|
||||
// Focused or hovered links
|
||||
// Link to Insiders on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal separators
|
||||
// Horizontal separator
|
||||
hr {
|
||||
display: inline-block;
|
||||
width: px2rem(40px);
|
||||
@ -68,8 +54,3 @@
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Pumping heart
|
||||
.tx-heart {
|
||||
animation: tx-heart 1000ms infinite;
|
||||
}
|
||||
|
||||
@ -24,41 +24,66 @@
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Landing page container
|
||||
.tx-container {
|
||||
padding-top: px2rem(20px);
|
||||
background:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--md-primary-fg-color),
|
||||
hsla(280, 67%, 55%, 1) 99%,
|
||||
var(--md-default-bg-color) 99%
|
||||
);
|
||||
|
||||
// Adjust background for slate theme
|
||||
[data-md-color-scheme="slate"] & {
|
||||
background:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--md-primary-fg-color),
|
||||
hsla(280, 67%, 55%, 1) 99%,
|
||||
var(--md-default-bg-color) 99%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Landing page hero
|
||||
.tx-hero {
|
||||
margin: 0 px2rem(16px);
|
||||
color: var(--md-primary-bg-color);
|
||||
|
||||
// Make main headline thicker
|
||||
// Hero headline
|
||||
h1 {
|
||||
margin-bottom: px2rem(20px);
|
||||
color: currentColor;
|
||||
font-weight: 700;
|
||||
|
||||
// [mobile portrait -]: Adjust headline
|
||||
// [mobile portrait -]: Larger hero headline
|
||||
@include break-to-device(mobile portrait) {
|
||||
font-size: px2rem(28px);
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure that blob doesn't overlap buttons
|
||||
// Hero content
|
||||
&__content {
|
||||
padding-bottom: px2rem(120px);
|
||||
}
|
||||
|
||||
// [tablet landscape +]: Display content and image next to each other
|
||||
// [tablet landscape +]: Columnar display
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
// Increase bottom spacing and set dimensions
|
||||
// Adjust spacing and set dimensions
|
||||
&__content {
|
||||
max-width: px2rem(380px);
|
||||
margin-top: px2rem(70px);
|
||||
padding-bottom: 14vw;
|
||||
}
|
||||
|
||||
// Swap with teaser and set dimensions
|
||||
// Hero image
|
||||
&__image {
|
||||
order: 1;
|
||||
width: px2rem(760px);
|
||||
@ -66,30 +91,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Adjust spacing
|
||||
// [screen +]: Columnar display and adjusted spacing
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Ensure the image aligns with the repository information
|
||||
// Hero image
|
||||
&__image {
|
||||
transform: translateX(#{px2rem(160px)});
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust spacing of buttons and invert them
|
||||
// Button
|
||||
.md-button {
|
||||
margin-top: px2rem(10px);
|
||||
margin-right: px2rem(10px);
|
||||
color: var(--md-primary-bg-color);
|
||||
|
||||
// Invert hover and focus button states
|
||||
&:hover,
|
||||
&:focus {
|
||||
// Button on focus/hover
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--md-default-bg-color);
|
||||
background-color: var(--md-accent-fg-color);
|
||||
border-color: var(--md-accent-fg-color);
|
||||
}
|
||||
|
||||
// Invert primary button
|
||||
// Primary button
|
||||
&--primary {
|
||||
color: hsla(280deg, 37%, 48%, 1);
|
||||
background-color: var(--md-primary-bg-color);
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
// Typeset color shades
|
||||
--md-typeset-a-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
|
||||
|
||||
// [tablet portrait +]: Change color of search input
|
||||
// [tablet portrait +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
|
||||
// Search input
|
||||
@ -102,10 +102,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Set bottom border for tabs
|
||||
// [screen +]: Add bottom border for tabs
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Tabs with outline
|
||||
// Navigation tabs
|
||||
.md-tabs {
|
||||
border-bottom: px2rem(1px) solid hsla(0, 0%, 0%, 0.07);
|
||||
}
|
||||
@ -127,7 +127,7 @@
|
||||
// Text color shades
|
||||
--md-typeset-a-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
|
||||
|
||||
// Application header (stays always on top)
|
||||
// Header
|
||||
.md-header {
|
||||
background-color: hsla(0, 0%, 0%, 1);
|
||||
}
|
||||
@ -135,7 +135,7 @@
|
||||
// [tablet portrait -]: Layered navigation
|
||||
@include break-to-device(tablet portrait) {
|
||||
|
||||
// Repository containing source
|
||||
// Repository information container
|
||||
.md-nav__source {
|
||||
background-color: hsla(0, 0%, 0%, 0.87);
|
||||
}
|
||||
@ -148,7 +148,7 @@
|
||||
.md-search__input {
|
||||
background-color: hsla(0, 0%, 100%, 0.12);
|
||||
|
||||
// Hovered search field
|
||||
// Search form on hover
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 100%, 0.3);
|
||||
}
|
||||
@ -167,7 +167,7 @@
|
||||
// [screen +]: Set background color for tabs
|
||||
@include break-from-device(screen) {
|
||||
|
||||
// Tabs with outline
|
||||
// Navigation tabs
|
||||
.md-tabs {
|
||||
background-color: hsla(0, 0%, 0%, 1);
|
||||
}
|
||||
|
||||
@ -45,11 +45,6 @@
|
||||
<meta name="keywords" content="{{ config.site_keywords }}" />
|
||||
{% endif %}
|
||||
|
||||
<!-- Canonical -->
|
||||
{% if page.canonical_url %}
|
||||
<link rel="canonical" href="{{ page.canonical_url }}" />
|
||||
{% endif %}
|
||||
|
||||
<!-- Page author -->
|
||||
{% if page and page.meta and page.meta.author %}
|
||||
<meta name="author" content="{{ page.meta.author }}" />
|
||||
@ -57,6 +52,11 @@
|
||||
<meta name="author" content="{{ config.site_author }}" />
|
||||
{% endif %}
|
||||
|
||||
<!-- Canonical -->
|
||||
{% if page.canonical_url %}
|
||||
<link rel="canonical" href="{{ page.canonical_url }}" />
|
||||
{% endif %}
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="{{ config.theme.favicon | url }}" />
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
<!-- Load fonts from Google -->
|
||||
{% if config.theme.font != false %}
|
||||
{% set font = config.theme.font %}
|
||||
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family={{
|
||||
@ -185,6 +185,9 @@
|
||||
<body dir="{{ direction }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- Retrieve features from configuration -->
|
||||
{% set features = config.theme.features or [] %}
|
||||
|
||||
<!--
|
||||
State toggles - we need to set autocomplete="off" in order to reset the
|
||||
drawer on back button invocation in some browsers
|
||||
@ -239,9 +242,9 @@
|
||||
<!-- Hero teaser -->
|
||||
{% block hero %}{% endblock %}
|
||||
|
||||
<!-- Tabs navigation -->
|
||||
<!-- Navigation tabs -->
|
||||
{% block tabs %}
|
||||
{% if "navigation.tabs" in config.theme.features %}
|
||||
{% if "navigation.tabs" in features %}
|
||||
{% include "partials/tabs.html" %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@ -255,9 +258,13 @@
|
||||
|
||||
<!-- Main navigation -->
|
||||
{% if nav %}
|
||||
{% if page and page.meta and page.meta.hide %}
|
||||
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
|
||||
{% endif %}
|
||||
<div
|
||||
class="md-sidebar md-sidebar--primary"
|
||||
data-md-component="navigation"
|
||||
{{ hidden }}
|
||||
>
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner">
|
||||
@ -268,10 +275,14 @@
|
||||
{% endif %}
|
||||
|
||||
<!-- Table of contents -->
|
||||
{% if page.toc %}
|
||||
{% if page.toc and not "toc.integrate" in features %}
|
||||
{% if page and page.meta and page.meta.hide %}
|
||||
{% set hidden = "hidden" if "toc" in page.meta.hide %}
|
||||
{% endif %}
|
||||
<div
|
||||
class="md-sidebar md-sidebar--secondary"
|
||||
data-md-component="toc"
|
||||
{{ hidden }}
|
||||
>
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner">
|
||||
@ -306,7 +317,7 @@
|
||||
as the main headline.
|
||||
-->
|
||||
{% if not "\x3ch1" in page.content %}
|
||||
<h1>{{ page.title | default(config.site_name, true)}}</h1>
|
||||
<h1>{{ page.title | d(config.site_name, true)}}</h1>
|
||||
{% endif %}
|
||||
|
||||
<!-- Content -->
|
||||
@ -372,7 +383,7 @@
|
||||
<script>
|
||||
app = initialize({
|
||||
base: "{{ base_url }}",
|
||||
features: {{ config.theme.features or [] | tojson }},
|
||||
features: {{ features or [] | tojson }},
|
||||
search: Object.assign({
|
||||
worker: "{{ 'assets/javascripts/worker/search.js' | url }}"
|
||||
}, typeof search !== "undefined" && search)
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
-->
|
||||
|
||||
<!-- Mitigate bug: https://github.com/mkdocs/mkdocs/issues/2191 -->
|
||||
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
|
||||
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
|
||||
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
|
||||
{% set site_url = site_url ~ "/index.html" %}
|
||||
{% endif %}
|
||||
@ -49,16 +49,14 @@
|
||||
|
||||
<!-- Header title -->
|
||||
<div class="md-header-nav__title" data-md-component="header-title">
|
||||
{% if config.site_name == page.title %}
|
||||
<div class="md-header-nav__ellipsis md-ellipsis">
|
||||
{{ config.site_name }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="md-header-nav__ellipsis">
|
||||
<span class="md-header-nav__topic md-ellipsis">
|
||||
<div class="md-header-nav__ellipsis">
|
||||
<div class="md-header-nav__topic">
|
||||
<span class="md-ellipsis">
|
||||
{{ config.site_name }}
|
||||
</span>
|
||||
<span class="md-header-nav__topic md-ellipsis">
|
||||
</div>
|
||||
<div class="md-header-nav__topic">
|
||||
<span class="md-ellipsis">
|
||||
{% if page and page.meta and page.meta.title %}
|
||||
{{ page.meta.title }}
|
||||
{% else %}
|
||||
@ -66,7 +64,7 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button to open search dialogue -->
|
||||
@ -79,7 +77,7 @@
|
||||
{% include "partials/search.html" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Repository containing source -->
|
||||
<!-- Repository information -->
|
||||
{% if config.repo_url %}
|
||||
<div class="md-header-nav__source">
|
||||
{% include "partials/source.html" %}
|
||||
|
||||
@ -20,25 +20,48 @@
|
||||
IN THE SOFTWARE.
|
||||
-->
|
||||
|
||||
<!-- Determine class according to level -->
|
||||
<!-- Retrieve features from configuration -->
|
||||
{% set features = config.theme.features or [] %}
|
||||
|
||||
<!-- Determine class according to state -->
|
||||
{% set class = "md-nav__item" %}
|
||||
{% if nav_item.active %}
|
||||
{% set class = "md-nav__item md-nav__item--active" %}
|
||||
{% set class = class ~ " md-nav__item--active" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Main navigation item with nested items -->
|
||||
{% if nav_item.children %}
|
||||
|
||||
<!-- Determine whether to render item as a section -->
|
||||
{% if "navigation.sections" in features and level == 1 + (
|
||||
"navigation.tabs" in features
|
||||
) %}
|
||||
{% set class = class ~ " md-nav__item--section" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Render item with nested items -->
|
||||
<li class="{{ class }} md-nav__item--nested">
|
||||
|
||||
<!-- Active checkbox expands items contained within nested section -->
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
<input
|
||||
class="md-nav__toggle md-toggle"
|
||||
data-md-toggle="{{ path }}"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
{{ checked }}
|
||||
/>
|
||||
{% if "navigation.expand" in features and not checked %}
|
||||
<input
|
||||
class="md-nav__toggle md-toggle"
|
||||
data-md-toggle="{{ path }}"
|
||||
data-md-state="indeterminate"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
checked
|
||||
/>
|
||||
{% else %}
|
||||
<input
|
||||
class="md-nav__toggle md-toggle"
|
||||
data-md-toggle="{{ path }}"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
{{ checked }}
|
||||
/>
|
||||
{% endif %}
|
||||
|
||||
<!-- Expand active pages -->
|
||||
<label class="md-nav__link" for="{{ path }}">
|
||||
|
||||
@ -21,14 +21,23 @@
|
||||
-->
|
||||
|
||||
<!-- Mitigate bug: https://github.com/mkdocs/mkdocs/issues/2191 -->
|
||||
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
|
||||
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
|
||||
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
|
||||
{% set site_url = site_url ~ "/index.html" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Determine class according to configuration -->
|
||||
{% set class = "md-nav md-nav--primary" %}
|
||||
{% if "navigation.tabs" in features %}
|
||||
{% set class = class ~ " md-nav--lifted" %}
|
||||
{% endif %}
|
||||
{% if "toc.integrate" in features %}
|
||||
{% set class = class ~ " md-nav--integrated" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Main navigation -->
|
||||
<nav
|
||||
class="md-nav md-nav--primary"
|
||||
class="{{ class }}"
|
||||
aria-label="{{ lang.t('nav.title') }}"
|
||||
data-md-level="0"
|
||||
>
|
||||
@ -46,7 +55,7 @@
|
||||
{{ config.site_name }}
|
||||
</label>
|
||||
|
||||
<!-- Repository containing source -->
|
||||
<!-- Repository information -->
|
||||
{% if config.repo_url %}
|
||||
<div class="md-nav__source">
|
||||
{% include "partials/source.html" %}
|
||||
|
||||
@ -20,44 +20,36 @@
|
||||
IN THE SOFTWARE.
|
||||
-->
|
||||
|
||||
<!-- Home page -->
|
||||
{% if nav_item.is_homepage or nav_item.url == "index.html" %}
|
||||
<li class="md-tabs__item">
|
||||
{% set class = "md-tabs__link" %}
|
||||
{% if not page.ancestors | length and nav | selectattr("url", page.url) %}
|
||||
{% set class = "md-tabs__link md-tabs__link--active" %}
|
||||
{% endif %}
|
||||
<a href="{{ nav_item.url | url }}" class="{{ class }}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
<!-- Determine class according to state -->
|
||||
{% if not class %}
|
||||
{% set class = "md-tabs__link" %}
|
||||
{% if nav_item.active %}
|
||||
{% set class = class ~ " md-tabs__link--active" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Main navigation item with nested items -->
|
||||
{% elif nav_item.children and nav_item.children | length > 0 %}
|
||||
{% set title = title | default(nav_item.title) %}
|
||||
{% if nav_item.children %}
|
||||
{% set title = title | d(nav_item.title) %}
|
||||
{% set nav_item = nav_item.children | first %}
|
||||
|
||||
<!-- Recurse, if the first item has nested items -->
|
||||
{% if (nav_item.children | first).children %}
|
||||
{% set nav_item = nav_item.children | first %}
|
||||
<!-- Recurse, if the first item has further nested items -->
|
||||
{% if nav_item.children %}
|
||||
{% include "partials/tabs-item.html" %}
|
||||
|
||||
<!-- Render item -->
|
||||
{% else %}
|
||||
<li class="md-tabs__item">
|
||||
{% set class = "md-tabs__link" %}
|
||||
{% if nav_item.active %}
|
||||
{% set class = "md-tabs__link md-tabs__link--active" %}
|
||||
{% endif %}
|
||||
<a href="{{ (nav_item.children | first).url | url }}" class="{{ class }}">
|
||||
<a href="{{ nav_item.url | url }}" class="{{ class }}">
|
||||
{{ title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<!-- Main navigation item with external link -->
|
||||
{% elif nav_item.url.startswith("http") %}
|
||||
<!-- Main navigation item -->
|
||||
{% else %}
|
||||
<li class="md-tabs__item">
|
||||
<a href="{{ nav_item.url | url }}" class="md-tabs__link">
|
||||
<a href="{{ nav_item.url | url }}" class="{{ class }}">
|
||||
{{ nav_item.title }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -20,15 +20,12 @@
|
||||
IN THE SOFTWARE.
|
||||
-->
|
||||
|
||||
<!-- Determine class according to level -->
|
||||
{% set class = "md-tabs" %}
|
||||
{% if page.ancestors | length > 0 %}
|
||||
{% set class = "md-tabs md-tabs--active" %}
|
||||
{% endif %}
|
||||
<!-- Hack: unset variable, as we're using it recursively in tabs-item.html -->
|
||||
{% set class = "" %}
|
||||
|
||||
<!-- Tabs with outline -->
|
||||
<!-- Navigation tabs -->
|
||||
<nav
|
||||
class="{{ class }}"
|
||||
class="md-tabs"
|
||||
aria-label="{{ lang.t('tabs.title') }}"
|
||||
data-md-component="tabs"
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user