mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Refactored Material icon integration - bye bye webfonts
This commit is contained in:
squidfunk
parent
b345a0b650
commit
11d1b839a1
@ -51,8 +51,8 @@ hero: Metadata enables hero teaser texts
|
|||||||
|
|
||||||
### Linking sources
|
### Linking sources
|
||||||
|
|
||||||
When a document is related to a specific set of source files and the `repo_url`
|
When a document is related to a specific source file and the `repo_url` is
|
||||||
is defined inside the project's `mkdocs.yml`, the files can be linked using the
|
defined inside the project's `mkdocs.yml`, the file can be linked using the
|
||||||
`source` key:
|
`source` key:
|
||||||
|
|
||||||
``` markdown
|
``` markdown
|
||||||
@ -69,12 +69,6 @@ path: tree/master/docs/extensions
|
|||||||
source: metadata.md
|
source: metadata.md
|
||||||
```
|
```
|
||||||
|
|
||||||
Result:
|
|
||||||
|
|
||||||
See the [source][2] section for the resulting output.
|
|
||||||
|
|
||||||
[2]: #__source
|
|
||||||
|
|
||||||
### Redirecting to another page
|
### Redirecting to another page
|
||||||
|
|
||||||
It's sometimes necessary to move documents around in the navigation tree and
|
It's sometimes necessary to move documents around in the navigation tree and
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/bundle.262abba4.min.js.map
Normal file
1
material/assets/javascripts/bundle.262abba4.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
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.84919d3b.min.js",
|
"assets/javascripts/bundle.js": "assets/javascripts/bundle.262abba4.min.js",
|
||||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.84919d3b.min.js.map",
|
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.262abba4.min.js.map",
|
||||||
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
|
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
|
||||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
|
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
|
||||||
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",
|
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.865ff948.min.css",
|
||||||
"assets/stylesheets/app.scss": "assets/stylesheets/app.b565871e.min.css"
|
"assets/stylesheets/app.scss": "assets/stylesheets/app.bdffa146.min.css"
|
||||||
}
|
}
|
||||||
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/app.bdffa146.min.css
vendored
Normal file
1
material/assets/stylesheets/app.bdffa146.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -43,9 +43,9 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block styles %}
|
{% block styles %}
|
||||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.b565871e.min.css' | url }}">
|
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.bdffa146.min.css' | url }}">
|
||||||
{% if palette.primary or palette.accent %}
|
{% if palette.primary or palette.accent %}
|
||||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.3f90c815.min.css' | url }}">
|
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.865ff948.min.css' | url }}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if palette.primary %}
|
{% if palette.primary %}
|
||||||
{% import "partials/palette.html" as map %}
|
{% import "partials/palette.html" as map %}
|
||||||
@ -141,26 +141,31 @@
|
|||||||
<article class="md-content__inner md-typeset">
|
<article class="md-content__inner md-typeset">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% if page.edit_url %}
|
{% if page.edit_url %}
|
||||||
<a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-icon md-content__icon"></a>
|
<a href="{{ page.edit_url }}" title="{{ lang.t('edit.link.title') }}" class="md-content__button md-icon">
|
||||||
|
{% include ".icons/material/pencil.svg" %}
|
||||||
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if not "\x3ch1" in page.content %}
|
|
||||||
<h1>{{ page.title | default(config.site_name, true)}}</h1>
|
|
||||||
{% endif %}
|
|
||||||
{{ page.content }}
|
|
||||||
{% block source %}
|
{% block source %}
|
||||||
{% if page and page.meta and page.meta.source %}
|
{% if page and page.meta and page.meta.source %}
|
||||||
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
|
|
||||||
{% set repo = config.repo_url %}
|
{% set repo = config.repo_url %}
|
||||||
{% if repo | last == "/" %}
|
{% if repo | last == "/" %}
|
||||||
{% set repo = repo[:-1] %}
|
{% set repo = repo[:-1] %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% set path = page.meta.path | default([""]) %}
|
{% set path = page.meta.path | default([""]) %}
|
||||||
{% set file = page.meta.source %}
|
{% set file = page.meta.source %}
|
||||||
<a href="{{ [repo, path, file] | join('/') }}" title="{{ file }}" class="md-source-file">
|
{% set repo_icon = config.extra.repo_icon | default(
|
||||||
{{ file }}
|
"fontawesome/brands/git-alt"
|
||||||
|
) %}
|
||||||
|
<a href="{{ [repo, path, page.meta.source] | join('/') }}" title="{{ file }}" class="md-content__button md-icon">
|
||||||
|
{{ lang.t("meta.source") }}
|
||||||
|
{% include ".icons/" ~ repo_icon ~ ".svg" %}
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
{% if not "\x3ch1" in page.content %}
|
||||||
|
<h1>{{ page.title | default(config.site_name, true)}}</h1>
|
||||||
|
{% endif %}
|
||||||
|
{{ page.content }}
|
||||||
{% if page and page.meta and (
|
{% if page and page.meta and (
|
||||||
page.meta.git_revision_date_localized or
|
page.meta.git_revision_date_localized or
|
||||||
page.meta.revision_date
|
page.meta.revision_date
|
||||||
@ -190,7 +195,7 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
<script src="{{ 'assets/javascripts/bundle.84919d3b.min.js' | url }}"></script>
|
<script src="{{ 'assets/javascripts/bundle.262abba4.min.js' | url }}"></script>
|
||||||
{%- set translations = {} -%}
|
{%- set translations = {} -%}
|
||||||
{%- for key in [
|
{%- for key in [
|
||||||
"clipboard.copy",
|
"clipboard.copy",
|
||||||
|
|||||||
@ -7,37 +7,33 @@
|
|||||||
<div class="md-footer-nav">
|
<div class="md-footer-nav">
|
||||||
<nav class="md-footer-nav__inner md-grid">
|
<nav class="md-footer-nav__inner md-grid">
|
||||||
{% if page.previous_page %}
|
{% if page.previous_page %}
|
||||||
<a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
<a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<div class="md-icon md-icon__button">
|
||||||
<div class="md-footer-nav__button">
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
{% include ".icons/material/arrow-left.svg" %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
<div class="md-footer-nav__title">
|
||||||
<span class="md-flex__ellipsis">
|
<div class="md-ellipsis">
|
||||||
<span class="md-footer-nav__direction">
|
<span class="md-footer-nav__direction">
|
||||||
{{ lang.t("footer.previous") }}
|
{{ lang.t("footer.previous") }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.previous_page.title }}
|
{{ page.previous_page.title }}
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if page.next_page %}
|
{% if page.next_page %}
|
||||||
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
|
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||||
<div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
|
<div class="md-footer-nav__title">
|
||||||
<span class="md-flex__ellipsis">
|
<div class="md-ellipsis">
|
||||||
<span class="md-footer-nav__direction">
|
<span class="md-footer-nav__direction">
|
||||||
{{ lang.t("footer.next") }}
|
{{ lang.t("footer.next") }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.next_page.title }}
|
{{ page.next_page.title }}
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
|
||||||
<div class="md-footer-nav__button">
|
|
||||||
{% include ".icons/material/arrow-right.svg" %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="md-icon md-icon__button">
|
||||||
|
{% include ".icons/material/arrow-right.svg" %}
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -3,52 +3,44 @@
|
|||||||
-#}
|
-#}
|
||||||
<header class="md-header" data-md-component="header">
|
<header class="md-header" data-md-component="header">
|
||||||
<nav class="md-header-nav md-grid">
|
<nav class="md-header-nav md-grid">
|
||||||
<div class="md-flex">
|
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
{% if config.theme.logo.icon %}
|
||||||
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
|
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
||||||
{% if config.theme.logo.icon %}
|
{% else %}
|
||||||
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
<img src="{{ config.theme.logo | url }}" width="24" height="24" alt="logo">
|
||||||
{% else %}
|
{% endif %}
|
||||||
<img src="{{ config.theme.logo | url }}" width="24" height="24" alt="logo">
|
</a>
|
||||||
{% endif %}
|
<label class="md-header-nav__button md-icon md-icon__button" for="__drawer">
|
||||||
</a>
|
{% include ".icons/material/menu.svg" %}
|
||||||
<label class="md-header-nav__button" for="__drawer">
|
</label>
|
||||||
{% include ".icons/material/menu.svg" %}
|
<div class="md-header-nav__title" data-md-component="header-title">
|
||||||
</label>
|
<div class="md-header-nav__ellipsis md-ellipsis">
|
||||||
</div>
|
{% if config.site_name == page.title %}
|
||||||
<div class="md-flex__cell md-flex__cell--stretch">
|
{{ config.site_name }}
|
||||||
<div class="md-flex__ellipsis md-header-nav__title" data-md-component="header-title">
|
{% else %}
|
||||||
{% if config.site_name == page.title %}
|
<span class="md-header-nav__topic">
|
||||||
{{ config.site_name }}
|
{{ config.site_name }}
|
||||||
{% else %}
|
</span>
|
||||||
<span class="md-header-nav__topic">
|
<span class="md-header-nav__topic">
|
||||||
{{ config.site_name }}
|
{% if page and page.meta and page.meta.title %}
|
||||||
</span>
|
{{ page.meta.title }}
|
||||||
<span class="md-header-nav__topic">
|
{% else %}
|
||||||
{% if page and page.meta and page.meta.title %}
|
{{ page.title }}
|
||||||
{{ page.meta.title }}
|
{% endif %}
|
||||||
{% else %}
|
</span>
|
||||||
{{ page.title }}
|
|
||||||
{% endif %}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
|
||||||
{% if "search" in config["plugins"] %}
|
|
||||||
<label class="md-header-nav__button" for="__search">
|
|
||||||
{% include ".icons/material/magnify.svg" %}
|
|
||||||
</label>
|
|
||||||
{% include "partials/search.html" %}
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% if config.repo_url %}
|
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
|
||||||
<div class="md-header-nav__source">
|
|
||||||
{% include "partials/source.html" %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
{% if "search" in config["plugins"] %}
|
||||||
|
<label class="md-header-nav__button md-icon md-icon__button" for="__search">
|
||||||
|
{% include ".icons/material/magnify.svg" %}
|
||||||
|
</label>
|
||||||
|
{% include "partials/search.html" %}
|
||||||
|
{% endif %}
|
||||||
|
{% if config.repo_url %}
|
||||||
|
<div class="md-header-nav__source">
|
||||||
|
{% include "partials/source.html" %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -8,15 +8,21 @@
|
|||||||
{% if nav_item.children %}
|
{% if nav_item.children %}
|
||||||
<li class="{{ class }} md-nav__item--nested">
|
<li class="{{ class }} md-nav__item--nested">
|
||||||
{% if nav_item.active %}
|
{% if nav_item.active %}
|
||||||
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
|
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
|
||||||
{% else %}
|
{% else %}
|
||||||
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
|
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<label class="md-nav__link" for="{{ path }}">
|
<label class="md-nav__link" for="{{ path }}">
|
||||||
{{ nav_item.title }}
|
{{ nav_item.title }}
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/chevron-right.svg" %}
|
||||||
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<nav class="md-nav" data-md-level="{{ level }}">
|
<nav class="md-nav" data-md-level="{{ level }}">
|
||||||
<label class="md-nav__title" for="{{ path }}">
|
<label class="md-nav__title" for="{{ path }}">
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
|
</span>
|
||||||
{{ nav_item.title }}
|
{{ nav_item.title }}
|
||||||
</label>
|
</label>
|
||||||
<ul class="md-nav__list" data-md-scrollfix>
|
<ul class="md-nav__list" data-md-scrollfix>
|
||||||
@ -32,13 +38,16 @@
|
|||||||
{% elif nav_item == page %}
|
{% elif nav_item == page %}
|
||||||
<li class="{{ class }}">
|
<li class="{{ class }}">
|
||||||
{% set toc_ = page.toc %}
|
{% set toc_ = page.toc %}
|
||||||
<input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
||||||
{% if toc_ | first is defined and "\x3ch1 id=" in page.content %}
|
{% if toc_ | first is defined and "\x3ch1 id=" in page.content %}
|
||||||
{% set toc_ = (toc_ | first).children %}
|
{% set toc_ = (toc_ | first).children %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if toc_ | first is defined %}
|
{% if toc_ | first is defined %}
|
||||||
<label class="md-nav__link md-nav__link--active" for="__toc">
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
||||||
{{ nav_item.title }}
|
{{ nav_item.title }}
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/table-of-contents.svg" %}
|
||||||
|
</span>
|
||||||
</label>
|
</label>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}" class="md-nav__link md-nav__link--active">
|
<a href="{{ nav_item.url | url }}" title="{{ nav_item.title | striptags }}" class="md-nav__link md-nav__link--active">
|
||||||
|
|||||||
@ -2,10 +2,10 @@
|
|||||||
This file was automatically generated - do not edit
|
This file was automatically generated - do not edit
|
||||||
-#}
|
-#}
|
||||||
<nav class="md-nav md-nav--primary" data-md-level="0">
|
<nav class="md-nav md-nav--primary" data-md-level="0">
|
||||||
<label class="md-nav__title md-nav__title--site" for="__drawer">
|
<label class="md-nav__title" for="__drawer">
|
||||||
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
|
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo">
|
||||||
{% if config.theme.logo.icon %}
|
{% if config.theme.logo.icon %}
|
||||||
<i class="md-icon">{{ config.theme.logo.icon }}</i>
|
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<img src="{{ config.theme.logo | url }}" width="48" height="48" alt="logo">
|
<img src="{{ config.theme.logo | url }}" width="48" height="48" alt="logo">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@ -7,10 +7,11 @@
|
|||||||
<div class="md-search__inner" role="search">
|
<div class="md-search__inner" role="search">
|
||||||
<form class="md-search__form" name="search">
|
<form class="md-search__form" name="search">
|
||||||
<input type="text" class="md-search__input" name="query" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
|
<input type="text" class="md-search__input" name="query" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
|
||||||
<label class="md-search__icon" for="__search">
|
<label class="md-search__icon md-icon" for="__search">
|
||||||
{% include ".icons/material/magnify.svg" %}
|
{% include ".icons/material/magnify.svg" %}
|
||||||
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
</label>
|
</label>
|
||||||
<button type="reset" class="md-search__icon" data-md-component="search-reset" tabindex="-1">
|
<button type="reset" class="md-search__icon md-icon" data-md-component="search-reset" tabindex="-1">
|
||||||
{% include ".icons/material/close.svg" %}
|
{% include ".icons/material/close.svg" %}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
-#}
|
-#}
|
||||||
{% import "partials/language.html" as lang with context %}
|
{% import "partials/language.html" as lang with context %}
|
||||||
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
|
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
|
||||||
<div class="md-source__icon">
|
<div class="md-source__icon md-icon">
|
||||||
{% set repo_icon = config.extra.repo_icon | default(
|
{% set repo_icon = config.extra.repo_icon | default(
|
||||||
"fontawesome/brands/git-alt"
|
"fontawesome/brands/git-alt"
|
||||||
) %}
|
) %}
|
||||||
|
|||||||
@ -8,29 +8,16 @@
|
|||||||
{% set toc_ = (toc_ | first).children %}
|
{% set toc_ = (toc_ | first).children %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if toc_ | first is defined %}
|
{% if toc_ | first is defined %}
|
||||||
<label class="md-nav__title" for="__toc">{{ lang.t("toc.title") }}</label>
|
<label class="md-nav__title" for="__toc">
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
|
</span>
|
||||||
|
{{ lang.t("toc.title") }}
|
||||||
|
</label>
|
||||||
<ul class="md-nav__list" data-md-scrollfix>
|
<ul class="md-nav__list" data-md-scrollfix>
|
||||||
{% for toc_item in toc_ %}
|
{% for toc_item in toc_ %}
|
||||||
{% include "partials/toc-item.html" %}
|
{% include "partials/toc-item.html" %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if page.meta.source and page.meta.source | length > 0 %}
|
|
||||||
<li class="md-nav__item">
|
|
||||||
<a href="#__source" class="md-nav__link md-nav__link--active">
|
|
||||||
{{ lang.t("meta.source") }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% set disqus = config.extra.disqus %}
|
|
||||||
{% if page and page.meta and page.meta.disqus is string %}
|
|
||||||
{% set disqus = page.meta.disqus %}
|
|
||||||
{% endif %}
|
|
||||||
{% if not page.is_homepage and disqus %}
|
|
||||||
<li class="md-nav__item">
|
|
||||||
<a href="#__comments" class="md-nav__link md-nav__link--active">
|
|
||||||
{{ lang.t("meta.comments") }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
78
package-lock.json
generated
78
package-lock.json
generated
@ -999,12 +999,6 @@
|
|||||||
"integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==",
|
"integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"boolbase": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
|
||||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"boxen": {
|
"boxen": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
|
||||||
@ -2010,24 +2004,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"css-select": {
|
|
||||||
"version": "2.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
|
|
||||||
"integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"boolbase": "^1.0.0",
|
|
||||||
"css-what": "^3.2.1",
|
|
||||||
"domutils": "^1.7.0",
|
|
||||||
"nth-check": "^1.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"css-what": {
|
|
||||||
"version": "3.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
|
|
||||||
"integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"cssesc": {
|
"cssesc": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||||
@ -5139,15 +5115,6 @@
|
|||||||
"path-key": "^2.0.0"
|
"path-key": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"nth-check": {
|
|
||||||
"version": "1.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
|
|
||||||
"integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"boolbase": "~1.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"num2fraction": {
|
"num2fraction": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||||
@ -5605,51 +5572,6 @@
|
|||||||
"htmlparser2": "^3.10.0"
|
"htmlparser2": "^3.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"postcss-inline-svg": {
|
|
||||||
"version": "4.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/postcss-inline-svg/-/postcss-inline-svg-4.1.0.tgz",
|
|
||||||
"integrity": "sha512-0pYBJyoQ9/sJViYRc1cNOOTM7DYh0/rmASB0TBeRmWkG8YFK2tmgdkfjHkbRma1iFtBFKFHZFsHwRTDZTMKzSQ==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"css-select": "^2.0.2",
|
|
||||||
"dom-serializer": "^0.1.1",
|
|
||||||
"htmlparser2": "^3.10.1",
|
|
||||||
"postcss": "^7.0.17",
|
|
||||||
"postcss-value-parser": "^4.0.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"dom-serializer": {
|
|
||||||
"version": "0.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
|
|
||||||
"integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"domelementtype": "^1.3.0",
|
|
||||||
"entities": "^1.1.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"postcss": {
|
|
||||||
"version": "7.0.27",
|
|
||||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
|
|
||||||
"integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"chalk": "^2.4.2",
|
|
||||||
"source-map": "^0.6.1",
|
|
||||||
"supports-color": "^6.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"supports-color": {
|
|
||||||
"version": "6.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
|
||||||
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"has-flag": "^3.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"postcss-jsx": {
|
"postcss-jsx": {
|
||||||
"version": "0.36.3",
|
"version": "0.36.3",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz",
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -46,12 +46,17 @@ const css = {
|
|||||||
*/
|
*/
|
||||||
export function renderClipboard(
|
export function renderClipboard(
|
||||||
id: string
|
id: string
|
||||||
): HTMLElement {
|
) {
|
||||||
|
const path = require("material-design-icons-svg/paths/content-copy.json")
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
class={css.container}
|
class={css.container}
|
||||||
title={translate("clipboard.copy")}
|
title={translate("clipboard.copy")}
|
||||||
data-clipboard-target={`#${id} code`}
|
data-clipboard-target={`#${id} code`}
|
||||||
></button>
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path d={path}></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -52,12 +52,24 @@ const css = {
|
|||||||
*/
|
*/
|
||||||
export function renderSearchResult(
|
export function renderSearchResult(
|
||||||
{ article, sections }: SearchResult
|
{ article, sections }: SearchResult
|
||||||
): HTMLElement {
|
) {
|
||||||
|
|
||||||
|
// create page with icon
|
||||||
|
const path = require("material-design-icons-svg/paths/file-search-outline.json")
|
||||||
|
|
||||||
const children = [article, ...sections].map(document => {
|
const children = [article, ...sections].map(document => {
|
||||||
const { location, title, text } = document
|
const { location, title, text } = document
|
||||||
return (
|
return (
|
||||||
<a href={location} class={css.link} tabIndex={-1}>
|
<a href={location} class={css.link} tabIndex={-1}>
|
||||||
<article class={"parent" in document ? css.section : css.article}>
|
<article class={"parent" in document ? css.section : css.article}>
|
||||||
|
{!("parent" in document)
|
||||||
|
? <div class="md-search-result__icon md-icon__button md-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path d={path}></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
}
|
||||||
<h1 class={css.title}>{title}</h1>
|
<h1 class={css.title}>{title}</h1>
|
||||||
{text.length
|
{text.length
|
||||||
? <p class={css.teaser}>{truncate(text, 320)}</p>
|
? <p class={css.teaser}>{truncate(text, 320)}</p>
|
||||||
|
|||||||
@ -48,7 +48,7 @@ const css = {
|
|||||||
*/
|
*/
|
||||||
export function renderSource(
|
export function renderSource(
|
||||||
facts: SourceFacts
|
facts: SourceFacts
|
||||||
): HTMLElement {
|
) {
|
||||||
const children = facts.map(fact => (
|
const children = facts.map(fact => (
|
||||||
<li class={css.fact}>{fact}</li>
|
<li class={css.fact}>{fact}</li>
|
||||||
))
|
))
|
||||||
|
|||||||
@ -47,7 +47,7 @@ const css = {
|
|||||||
*/
|
*/
|
||||||
export function renderTable(
|
export function renderTable(
|
||||||
table: HTMLTableElement
|
table: HTMLTableElement
|
||||||
): HTMLElement {
|
) {
|
||||||
return (
|
return (
|
||||||
<div class={css.wrapper}>
|
<div class={css.wrapper}>
|
||||||
<div class={css.table}>
|
<div class={css.table}>
|
||||||
|
|||||||
@ -20,6 +20,8 @@
|
|||||||
* IN THE SOFTWARE.
|
* IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// tslint:disable no-null-keyword
|
||||||
|
|
||||||
import { JSX as JSXInternal } from "preact"
|
import { JSX as JSXInternal } from "preact"
|
||||||
import { keys } from "ramda"
|
import { keys } from "ramda"
|
||||||
|
|
||||||
@ -28,7 +30,7 @@ import { keys } from "ramda"
|
|||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* HTML attributes
|
* HTML and SVG attributes
|
||||||
*/
|
*/
|
||||||
type Attributes =
|
type Attributes =
|
||||||
& JSXInternal.HTMLAttributes
|
& JSXInternal.HTMLAttributes
|
||||||
@ -40,6 +42,7 @@ type Attributes =
|
|||||||
*/
|
*/
|
||||||
type Child =
|
type Child =
|
||||||
| HTMLElement
|
| HTMLElement
|
||||||
|
| SVGElement
|
||||||
| Text
|
| Text
|
||||||
| string
|
| string
|
||||||
| number
|
| number
|
||||||
@ -48,13 +51,69 @@ type Child =
|
|||||||
* Helper functions
|
* Helper functions
|
||||||
* ------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create an element
|
||||||
|
*
|
||||||
|
* @param tag - HTML or SVG tag
|
||||||
|
*
|
||||||
|
* @return Element
|
||||||
|
*/
|
||||||
|
function createElement(tag: string): HTMLElement | SVGElement {
|
||||||
|
switch (tag) {
|
||||||
|
|
||||||
|
/* SVG elements */
|
||||||
|
case "svg":
|
||||||
|
case "path":
|
||||||
|
return document.createElementNS("http://www.w3.org/2000/svg", tag)
|
||||||
|
|
||||||
|
/* HTML elements */
|
||||||
|
default:
|
||||||
|
return document.createElement(tag)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set an attribute
|
||||||
|
*
|
||||||
|
* @param el - Element
|
||||||
|
* @param name - Attribute name
|
||||||
|
* @param value - Attribute value
|
||||||
|
*/
|
||||||
|
function setAttribute(
|
||||||
|
el: HTMLElement | SVGElement, name: string, value: string) {
|
||||||
|
switch (name) {
|
||||||
|
|
||||||
|
/* Attributes to be ignored */
|
||||||
|
case "xmlns":
|
||||||
|
break
|
||||||
|
|
||||||
|
/* Attributes of SVG elements */
|
||||||
|
case "viewBox":
|
||||||
|
case "d":
|
||||||
|
if (typeof value !== "boolean")
|
||||||
|
el.setAttributeNS(null, name, value)
|
||||||
|
else if (value)
|
||||||
|
el.setAttributeNS(null, name, "")
|
||||||
|
break
|
||||||
|
|
||||||
|
/* Attributes of HTML elements */
|
||||||
|
default:
|
||||||
|
if (typeof value !== "boolean")
|
||||||
|
el.setAttribute(name, value)
|
||||||
|
else if (value)
|
||||||
|
el.setAttribute(name, "")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Append a child node to an element
|
* Append a child node to an element
|
||||||
*
|
*
|
||||||
* @param el - Element
|
* @param el - Element
|
||||||
* @param child - Child node(s)
|
* @param child - Child node(s)
|
||||||
*/
|
*/
|
||||||
function appendChild(el: HTMLElement, child: Child | Child[]): void {
|
function appendChild(
|
||||||
|
el: HTMLElement | SVGElement, child: Child | Child[]
|
||||||
|
): void {
|
||||||
|
|
||||||
/* Handle primitive types (including raw HTML) */
|
/* Handle primitive types (including raw HTML) */
|
||||||
if (typeof child === "string" || typeof child === "number") {
|
if (typeof child === "string" || typeof child === "number") {
|
||||||
@ -78,7 +137,7 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
|
|||||||
/**
|
/**
|
||||||
* JSX factory
|
* JSX factory
|
||||||
*
|
*
|
||||||
* @param tag - HTML tag
|
* @param tag - HTML or SVG tag
|
||||||
* @param attributes - HTML attributes
|
* @param attributes - HTML attributes
|
||||||
* @param children - Child elements
|
* @param children - Child elements
|
||||||
*
|
*
|
||||||
@ -86,16 +145,13 @@ function appendChild(el: HTMLElement, child: Child | Child[]): void {
|
|||||||
*/
|
*/
|
||||||
export function h(
|
export function h(
|
||||||
tag: string, attributes: Attributes | null, ...children: Child[]
|
tag: string, attributes: Attributes | null, ...children: Child[]
|
||||||
): HTMLElement {
|
): HTMLElement | SVGElement {
|
||||||
const el = document.createElement(tag)
|
const el = createElement(tag)
|
||||||
|
|
||||||
/* Set attributes, if any */
|
/* Set attributes, if any */
|
||||||
if (attributes)
|
if (attributes)
|
||||||
for (const attr of keys(attributes))
|
for (const attr of keys(attributes))
|
||||||
if (typeof attributes[attr] !== "boolean")
|
setAttribute(el, attr, attributes[attr])
|
||||||
el.setAttribute(attr, attributes[attr])
|
|
||||||
else if (attributes[attr])
|
|
||||||
el.setAttribute(attr, "")
|
|
||||||
|
|
||||||
/* Append child nodes */
|
/* Append child nodes */
|
||||||
for (const child of children)
|
for (const child of children)
|
||||||
@ -111,7 +167,7 @@ export function h(
|
|||||||
|
|
||||||
export declare namespace h {
|
export declare namespace h {
|
||||||
namespace JSX {
|
namespace JSX {
|
||||||
type Element = HTMLElement
|
type Element = HTMLElement | SVGElement
|
||||||
type IntrinsicElements = JSXInternal.IntrinsicElements
|
type IntrinsicElements = JSXInternal.IntrinsicElements
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -136,7 +136,7 @@ button[data-md-color-accent] {
|
|||||||
@include break-to-device(tablet) {
|
@include break-to-device(tablet) {
|
||||||
|
|
||||||
// Site title in main navigation
|
// Site title in main navigation
|
||||||
html & .md-nav--primary .md-nav__title--site {
|
html & .md-nav--primary .md-nav__title[for="drawer"] {
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -211,7 +211,7 @@ button[data-md-color-primary="white"] {
|
|||||||
@include break-to-device(tablet) {
|
@include break-to-device(tablet) {
|
||||||
|
|
||||||
// Site title in main navigation
|
// Site title in main navigation
|
||||||
html & .md-nav--primary .md-nav__title--site {
|
html & .md-nav--primary .md-nav__title[for="drawer"] {
|
||||||
background-color: $md-color-white;
|
background-color: $md-color-white;
|
||||||
color: $md-color-black;
|
color: $md-color-black;
|
||||||
}
|
}
|
||||||
@ -278,7 +278,7 @@ button[data-md-color-primary="black"] {
|
|||||||
@include break-to-device(tablet) {
|
@include break-to-device(tablet) {
|
||||||
|
|
||||||
// Site title in main navigation
|
// Site title in main navigation
|
||||||
html & .md-nav--primary .md-nav__title--site {
|
html & .md-nav--primary .md-nav__title[for="drawer"] {
|
||||||
background-color: $clr-black;
|
background-color: $clr-black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "../../../../.stylelintrc",
|
|
||||||
"rules": {
|
|
||||||
"font-weight-notation": null,
|
|
||||||
"property-no-vendor-prefix": null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -20,78 +20,27 @@
|
|||||||
/// DEALINGS
|
/// DEALINGS
|
||||||
////
|
////
|
||||||
|
|
||||||
// stylelint-disable font-family-no-missing-generic-family-keyword
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
|
||||||
// Font faces
|
|
||||||
// ----------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// Icon font
|
|
||||||
@font-face {
|
|
||||||
font-family: "Material Icons";
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: local("Material Icons"),
|
|
||||||
local("MaterialIcons-Regular"),
|
|
||||||
url("../fonts/MaterialIcons-Regular.woff2") format("woff2"),
|
|
||||||
url("../fonts/MaterialIcons-Regular.woff") format("woff"),
|
|
||||||
url("../fonts/MaterialIcons-Regular.ttf") format("truetype")
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
// Rules
|
// Rules
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
|
||||||
// Icon placeholders
|
// Icon
|
||||||
%md-icon {
|
.md-icon {
|
||||||
font-family: "Material Icons";
|
|
||||||
font-style: normal;
|
|
||||||
font-variant: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 1;
|
|
||||||
text-transform: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
word-wrap: normal;
|
|
||||||
direction: ltr;
|
|
||||||
|
|
||||||
// Icon rendered as button
|
// Icon with button spacing
|
||||||
&__button {
|
&__button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: #{$md-icon-size + 2 * $md-icon-padding};
|
margin: px2rem(4px);
|
||||||
margin: $md-icon-margin;
|
padding: px2rem(8px);
|
||||||
padding: $md-icon-padding;
|
|
||||||
font-size: $md-icon-size;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Representational classes
|
// Inherit current color
|
||||||
.md-icon {
|
svg {
|
||||||
@extend %md-icon;
|
display: block;
|
||||||
|
width: px2rem(24px);
|
||||||
// Build representational classes
|
height: px2rem(24px);
|
||||||
@each $ligature, $name in (
|
margin: 0 auto;
|
||||||
"\E5C4": "arrow-back", // arrow_back
|
fill: currentColor;
|
||||||
"\E5C8": "arrow-forward", // arrow_forward
|
|
||||||
"\E5D2": "menu", // menu
|
|
||||||
"\E8B6": "search" // search
|
|
||||||
) {
|
|
||||||
&--#{$name}::before {
|
|
||||||
content: $ligature;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adjust for RTL languages
|
|
||||||
[dir="rtl"] & {
|
|
||||||
|
|
||||||
// Flip ligatures for arrows
|
|
||||||
@each $ligature, $name in (
|
|
||||||
"\E5C8": "arrow-back", // arrow_forward
|
|
||||||
"\E5C4": "arrow-forward" // arrow_back
|
|
||||||
) {
|
|
||||||
&--#{$name}::before {
|
|
||||||
content: $ligature;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -56,7 +56,7 @@ hr {
|
|||||||
|
|
||||||
// Remove gaps in underlined links in iOS >= 8 and Safari >= 8
|
// Remove gaps in underlined links in iOS >= 8 and Safari >= 8
|
||||||
a {
|
a {
|
||||||
-webkit-text-decoration-skip: objects;
|
-webkit-text-decoration-skip: objects; // stylelint-disable-line
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset tap outlines on iOS and Android
|
// Reset tap outlines on iOS and Android
|
||||||
@ -111,7 +111,7 @@ table {
|
|||||||
// Reset table cell styles
|
// Reset table cell styles
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
font-weight: normal;
|
font-weight: normal; // stylelint-disable-line
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -60,7 +60,7 @@ kbd {
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
|
||||||
// Colors should be kept when printing
|
// Colors should be kept when printing
|
||||||
-webkit-print-color-adjust: exact;
|
-webkit-print-color-adjust: exact; // stylelint-disable-line
|
||||||
|
|
||||||
// Default spacing
|
// Default spacing
|
||||||
p,
|
p,
|
||||||
@ -143,9 +143,9 @@ kbd {
|
|||||||
transition: color 125ms;
|
transition: color 125ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hovered and active links
|
// Focused or hover links
|
||||||
&:hover,
|
&:focus,
|
||||||
&:active {
|
&:hover {
|
||||||
color: $md-color-accent;
|
color: $md-color-accent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -242,7 +242,7 @@ kbd {
|
|||||||
height: px2rem(4px);
|
height: px2rem(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Style scrollbar thumb
|
// Scrollbar thumb
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $md-color-black--lighter;
|
background-color: $md-color-black--lighter;
|
||||||
|
|
||||||
@ -314,7 +314,7 @@ kbd {
|
|||||||
sub {
|
sub {
|
||||||
margin-left: 0.0625em * 1 / 0.8;
|
margin-left: 0.0625em * 1 / 0.8;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: 0.0625em * 1 / 0.8;
|
margin-right: 0.0625em * 1 / 0.8;
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -327,7 +327,7 @@ kbd {
|
|||||||
border-left: px2rem(4px) solid $md-color-black--lighter;
|
border-left: px2rem(4px) solid $md-color-black--lighter;
|
||||||
color: $md-color-black--light;
|
color: $md-color-black--light;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(12px);
|
padding-right: px2rem(12px);
|
||||||
padding-left: initial;
|
padding-left: initial;
|
||||||
@ -347,7 +347,7 @@ kbd {
|
|||||||
margin-left: 0.625em;
|
margin-left: 0.625em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: 0.625em;
|
margin-right: 0.625em;
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -368,7 +368,7 @@ kbd {
|
|||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
margin-left: 1.25em;
|
margin-left: 1.25em;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: 1.25em;
|
margin-right: 1.25em;
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -390,7 +390,7 @@ kbd {
|
|||||||
ol {
|
ol {
|
||||||
margin: 0.5em 0 0.5em 0.625em;
|
margin: 0.5em 0 0.5em 0.625em;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: 0.625em;
|
margin-right: 0.625em;
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -403,7 +403,7 @@ kbd {
|
|||||||
dd {
|
dd {
|
||||||
margin: 1em 0 1em 1.875em;
|
margin: 1em 0 1em 1.875em;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: 1.875em;
|
margin-right: 1.875em;
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -439,7 +439,7 @@ kbd {
|
|||||||
td:not([align]) {
|
td:not([align]) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,16 +31,21 @@
|
|||||||
.admonition {
|
.admonition {
|
||||||
margin: 1.5625em 0;
|
margin: 1.5625em 0;
|
||||||
padding: 0 px2rem(12px);
|
padding: 0 px2rem(12px);
|
||||||
border-left: px2rem(4px) solid $clr-blue-a200;
|
border-left: px2rem(3px) solid $clr-blue-a200;
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
box-shadow: inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85);
|
box-shadow:
|
||||||
|
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
|
||||||
|
inset 1px 0 $clr-blue-a200;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
border-right: px2rem(4px) solid $clr-blue-a200;
|
border-right: px2rem(3px) solid $clr-blue-a200;
|
||||||
border-left: none;
|
border-left: none;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
|
||||||
|
inset -1px 0 $clr-blue-a200;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adjust spacing on last element
|
// Adjust spacing on last element
|
||||||
@ -60,7 +65,7 @@
|
|||||||
background-color: transparentize($clr-blue-a200, 0.9);
|
background-color: transparentize($clr-blue-a200, 0.9);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
|
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
|
||||||
}
|
}
|
||||||
@ -72,8 +77,6 @@
|
|||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
&::before {
|
&::before {
|
||||||
@extend %md-icon;
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: px2rem(20px);
|
width: px2rem(20px);
|
||||||
height: px2rem(20px);
|
height: px2rem(20px);
|
||||||
@ -82,7 +85,7 @@
|
|||||||
mask-image: url("{{ pencil }}");
|
mask-image: url("{{ pencil }}");
|
||||||
content: "";
|
content: "";
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(-28px);
|
margin-right: px2rem(-28px);
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -111,11 +114,16 @@
|
|||||||
&%#{nth($names, 1)},
|
&%#{nth($names, 1)},
|
||||||
&.#{nth($names, 1)} {
|
&.#{nth($names, 1)} {
|
||||||
border-left-color: $tint;
|
border-left-color: $tint;
|
||||||
box-shadow: inset 0 0 0 px2rem(1px) transparentize($tint, 0.85);
|
box-shadow:
|
||||||
|
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
|
||||||
|
inset 1px 0 $tint;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
border-right-color: $tint;
|
border-right-color: $tint;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
|
||||||
|
inset -1px 0 $tint;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
|
|||||||
@ -268,6 +268,7 @@ $codehilite-whitespace: transparent;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: refactor
|
||||||
[data-linenos] {
|
[data-linenos] {
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|||||||
@ -115,8 +115,6 @@
|
|||||||
|
|
||||||
// Footnote back reference
|
// Footnote back reference
|
||||||
.footnote-backref {
|
.footnote-backref {
|
||||||
@extend %md-icon;
|
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transform: translateX(px2rem(5px));
|
transform: translateX(px2rem(5px));
|
||||||
transition:
|
transition:
|
||||||
@ -129,7 +127,7 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
transform: translateX(px2rem(-5px));
|
transform: translateX(px2rem(-5px));
|
||||||
}
|
}
|
||||||
@ -137,10 +135,13 @@
|
|||||||
// Back reference icon
|
// Back reference icon
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: px2rem(16px);
|
width: px2rem(16px);
|
||||||
content: "\E31B"; // keyboard_return
|
height: px2rem(16px);
|
||||||
|
background-color: currentColor;
|
||||||
|
mask-image: url("{{ anchor }}");
|
||||||
|
content: "";
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
transform: scaleX(-1)
|
transform: scaleX(-1)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -35,12 +35,12 @@
|
|||||||
transition:
|
transition:
|
||||||
transform 250ms 250ms,
|
transform 250ms 250ms,
|
||||||
color 250ms,
|
color 250ms,
|
||||||
opacity 125ms 250ms,
|
opacity 125ms 250ms;
|
||||||
visibility 0ms 500ms;
|
// visibility 0ms 500ms;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
// Hack: If we don't set visibility hidden, the text content of the node
|
// 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.
|
// will include the headerlink character, which is why Google indexes them.
|
||||||
visibility: hidden;
|
// visibility: hidden;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for RTL languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
@ -92,10 +92,10 @@
|
|||||||
transition:
|
transition:
|
||||||
transform 250ms 250ms,
|
transform 250ms 250ms,
|
||||||
color 250ms,
|
color 250ms,
|
||||||
opacity 125ms 250ms,
|
opacity 125ms 250ms;
|
||||||
visibility 0ms;
|
// visibility 0ms;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
// visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active or targeted permalink
|
// Active or targeted permalink
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
// Deletion
|
// Deletion
|
||||||
del.critic {
|
del.critic {
|
||||||
background-color: $codehilite-diff-deleted; // TODO: dependent on order of inclusion
|
background-color: $codehilite-diff-deleted;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
+0.25em 0 0 $codehilite-diff-deleted,
|
+0.25em 0 0 $codehilite-diff-deleted,
|
||||||
-0.25em 0 0 $codehilite-diff-deleted;
|
-0.25em 0 0 $codehilite-diff-deleted;
|
||||||
@ -47,7 +47,7 @@
|
|||||||
|
|
||||||
// Addition
|
// Addition
|
||||||
ins.critic {
|
ins.critic {
|
||||||
background-color: $codehilite-diff-inserted; // TODO: dependent on order of inclusion
|
background-color: $codehilite-diff-inserted;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
+0.25em 0 0 $codehilite-diff-inserted,
|
+0.25em 0 0 $codehilite-diff-inserted,
|
||||||
-0.25em 0 0 $codehilite-diff-inserted;
|
-0.25em 0 0 $codehilite-diff-inserted;
|
||||||
@ -55,20 +55,16 @@
|
|||||||
|
|
||||||
// Comment
|
// Comment
|
||||||
.critic.comment {
|
.critic.comment {
|
||||||
background-color: $md-code-background; // TODO: rename, centralize somehow
|
color: $codehilite-comment;
|
||||||
color: $md-code-color;
|
|
||||||
box-shadow:
|
|
||||||
+0.25em 0 0 $md-code-background,
|
|
||||||
-0.25em 0 0 $md-code-background;
|
|
||||||
|
|
||||||
// Icon
|
// Comment opening mark
|
||||||
&::before {
|
&::before {
|
||||||
@extend %md-icon;
|
content: "/* ";
|
||||||
|
}
|
||||||
|
|
||||||
padding-right: 0.125em;
|
// Comment closing mark
|
||||||
color: $md-color-black--lighter;
|
&::after {
|
||||||
content: "\E0B7"; // chat
|
content: " */";
|
||||||
vertical-align: -0.125em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -54,25 +54,11 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
padding-right: px2rem(40px);
|
padding-right: px2rem(40px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-left: px2rem(40px);
|
padding-left: px2rem(40px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Manually hide and show, if browser doesn't support details
|
|
||||||
.no-details &:not([open]) {
|
|
||||||
|
|
||||||
// Hide all nested tags ...
|
|
||||||
> * {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ... but show title
|
|
||||||
summary {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
@ -91,16 +77,15 @@
|
|||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
&::after {
|
&::after {
|
||||||
@extend %md-icon;
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(8px);
|
|
||||||
right: px2rem(12px);
|
right: px2rem(12px);
|
||||||
color: $md-color-black--lighter;
|
width: px2rem(20px);
|
||||||
font-size: px2rem(20px);
|
height: px2rem(20px);
|
||||||
content: "\E313"; // keyboard_arrow_down
|
background-color: $md-color-black--lighter;
|
||||||
|
mask-image: url("{{ chevron-down }}");
|
||||||
|
content: "";
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: initial;
|
right: initial;
|
||||||
left: px2rem(12px);
|
left: px2rem(12px);
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
top: 0.45em;
|
top: 0.45em;
|
||||||
left: -2em;
|
left: -2em;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: -2em;
|
right: -2em;
|
||||||
left: initial;
|
left: initial;
|
||||||
@ -52,26 +52,26 @@
|
|||||||
|
|
||||||
// Checkbox icon in unchecked state
|
// Checkbox icon in unchecked state
|
||||||
.task-list-indicator::before {
|
.task-list-indicator::before {
|
||||||
@extend %md-icon;
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.15em;
|
top: 0.15em;
|
||||||
left: -1.25em;
|
left: px2em(-24px);
|
||||||
color: $md-color-black--lighter;
|
width: px2em(20px);
|
||||||
font-size: 1.25em;
|
height: px2em(20px);
|
||||||
content: "\E835"; // check_box_outline_blank
|
background-color: $md-color-black--lightest;
|
||||||
vertical-align: -0.25em;
|
mask-image: url("{{ checkbox-blank-circle }}");
|
||||||
|
content: "";
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: -1.25em;
|
right: px2em(-24px);
|
||||||
left: initial;
|
left: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Checkbox icon in checked state
|
// Checkbox icon in checked state
|
||||||
[type="checkbox"]:checked + .task-list-indicator::before {
|
[type="checkbox"]:checked + .task-list-indicator::before {
|
||||||
content: "\E834"; // check_box
|
background-color: $clr-green-a400;
|
||||||
|
mask-image: url("{{ check-circle }}");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide original checkbox behind icon
|
// Hide original checkbox behind icon
|
||||||
|
|||||||
@ -119,6 +119,14 @@ hr {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Apply ellipsis in case of overflowing text
|
||||||
|
.md-ellipsis {
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
// Rules: navigational elements
|
// Rules: navigational elements
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
@ -158,37 +166,6 @@ hr {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
|
||||||
// Rules: flexible elements
|
|
||||||
// ----------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// Flexible layout container
|
|
||||||
.md-flex {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
// Flexible layout container cell/element
|
|
||||||
&__cell {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
// Shrink to minimum width
|
|
||||||
&--shrink {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stretch to maximum width
|
|
||||||
&--stretch {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply ellipsis in case of overflowing text
|
|
||||||
&__ellipsis {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
// Rules: skip link
|
// Rules: skip link
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
|||||||
@ -27,14 +27,13 @@
|
|||||||
// Copy to clipboard
|
// Copy to clipboard
|
||||||
.md-clipboard {
|
.md-clipboard {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(6px);
|
top: px2rem(8px);
|
||||||
right: px2rem(6px);
|
right: px2rem(8px);
|
||||||
width: px2rem(28px);
|
width: px2rem(24px);
|
||||||
height: px2rem(28px);
|
height: px2rem(24px);
|
||||||
transition: color 250ms;
|
transition: color 250ms;
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
color: $md-color-black--lightest;
|
color: $md-color-black--lightest;
|
||||||
font-size: px2rem(16px);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
// Hack: put everything on the GPU to omit flickering
|
// Hack: put everything on the GPU to omit flickering
|
||||||
@ -45,6 +44,12 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Slightly smaller icon
|
||||||
|
svg {
|
||||||
|
width: px2rem(18px);
|
||||||
|
height: px2rem(18px);
|
||||||
|
}
|
||||||
|
|
||||||
// Show on container hover
|
// Show on container hover
|
||||||
pre:hover &,
|
pre:hover &,
|
||||||
.codehilite:hover & {
|
.codehilite:hover & {
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
@include break-from-device(tablet landscape) {
|
@include break-from-device(tablet landscape) {
|
||||||
margin-right: px2rem(242px);
|
margin-right: px2rem(242px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: initial;
|
margin-right: initial;
|
||||||
margin-left: px2rem(242px);
|
margin-left: px2rem(242px);
|
||||||
@ -42,7 +42,7 @@
|
|||||||
@include break-from-device(screen) {
|
@include break-from-device(screen) {
|
||||||
margin-left: px2rem(242px);
|
margin-left: px2rem(242px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(242px);
|
margin-right: px2rem(242px);
|
||||||
}
|
}
|
||||||
@ -73,20 +73,36 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icons
|
// Button next to the title
|
||||||
&__icon {
|
&__button {
|
||||||
@extend %md-icon__button;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
margin: px2rem(8px) 0;
|
margin: px2rem(8px) 0;
|
||||||
|
margin-left: px2rem(8px);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
float: right;
|
float: right;
|
||||||
|
|
||||||
|
// Adjust for right-to-left languages
|
||||||
|
[dir="rtl"] & {
|
||||||
|
margin-right: px2rem(8px);
|
||||||
|
margin-left: initial;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
// Flip icon vertically
|
||||||
|
svg {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Override default link color for icons
|
// Override default link color for icons
|
||||||
.md-typeset & {
|
.md-typeset & {
|
||||||
color: $md-color-black--lighter;
|
color: $md-color-black--lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Align text with icon
|
||||||
|
svg {
|
||||||
|
display: inline;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
// Hide for print
|
// Hide for print
|
||||||
@media print {
|
@media print {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -38,12 +38,6 @@
|
|||||||
background-color: $md-color-black;
|
background-color: $md-color-black;
|
||||||
color: $md-color-white;
|
color: $md-color-white;
|
||||||
|
|
||||||
// Icons
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set spacing
|
// Set spacing
|
||||||
&__inner {
|
&__inner {
|
||||||
padding: px2rem(4px);
|
padding: px2rem(4px);
|
||||||
@ -52,6 +46,7 @@
|
|||||||
|
|
||||||
// Links to previous and next page
|
// Links to previous and next page
|
||||||
&__link {
|
&__link {
|
||||||
|
display: flex;
|
||||||
padding-top: px2rem(28px);
|
padding-top: px2rem(28px);
|
||||||
padding-bottom: px2rem(8px);
|
padding-bottom: px2rem(8px);
|
||||||
transition: opacity 250ms;
|
transition: opacity 250ms;
|
||||||
@ -61,7 +56,8 @@
|
|||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hovered link
|
// Focused or hovered links
|
||||||
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
@ -71,9 +67,14 @@
|
|||||||
width: 25%;
|
width: 25%;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
||||||
|
// Flip icon vertically
|
||||||
|
svg {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
@ -92,24 +93,24 @@
|
|||||||
float: right;
|
float: right;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
float: left;
|
float: left;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
|
// Flip icon vertically
|
||||||
|
svg {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icon buttons
|
|
||||||
&__button {
|
|
||||||
@extend %md-icon__button;
|
|
||||||
|
|
||||||
transition: background 250ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Link title - set line height to match icon for correct alignment
|
// Link title - set line height to match icon for correct alignment
|
||||||
&__title {
|
&__title {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: calc(100% - #{px2rem(48px)});
|
||||||
padding: 0 px2rem(20px);
|
padding: 0 px2rem(20px);
|
||||||
font-size: px2rem(18px);
|
font-size: px2rem(18px);
|
||||||
line-height: px2rem(48px);
|
line-height: px2rem(48px);
|
||||||
@ -161,7 +162,7 @@
|
|||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
@ -183,7 +184,7 @@
|
|||||||
padding: px2rem(12px) 0;
|
padding: px2rem(12px) 0;
|
||||||
float: right;
|
float: right;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
@ -194,7 +195,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: px2rem(32px);
|
width: px2rem(32px);
|
||||||
height: px2rem(32px);
|
height: px2rem(32px);
|
||||||
font-size: px2rem(16px);
|
transition: color 250ms;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
// Adjust line-height to match height for correct alignment
|
// Adjust line-height to match height for correct alignment
|
||||||
@ -205,15 +206,8 @@
|
|||||||
// Social icon
|
// Social icon
|
||||||
svg {
|
svg {
|
||||||
width: px2rem(16px);
|
width: px2rem(16px);
|
||||||
transition: fill 250ms;
|
|
||||||
vertical-align: -25%;
|
vertical-align: -25%;
|
||||||
fill: $md-color-white--light;
|
fill: currentColor;
|
||||||
}
|
|
||||||
|
|
||||||
// Focused or hovered link
|
|
||||||
&:focus svg,
|
|
||||||
&:hover svg {
|
|
||||||
fill: $md-color-white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -41,12 +41,6 @@
|
|||||||
// Hack: putting the header on the GPU avoids unnecessary repaints
|
// Hack: putting the header on the GPU avoids unnecessary repaints
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
|
|
||||||
// Icons
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Always hide shadow, in case JavaScript is not available
|
// Always hide shadow, in case JavaScript is not available
|
||||||
.no-js & {
|
.no-js & {
|
||||||
transition: none;
|
transition: none;
|
||||||
@ -72,28 +66,50 @@
|
|||||||
|
|
||||||
// Navigation within header
|
// Navigation within header
|
||||||
.md-header-nav {
|
.md-header-nav {
|
||||||
|
display: flex;
|
||||||
padding: 0 px2rem(4px);
|
padding: 0 px2rem(4px);
|
||||||
|
|
||||||
// Icon buttons
|
// Icon buttons
|
||||||
&__button {
|
&__button {
|
||||||
@extend %md-icon__button;
|
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: opacity 250ms;
|
transition: opacity 250ms;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
// Hovered icon
|
// Adjust for right-to-left languages
|
||||||
|
[dir="rtl"] & {
|
||||||
|
|
||||||
|
// Flip icon vertically
|
||||||
|
svg {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Focused or hovered icon
|
||||||
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set correct display on image or icon
|
// Logo
|
||||||
&.md-logo * {
|
&.md-logo {
|
||||||
display: block;
|
margin: px2rem(4px);
|
||||||
|
padding: px2rem(8px);
|
||||||
|
|
||||||
|
// Set correct display on image or icon
|
||||||
|
* {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inherit current color
|
||||||
|
svg {
|
||||||
|
width: px2rem(24px);
|
||||||
|
height: px2rem(24px);
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide search icon, if JavaScript is not available.
|
// Hide search icon, if JavaScript is not available.
|
||||||
.no-js &.md-icon--search {
|
.no-js &[for="search"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -129,7 +145,8 @@
|
|||||||
&__topic {
|
&__topic {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: calc(100% - #{px2rem(20px)});
|
width: calc(100% - #{px2rem(40px)});
|
||||||
|
padding: 0 px2rem(20px);
|
||||||
transition:
|
transition:
|
||||||
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||||
opacity 150ms;
|
opacity 150ms;
|
||||||
@ -147,7 +164,7 @@
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
transform: translateX(px2rem(-25px));
|
transform: translateX(px2rem(-25px));
|
||||||
}
|
}
|
||||||
@ -166,7 +183,7 @@
|
|||||||
|
|
||||||
// Header title - set line height to match icon for correct alignment
|
// Header title - set line height to match icon for correct alignment
|
||||||
&__title {
|
&__title {
|
||||||
padding: 0 px2rem(20px);
|
flex-grow: 1;
|
||||||
font-size: px2rem(18px);
|
font-size: px2rem(18px);
|
||||||
line-height: px2rem(48px);
|
line-height: px2rem(48px);
|
||||||
|
|
||||||
@ -180,7 +197,7 @@
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
transform: translateX(px2rem(25px));
|
transform: translateX(px2rem(25px));
|
||||||
}
|
}
|
||||||
@ -196,6 +213,13 @@
|
|||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Patch ellipsis
|
||||||
|
> .md-header-nav__ellipsis {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Repository containing source
|
// Repository containing source
|
||||||
@ -209,7 +233,7 @@
|
|||||||
max-width: px2rem(234px);
|
max-width: px2rem(234px);
|
||||||
margin-left: px2rem(20px);
|
margin-left: px2rem(20px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(20px);
|
margin-right: px2rem(20px);
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -220,7 +244,7 @@
|
|||||||
@include break-from-device(screen) {
|
@include break-from-device(screen) {
|
||||||
margin-left: px2rem(28px);
|
margin-left: px2rem(28px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(28px);
|
margin-right: px2rem(28px);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -37,22 +37,20 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
// Icon, hidden by default
|
// Hide buttons by default
|
||||||
&::before {
|
|
||||||
@extend %md-icon, %md-icon__button;
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
content: "\E5C4"; // arrow_back
|
|
||||||
|
|
||||||
// Adjust for RTL languages
|
|
||||||
[dir="rtl"] & {
|
|
||||||
content: "\E5C8"; // arrow_forward
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide button by default
|
|
||||||
.md-nav__button {
|
.md-nav__button {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
|
// Stretch images
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Logo
|
||||||
|
&.md-logo svg {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,7 +74,7 @@
|
|||||||
& & {
|
& & {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(12px);
|
padding-right: px2rem(12px);
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
@ -89,17 +87,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button with logo
|
|
||||||
&__button {
|
|
||||||
@extend %md-icon, %md-icon__button;
|
|
||||||
|
|
||||||
// Stretch image
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Link inside item
|
// Link inside item
|
||||||
&__link {
|
&__link {
|
||||||
display: block;
|
display: block;
|
||||||
@ -110,16 +97,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
|
|
||||||
// Icon
|
|
||||||
&::after {
|
|
||||||
@extend %md-icon;
|
|
||||||
|
|
||||||
// Item contains a nested list
|
|
||||||
.md-nav__item--nested > & {
|
|
||||||
content: "\E313"; // keyboard_arrow_down
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide link to table of contents by default - this will only match the
|
// Hide link to table of contents by default - this will only match the
|
||||||
// table of contents inside the drawer below and including tablet portrait
|
// table of contents inside the drawer below and including tablet portrait
|
||||||
html &[for="__toc"] {
|
html &[for="__toc"] {
|
||||||
@ -129,11 +106,6 @@
|
|||||||
& ~ .md-nav {
|
& ~ .md-nav {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide icon for current item
|
|
||||||
+ .md-nav__link::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blurred link
|
// Blurred link
|
||||||
@ -142,8 +114,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Active link
|
// Active link
|
||||||
&:active,
|
.md-nav__item &--active {
|
||||||
&--active {
|
|
||||||
color: $md-color-primary;
|
color: $md-color-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -191,9 +162,8 @@
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
// List title - higher specificity is necessary to ensure that the title
|
// List title
|
||||||
// inside the drawer is always styled accordingly
|
.md-nav__title {
|
||||||
html & .md-nav__title {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
height: px2rem(112px);
|
height: px2rem(112px);
|
||||||
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
||||||
@ -205,14 +175,20 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
&::before {
|
.md-nav__icon {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(4px);
|
top: px2rem(8px);
|
||||||
left: px2rem(4px);
|
left: px2rem(8px);
|
||||||
width: px2rem(40px);
|
width: px2rem(24px);
|
||||||
height: px2rem(40px);
|
height: px2rem(24px);
|
||||||
color: $md-color-black--light;
|
margin: px2rem(4px);
|
||||||
|
|
||||||
|
// Adjust for right-to-left languages
|
||||||
|
[dir="rtl"] & {
|
||||||
|
right: px2rem(8px);
|
||||||
|
left: initial;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Main lists
|
// Main lists
|
||||||
@ -229,7 +205,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Site title in main navigation
|
// Site title in main navigation
|
||||||
&--site {
|
&[for="__drawer"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: $md-color-primary;
|
background-color: $md-color-primary;
|
||||||
color: $md-color-white;
|
color: $md-color-white;
|
||||||
@ -242,27 +218,18 @@
|
|||||||
left: px2rem(4px);
|
left: px2rem(4px);
|
||||||
width: px2rem(64px);
|
width: px2rem(64px);
|
||||||
height: px2rem(64px);
|
height: px2rem(64px);
|
||||||
|
margin: px2rem(4px);
|
||||||
|
padding: px2rem(8px);
|
||||||
font-size: px2rem(48px);
|
font-size: px2rem(48px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide back arrow icon
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
html [dir="rtl"] & .md-nav__title {
|
html [dir="rtl"] & .md-nav__title {
|
||||||
|
|
||||||
// Icon
|
|
||||||
&::before {
|
|
||||||
right: px2rem(4px);
|
|
||||||
left: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Site title in main navigation
|
// Site title in main navigation
|
||||||
&--site .md-nav__button {
|
&[for="__drawer"] .md-nav__button {
|
||||||
right: px2rem(4px);
|
right: px2rem(4px);
|
||||||
left: initial;
|
left: initial;
|
||||||
}
|
}
|
||||||
@ -278,7 +245,7 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -287,21 +254,11 @@
|
|||||||
&--nested > .md-nav__link {
|
&--nested > .md-nav__link {
|
||||||
padding-right: px2rem(48px);
|
padding-right: px2rem(48px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(16px);
|
padding-right: px2rem(16px);
|
||||||
padding-left: px2rem(48px);
|
padding-left: px2rem(48px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Replace icon with right arrow
|
|
||||||
&::after {
|
|
||||||
content: "\E315"; // keyboard_arrow_right
|
|
||||||
|
|
||||||
// Adjust for RTL languages
|
|
||||||
[dir="rtl"] & {
|
|
||||||
content: "\E314"; // keyboard_arrow_left
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -311,8 +268,8 @@
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: px2rem(12px) px2rem(16px);
|
padding: px2rem(12px) px2rem(16px);
|
||||||
|
|
||||||
// Rotate icon
|
// Icon
|
||||||
&::after {
|
.md-nav__icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: px2rem(12px);
|
right: px2rem(12px);
|
||||||
@ -320,7 +277,7 @@
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: px2rem(24px);
|
font-size: px2rem(24px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: initial;
|
right: initial;
|
||||||
left: px2rem(12px);
|
left: px2rem(12px);
|
||||||
@ -328,6 +285,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Icon
|
||||||
|
.md-nav__icon {
|
||||||
|
|
||||||
|
// Adjust for right-to-left languages
|
||||||
|
[dir="rtl"] & {
|
||||||
|
|
||||||
|
// Flip icon vertically
|
||||||
|
svg {
|
||||||
|
transform: scale(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Table of contents inside navigation
|
// Table of contents inside navigation
|
||||||
.md-nav--secondary {
|
.md-nav--secondary {
|
||||||
|
|
||||||
@ -345,7 +315,7 @@
|
|||||||
.md-nav__link {
|
.md-nav__link {
|
||||||
padding-left: px2rem(28px);
|
padding-left: px2rem(28px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(28px);
|
padding-right: px2rem(28px);
|
||||||
padding-left: initial;
|
padding-left: initial;
|
||||||
@ -356,7 +326,7 @@
|
|||||||
.md-nav .md-nav__link {
|
.md-nav .md-nav__link {
|
||||||
padding-left: px2rem(40px);
|
padding-left: px2rem(40px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(40px);
|
padding-right: px2rem(40px);
|
||||||
padding-left: initial;
|
padding-left: initial;
|
||||||
@ -367,7 +337,7 @@
|
|||||||
.md-nav .md-nav .md-nav__link {
|
.md-nav .md-nav .md-nav__link {
|
||||||
padding-left: px2rem(52px);
|
padding-left: px2rem(52px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(52px);
|
padding-right: px2rem(52px);
|
||||||
padding-left: initial;
|
padding-left: initial;
|
||||||
@ -378,7 +348,7 @@
|
|||||||
.md-nav .md-nav .md-nav .md-nav__link {
|
.md-nav .md-nav .md-nav .md-nav__link {
|
||||||
padding-left: px2rem(64px);
|
padding-left: px2rem(64px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(64px);
|
padding-right: px2rem(64px);
|
||||||
padding-left: initial;
|
padding-left: initial;
|
||||||
@ -397,15 +367,10 @@
|
|||||||
opacity 125ms 50ms;
|
opacity 125ms 50ms;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Just hide navigation, if browser doesn't supports 3D transforms
|
|
||||||
.no-csstransforms3d & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Expand nested navigation, if toggle is checked
|
// Expand nested navigation, if toggle is checked
|
||||||
@ -415,11 +380,6 @@
|
|||||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||||
opacity 125ms 125ms;
|
opacity 125ms 125ms;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
// Just show navigation, if browser doesn't supports 3D transforms
|
|
||||||
.no-csstransforms3d & {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -432,12 +392,6 @@
|
|||||||
display: block;
|
display: block;
|
||||||
padding-right: px2rem(48px);
|
padding-right: px2rem(48px);
|
||||||
|
|
||||||
// Unrotate icon for table of contents
|
|
||||||
&::after {
|
|
||||||
color: inherit;
|
|
||||||
content: "\E8DE"; // toc
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide link to current item
|
// Hide link to current item
|
||||||
+ .md-nav__link {
|
+ .md-nav__link {
|
||||||
display: none;
|
display: none;
|
||||||
@ -449,7 +403,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
html [dir="rtl"] &__link {
|
html [dir="rtl"] &__link {
|
||||||
padding-right: px2rem(16px);
|
padding-right: px2rem(16px);
|
||||||
padding-left: px2rem(48px);
|
padding-left: px2rem(48px);
|
||||||
@ -471,10 +425,19 @@
|
|||||||
// property must be calculated before transitioning
|
// property must be calculated before transitioning
|
||||||
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
|
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
|
||||||
|
|
||||||
// Snap to site and table of contents title
|
// List title
|
||||||
.md-nav__title[for="__drawer"],
|
.md-nav__title {
|
||||||
.md-nav__title[for="__toc"] {
|
|
||||||
scroll-snap-align: start;
|
// Snap to site and table of contents title
|
||||||
|
&[for="__drawer"],
|
||||||
|
&[for="__toc"] {
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide icons
|
||||||
|
.md-nav__icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide nested navigation by default
|
// Hide nested navigation by default
|
||||||
@ -492,27 +455,23 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Link inside item - ideally the link display method would be set to
|
// Icon
|
||||||
// inline on screen, but this doesn't work with text ellipsis
|
&__icon {
|
||||||
&__link {
|
height: px2rem(18px);
|
||||||
|
float: right;
|
||||||
|
transition: transform 250ms;
|
||||||
|
|
||||||
// Item contains a nested list
|
// Inline icon and adjust to match font size
|
||||||
.md-nav__item--nested > &::after {
|
svg {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transform-origin: 0.45em 0.45em;
|
width: px2rem(18px);
|
||||||
transform-style: preserve-3d;
|
height: px2rem(18px);
|
||||||
vertical-align: -0.125em;
|
vertical-align: px2rem(-2px);
|
||||||
|
|
||||||
// Only animate icon when JavaScript is available, as the height can
|
|
||||||
// not be animated anyway, and better no fun than half the fun
|
|
||||||
.js & {
|
|
||||||
transition: transform 400ms;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rotate icon for expanded lists
|
// Rotate icon for expanded lists
|
||||||
.md-nav__item--nested .md-nav__toggle:checked ~ &::after {
|
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
|
||||||
transform: rotateX(180deg);
|
transform: rotateZ(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,6 +34,7 @@ $md-toggle__search--checked:
|
|||||||
|
|
||||||
// Search container
|
// Search container
|
||||||
.md-search {
|
.md-search {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
// Hide search, if JavaScript is not available.
|
// Hide search, if JavaScript is not available.
|
||||||
.no-js & {
|
.no-js & {
|
||||||
@ -42,7 +43,6 @@ $md-toggle__search--checked:
|
|||||||
|
|
||||||
// [tablet landscape +]: Header-embedded search
|
// [tablet landscape +]: Header-embedded search
|
||||||
@include break-from-device(tablet landscape) {
|
@include break-from-device(tablet landscape) {
|
||||||
margin-left: px2rem(4px);
|
|
||||||
padding: px2rem(4px) 0;
|
padding: px2rem(4px) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -55,9 +55,9 @@ $md-toggle__search--checked:
|
|||||||
@include break-to-device(tablet portrait) {
|
@include break-to-device(tablet portrait) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: px2rem(4px);
|
top: px2rem(4px);
|
||||||
left: px2rem(4px);
|
left: px2rem(-44px);
|
||||||
width: px2rem(36px);
|
width: px2rem(40px);
|
||||||
height: px2rem(36px);
|
height: px2rem(40px);
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transition:
|
transition:
|
||||||
transform 300ms 100ms,
|
transform 300ms 100ms,
|
||||||
@ -67,9 +67,9 @@ $md-toggle__search--checked:
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: px2rem(4px);
|
right: px2rem(-44px);
|
||||||
left: initial;
|
left: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ $md-toggle__search--checked:
|
|||||||
background-color: $md-color-black--light;
|
background-color: $md-color-black--light;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: initial;
|
left: initial;
|
||||||
@ -164,14 +164,14 @@ $md-toggle__search--checked:
|
|||||||
opacity 150ms 150ms;
|
opacity 150ms 150ms;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: initial;
|
left: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
html [dir="rtl"] & {
|
html [dir="rtl"] & {
|
||||||
right: 100%;
|
right: 100%;
|
||||||
left: initial;
|
left: initial;
|
||||||
@ -187,7 +187,7 @@ $md-toggle__search--checked:
|
|||||||
float: right;
|
float: right;
|
||||||
transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
@ -225,7 +225,7 @@ $md-toggle__search--checked:
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding: 0 px2rem(72px) 0 px2rem(44px);
|
padding: 0 px2rem(72px) 0 px2rem(44px);
|
||||||
}
|
}
|
||||||
@ -239,10 +239,6 @@ $md-toggle__search--checked:
|
|||||||
~ .md-search__icon,
|
~ .md-search__icon,
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $md-color-black--light;
|
color: $md-color-black--light;
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $md-color-black--light; // TODO: currentColor?
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the "x" rendered by Internet Explorer
|
// Remove the "x" rendered by Internet Explorer
|
||||||
@ -270,14 +266,14 @@ $md-toggle__search--checked:
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: ms(0);
|
font-size: ms(0);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(44px);
|
padding-right: px2rem(44px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icon color
|
// Icon color
|
||||||
+ .md-search__icon {
|
+ .md-search__icon {
|
||||||
fill: inherit;
|
color: $md-color-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Placeholder color
|
// Placeholder color
|
||||||
@ -306,7 +302,7 @@ $md-toggle__search--checked:
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icons
|
// Icon
|
||||||
&__icon {
|
&__icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: px2rem(24px);
|
width: px2rem(24px);
|
||||||
@ -328,33 +324,41 @@ $md-toggle__search--checked:
|
|||||||
top: px2rem(6px);
|
top: px2rem(6px);
|
||||||
left: px2rem(10px);
|
left: px2rem(10px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: px2rem(10px);
|
right: px2rem(10px);
|
||||||
left: initial;
|
left: initial;
|
||||||
}
|
|
||||||
|
|
||||||
// // Set search icon on pseudo class, so it can be overridden for mobile
|
// Flip icon vertically
|
||||||
// // and tablet when the search is rendered in an overlay
|
svg {
|
||||||
// &::before {
|
transform: scaleX(-1);
|
||||||
// content: "\E8B6"; // search
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
// [tablet portrait -]: Full-screen search bar
|
// [tablet portrait -]: Full-screen search bar
|
||||||
@include break-to-device(tablet portrait) {
|
@include break-to-device(tablet portrait) {
|
||||||
top: px2rem(12px);
|
top: px2rem(12px);
|
||||||
left: px2rem(16px);
|
left: px2rem(16px);
|
||||||
|
|
||||||
// // Show back arrow instead of search icon
|
// Adjust for right-to-left languages
|
||||||
// &[for="__search"]::before {
|
[dir="rtl"] & {
|
||||||
// content: "\E5C4"; // arrow_back
|
right: px2rem(16px);
|
||||||
|
left: initial;
|
||||||
|
}
|
||||||
|
|
||||||
// // Adjust for RTL languages
|
// Hide the magnifying glass (1st icon)
|
||||||
// [dir="rtl"] & {
|
svg:first-child {
|
||||||
// content: "\E5C8"; // arrow_forward
|
display: none;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// TODO: directly include it template, then switch
|
|
||||||
|
// [tablet landscape +]: Header-embedded search
|
||||||
|
@include break-from-device(tablet landscape) {
|
||||||
|
|
||||||
|
// Hide the arrow (2nd icon)
|
||||||
|
svg:last-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -368,7 +372,7 @@ $md-toggle__search--checked:
|
|||||||
opacity 150ms;
|
opacity 150ms;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: initial;
|
right: initial;
|
||||||
left: px2rem(10px);
|
left: px2rem(10px);
|
||||||
@ -378,6 +382,12 @@ $md-toggle__search--checked:
|
|||||||
@include break-to-device(tablet portrait) {
|
@include break-to-device(tablet portrait) {
|
||||||
top: px2rem(12px);
|
top: px2rem(12px);
|
||||||
right: px2rem(16px);
|
right: px2rem(16px);
|
||||||
|
|
||||||
|
// Adjust for right-to-left languages
|
||||||
|
[dir="rtl"] & {
|
||||||
|
right: initial;
|
||||||
|
left: px2rem(16px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show reset button if search is active and input non-empty
|
// Show reset button if search is active and input non-empty
|
||||||
@ -461,7 +471,7 @@ $md-toggle__search--checked:
|
|||||||
height: px2rem(4px);
|
height: px2rem(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Style scrollbar thumb
|
// Scrollbar thumb
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $md-color-black--lighter;
|
background-color: $md-color-black--lighter;
|
||||||
|
|
||||||
@ -492,7 +502,7 @@ $md-toggle__search--checked:
|
|||||||
@include break-from-device(tablet landscape) {
|
@include break-from-device(tablet landscape) {
|
||||||
padding-left: px2rem(44px);
|
padding-left: px2rem(44px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(44px);
|
padding-right: px2rem(44px);
|
||||||
padding-left: initial;
|
padding-left: initial;
|
||||||
@ -548,7 +558,7 @@ $md-toggle__search--checked:
|
|||||||
@include break-from-device(tablet landscape) {
|
@include break-from-device(tablet landscape) {
|
||||||
padding-left: px2rem(44px);
|
padding-left: px2rem(44px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(44px);
|
padding-right: px2rem(44px);
|
||||||
padding-left: px2rem(16px);
|
padding-left: px2rem(16px);
|
||||||
@ -558,29 +568,6 @@ $md-toggle__search--checked:
|
|||||||
// Document
|
// Document
|
||||||
&--document {
|
&--document {
|
||||||
|
|
||||||
// Icon
|
|
||||||
&::before {
|
|
||||||
@extend %md-icon, %md-icon__button;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
margin: px2rem(2px);
|
|
||||||
transition: opacity 250ms;
|
|
||||||
color: $md-color-black--light;
|
|
||||||
content: "\E880"; // find_in_page
|
|
||||||
|
|
||||||
// Adjust for RTL languages
|
|
||||||
[dir="rtl"] & {
|
|
||||||
right: 0;
|
|
||||||
left: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
// [tablet portrait -]: Hide page icon
|
|
||||||
@include break-to-device(tablet portrait) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
.md-search-result__title {
|
.md-search-result__title {
|
||||||
margin: px2rem(11px) 0;
|
margin: px2rem(11px) 0;
|
||||||
@ -591,6 +578,26 @@ $md-toggle__search--checked:
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Icon
|
||||||
|
&__icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
margin: px2rem(2px);
|
||||||
|
transition: opacity 250ms;
|
||||||
|
color: $md-color-black--light;
|
||||||
|
|
||||||
|
// Adjust for right-to-left languages
|
||||||
|
[dir="rtl"] & {
|
||||||
|
right: 0;
|
||||||
|
left: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
// [tablet portrait -]: Hide page icon
|
||||||
|
@include break-to-device(tablet portrait) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
&__title {
|
&__title {
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
|
|||||||
@ -67,32 +67,22 @@ $md-toggle__drawer--checked:
|
|||||||
background-color: $md-color-white;
|
background-color: $md-color-white;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
right: px2rem(-242px);
|
right: px2rem(-242px);
|
||||||
left: initial;
|
left: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Just hide drawer, if browser doesn't support 3D transforms
|
|
||||||
.no-csstransforms3d & {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Expanded drawer
|
// Expanded drawer
|
||||||
#{$md-toggle__drawer--checked} & {
|
#{$md-toggle__drawer--checked} & {
|
||||||
@include z-depth(8);
|
@include z-depth(8);
|
||||||
|
|
||||||
transform: translateX(px2rem(242px));
|
transform: translateX(px2rem(242px));
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
transform: translateX(px2rem(-242px));
|
transform: translateX(px2rem(-242px));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Just show drawer, if browser doesn't support 3D transforms
|
|
||||||
.no-csstransforms3d & {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide overflow for nested navigation
|
// Hide overflow for nested navigation
|
||||||
@ -111,7 +101,7 @@ $md-toggle__drawer--checked:
|
|||||||
display: block;
|
display: block;
|
||||||
margin-left: calc(100% - #{px2rem(242px)});
|
margin-left: calc(100% - #{px2rem(242px)});
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: calc(100% - #{px2rem(242px)});
|
margin-right: calc(100% - #{px2rem(242px)});
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -127,7 +117,7 @@ $md-toggle__drawer--checked:
|
|||||||
@include break-from-device(screen) {
|
@include break-from-device(screen) {
|
||||||
margin-left: px2rem((1220 - 242) * 1px);
|
margin-left: px2rem((1220 - 242) * 1px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem((1220 - 242) * 1px);
|
margin-right: px2rem((1220 - 242) * 1px);
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -166,7 +156,7 @@ $md-toggle__drawer--checked:
|
|||||||
height: px2rem(4px);
|
height: px2rem(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Style scrollbar thumb
|
// Scrollbar thumb
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $md-color-black--lighter;
|
background-color: $md-color-black--lighter;
|
||||||
|
|
||||||
|
|||||||
@ -65,7 +65,7 @@
|
|||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: initial;
|
padding-right: initial;
|
||||||
padding-left: px2rem(12px);
|
padding-left: px2rem(12px);
|
||||||
@ -91,16 +91,12 @@
|
|||||||
height: px2rem(48px);
|
height: px2rem(48px);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
// Align SVG, do not scale, as this will incur strange formatting bugs
|
// Align with margin only (as opposed to normal button alignment)
|
||||||
// in Internet Explorer and Edge
|
|
||||||
svg {
|
svg {
|
||||||
width: px2rem(24px);
|
|
||||||
height: px2rem(24px);
|
|
||||||
margin-top: px2rem(12px);
|
margin-top: px2rem(12px);
|
||||||
margin-left: px2rem(12px);
|
margin-left: px2rem(12px);
|
||||||
fill: $md-color-white;
|
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(12px);
|
margin-right: px2rem(12px);
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -112,7 +108,7 @@
|
|||||||
margin-left: px2rem(-40px);
|
margin-left: px2rem(-40px);
|
||||||
padding-left: px2rem(40px);
|
padding-left: px2rem(40px);
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
margin-right: px2rem(-40px);
|
margin-right: px2rem(-40px);
|
||||||
margin-left: initial;
|
margin-left: initial;
|
||||||
@ -153,7 +149,7 @@
|
|||||||
&__fact {
|
&__fact {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
// Adjust for RTL languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
@ -175,60 +171,3 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Source file
|
|
||||||
.md-source-file {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 1em 0.5em 1em 0;
|
|
||||||
padding-right: px2rem(5px);
|
|
||||||
border-radius: px2rem(2px);
|
|
||||||
background-color: $md-color-black--lightest;
|
|
||||||
font-size: ms(-1);
|
|
||||||
list-style-type: none;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// Icon
|
|
||||||
&::before {
|
|
||||||
@extend %md-icon;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: px2rem(5px);
|
|
||||||
padding: px2rem(5px);
|
|
||||||
background-color: $md-color-black--lighter;
|
|
||||||
color: $md-color-white;
|
|
||||||
font-size: ms(0);
|
|
||||||
content: "\E86F"; // code
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Some properties need to be set with higher specificity due to the default
|
|
||||||
// styling of text links inside typesetted content
|
|
||||||
html & {
|
|
||||||
transition:
|
|
||||||
background 400ms,
|
|
||||||
color 400ms,
|
|
||||||
box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
|
|
||||||
// Icon
|
|
||||||
&::before {
|
|
||||||
transition: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Color needs even higher specifity because custom color palettes are set
|
|
||||||
// using the body and override text links inside typesetted content
|
|
||||||
html body .md-typeset & {
|
|
||||||
color: $md-color-black--light;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hovered source file
|
|
||||||
&:hover {
|
|
||||||
@include z-depth-focus;
|
|
||||||
|
|
||||||
// Icon
|
|
||||||
&::before {
|
|
||||||
background-color: $md-color-accent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -126,7 +126,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Hide site title
|
// Hide site title
|
||||||
.md-nav__title--site {
|
.md-nav__title[for="__drawer"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -44,10 +44,6 @@
|
|||||||
/// )
|
/// )
|
||||||
/// );
|
/// );
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access private
|
|
||||||
/// @type Map
|
|
||||||
///
|
|
||||||
$break-devices: () !default;
|
$break-devices: () !default;
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
@ -57,11 +53,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// Choose minimum and maximum device widths
|
/// Choose minimum and maximum device widths
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access private
|
|
||||||
/// @param {Map} $devices Map of devices
|
|
||||||
/// @return {List} Minimum and maximum width
|
|
||||||
///
|
|
||||||
@function break-select-min-max($devices) {
|
@function break-select-min-max($devices) {
|
||||||
$min: 1000000;
|
$min: 1000000;
|
||||||
$max: 0;
|
$max: 0;
|
||||||
@ -93,11 +84,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// Select minimum and maximum widths for a device breakpoint
|
/// Select minimum and maximum widths for a device breakpoint
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access private
|
|
||||||
/// @param {String} $device Device
|
|
||||||
/// @return {List} Minimum and maximum width
|
|
||||||
///
|
|
||||||
@function break-select-device($device) {
|
@function break-select-device($device) {
|
||||||
$current: $break-devices;
|
$current: $break-devices;
|
||||||
@for $n from 1 through length($device) {
|
@for $n from 1 through length($device) {
|
||||||
@ -120,10 +106,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// A minimum-maximum media query breakpoint
|
/// A minimum-maximum media query breakpoint
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {Number|List} $breakpoint Number or number pair
|
|
||||||
///
|
|
||||||
@mixin break-at($breakpoint) {
|
@mixin break-at($breakpoint) {
|
||||||
@if type-of($breakpoint) == number {
|
@if type-of($breakpoint) == number {
|
||||||
@media only screen and (min-width: $breakpoint) {
|
@media only screen and (min-width: $breakpoint) {
|
||||||
@ -147,10 +129,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// An orientation media query breakpoint
|
/// An orientation media query breakpoint
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {String} $breakpoint Orientation
|
|
||||||
///
|
|
||||||
@mixin break-at-orientation($breakpoint) {
|
@mixin break-at-orientation($breakpoint) {
|
||||||
@if type-of($breakpoint) == string {
|
@if type-of($breakpoint) == string {
|
||||||
@media only screen and (orientation: $breakpoint) {
|
@media only screen and (orientation: $breakpoint) {
|
||||||
@ -164,10 +142,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// A maximum-aspect-ratio media query breakpoint
|
/// A maximum-aspect-ratio media query breakpoint
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {Number} $breakpoint Ratio
|
|
||||||
///
|
|
||||||
@mixin break-at-ratio($breakpoint) {
|
@mixin break-at-ratio($breakpoint) {
|
||||||
@if type-of($breakpoint) == number {
|
@if type-of($breakpoint) == number {
|
||||||
@media only screen and (max-aspect-ratio: $breakpoint) {
|
@media only screen and (max-aspect-ratio: $breakpoint) {
|
||||||
@ -181,10 +155,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// A minimum-maximum media query device breakpoint
|
/// A minimum-maximum media query device breakpoint
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {String|List} $breakpoint Device
|
|
||||||
///
|
|
||||||
@mixin break-at-device($device) {
|
@mixin break-at-device($device) {
|
||||||
@if type-of($device) == string {
|
@if type-of($device) == string {
|
||||||
$device: $device,;
|
$device: $device,;
|
||||||
@ -208,10 +178,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// A minimum media query device breakpoint
|
/// A minimum media query device breakpoint
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {String|List} $breakpoint Device
|
|
||||||
///
|
|
||||||
@mixin break-from-device($device) {
|
@mixin break-from-device($device) {
|
||||||
@if type-of($device) == string {
|
@if type-of($device) == string {
|
||||||
$device: $device,;
|
$device: $device,;
|
||||||
@ -230,10 +196,6 @@ $break-devices: () !default;
|
|||||||
///
|
///
|
||||||
/// A maximum media query device breakpoint
|
/// A maximum media query device breakpoint
|
||||||
///
|
///
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {String|List} $breakpoint Device
|
|
||||||
///
|
|
||||||
@mixin break-to-device($device) {
|
@mixin break-to-device($device) {
|
||||||
@if type-of($device) == string {
|
@if type-of($device) == string {
|
||||||
$device: $device,;
|
$device: $device,;
|
||||||
|
|||||||
@ -27,13 +27,7 @@
|
|||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
|
||||||
///
|
///
|
||||||
/// Convert font size in px to em.
|
/// Convert font size in px to em
|
||||||
///
|
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {Number} $size Font size in px
|
|
||||||
/// @param {Number} $base Base font size
|
|
||||||
/// @return {Number} Font size in em
|
|
||||||
///
|
///
|
||||||
@function px2em($size, $base: 16px) {
|
@function px2em($size, $base: 16px) {
|
||||||
@if unit($size) == px {
|
@if unit($size) == px {
|
||||||
@ -48,13 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
///
|
///
|
||||||
/// Convert font size in px to rem.
|
/// Convert font size in px to rem
|
||||||
///
|
|
||||||
/// @group helpers
|
|
||||||
/// @access public
|
|
||||||
/// @param {Number} $size Font size in px
|
|
||||||
/// @param {Number} $base Base font size
|
|
||||||
/// @return {Number} Font size in rem
|
|
||||||
///
|
///
|
||||||
@function px2rem($size, $base: 20px) {
|
@function px2rem($size, $base: 20px) {
|
||||||
@if unit($size) == px {
|
@if unit($size) == px {
|
||||||
|
|||||||
@ -291,15 +291,40 @@
|
|||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<!-- Edit button, if URL was defined -->
|
<!-- Edit button -->
|
||||||
{% if page.edit_url %}
|
{% if page.edit_url %}
|
||||||
<a
|
<a
|
||||||
href="{{ page.edit_url }}"
|
href="{{ page.edit_url }}"
|
||||||
title="{{ lang.t('edit.link.title') }}"
|
title="{{ lang.t('edit.link.title') }}"
|
||||||
class="md-icon md-content__icon"
|
class="md-content__button md-icon"
|
||||||
><!-- edit --></a>
|
>
|
||||||
|
{% include ".icons/material/pencil.svg" %}
|
||||||
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Link to source file -->
|
||||||
|
{% block source %}
|
||||||
|
{% if page and page.meta and page.meta.source %}
|
||||||
|
{% set repo = config.repo_url %}
|
||||||
|
{% if repo | last == "/" %}
|
||||||
|
{% set repo = repo[:-1] %}
|
||||||
|
{% endif %}
|
||||||
|
{% set path = page.meta.path | default([""]) %}
|
||||||
|
{% set file = page.meta.source %}
|
||||||
|
{% set repo_icon = config.extra.repo_icon | default(
|
||||||
|
"fontawesome/brands/git-alt"
|
||||||
|
) %}
|
||||||
|
<a
|
||||||
|
href="{{ [repo, path, page.meta.source] | join('/') }}"
|
||||||
|
title="{{ file }}"
|
||||||
|
class="md-content__button md-icon"
|
||||||
|
>
|
||||||
|
{{ lang.t("meta.source") }}
|
||||||
|
{% include ".icons/" ~ repo_icon ~ ".svg" %}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Hack: check whether the content contains a h1 headline. If it
|
Hack: check whether the content contains a h1 headline. If it
|
||||||
doesn't, the page title (or respectively site name) is used
|
doesn't, the page title (or respectively site name) is used
|
||||||
@ -312,26 +337,6 @@
|
|||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
{{ page.content }}
|
{{ page.content }}
|
||||||
|
|
||||||
<!-- Source files -->
|
|
||||||
{% block source %}
|
|
||||||
{% if page and page.meta and page.meta.source %}
|
|
||||||
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
|
|
||||||
{% set repo = config.repo_url %}
|
|
||||||
{% if repo | last == "/" %}
|
|
||||||
{% set repo = repo[:-1] %}
|
|
||||||
{% endif %}
|
|
||||||
{% set path = page.meta.path | default([""]) %}
|
|
||||||
{% set file = page.meta.source %}
|
|
||||||
<a
|
|
||||||
href="{{ [repo, path, file] | join('/') }}"
|
|
||||||
title="{{ file }}"
|
|
||||||
class="md-source-file"
|
|
||||||
>
|
|
||||||
{{ file }}
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
<!-- Support for mkdocs-git-revision-date-localized-plugin -->
|
<!-- Support for mkdocs-git-revision-date-localized-plugin -->
|
||||||
{% if page and page.meta and (
|
{% if page and page.meta and (
|
||||||
page.meta.git_revision_date_localized or
|
page.meta.git_revision_date_localized or
|
||||||
|
|||||||
@ -35,23 +35,19 @@
|
|||||||
<a
|
<a
|
||||||
href="{{ page.previous_page.url | url }}"
|
href="{{ page.previous_page.url | url }}"
|
||||||
title="{{ page.previous_page.title | striptags }}"
|
title="{{ page.previous_page.title | striptags }}"
|
||||||
class="md-flex md-footer-nav__link md-footer-nav__link--prev"
|
class="md-footer-nav__link md-footer-nav__link--prev"
|
||||||
rel="prev"
|
rel="prev"
|
||||||
>
|
>
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<div class="md-icon md-icon__button">
|
||||||
<div class="md-footer-nav__button">
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
{% include ".icons/material/arrow-left.svg" %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="md-footer-nav__title">
|
||||||
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
|
<div class="md-ellipsis">
|
||||||
>
|
|
||||||
<span class="md-flex__ellipsis">
|
|
||||||
<span class="md-footer-nav__direction">
|
<span class="md-footer-nav__direction">
|
||||||
{{ lang.t("footer.previous") }}
|
{{ lang.t("footer.previous") }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.previous_page.title }}
|
{{ page.previous_page.title }}
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -61,24 +57,20 @@
|
|||||||
<a
|
<a
|
||||||
href="{{ page.next_page.url | url }}"
|
href="{{ page.next_page.url | url }}"
|
||||||
title="{{ page.next_page.title | striptags }}"
|
title="{{ page.next_page.title | striptags }}"
|
||||||
class="md-flex md-footer-nav__link md-footer-nav__link--next"
|
class="md-footer-nav__link md-footer-nav__link--next"
|
||||||
rel="next"
|
rel="next"
|
||||||
>
|
>
|
||||||
<div
|
<div class="md-footer-nav__title">
|
||||||
class="md-flex__cell md-flex__cell--stretch md-footer-nav__title"
|
<div class="md-ellipsis">
|
||||||
>
|
|
||||||
<span class="md-flex__ellipsis">
|
|
||||||
<span class="md-footer-nav__direction">
|
<span class="md-footer-nav__direction">
|
||||||
{{ lang.t("footer.next") }}
|
{{ lang.t("footer.next") }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.next_page.title }}
|
{{ page.next_page.title }}
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
|
||||||
<div class="md-footer-nav__button">
|
|
||||||
{% include ".icons/material/arrow-right.svg" %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="md-icon md-icon__button">
|
||||||
|
{% include ".icons/material/arrow-right.svg" %}
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -25,75 +25,70 @@
|
|||||||
|
|
||||||
<!-- Top-level navigation -->
|
<!-- Top-level navigation -->
|
||||||
<nav class="md-header-nav md-grid">
|
<nav class="md-header-nav md-grid">
|
||||||
<div class="md-flex">
|
|
||||||
|
|
||||||
<!-- Link to home -->
|
<!-- Link to home -->
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
<a
|
||||||
<a
|
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
|
||||||
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
|
title="{{ config.site_name }}"
|
||||||
title="{{ config.site_name }}"
|
aria-label="{{ config.site_name }}"
|
||||||
aria-label="{{ config.site_name }}"
|
class="md-header-nav__button md-logo"
|
||||||
class="md-header-nav__button md-logo"
|
>
|
||||||
>
|
{% if config.theme.logo.icon %}
|
||||||
{% if config.theme.logo.icon %}
|
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
||||||
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
{% else %}
|
||||||
{% else %}
|
<img
|
||||||
<img
|
src="{{ config.theme.logo | url }}"
|
||||||
src="{{ config.theme.logo | url }}"
|
width="24"
|
||||||
width="24"
|
height="24"
|
||||||
height="24"
|
alt="logo"
|
||||||
alt="logo"
|
/>
|
||||||
/>
|
{% endif %}
|
||||||
{% endif %}
|
</a>
|
||||||
</a>
|
<label
|
||||||
<label class="md-header-nav__button" for="__drawer">
|
class="md-header-nav__button md-icon md-icon__button"
|
||||||
{% include ".icons/material/menu.svg" %}
|
for="__drawer"
|
||||||
</label>
|
>
|
||||||
</div>
|
{% include ".icons/material/menu.svg" %}
|
||||||
|
</label>
|
||||||
|
|
||||||
<!-- Header title -->
|
<!-- Header title -->
|
||||||
<div class="md-flex__cell md-flex__cell--stretch">
|
<div class="md-header-nav__title" data-md-component="header-title">
|
||||||
<div
|
<div class="md-header-nav__ellipsis md-ellipsis">
|
||||||
class="md-flex__ellipsis md-header-nav__title"
|
{% if config.site_name == page.title %}
|
||||||
data-md-component="header-title"
|
{{ config.site_name }}
|
||||||
>
|
{% else %}
|
||||||
{% if config.site_name == page.title %}
|
<span class="md-header-nav__topic">
|
||||||
{{ config.site_name }}
|
{{ config.site_name }}
|
||||||
{% else %}
|
</span>
|
||||||
<span class="md-header-nav__topic">
|
<span class="md-header-nav__topic">
|
||||||
{{ config.site_name }}
|
{% if page and page.meta and page.meta.title %}
|
||||||
</span>
|
{{ page.meta.title }}
|
||||||
<span class="md-header-nav__topic">
|
{% else %}
|
||||||
{% if page and page.meta and page.meta.title %}
|
{{ page.title }}
|
||||||
{{ page.meta.title }}
|
{% endif %}
|
||||||
{% else %}
|
</span>
|
||||||
{{ page.title }}
|
|
||||||
{% endif %}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Button to open search dialogue -->
|
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
|
||||||
{% if "search" in config["plugins"] %}
|
|
||||||
<label class="md-header-nav__button" for="__search">
|
|
||||||
{% include ".icons/material/magnify.svg" %}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Search interface -->
|
|
||||||
{% include "partials/search.html" %}
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Repository containing source -->
|
|
||||||
{% if config.repo_url %}
|
|
||||||
<div class="md-flex__cell md-flex__cell--shrink">
|
|
||||||
<div class="md-header-nav__source">
|
|
||||||
{% include "partials/source.html" %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Button to open search dialogue -->
|
||||||
|
{% if "search" in config["plugins"] %}
|
||||||
|
<label
|
||||||
|
class="md-header-nav__button md-icon md-icon__button"
|
||||||
|
for="__search"
|
||||||
|
>
|
||||||
|
{% include ".icons/material/magnify.svg" %}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Search interface -->
|
||||||
|
{% include "partials/search.html" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Repository containing source -->
|
||||||
|
{% if config.repo_url %}
|
||||||
|
<div class="md-header-nav__source">
|
||||||
|
{% include "partials/source.html" %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
<!-- Active checkbox expands items contained within nested section -->
|
<!-- Active checkbox expands items contained within nested section -->
|
||||||
{% if nav_item.active %}
|
{% if nav_item.active %}
|
||||||
<input
|
<input
|
||||||
class="md-toggle md-nav__toggle"
|
class="md-nav__toggle md-toggle"
|
||||||
data-md-toggle="{{ path }}"
|
data-md-toggle="{{ path }}"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="{{ path }}"
|
id="{{ path }}"
|
||||||
@ -41,7 +41,7 @@
|
|||||||
/>
|
/>
|
||||||
{% else %}
|
{% else %}
|
||||||
<input
|
<input
|
||||||
class="md-toggle md-nav__toggle"
|
class="md-nav__toggle md-toggle"
|
||||||
data-md-toggle="{{ path }}"
|
data-md-toggle="{{ path }}"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="{{ path }}"
|
id="{{ path }}"
|
||||||
@ -51,9 +51,15 @@
|
|||||||
<!-- Expand active pages -->
|
<!-- Expand active pages -->
|
||||||
<label class="md-nav__link" for="{{ path }}">
|
<label class="md-nav__link" for="{{ path }}">
|
||||||
{{ nav_item.title }}
|
{{ nav_item.title }}
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/chevron-right.svg" %}
|
||||||
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<nav class="md-nav" data-md-level="{{ level }}">
|
<nav class="md-nav" data-md-level="{{ level }}">
|
||||||
<label class="md-nav__title" for="{{ path }}">
|
<label class="md-nav__title" for="{{ path }}">
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
|
</span>
|
||||||
{{ nav_item.title }}
|
{{ nav_item.title }}
|
||||||
</label>
|
</label>
|
||||||
<ul class="md-nav__list" data-md-scrollfix>
|
<ul class="md-nav__list" data-md-scrollfix>
|
||||||
@ -76,7 +82,7 @@
|
|||||||
|
|
||||||
<!-- Active checkbox expands items contained within nested section -->
|
<!-- Active checkbox expands items contained within nested section -->
|
||||||
<input
|
<input
|
||||||
class="md-toggle md-nav__toggle"
|
class="md-nav__toggle md-toggle"
|
||||||
data-md-toggle="toc"
|
data-md-toggle="toc"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="__toc"
|
id="__toc"
|
||||||
@ -91,6 +97,9 @@
|
|||||||
{% if toc_ | first is defined %}
|
{% if toc_ | first is defined %}
|
||||||
<label class="md-nav__link md-nav__link--active" for="__toc">
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
||||||
{{ nav_item.title }}
|
{{ nav_item.title }}
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/table-of-contents.svg" %}
|
||||||
|
</span>
|
||||||
</label>
|
</label>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a
|
<a
|
||||||
|
|||||||
@ -24,14 +24,15 @@
|
|||||||
<nav class="md-nav md-nav--primary" data-md-level="0">
|
<nav class="md-nav md-nav--primary" data-md-level="0">
|
||||||
|
|
||||||
<!-- Site title -->
|
<!-- Site title -->
|
||||||
<label class="md-nav__title md-nav__title--site" for="__drawer">
|
<label class="md-nav__title" for="__drawer">
|
||||||
<a
|
<a
|
||||||
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
|
href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
|
||||||
title="{{ config.site_name }}"
|
title="{{ config.site_name }}"
|
||||||
|
aria-label="{{ config.site_name }}"
|
||||||
class="md-nav__button md-logo"
|
class="md-nav__button md-logo"
|
||||||
>
|
>
|
||||||
{% if config.theme.logo.icon %}
|
{% if config.theme.logo.icon %}
|
||||||
<i class="md-icon">{{ config.theme.logo.icon }}</i>
|
{% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<img
|
<img
|
||||||
src="{{ config.theme.logo | url }}"
|
src="{{ config.theme.logo | url }}"
|
||||||
|
|||||||
@ -41,12 +41,13 @@
|
|||||||
data-md-state="active"
|
data-md-state="active"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<label class="md-search__icon" for="__search">
|
<label class="md-search__icon md-icon" for="__search">
|
||||||
{% include ".icons/material/magnify.svg" %}
|
{% include ".icons/material/magnify.svg" %}
|
||||||
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
</label>
|
</label>
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="reset"
|
||||||
class="md-search__icon"
|
class="md-search__icon md-icon"
|
||||||
data-md-component="search-reset"
|
data-md-component="search-reset"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -28,7 +28,7 @@
|
|||||||
title="{{ lang.t('source.link.title') }}"
|
title="{{ lang.t('source.link.title') }}"
|
||||||
class="md-source"
|
class="md-source"
|
||||||
>
|
>
|
||||||
<div class="md-source__icon">
|
<div class="md-source__icon md-icon">
|
||||||
{% set repo_icon = config.extra.repo_icon | default(
|
{% set repo_icon = config.extra.repo_icon | default(
|
||||||
"fontawesome/brands/git-alt"
|
"fontawesome/brands/git-alt"
|
||||||
) %}
|
) %}
|
||||||
|
|||||||
@ -38,35 +38,16 @@
|
|||||||
|
|
||||||
<!-- Render item list -->
|
<!-- Render item list -->
|
||||||
{% if toc_ | first is defined %}
|
{% if toc_ | first is defined %}
|
||||||
<label class="md-nav__title" for="__toc">{{ lang.t("toc.title") }}</label>
|
<label class="md-nav__title" for="__toc">
|
||||||
|
<span class="md-nav__icon md-icon">
|
||||||
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
|
</span>
|
||||||
|
{{ lang.t("toc.title") }}
|
||||||
|
</label>
|
||||||
<ul class="md-nav__list" data-md-scrollfix>
|
<ul class="md-nav__list" data-md-scrollfix>
|
||||||
{% for toc_item in toc_ %}
|
{% for toc_item in toc_ %}
|
||||||
{% include "partials/toc-item.html" %}
|
{% include "partials/toc-item.html" %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<!-- Source files -->
|
|
||||||
{% if page.meta.source and page.meta.source | length > 0 %}
|
|
||||||
<li class="md-nav__item">
|
|
||||||
<a href="#__source" class="md-nav__link md-nav__link--active">
|
|
||||||
{{ lang.t("meta.source") }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Set from config but allow override -->
|
|
||||||
{% set disqus = config.extra.disqus %}
|
|
||||||
{% if page and page.meta and page.meta.disqus is string %}
|
|
||||||
{% set disqus = page.meta.disqus %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Disqus integration -->
|
|
||||||
{% if not page.is_homepage and disqus %}
|
|
||||||
<li class="md-nav__item">
|
|
||||||
<a href="#__comments" class="md-nav__link md-nav__link--active">
|
|
||||||
{{ lang.t("meta.comments") }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -173,7 +173,7 @@ function config(args: Configuration): Configuration {
|
|||||||
entrypoints: false,
|
entrypoints: false,
|
||||||
excludeAssets: [
|
excludeAssets: [
|
||||||
/\.(icons)/,
|
/\.(icons)/,
|
||||||
/\/(fonts|images|lunr)\//,
|
/\/(images|lunr)\//,
|
||||||
/\.(html|py|yml)$/
|
/\.(html|py|yml)$/
|
||||||
],
|
],
|
||||||
warningsFilter: [
|
warningsFilter: [
|
||||||
@ -217,7 +217,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
|||||||
plugins: [
|
plugins: [
|
||||||
...base.plugins,
|
...base.plugins,
|
||||||
|
|
||||||
/* Copy FontAwesome SVGs to dot directory, so MkDocs ignores them */
|
/* FontAwesome icons */
|
||||||
new CopyPlugin([
|
new CopyPlugin([
|
||||||
{ to: ".icons/fontawesome", from: "**/*.svg" },
|
{ to: ".icons/fontawesome", from: "**/*.svg" },
|
||||||
{ to: ".icons/fontawesome", from: "../LICENSE.txt" }
|
{ to: ".icons/fontawesome", from: "../LICENSE.txt" }
|
||||||
@ -225,7 +225,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
|||||||
context: "node_modules/@fortawesome/fontawesome-free/svgs"
|
context: "node_modules/@fortawesome/fontawesome-free/svgs"
|
||||||
}),
|
}),
|
||||||
|
|
||||||
/* Copy Material icons SVGs to dot directory, so MkDocs ignores them */
|
/* Material icons */
|
||||||
new CopyPlugin([
|
new CopyPlugin([
|
||||||
{
|
{
|
||||||
to: ".icons/material/[name].svg",
|
to: ".icons/material/[name].svg",
|
||||||
@ -237,7 +237,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
|||||||
context: "node_modules/material-design-icons-svg/paths"
|
context: "node_modules/material-design-icons-svg/paths"
|
||||||
}),
|
}),
|
||||||
|
|
||||||
/* Copy search stemmers and segmenters */
|
/* Search stemmers and segmenters */
|
||||||
new CopyPlugin([
|
new CopyPlugin([
|
||||||
{ to: "assets/javascripts/lunr", from: "min/*.js" },
|
{ to: "assets/javascripts/lunr", from: "min/*.js" },
|
||||||
{
|
{
|
||||||
@ -249,13 +249,10 @@ export default (_env: never, args: Configuration): Configuration[] => {
|
|||||||
context: "node_modules/lunr-languages"
|
context: "node_modules/lunr-languages"
|
||||||
}),
|
}),
|
||||||
|
|
||||||
/* Copy assets like fonts and images */
|
/* Template files */
|
||||||
new CopyPlugin([
|
new CopyPlugin([
|
||||||
{ from: "assets/fonts/**/*.!(css)" },
|
{ from: "assets/images/*" },
|
||||||
{ from: "assets/images/*.{ico,png,svg}" },
|
|
||||||
{ from: "**/*.{py,yml}" },
|
{ from: "**/*.{py,yml}" },
|
||||||
|
|
||||||
/* Copy and minify HTML */
|
|
||||||
{
|
{
|
||||||
from: "**/*.html",
|
from: "**/*.html",
|
||||||
transform: content => {
|
transform: content => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user