OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge of Insider features part of 'Prairie Fire' funding goal

Browse Source
This commit is contained in:
squidfunk 2020-12-20 15:00:21 +01:00
parent 46033d7415
commit d754bd9a71
67 changed files with 1449 additions and 1527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/javascripts/bundle.4a6c075e.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.4a6c075e.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/bundle.f81dfb4d.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.f81dfb4d.min.js.map
View File

File diff suppressed because one or more lines are too long

16
material/assets/manifest.json
View File

@ -1,14 +1,14 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.f81dfb4d.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.f81dfb4d.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.4a6c075e.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4a6c075e.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.0ac82a11.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0ac82a11.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.4ac00218.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.4ac00218.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.19753c6b.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.19753c6b.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.9ed35d6f.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.9ed35d6f.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.196e0c26.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.196e0c26.min.css.map"
"assets/stylesheets/main.css": "assets/stylesheets/main.0e475462.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.0e475462.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.cff55ccf.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.cff55ccf.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.7cb87594.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.7cb87594.min.css.map"
}

3
material/assets/stylesheets/main.0e475462.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.0e475462.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

3
material/assets/stylesheets/main.19753c6b.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.19753c6b.min.css.map
View File

File diff suppressed because one or more lines are too long

3
material/assets/stylesheets/overrides.9ed35d6f.min.css vendored
View File

@ -1,3 +0,0 @@
.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}@media screen and (max-width: 29.9375em){.md-typeset .tx-columns{-moz-columns:initial;columns:initial}}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:hover,.tx-hero .md-button:focus{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
/*# sourceMappingURL=overrides.9ed35d6f.min.css.map*/

1
material/assets/stylesheets/overrides.9ed35d6f.min.css.map
View File

File diff suppressed because one or more lines are too long

3
material/assets/stylesheets/overrides.cff55ccf.min.css vendored Normal file
View File

@ -0,0 +1,3 @@
.md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:focus,.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}@media screen and (max-width: 29.9375em){.md-typeset .tx-columns{-moz-columns:initial;columns:initial}}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:hover,.tx-hero .md-button:focus{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
/*# sourceMappingURL=overrides.cff55ccf.min.css.map*/

1
material/assets/stylesheets/overrides.cff55ccf.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.196e0c26.min.css.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/palette.196e0c26.min.css → material/assets/stylesheets/palette.7cb87594.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.7cb87594.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

33
material/base.html
View File

@ -18,14 +18,14 @@
{% elif config.site_keywords %}
<meta name="keywords" content="{{ config.site_keywords }}">
{% endif %}
{% if page.canonical_url %}
<link rel="canonical" href="{{ page.canonical_url }}">
{% endif %}
{% if page and page.meta and page.meta.author %}
<meta name="author" content="{{ page.meta.author }}">
{% elif config.site_author %}
<meta name="author" content="{{ config.site_author }}">
{% endif %}
{% if page.canonical_url %}
<link rel="canonical" href="{{ page.canonical_url }}">
{% endif %}
<link rel="shortcut icon" href="{{ config.theme.favicon | url }}">
<meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-6.1.7">
{% endblock %}
@ -39,10 +39,10 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.19753c6b.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.0e475462.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.196e0c26.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.7cb87594.min.css' | url }}">
{% if palette.primary %}
{% import "partials/palette.html" as map %}
{% set primary = map.primary(
@ -56,7 +56,7 @@
{% block fonts %}
{% if config.theme.font != false %}
{% set font = config.theme.font %}
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{
font.text | replace(' ', '+') + ':300,400,400i,700%7C' +
font.code | replace(' ', '+')
@ -93,6 +93,7 @@
{% else %}
<body dir="{{ direction }}">
{% endif %}
{% set features = config.theme.features or [] %}
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
@ -119,7 +120,7 @@
<div class="md-container" data-md-component="container">
{% block hero %}{% endblock %}
{% block tabs %}
{% if "navigation.tabs" in config.theme.features %}
{% if "navigation.tabs" in features %}
{% include "partials/tabs.html" %}
{% endif %}
{% endblock %}
@ -127,7 +128,10 @@
<div class="md-main__inner md-grid">
{% block site_nav %}
{% if nav %}
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
{% if page and page.meta and page.meta.hide %}
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
{% endif %}
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation" {{ hidden }}>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
@ -135,8 +139,11 @@
</div>
</div>
{% endif %}
{% if page.toc %}
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
{% if page.toc and not "toc.integrate" in features %}
{% if page and page.meta and page.meta.hide %}
{% set hidden = "hidden" if "toc" in page.meta.hide %}
{% endif %}
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc" {{ hidden }}>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
@ -154,7 +161,7 @@
</a>
{% endif %}
{% if not "\x3ch1" in page.content %}
<h1>{{ page.title | default(config.site_name, true)}}</h1>
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
{{ page.content }}
{% if page and page.meta %}
@ -178,7 +185,7 @@
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.0ac82a11.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.f81dfb4d.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.4a6c075e.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",
@ -204,7 +211,7 @@
<script>
app = initialize({
base: "{{ base_url }}",
features: {{ config.theme.features or [] | tojson }},
features: {{ features or [] | tojson }},
search: Object.assign({
worker: "{{ 'assets/javascripts/worker/search.4ac00218.min.js' | url }}"
}, typeof search !== "undefined" && search)

2
material/overrides/main.html
View File

@ -22,7 +22,7 @@
<meta name="twitter:title" content="{{ title }}">
<meta name="twitter:description" content="{{ config.site_description }}">
<meta name="twitter:image" content="{{ image }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.9ed35d6f.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.cff55ccf.min.css' | url }}">
{% endblock %}
{% block announce %}
<a href="https://twitter.com/squidfunk">

18
material/partials/header.html
View File

@ -1,7 +1,7 @@
{#-
This file was automatically generated - do not edit
-#}
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
{% set site_url = site_url ~ "/index.html" %}
{% endif %}
@ -14,16 +14,14 @@
{% include ".icons/material/menu" ~ ".svg" %}
</label>
<div class="md-header-nav__title" data-md-component="header-title">
{% if config.site_name == page.title %}
<div class="md-header-nav__ellipsis md-ellipsis">
{{ config.site_name }}
</div>
{% else %}
<div class="md-header-nav__ellipsis">
<span class="md-header-nav__topic md-ellipsis">
<div class="md-header-nav__ellipsis">
<div class="md-header-nav__topic">
<span class="md-ellipsis">
{{ config.site_name }}
</span>
<span class="md-header-nav__topic md-ellipsis">
</div>
<div class="md-header-nav__topic">
<span class="md-ellipsis">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
{% else %}
@ -31,7 +29,7 @@
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
{% if "search" in config["plugins"] %}
<label class="md-header-nav__button md-icon" for="__search">

2
material/partials/language/es.html
View File

@ -23,7 +23,7 @@
"search.result.other": "# documentos encontrados",
"search.result.more.one": "1 más en esta página",
"search.result.more.other": "# más en esta página",
"search.result.term.missing": "Desaparecido",
"search.result.term.missing": "Falta",
"skip.link.title": "Saltar a contenido",
"source.link.title": "Ir al repositorio",
"source.revision.date": "Última actualización",

14
material/partials/nav-item.html
View File

@ -1,14 +1,24 @@
{#-
This file was automatically generated - do not edit
-#}
{% set features = config.theme.features or [] %}
{% set class = "md-nav__item" %}
{% if nav_item.active %}
{% set class = "md-nav__item md-nav__item--active" %}
{% set class = class ~ " md-nav__item--active" %}
{% endif %}
{% if nav_item.children %}
{% if "navigation.sections" in features and level == 1 + (
"navigation.tabs" in features
) %}
{% set class = class ~ " md-nav__item--section" %}
{% endif %}
<li class="{{ class }} md-nav__item--nested">
{% set checked = "checked" if nav_item.active %}
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
{% if "navigation.expand" in features and not checked %}
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" data-md-state="indeterminate" type="checkbox" id="{{ path }}" checked>
{% else %}
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
{% endif %}
<label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }}
<span class="md-nav__icon md-icon"></span>

11
material/partials/nav.html
View File

@ -1,11 +1,18 @@
{#-
This file was automatically generated - do not edit
-#}
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
{% set site_url = site_url ~ "/index.html" %}
{% endif %}
<nav class="md-nav md-nav--primary" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
{% set class = "md-nav md-nav--primary" %}
{% if "navigation.tabs" in features %}
{% set class = class ~ " md-nav--lifted" %}
{% endif %}
{% if "toc.integrate" in features %}
{% set class = class ~ " md-nav--integrated" %}
{% endif %}
<nav class="{{ class }}" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="{{ site_url }}" title="{{ config.site_name | e }}" class="md-nav__button md-logo" aria-label="{{ config.site_name }}">
{% include "partials/logo.html" %}

34
material/partials/tabs-item.html
View File

@ -1,35 +1,27 @@
{#-
This file was automatically generated - do not edit
-#}
{% if nav_item.is_homepage or nav_item.url == "index.html" %}
<li class="md-tabs__item">
{% set class = "md-tabs__link" %}
{% if not page.ancestors | length and nav | selectattr("url", page.url) %}
{% set class = "md-tabs__link md-tabs__link--active" %}
{% endif %}
<a href="{{ nav_item.url | url }}" class="{{ class }}">
{{ nav_item.title }}
</a>
</li>
{% elif nav_item.children and nav_item.children | length > 0 %}
{% set title = title | default(nav_item.title) %}
{% if (nav_item.children | first).children %}
{% set nav_item = nav_item.children | first %}
{% if not class %}
{% set class = "md-tabs__link" %}
{% if nav_item.active %}
{% set class = class ~ " md-tabs__link--active" %}
{% endif %}
{% endif %}
{% if nav_item.children %}
{% set title = title | d(nav_item.title) %}
{% set nav_item = nav_item.children | first %}
{% if nav_item.children %}
{% include "partials/tabs-item.html" %}
{% else %}
<li class="md-tabs__item">
{% set class = "md-tabs__link" %}
{% if nav_item.active %}
{% set class = "md-tabs__link md-tabs__link--active" %}
{% endif %}
<a href="{{ (nav_item.children | first).url | url }}" class="{{ class }}">
<a href="{{ nav_item.url | url }}" class="{{ class }}">
{{ title }}
</a>
</li>
{% endif %}
{% elif nav_item.url.startswith("http") %}
{% else %}
<li class="md-tabs__item">
<a href="{{ nav_item.url | url }}" class="md-tabs__link">
<a href="{{ nav_item.url | url }}" class="{{ class }}">
{{ nav_item.title }}
</a>
</li>

7
material/partials/tabs.html
View File

@ -1,11 +1,8 @@
{#-
This file was automatically generated - do not edit
-#}
{% set class = "md-tabs" %}
{% if page.ancestors | length > 0 %}
{% set class = "md-tabs md-tabs--active" %}
{% endif %}
<nav class="{{ class }}" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
{% set class = "" %}
<nav class="md-tabs" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
{% for nav_item in nav %}

1
mkdocs.yml
View File

@ -51,6 +51,7 @@ theme:
# Default values, taken from mkdocs_theme.yml
language: en
features:
- navigation.sections
- navigation.tabs
#- navigation.instant
palette:

53
src/assets/javascripts/index.ts
View File

@ -46,7 +46,9 @@ import {
take,
shareReplay,
catchError,
map
map,
bufferCount,
distinctUntilKeyChanged
} from "rxjs/operators"
import {
@ -60,7 +62,8 @@ import {
watchViewport,
isLocalLocation,
setLocationHash,
watchLocationBase
watchLocationBase,
getElement
} from "browser"
import {
mountHeader,
@ -397,16 +400,42 @@ export function initialize(config: unknown) {
/* ----------------------------------------------------------------------- */
/* Unhide permalinks on first tab */
keyboard$
.pipe(
filter(key => key.mode === "global" && key.type === "Tab"),
take(1)
)
.subscribe(() => {
for (const link of getElements(".headerlink"))
link.style.visibility = "visible"
})
// Make indeterminate toggles indeterminate to expand navigation on screen
document$.subscribe(() => {
const toggles = getElements<HTMLInputElement>("[data-md-state=indeterminate]")
for (const toggle of toggles) {
toggle.dataset.mdState = ""
toggle.indeterminate = true
toggle.checked = false
}
})
// Auto hide header - this is still experimental, so there might be some
// opportunities for refactoring, but we'll address them when this feature
// got some feedback from the community.
if (config.features.includes("header.autohide")) {
viewport$
.pipe(
map(({ offset }) => offset.y),
bufferCount(2, 1),
map(([a, b]) => [a < b, b] as const),
distinctUntilKeyChanged(0),
switchMap(([direction, y0]) => viewport$
.pipe(
map(({ offset }) => offset.y),
filter(y1 => y1 > 400),
map(y1 => Math.abs(y0 - y1)),
filter(y => y > 100),
map(() => direction),
take(1)
)
)
)
.subscribe(hide => {
const header = getElement("[data-md-component=header]")
header?.setAttribute("data-md-state", hide ? "hidden": "shadow")
})
}
/* ----------------------------------------------------------------------- */

1
src/assets/javascripts/utilities/config/index.ts
View File

@ -30,6 +30,7 @@ import { SearchIndex, SearchTransformFn } from "integrations"
* Feature flags
*/
export type Feature =
| "header.autohide" /* Hide header */
| "navigation.tabs" /* Tabs navigation */
| "navigation.instant" /* Instant loading */

1
src/assets/stylesheets/main.scss
View File

@ -56,7 +56,6 @@
@import "main/layout/tabs";
@import "main/extensions/markdown/admonition";
@import "main/extensions/markdown/codehilite";
@import "main/extensions/markdown/footnotes";
@import "main/extensions/markdown/toc";

1
src/assets/stylesheets/main/_icons.scss
View File

@ -32,7 +32,6 @@
display: block;
width: px2rem(24px);
height: px2rem(24px);
margin: 0 auto;
fill: currentColor;
}
}

22
src/assets/stylesheets/main/_reset.scss
View File

@ -20,8 +20,6 @@
/// DEALINGS
////
// stylelint-disable no-duplicate-selectors
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
@ -45,12 +43,6 @@ body {
margin: 0;
}
// Reset horizontal rules in FF
hr {
box-sizing: content-box;
overflow: visible;
}
// Reset tap outlines on iOS and Android
a,
button,
@ -65,6 +57,16 @@ a {
text-decoration: none;
}
// Normalize horizontal separator styles
hr {
display: block;
box-sizing: content-box;
height: px2rem(1px);
padding: 0;
overflow: visible;
border: 0;
}
// Normalize font-size in all browsers
small {
font-size: 80%;
@ -76,7 +78,7 @@ sup {
line-height: 1em;
}
// Remove borders on images
// Remove border on image
img {
border-style: none;
}
@ -90,7 +92,7 @@ table {
// Reset table cell styles
td,
th {
font-weight: normal; // stylelint-disable-line
font-weight: 400;
vertical-align: top;
}

130
src/assets/stylesheets/main/_typeset.scss
View File

@ -30,7 +30,7 @@ body {
-moz-osx-font-smoothing: grayscale;
}
// Default fonts
// Define default fonts
body,
input {
color: var(--md-typeset-color);
@ -38,7 +38,7 @@ input {
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}
// Proportionally spaced fonts
// Define proportionally spaced fonts
code,
pre,
kbd {
@ -60,16 +60,14 @@ kbd {
// ----------------------------------------------------------------------------
// Content that is typeset - if possible, all margins, paddings and font sizes
// should be set in ems, so nested blocks (e.g. admonitions) render correctly,
// except headlines that should only appear on the top level and need to have
// consistent spacing due to layout constraints.
// should be set in ems, so nested blocks (e.g. admonitions) render correctly.
.md-typeset {
font-size: px2rem(16px);
line-height: 1.6;
color-adjust: exact;
// We'll use a smaller font-size for printing, so code examples don't break
// too early, and 16px looks too big anyway.
// [print]: We'll use a smaller `font-size` for printing, so code examples
// don't break too early, and `16px` looks too big anyway.
@media print {
font-size: px2rem(13.6px);
}
@ -78,11 +76,12 @@ kbd {
p,
ul,
ol,
dl,
blockquote {
margin: 1em 0;
}
// 1st level headline
// Headline on level 1
h1 {
margin: 0 0 px2em(40px, 32px);
color: var(--md-default-fg-color--light);
@ -92,7 +91,7 @@ kbd {
letter-spacing: -0.01em;
}
// 2nd level headline
// Headline on level 2
h2 {
margin: px2em(40px, 25px) 0 px2em(16px, 25px);
font-weight: 300;
@ -101,7 +100,7 @@ kbd {
letter-spacing: -0.01em;
}
// 3rd level headline
// Headline on level 3
h3 {
margin: px2em(32px, 20px) 0 px2em(16px, 20px);
font-weight: 400;
@ -110,19 +109,19 @@ kbd {
letter-spacing: -0.01em;
}
// 3rd level headline following an 2nd level headline
// Headline on level 3 following level 2
h2 + h3 {
margin-top: px2em(16px, 20px);
}
// 4th level headline
// Headline on level 4
h4 {
margin: px2em(16px) 0;
font-weight: 700;
letter-spacing: -0.01em;
}
// 5th and 6th level headline
// Headline on level 5-6
h5,
h6 {
margin: px2em(16px, 12.8px) 0;
@ -132,18 +131,18 @@ kbd {
letter-spacing: -0.01em;
}
// Overrides for 5th level headline
// Headline on level 5
h5 {
text-transform: uppercase;
}
// Horizontal separators
// Horizontal separator
hr {
margin: 1.5em 0;
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--lighter);
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lighter);
}
// Links
// Text link
a {
color: var(--md-typeset-a-color);
word-break: break-word;
@ -154,7 +153,7 @@ kbd {
transition: color 125ms;
}
// Focused or hovered links
// Text link on focus/hover
&:focus,
&:hover {
color: var(--md-accent-fg-color);
@ -168,7 +167,7 @@ kbd {
color: var(--md-code-fg-color);
direction: ltr;
// Wrap text and hide scollbars
// [print]: Wrap text and hide scollbars
@media print {
white-space: pre-wrap;
}
@ -183,14 +182,14 @@ kbd {
border-radius: px2rem(2px);
box-decoration-break: clone;
// Disable focus indicator for pointer devices
// Hide outline for pointer devices
&:not(.focus-visible) {
outline: none;
-webkit-tap-highlight-color: transparent;
}
}
// Disable containing block inside headlines
// Code block in headline
h1 code,
h2 code,
h3 code,
@ -208,13 +207,13 @@ kbd {
color: currentColor;
}
// Unformatted code blocks
// Unformatted content
pre {
position: relative;
margin: 1em 0;
line-height: 1.4;
// Actual container with code, overflowing
// Code block
> code {
display: block;
margin: 0;
@ -224,26 +223,25 @@ kbd {
box-shadow: none;
box-decoration-break: slice;
touch-action: auto;
// Override Firefox scrollbar style
scrollbar-width: thin;
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
// Override Firefox scrollbar hover color
// Code block on hover
&:hover {
scrollbar-color: var(--md-accent-fg-color) transparent;
}
// Override native scrollbar styles
// Webkit scrollbar
&::-webkit-scrollbar {
width: px2rem(4px);
height: px2rem(4px);
}
// Scrollbar thumb
// Webkit scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb
// Webkit scrollbar thumb on hover
&:hover {
background-color: var(--md-accent-fg-color);
}
@ -251,14 +249,14 @@ kbd {
}
}
// [mobile -]: Stretch to whole width
// [mobile -]: Align with body copy
@include break-to-device(mobile) {
// Stretch top-level containers
// Unformatted text
> pre {
margin: 1em px2rem(-16px);
// Remove rounded borders
// Code block
code {
border-radius: 0;
}
@ -289,13 +287,13 @@ kbd {
box-decoration-break: clone;
}
// Abbreviations
// Abbreviation
abbr {
text-decoration: none;
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
cursor: help;
// Render a tooltip for touch devices
// Show tooltip for touch devices
@media (hover: none) {
position: relative;
@ -314,7 +312,7 @@ kbd {
padding: px2rem(4px) px2rem(6px);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
background: var(--md-default-fg-color);
background-color: var(--md-default-fg-color);
border-radius: px2rem(2px);
content: attr(title);
}
@ -354,12 +352,12 @@ kbd {
}
}
// Unordered lists
// Unordered list
ul {
list-style-type: disc;
}
// Unordered and ordered lists
// Unordered and ordered list
ul,
ol {
margin-left: px2em(10px);
@ -371,7 +369,7 @@ kbd {
margin-left: initial;
}
// Nested ordered lists
// Nested ordered list
ol {
list-style-type: lower-alpha;
@ -381,7 +379,7 @@ kbd {
}
}
// List elements
// List element
li {
margin-bottom: 0.5em;
margin-left: px2em(20px);
@ -392,18 +390,18 @@ kbd {
margin-left: initial;
}
// Decrease vertical spacing
// Adjust spacing
p,
blockquote {
margin: 0.5em 0;
}
// Remove margin on last element
// Adjust spacing on last child
&:last-child {
margin-bottom: 0;
}
// Nested lists
// Nested list
ul,
ol {
margin: 0.5em 0 0.5em px2em(10px);
@ -417,7 +415,7 @@ kbd {
}
}
// Definition lists
// Definition list
dd {
margin: 1em 0 1.5em px2em(30px);
@ -428,31 +426,31 @@ kbd {
}
}
// Limit width to container, scale height proportionally
// Image or icon
img,
svg {
max-width: 100%;
height: auto;
// Left-aligned
// Adjust spacing when left-aligned
&[align="left"] {
margin: 1em;
margin-left: 0;
}
// Right-aligned
// Adjust spacing when right-aligned
&[align="right"] {
margin: 1em;
margin-right: 0;
}
// Remove top spacing of sole children
// Adjust spacing when sole children
&[align]:only-child {
margin-top: 0;
}
}
// Figures
// Figure
figure {
width: fit-content;
max-width: 100%;
@ -460,7 +458,7 @@ kbd {
text-align: center;
}
// Figure captions
// Figure caption
figcaption {
max-width: px2rem(480px);
margin: 0.5em auto 2em;
@ -472,20 +470,20 @@ kbd {
max-width: 100%;
}
// Data tables
// Data table
table:not([class]) {
display: inline-block;
max-width: 100%;
overflow: auto;
font-size: px2rem(12.8px);
background: var(--md-default-bg-color);
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
touch-action: auto;
// Reset display mode so table header wraps correctly when printing
// [print]: Reset display mode so table header wraps when printing
@media print {
display: table;
}
@ -497,22 +495,22 @@ kbd {
margin-top: 1.5em;
}
// Elements inside cells
// Elements in table heading and cell
th > *,
td > * {
// Remove top spacing of first child
// Adjust spacing on first child
&:first-child {
margin-top: 0;
}
// Remove bottom spacing of last child
// Adjust spacing on last child
&:last-child {
margin-bottom: 0;
}
}
// Table headings and cells
// Table heading and cell
th:not([align]),
td:not([align]) {
text-align: left;
@ -523,7 +521,7 @@ kbd {
}
}
// Table headings
// Table heading
th {
min-width: px2rem(100px);
padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
@ -537,36 +535,36 @@ kbd {
}
}
// Table cells
// Table cell
td {
padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
vertical-align: top;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
}
// Table rows
// Table row
tr {
transition: background-color 125ms;
// Add background on hover
// Table row on hover
&:hover {
background-color: rgba(0, 0, 0, 0.035);
box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
}
// Remove top border on first row
// Hide border on first table row
&:first-child td {
border-top: 0;
}
}
// Do not wrap links in tables
// Text link in table
a {
word-break: normal;
}
}
// Sortable tables
// Sortable table
table th[role="columnheader"] {
cursor: pointer;
@ -595,25 +593,25 @@ kbd {
}
}
// Wrapper for scrolling on overflow
// Data table scroll wrapper
&__scrollwrap {
margin: 1em px2rem(-16px);
overflow-x: auto;
touch-action: auto;
}
// Data table wrapper, in case JavaScript is available
// Data table wrapper
&__table {
display: inline-block;
margin-bottom: 0.5em;
padding: 0 px2rem(16px);
// Reset display mode so table header wraps correctly when printing
// [print]: Reset display mode so table header wraps when printing
@media print {
display: block;
}
// Data tables
// Data table
html & table {
display: table;
width: 100%;

54
src/assets/stylesheets/main/extensions/markdown/_admonition.scss
View File

@ -47,11 +47,9 @@ $admonitions: (
// Icon definitions
:root {
@each $names, $props in $admonitions {
$name: nth($names, 1);
$icon: nth($props, 1);
// Inline icon through PostCSS in Webpack
--md-admonition-icon--#{$name}: svg-load("@mdi/svg/svg/#{$icon}.svg");
--md-admonition-icon--#{nth($names, 1)}: svg-load(
"@mdi/svg/svg/#{nth($props, 1)}.svg"
);
}
}
@ -60,7 +58,7 @@ $admonitions: (
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Admonition extension
// Admonition
.admonition {
margin: px2em(20px, 12.8px) 0;
padding: 0 px2rem(12px);
@ -72,44 +70,44 @@ $admonitions: (
border-left: px2rem(4px) solid $clr-blue-a200;
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 px2rem(0.5px) px2rem(1px) hsla(0, 0%, 0%, 0.05);
// [print]: Omit shadow as it may lead to rendering errors
@media print {
box-shadow: none;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
border-right: px2rem(4px) solid $clr-blue-a200;
border-left: none;
}
// Hack: omit rendering errors for print
@media print {
box-shadow: none;
}
// Adjust spacing on last element
html & > :last-child {
margin-bottom: px2rem(12px);
}
// Adjust margin for nested admonition blocks
// Adjust spacing for nested admonitions
.admonition {
margin: 1em 0;
}
// Wrapper for scrolling on overflow
// Adjust spacing for contained table wrappers
.md-typeset__scrollwrap {
margin: 1em px2rem(-12px);
}
// Data table wrapper, in case JavaScript is available
// Adjust spacing for contained tables
.md-typeset__table {
padding: 0 px2rem(12px);
}
// Tabbed block container is the only child
// Adjust spacing for single-child tabbed block container
> .tabbed-set:only-child {
margin-top: 0;
}
// Adjust spacing on last child
html & > :last-child {
margin-bottom: px2rem(12px);
}
}
// Admonition title
@ -129,7 +127,7 @@ $admonitions: (
border-left: none;
}
// Reset spacing, if title is the only element
// Adjust spacing for title-only admonitions
html &:last-child {
margin-bottom: 0;
}
@ -153,7 +151,8 @@ $admonitions: (
}
}
// Reset code inside admonition titles
// Omit background on inline code blocks, as they don't go well with the
// pastelly tones applied to admonition titles
code {
margin: initial;
padding: initial;
@ -163,7 +162,8 @@ $admonitions: (
box-shadow: none;
}
// Tabbed block container is the last child
// Adjust spacing on last tabbed block container child - if the tabbed
// block container is the sole child, it looks better to omit the margin
+ .tabbed-set:last-child {
margin-top: 0;
}
@ -178,12 +178,12 @@ $admonitions: (
$name: nth($names, 1);
$tint: nth($props, 2);
// Admonition base class
// Admonition flavour
.md-typeset .admonition.#{$name} {
border-color: $tint;
}
// Admonition title
// Admonition flavour title
.md-typeset .#{$name} > .admonition-title {
background-color: transparentize($tint, 0.9);
border-color: $tint;
@ -197,7 +197,7 @@ $admonitions: (
}
}
// Define synonyms for base class
// Define synonyms for flavours
@if length($names) > 1 {
@for $n from 2 through length($names) {
.#{nth($names, $n)} {

259
src/assets/stylesheets/main/extensions/markdown/_codehilite.scss
View File

@ -1,259 +0,0 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules: syntax highlighting
// ----------------------------------------------------------------------------
// Codehilite extension
.codehilite {
.o, // Operator
.ow { // Operator, word
color: var(--md-code-hl-operator-color);
}
.p { // Punctuation
color: var(--md-code-hl-punctuation-color);
}
.cpf, // Comment, preprocessor file
.l, // Literal
.s, // Literal, string
.sb, // Literal, string backticks
.sc, // Literal, string char
.s2, // Literal, string double
.si, // Literal, string interpol
.s1, // Literal, string single
.ss { // Literal, string symbol
color: var(--md-code-hl-string-color);
}
.cp, // Comment, pre-processor
.se, // Literal, string escape
.sh, // Literal, string heredoc
.sr, // Literal, string regex
.sx { // Literal, string other
color: var(--md-code-hl-special-color);
}
.m, // Number
.mf, // Number, float
.mh, // Number, hex
.mi, // Number, integer
.il, // Number, integer long
.mo { // Number, octal
color: var(--md-code-hl-number-color);
}
.k, // Keyword,
.kd, // Keyword, declaration
.kn, // Keyword, namespace
.kp, // Keyword, pseudo
.kr, // Keyword, reserved
.kt { // Keyword, type
color: var(--md-code-hl-keyword-color);
}
.kc, // Keyword, constant
.n { // Name
color: var(--md-code-hl-name-color);
}
.no, // Name, constant
.nb, // Name, builtin
.bp { // Name, builtin pseudo
color: var(--md-code-hl-constant-color);
}
.nc, // Name, class
.ne, // Name, exception
.nf, // Name, function
.nn { // Name, namespace
color: var(--md-code-hl-function-color);
}
.nd, // Name, decorator
.ni, // Name, entity
.nl, // Name, label
.nt { // Name, tag
color: var(--md-code-hl-keyword-color);
}
.c, // Comment
.cm, // Comment, multiline
.c1, // Comment, single
.ch, // Comment, shebang
.cs, // Comment, special
.sd { // Literal, string doc
color: var(--md-code-hl-comment-color);
}
.na, // Name, attribute
.nv, // Variable,
.vc, // Variable, class
.vg, // Variable, global
.vi { // Variable, instance
color: var(--md-code-hl-variable-color);
}
.ge, // Generic, emph
.gr, // Generic, error
.gh, // Generic, heading
.go, // Generic, output
.gp, // Generic, prompt
.gs, // Generic, strong
.gu, // Generic, subheading
.gt { // Generic, traceback
color: var(--md-code-hl-generic-color);
}
.gd, // Diff, delete
.gi { // Diff, insert
margin: 0 px2em(-2px);
padding: 0 px2em(2px);
border-radius: px2rem(2px);
}
.gd { // Diff, delete
background-color: var(--md-typeset-del-color);
}
.gi { // Diff, insert
background-color: var(--md-typeset-ins-color)
}
// Highlighted lines
.hll {
display: block;
margin: 0 px2em(-16px, 13.6px);
padding: 0 px2em(16px, 13.6px);
background-color: var(--md-code-hl-color)
}
}
// ----------------------------------------------------------------------------
// Rules: layout
// ----------------------------------------------------------------------------
// Block with line numbers
.codehilitetable {
display: block;
overflow: hidden;
// Set table elements to block layout, because otherwise the whole flexbox
// hacking won't work correctly
tbody,
td {
display: block;
padding: 0;
}
// We need to use flexbox layout, because otherwise it's not possible to
// make the code container scroll while keeping the line numbers static
tr {
display: flex;
}
// The pre tags are nested inside a table, so we need to remove the
// margin because it collapses below all the overflows
pre {
margin: 0;
}
// Disable user selection, so code can be easily copied without
// accidentally also copying the line numbers
.linenos {
padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
padding-right: 0;
font-size: px2em(13.6px);
background-color: var(--md-code-bg-color);
user-select: none;
}
// Add spacing to line number container
.linenodiv {
padding-right: px2em(8px, 13.6px);
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lighter) inset;
// Reset spacings
pre {
color: var(--md-default-fg-color--light);
text-align: right;
}
}
// The table cell containing the code container wrapper and code should
// stretch horizontally to the remaining space
.code {
flex: 1;
overflow: hidden;
}
}
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Block with line numbers
.codehilitetable {
margin: 1em 0;
direction: ltr;
border-radius: px2rem(2px);
// Remove rounded borders
code {
border-radius: 0;
}
}
// [mobile -]: Stretch to whole width
@include break-to-device(mobile) {
// Full-width container
> .codehilite {
margin: 1em px2rem(-16px);
// Stretch highlighted lines
.hll {
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
}
// Remove rounded borders
code {
border-radius: 0;
}
}
// Full-width container on top-level
> .codehilitetable {
margin: 1em px2rem(-16px);
border-radius: 0;
// Stretch highlighted lines
.hll {
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
}
}
}
}

86
src/assets/stylesheets/main/extensions/markdown/_footnotes.scss
View File

@ -34,92 +34,49 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// All footnote references
// Footnote reference container - improve alignment
[id^="fnref:"] {
display: inline-block;
// Targeted anchor
&:target {
margin-top: -1 * px2rem(48px + 12px + 16px);
padding-top: px2rem(48px + 12px + 16px);
pointer-events: none;
scroll-margin-top: initial;
}
}
// All footnote back references
[id^="fn:"] {
// Add spacing to anchor for offset
&::before {
display: none;
height: 0;
content: "";
}
// Reset, as we use the anchor-correction hack here.
&:target {
scroll-margin-top: initial;
}
// Targeted anchor
&:target::before {
display: block;
margin-top: -1 * px2rem(48px + 12px + 10px);
padding-top: px2rem(48px + 12px + 10px);
pointer-events: none;
}
}
// Footnotes extension
// Footnote container
.footnote {
color: var(--md-default-fg-color--light);
font-size: px2rem(12.8px);
// Remove additional spacing on footnotes
// Footnote list - omit left indentation
ol {
margin-left: 0;
}
// Footnote
// Footnote list item
li {
transition: color 125ms;
// Darken color for targeted footnote
// Darken color on target
&:target {
color: var(--md-default-fg-color);
}
// Remove spacing on first element
:first-child {
margin-top: 0;
}
// Make back references visible on container hover
// Show backreferences on footnote hover
&:hover .footnote-backref,
&:target .footnote-backref {
transform: translateX(0);
opacity: 1;
}
// Hovered back reference
&:hover .footnote-backref:hover {
color: var(--md-accent-fg-color);
// Adjust spacing on first child
> :first-child {
margin-top: 0;
}
}
}
// Footnote reference
.footnote-ref {
display: inline-block;
pointer-events: initial;
}
// Footnote back reference
// Footnote backreference
.footnote-backref {
display: inline-block;
color: var(--md-typeset-a-color);
// Hack: remove Unicode arrow for icon
// Hack: omit Unicode arrow for replacement with icon
font-size: 0;
vertical-align: text-bottom;
transform: translateX(px2rem(5px));
@ -129,12 +86,24 @@
transform 250ms 250ms,
opacity 125ms 250ms;
// [print]: Show footnote backreferences
@media print {
color: var(--md-typeset-a-color);
transform: translateX(0);
opacity: 1;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: translateX(px2rem(-5px));
}
// Back reference icon
// Adjust color on hover
&:hover {
color: var(--md-accent-fg-color);
}
// Footnote backreference icon
&::before {
display: inline-block;
width: px2rem(16px);
@ -154,12 +123,5 @@
}
}
}
// Always show for print
@media print {
color: var(--md-typeset-a-color);
transform: translateX(0);
opacity: 1;
}
}
}

76
src/assets/stylesheets/main/extensions/markdown/_toc.scss
View File

@ -27,95 +27,59 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Permalinks extension
// Headerlink
.headerlink {
display: inline-block;
margin-left: px2rem(10px);
// Hack: if we don't set visibility hidden, the text content of the node
// will include the headerlink character, which is why Google indexes them.
visibility: hidden;
color: var(--md-default-fg-color--lighter);
opacity: 0;
transition:
color 250ms,
visibility 0ms 500ms,
opacity 125ms;
// Adjust for RTL languages
// [print]: Hide headerlinks
@media print {
display: none;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(10px);
margin-left: initial;
}
// Higher specificity for color due to palettes integration
html body & {
color: var(--md-default-fg-color--lighter);
}
// Hide for print
@media print {
display: none;
}
}
// Make permalink visible on hover
// Show headerlinks on parent hover
:hover > .headerlink,
:target > .headerlink,
.headerlink:focus {
visibility: visible;
opacity: 1;
transition:
color 250ms,
visibility 0ms,
opacity 125ms;
}
// Active or targeted permalink
// Adjust color on parent target or focus/hover
:target > .headerlink,
.headerlink:focus,
.headerlink:hover {
color: var(--md-accent-fg-color);
}
// General scroll margin offset for anything that can be targeted. Browser
// support is pretty decent by now, and if we wait until Edge 79+ has more
// adoption, we can get rid of all anchor-correction hacks.
// Adjust scroll offset for all elements with `id` attributes
:target {
scroll-margin-top: px2rem(48px + 24px);
}
// Correct anchor offset for link blurring
@each $level, $delta in (
h1 h2 h3: 8px,
h4: 9px,
h5 h6: 12px,
) {
%#{nth($level, 1)} {
// Adjust scroll offset for headlines of level 1-3
h1:target,
h2:target,
h3:target {
scroll-margin-top: px2rem(48px + 24px - 4px);
}
// Reset, as we use the anchor-correction hack here.
&:target {
scroll-margin-top: initial;
}
// Un-targeted anchor
&::before {
display: block;
margin-top: -1 * px2rem($delta);
padding-top: px2rem($delta);
content: "";
}
// Targeted anchor (48px from header, 12px from sidebar offset)
&:target::before {
margin-top: -1 * px2rem(48px + 12px + $delta);
padding-top: px2rem(48px + 12px + $delta);
}
}
// Define levels
@for $n from 1 through length($level) {
#{nth($level, $n)}[id] {
@extend %#{nth($level, 1)};
}
}
// Adjust scroll offset for headlines of level 4
h4:target {
scroll-margin-top: px2rem(48px + 24px - 3px);
}
}

6
src/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss
View File

@ -27,16 +27,16 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Scroll math block on overflow
// Arithmatex container
div.arithmatex {
overflow: auto;
// [mobile -]: Stretch to whole width
// [mobile -]: Align with body copy
@include break-to-device(mobile) {
margin: 0 px2rem(-16px);
}
// MathJax integration
// Arithmatex content
> * {
width: min-content;
margin: 1em auto !important;

10
src/assets/stylesheets/main/extensions/pymdownx/_critic.scss
View File

@ -59,7 +59,7 @@
}
}
// Block
// Critic block
.critic.block {
display: block;
margin: 1em 0;
@ -68,13 +68,13 @@
overflow: auto;
box-shadow: none;
// Decrease spacing on first element
:first-child {
// Adjust spacing on first child
> :first-child {
margin-top: 0.5em;
}
// Decrease spacing on last element
:last-child {
// Adjust spacing on last child
> :last-child {
margin-bottom: 0.5em;
}
}

30
src/assets/stylesheets/main/extensions/pymdownx/_details.scss
View File

@ -34,7 +34,7 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Details extension
// Details
details {
@extend .admonition;
@ -42,18 +42,20 @@
padding-top: 0;
overflow: visible;
// Rotate title icon
// Details title icon - rotate icon on transition to open state
&[open] > summary::after {
transform: rotate(90deg);
}
// Remove bottom spacing for closed details
// Adjust spacing for details in closed state
&:not([open]) {
padding-bottom: 0;
box-shadow: none;
// We cannot set overflow: hidden, as the outline would not be visible,
// so we need to correct the border radius
// Hack: we cannot set `overflow: hidden` on the `details` element (which
// is why we set it to `overflow: visible`, as the outline would not be
// visible when focusing. Therefore, we must set the border radius on the
// summary explicitly.
> summary {
border-radius: px2rem(2px);
}
@ -77,20 +79,15 @@
border-top-right-radius: px2rem(2px);
cursor: pointer;
// Disable focus indicator for pointer devices
&:not(.focus-visible) {
outline: none;
-webkit-tap-highlight-color: transparent;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(44px) px2rem(8px) px2rem(36px);
}
// Remove default details marker
&::-webkit-details-marker {
display: none;
// Hide outline for pointer devices
&:not(.focus-visible) {
outline: none;
-webkit-tap-highlight-color: transparent;
}
// Details marker
@ -115,5 +112,10 @@
transform: rotate(180deg);
}
}
// Hide native details marker
&::-webkit-details-marker {
display: none;
}
}
}

17
src/assets/stylesheets/main/extensions/pymdownx/_emoji.scss
View File

@ -27,22 +27,15 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Emojis
img.emojione,
img.twemoji,
img.gemoji {
width: px2em(18px);
max-height: 100%;
vertical-align: -15%;
}
// Inlined SVG icons via mkdocs-material-extensions
span.twemoji {
// Emoji and icon container
.emojione,
.twemoji,
.gemoji {
display: inline-block;
height: px2em(18px);
vertical-align: text-top;
// Icon
// Icon - inlined via mkdocs-material-extensions
svg {
width: px2em(18px);
max-height: 100%;

241
src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss
View File

@ -21,16 +21,136 @@
////
// ----------------------------------------------------------------------------
// Rules
// Rules: syntax highlighting
// ----------------------------------------------------------------------------
// When pymdownx.superfences is enabled but codehilite is disabled,
// pymdownx.highlight will be used. When this happens, the outer container
// and tables get this class names by default
// Code block
.highlight {
@extend .codehilite;
// Inline line numbers
.o, // Operator
.ow { // Operator, word
color: var(--md-code-hl-operator-color);
}
.p { // Punctuation
color: var(--md-code-hl-punctuation-color);
}
.cpf, // Comment, preprocessor file
.l, // Literal
.s, // Literal, string
.sb, // Literal, string backticks
.sc, // Literal, string char
.s2, // Literal, string double
.si, // Literal, string interpol
.s1, // Literal, string single
.ss { // Literal, string symbol
color: var(--md-code-hl-string-color);
}
.cp, // Comment, pre-processor
.se, // Literal, string escape
.sh, // Literal, string heredoc
.sr, // Literal, string regex
.sx { // Literal, string other
color: var(--md-code-hl-special-color);
}
.m, // Number
.mf, // Number, float
.mh, // Number, hex
.mi, // Number, integer
.il, // Number, integer long
.mo { // Number, octal
color: var(--md-code-hl-number-color);
}
.k, // Keyword,
.kd, // Keyword, declaration
.kn, // Keyword, namespace
.kp, // Keyword, pseudo
.kr, // Keyword, reserved
.kt { // Keyword, type
color: var(--md-code-hl-keyword-color);
}
.kc, // Keyword, constant
.n { // Name
color: var(--md-code-hl-name-color);
}
.no, // Name, constant
.nb, // Name, builtin
.bp { // Name, builtin pseudo
color: var(--md-code-hl-constant-color);
}
.nc, // Name, class
.ne, // Name, exception
.nf, // Name, function
.nn { // Name, namespace
color: var(--md-code-hl-function-color);
}
.nd, // Name, decorator
.ni, // Name, entity
.nl, // Name, label
.nt { // Name, tag
color: var(--md-code-hl-keyword-color);
}
.c, // Comment
.cm, // Comment, multiline
.c1, // Comment, single
.ch, // Comment, shebang
.cs, // Comment, special
.sd { // Literal, string doc
color: var(--md-code-hl-comment-color);
}
.na, // Name, attribute
.nv, // Variable,
.vc, // Variable, class
.vg, // Variable, global
.vi { // Variable, instance
color: var(--md-code-hl-variable-color);
}
.ge, // Generic, emph
.gr, // Generic, error
.gh, // Generic, heading
.go, // Generic, output
.gp, // Generic, prompt
.gs, // Generic, strong
.gu, // Generic, subheading
.gt { // Generic, traceback
color: var(--md-code-hl-generic-color);
}
.gd, // Diff, delete
.gi { // Diff, insert
margin: 0 px2em(-2px);
padding: 0 px2em(2px);
border-radius: px2rem(2px);
}
.gd { // Diff, delete
background-color: var(--md-typeset-del-color);
}
.gi { // Diff, insert
background-color: var(--md-typeset-ins-color)
}
// Highlighted line
.hll {
display: block;
margin: 0 px2em(-16px, 13.6px);
padding: 0 px2em(16px, 13.6px);
background-color: var(--md-code-hl-color)
}
// Code block line numbers (inline)
[data-linenos]::before {
position: sticky;
left: px2em(-16px, 13.6px);
@ -40,13 +160,116 @@
padding-left: px2em(16px, 13.6px);
color: var(--md-default-fg-color--light);
background-color: var(--md-code-bg-color);
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lighter) inset;
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
content: attr(data-linenos);
user-select: none;
}
}
// Same as above, but for code blocks with line numbers enabled
// ----------------------------------------------------------------------------
// Rules: layout
// ----------------------------------------------------------------------------
// Code block with line numbers
.highlighttable {
@extend .codehilitetable;
display: flow-root;
overflow: hidden;
// Set table elements to block layout, because otherwise the whole flexbox
// hacking won't work correctly
tbody,
td {
display: block;
padding: 0;
}
// We need to use flexbox layout, because otherwise it's not possible to
// make the code container scroll while keeping the line numbers static
tr {
display: flex;
}
// The pre tags are nested inside a table, so we need to omit the margin
// because it collapses below all the overflows
pre {
margin: 0;
}
// Code block line numbers - disable user selection, so code can be easily
// copied without accidentally also copying the line numbers
.linenos {
padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
padding-right: 0;
font-size: px2em(13.6px);
background-color: var(--md-code-bg-color);
user-select: none;
}
// Code block line numbers container
.linenodiv {
padding-right: px2em(8px, 13.6px);
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
// Adjust colors and alignment
pre {
color: var(--md-default-fg-color--light);
text-align: right;
}
}
// Code block container - stretch to remaining space
.code {
flex: 1;
overflow: hidden;
}
}
// ----------------------------------------------------------------------------
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Code block with line numbers
.highlighttable {
margin: 1em 0;
direction: ltr;
border-radius: px2rem(2px);
// Omit rounded borders on contained code block
code {
border-radius: 0;
}
}
// [mobile -]: Align with body copy
@include break-to-device(mobile) {
// Top-level code block
> .highlight {
margin: 1em px2rem(-16px);
// Highlighted line
.hll {
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
}
// Omit rounded borders
code {
border-radius: 0;
}
}
// Top-level code block with line numbers
> .highlighttable {
margin: 1em px2rem(-16px);
border-radius: 0;
// Highlighted line
.hll {
margin: 0 px2rem(-16px);
padding: 0 px2rem(16px);
}
}
}
}

158
src/assets/stylesheets/main/extensions/pymdownx/_keys.scss
View File

@ -25,91 +25,95 @@
// ----------------------------------------------------------------------------
// Scoped in typesetted content to match specificity of regular content
.md-typeset .keys {
.md-typeset {
// Keyboard key icon
kbd::before,
kbd::after {
position: relative;
margin: 0;
color: inherit;
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
}
// Keyboard key
.keys {
// Surrounding text
span {
padding: 0 px2em(3.2px);
color: var(--md-default-fg-color--light);
}
// Keyboard key icon
kbd::before,
kbd::after {
position: relative;
margin: 0;
color: inherit;
-moz-osx-font-smoothing: initial;
-webkit-font-smoothing: initial;
}
// Build special keys with left icon
@each $name, $code in (
// Surrounding text
span {
padding: 0 px2em(3.2px);
color: var(--md-default-fg-color--light);
}
// Modifiers
"alt": "\2387",
"left-alt": "\2387",
"right-alt": "\2387",
"command": "\2318",
"left-command": "\2318",
"right-command": "\2318",
"control": "\2303",
"left-control": "\2303",
"right-control": "\2303",
"meta": "\25C6",
"left-meta": "\25C6",
"right-meta": "\25C6",
"option": "\2325",
"left-option": "\2325",
"right-option": "\2325",
"shift": "\21E7",
"left-shift": "\21E7",
"right-shift": "\21E7",
"super": "\2756",
"left-super": "\2756",
"right-super": "\2756",
"windows": "\229E",
"left-windows": "\229E",
"right-windows": "\229E",
// Define keyboard keys with left icon
@each $name, $code in (
// Other keys
"arrow-down": "\2193",
"arrow-left": "\2190",
"arrow-right": "\2192",
"arrow-up": "\2191",
"backspace": "\232B",
"backtab": "\21E4",
"caps-lock": "\21EA",
"clear": "\2327",
"context-menu": "\2630",
"delete": "\2326",
"eject": "\23CF",
"end": "\2913",
"escape": "\238B",
"home": "\2912",
"insert": "\2380",
"page-down": "\21DF",
"page-up": "\21DE",
"print-screen": "\2399"
) {
.key-#{$name} {
&::before {
padding-right: px2em(6.4px);
content: $code;
// Modifiers
"alt": "\2387",
"left-alt": "\2387",
"right-alt": "\2387",
"command": "\2318",
"left-command": "\2318",
"right-command": "\2318",
"control": "\2303",
"left-control": "\2303",
"right-control": "\2303",
"meta": "\25C6",
"left-meta": "\25C6",
"right-meta": "\25C6",
"option": "\2325",
"left-option": "\2325",
"right-option": "\2325",
"shift": "\21E7",
"left-shift": "\21E7",
"right-shift": "\21E7",
"super": "\2756",
"left-super": "\2756",
"right-super": "\2756",
"windows": "\229E",
"left-windows": "\229E",
"right-windows": "\229E",
// Other keys
"arrow-down": "\2193",
"arrow-left": "\2190",
"arrow-right": "\2192",
"arrow-up": "\2191",
"backspace": "\232B",
"backtab": "\21E4",
"caps-lock": "\21EA",
"clear": "\2327",
"context-menu": "\2630",
"delete": "\2326",
"eject": "\23CF",
"end": "\2913",
"escape": "\238B",
"home": "\2912",
"insert": "\2380",
"page-down": "\21DF",
"page-up": "\21DE",
"print-screen": "\2399"
) {
.key-#{$name} {
&::before {
padding-right: px2em(6.4px);
content: $code;
}
}
}
}
// Build special keys with right icon
@each $name, $code in (
"tab": "\21E5",
"num-enter": "\2324",
"enter": "\23CE"
) {
.key-#{$name} {
&::after {
padding-left: px2em(6.4px);
content: $code;
// Define keyboard keys with right icon
@each $name, $code in (
"tab": "\21E5",
"num-enter": "\2324",
"enter": "\23CE"
) {
.key-#{$name} {
&::after {
padding-left: px2em(6.4px);
content: $code;
}
}
}
}

26
src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss
View File

@ -34,28 +34,27 @@
width: 100%;
box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest);
// Show all tabs when printing
// [print]: Show all tabs (even hidden ones) when printing
@media print {
display: block;
order: initial;
}
// Mirror old superfences behavior, if there's only a single code block.
// Code block is the only child of a tab - remove margin and mirror
// previous (now deprecated) SuperFences code block grouping behavior
> pre:only-child,
> .codehilite:only-child pre,
> .codehilitetable:only-child,
> .highlight:only-child pre,
> .highlighttable:only-child {
margin: 0;
// Remove rounded borders at the top
// Omit rounded borders
> code {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
// Nested tabs
// Adjust spacing for nested tab
> .tabbed-set {
margin: 0;
}
@ -69,14 +68,17 @@
margin: 1em 0;
border-radius: px2rem(2px);
// Hide radio buttons
// Tab radio button - the Tabbed extension will generate radio buttons with
// labels, so tabs can be triggered without the necessity for JavaScript.
// This is pretty cool, as it has great accessibility out-of-the box, so
// we just hide the radio button and toggle the label color for indication.
> input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
// Active tab label
// Tab label for checked radio button
&:checked + label {
color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
@ -87,12 +89,12 @@
}
}
// Focused tab label
// Tab label on focus
&:focus + label {
outline-style: auto;
}
// Disable focus indicator for pointer devices
// Hide outline for pointer devices
&:not(.focus-visible) + label {
outline: none;
-webkit-tap-highlight-color: transparent;
@ -111,8 +113,8 @@
cursor: pointer;
transition: color 250ms;
// Hovered label
html &:hover {
// Tab label on hover
&:hover {
color: var(--md-accent-fg-color);
}
}

60
src/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss
View File

@ -39,7 +39,7 @@
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Remove list icon on task items
// Tasklist item
.task-list-item {
position: relative;
list-style-type: none;
@ -59,39 +59,35 @@
}
}
// Wrapper for list controls, in case custom checkboxes are enabled
.task-list-control {
// Hide native checkbox, when custom classes are enabled
.task-list-control [type="checkbox"] {
z-index: -1;
opacity: 0;
}
// Checkbox icon in unchecked state
.task-list-indicator::before {
position: absolute;
top: 0.15em;
left: px2em(-24px);
width: px2em(20px);
height: px2em(20px);
background-color: var(--md-default-fg-color--lightest);
mask-image: var(--md-tasklist-icon);
mask-repeat: no-repeat;
mask-size: contain;
content: "";
// Tasklist indicator in unchecked state
.task-list-indicator::before {
position: absolute;
top: 0.15em;
left: px2em(-24px);
width: px2em(20px);
height: px2em(20px);
background-color: var(--md-default-fg-color--lightest);
mask-image: var(--md-tasklist-icon);
mask-repeat: no-repeat;
mask-size: contain;
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2em(-24px);
left: initial;
}
}
// Checkbox icon in checked state
[type="checkbox"]:checked + .task-list-indicator::before {
background-color: $clr-green-a400;
mask-image: var(--md-tasklist-icon--checked);
}
// Hide original checkbox behind icon
[type="checkbox"] {
z-index: -1;
opacity: 0;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2em(-24px);
left: initial;
}
}
// Tasklist indicator in checked state
[type="checkbox"]:checked + .task-list-indicator::before {
background-color: $clr-green-a400;
mask-image: var(--md-tasklist-icon--checked);
}
}

12
src/assets/stylesheets/main/layout/_announce.scss
View File

@ -29,16 +29,16 @@
overflow: auto;
background-color: var(--md-footer-bg-color);
// Actual content
// [print]: Hide announcement bar
@media print {
display: none;
}
// Announcement wrapper
&__inner {
margin: px2rem(12px) auto;
padding: 0 px2rem(16px);
color: var(--md-footer-fg-color);
font-size: px2rem(14px);
}
// Hide for print
@media print {
display: none;
}
}

121
src/assets/stylesheets/main/layout/_base.scss
View File

@ -20,107 +20,88 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) drawer
$md-toggle__drawer--checked:
"[data-md-toggle=\"drawer\"]:checked ~";
// ----------------------------------------------------------------------------
// Rules: base grid and containers
// ----------------------------------------------------------------------------
// Stretch container to viewport and set base font-sizefor simple calculations
// based on relative ems (rems)
// Stretch container to viewport and set base `font-size`
html {
height: 100%;
// Hack: some browsers on some operating systems don't account for scroll
// bars when firing media queries, so we need to do this for safety. This
// currently impacts the table of contents component between 1220 and 1234px
// and is to current knowledge not fixable.
overflow-x: hidden;
// Hack: normally, we would set the base font-size to 62.5%, so we can base
// all calculations on 10px, but Chromium and Chrome define a minimal font
// size of 12 if the system language is set to Chinese. For this reason we
// just double the font-size, set it to 20px which seems to do the trick.
// Hack: normally, we would set the base `font-size` to `62.5%`, so we can
// base all calculations on `10px`, but Chromium and Chrome define a minimal
// `font-size` of `12px` if the system language is set to Chinese. For this
// reason we just double the `font-size` and set it to `20px`.
//
// See https://github.com/squidfunk/mkdocs-material/issues/911
font-size: 125%;
// [screen medium +]: Set base font-size to 11px
// [screen medium +]: Set base `font-size` to `11px`
@include break-from-device(screen medium) {
font-size: 137.50%;
}
// [screen large +]: Set base font-size to 12px
// [screen large +]: Set base `font-size` to `12px`
@include break-from-device(screen large) {
font-size: 150%;
}
}
// Stretch body to container and leave room for footer
// Stretch body to container - flexbox is used, so the footer will always be
// aligned to the bottom of the viewport
body {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
// Hack: reset font-size to 10px, so the spacing for all inline elements is
// correct again. Otherwise the spacing would be based on 20px.
font-size: 0.5rem; // stylelint-disable-line unit-allowed-list
// Hack: reset `font-size` to `10px`, so the spacing for all inline elements
// is correct again. Otherwise the spacing would be based on `20px`.
font-size: px2rem(10px);
background-color: var(--md-default-bg-color);
// [tablet portrait -]: Lock body to disable scroll bubbling
@include break-to-device(tablet portrait) {
// Lock body to viewport height (e.g. in search mode)
&[data-md-state="lock"] {
position: fixed;
}
}
// Hack: we must not use flex, or Firefox will only print the first page
// see https://mzl.la/39DgR3m
// [print]: Omit flexbox layout due to a Firefox bug (https://mzl.la/39DgR3m)
@media print {
display: block;
}
// Body in locked state
&[data-md-state="lock"] {
// [tablet portrait -]: Omit scroll bubbling
@include break-to-device(tablet portrait) {
position: fixed;
}
}
}
// Horizontal separators
hr {
display: block;
height: px2rem(1px);
padding: 0;
border: 0;
}
// ----------------------------------------------------------------------------
// Template-wide grid
// Grid container - this class is applied to wrapper elements within the
// header, content area and footer, and makes sure that their width is limited
// to `1220px`, and they are rendered centered if the screen is larger.
.md-grid {
max-width: px2rem(1220px);
margin-right: auto;
margin-left: auto;
}
// Content wrapper
// Main container
.md-container {
display: flex;
flex-direction: column;
flex-grow: 1;
// Hack: we must not use flex, or Firefox will only print the first page
// see https://mzl.la/39DgR3m
// [print]: Omit flexbox layout due to a Firefox bug (https://mzl.la/39DgR3m)
@media print {
display: block;
}
}
// The main content should stretch to maximum height in the table
// Main area - stretch to remaining space of container
.md-main {
flex-grow: 1;
// Increase top spacing of content area to give typography more room
// Main area wrapper
&__inner {
display: flex;
height: 100%;
@ -128,9 +109,8 @@ hr {
}
}
// Apply ellipsis in case of overflowing text
// Add ellipsis in case of overflowing text
.md-ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -140,49 +120,16 @@ hr {
// Rules: navigational elements
// ----------------------------------------------------------------------------
// Toggle checkbox
// Toggle - this class is applied to the checkbox elements, which are used to
// implement the CSS-only drawer and navigation, as well as the search
.md-toggle {
display: none;
}
// Overlay below expanded drawer
.md-overlay {
position: fixed;
top: 0;
z-index: 3;
width: 0;
height: 0;
background-color: hsla(0, 0%, 0%, 0.54);
opacity: 0;
transition:
width 0ms 250ms,
height 0ms 250ms,
opacity 250ms;
// [tablet -]: Trigger overlay
@include break-to-device(tablet) {
// Expanded drawer
#{$md-toggle__drawer--checked} & {
width: 100%;
height: 100%;
opacity: 1;
transition:
width 0ms,
height 0ms,
opacity 250ms;
}
}
}
// ----------------------------------------------------------------------------
// Rules: skip link
// ----------------------------------------------------------------------------
// Skip link
.md-skip {
position: fixed;
// Hack: if we don't set the negative z-index, the skip link will induce the
// Hack: if we don't set the negative `z-index`, the skip link will force the
// creation of new layers when code blocks are near the header on scrolling
z-index: -1;
margin: px2rem(10px);

2
src/assets/stylesheets/main/layout/_button.scss
View File

@ -47,7 +47,7 @@
border-color: var(--md-primary-fg-color);
}
// Focused or hovered button
// Button on focus/hover
&:focus,
&:hover {
color: var(--md-accent-bg-color);

35
src/assets/stylesheets/main/layout/_clipboard.scss
View File

@ -31,7 +31,7 @@
// ----------------------------------------------------------------------------
// Copy to clipboard
// Button to copy to clipboard
.md-clipboard {
position: absolute;
top: px2em(8px);
@ -40,22 +40,28 @@
width: px2em(24px);
height: px2em(24px);
color: var(--md-default-fg-color--lightest);
// background-color: var(--md-code-bg-color);
border-radius: px2rem(2px);
cursor: pointer;
transition: color 125ms;
transition: color 250ms;
// Hide for print
// [print]: Hide button
@media print {
display: none;
}
// // Make room for clipboard button in case of overflowing code
// .md-typeset & + code {
// padding-right: px2em(24px + 2 * 8px, 13.6px);
// }
// Darken color on code block hover
:hover > & {
color: var(--md-default-fg-color--light);
}
// Slightly smaller icon
// Button on focus/hover
&:focus,
&:hover {
color: var(--md-accent-fg-color);
}
// Button icon - the width and height are defined in `em`, so the size is
// automatically adjusted for nested code blocks (e.g. in admonitions)
&::after {
display: block;
width: px2em(18px);
@ -67,15 +73,4 @@
mask-size: contain;
content: "";
}
// Show on container hover
pre:hover & {
color: var(--md-default-fg-color--light);
}
// Focused or hovered icon
pre &:focus,
pre &:hover {
color: var(--md-accent-fg-color);
}
}

69
src/assets/stylesheets/main/layout/_content.scss
View File

@ -24,30 +24,46 @@
// Rules
// ----------------------------------------------------------------------------
// Content container
// Content area
.md-content {
flex: 1;
max-width: 100%;
flex-grow: 1;
// Hack: we must use `overflow: auto`, so the content area is capped by the
// dimensions of its parent. Otherwise, long code blocks might lead to a
// wider content area which will break everything. This, however, induces
// margin collapse, which will break scroll margins. Adding a large enough
// scroll padding seems to do the trick, at least in Chrome and Firefox.
overflow: auto;
scroll-padding-top: px2rem(1024px);
// [tablet landscape]: Decrease horizontal width
@include break-at-device(tablet landscape) {
max-width: calc(100% - #{px2rem(242px)});
}
// [screen +]: Decrease horizontal width
@include break-from-device(screen) {
max-width: calc(100% - #{px2rem(242px)} * 2);
}
// Define spacing
// Content wrapper
&__inner {
margin: 0 px2rem(16px) px2rem(24px);
padding-top: px2rem(12px);
// [screen +]: Increase horizontal spacing
// [screen +]: Adjust spacing between content area and sidebars
@include break-from-device(screen) {
margin-right: px2rem(24px);
margin-left: px2rem(24px);
// Sidebar with navigation is visible
.md-sidebar--primary:not([hidden]) ~ .md-content > & {
margin-left: px2rem(24px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(24px);
margin-left: px2rem(16px);
}
}
// Sidebar with table of contents is visible
.md-sidebar--secondary:not([hidden]) ~ .md-content > & {
margin-right: px2rem(24px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(16px);
margin-left: px2rem(24px);
}
}
}
// Hack: add pseudo element for spacing, as the overflow of the content
@ -58,19 +74,25 @@
content: "";
}
// Hack: remove bottom spacing of last element, due to margin collapse
// Adjust spacing on last child
> :last-child {
margin-bottom: 0;
}
}
// Button next to the title
// Button inside of the content area - these buttons are meant for actions on
// a document-level, i.e. linking to related source code files, printing etc.
&__button {
float: right;
margin: px2rem(8px) 0;
margin-left: px2rem(8px);
padding: 0;
// [print]: Hide buttons
@media print {
display: none;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
@ -83,20 +105,15 @@
}
}
// Override default link color for icons
// Adjust default link color for icons
.md-typeset & {
color: var(--md-default-fg-color--lighter);
}
// Align text with icon
// Align with body copy located next to icon
svg {
display: inline;
vertical-align: top;
}
// Hide for print
@media print {
display: none;
}
}
}

16
src/assets/stylesheets/main/layout/_dialog.scss
View File

@ -24,7 +24,7 @@
// Rules
// ----------------------------------------------------------------------------
// Dialog rendered as snackbar
// Dialog
.md-dialog {
@include z-depth(2);
@ -38,7 +38,7 @@
padding: px2rem(8px) px2rem(12px);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
background: var(--md-default-fg-color);
background-color: var(--md-default-fg-color);
border: none;
border-radius: px2rem(2px);
transform: translateY(100%);
@ -47,13 +47,18 @@
transform 0ms 400ms,
opacity 400ms;
// [print]: Hide dialog
@media print {
display: none;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(16px);
}
// Show open dialog
// Dialog in open state
&[data-md-state="open"] {
transform: translateY(0);
opacity: 1;
@ -61,9 +66,4 @@
transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
opacity 400ms;
}
// Hide for print
@media print {
display: none;
}
}

77
src/assets/stylesheets/main/layout/_footer.scss
View File

@ -24,48 +24,58 @@
// Rules
// ----------------------------------------------------------------------------
// Application footer
// Footer
.md-footer {
color: var(--md-footer-fg-color);
background-color: var(--md-footer-bg-color);
// Hide for print
// [print]: Hide footer
@media print {
display: none;
}
}
// Navigation within footer
// Footer navigation
.md-footer-nav {
// Set spacing
// Footer navigation wrapper
&__inner {
padding: px2rem(4px);
overflow: auto;
}
// Links to previous and next page
// Footer link to previous and next page
&__link {
display: flex;
padding-top: px2rem(28px);
padding-bottom: px2rem(8px);
transition: opacity 250ms;
// [tablet +]: Set proportional width
// [tablet +]: Adjust width to 50/50
@include break-from-device(tablet) {
width: 50%;
}
// Focused or hovered links
// Footer link on focus/hover
&:focus,
&:hover {
opacity: 0.7;
}
// Link to previous page
// Footer link to previous page
&--prev {
float: left;
// [mobile -]: Adjust width to 25/75 and hide title
@include break-to-device(mobile) {
width: 25%;
// Hide footer navigation title
.md-footer-nav__title {
display: none;
}
}
// Adjust for right-to-left languages
[dir="rtl"] & {
float: right;
@ -75,23 +85,18 @@
transform: scaleX(-1);
}
}
// [mobile -]: Hide title for previous page
@include break-to-device(mobile) {
width: 25%;
// Title
.md-footer-nav__title {
display: none;
}
}
}
// Link to next page
// Footer link to next page
&--next {
float: right;
text-align: right;
// [mobile -]: Adjust width to 25/75
@include break-to-device(mobile) {
width: 75%;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
@ -102,15 +107,10 @@
transform: scaleX(-1);
}
}
// [mobile -]: Hide title for previous page
@include break-to-device(mobile) {
width: 75%;
}
}
}
// Link title - set line height to match icon for correct alignment
// Footer navigation title
&__title {
position: relative;
flex-grow: 1;
@ -120,13 +120,13 @@
line-height: px2rem(48px);
}
// Link button
// Footer navigation link button
&__button {
margin: px2rem(4px);
padding: px2rem(8px);
}
// Link direction
// Footer navigation link direction (i.e. prev and next)
&__direction {
position: absolute;
right: 0;
@ -138,11 +138,11 @@
}
}
// Non-navigational information
// Footer metadata
.md-footer-meta {
background-color: var(--md-footer-bg-color--dark);
// Set spacing
// Footer metadata wrapper
&__inner {
display: flex;
flex-wrap: wrap;
@ -150,11 +150,11 @@
padding: px2rem(4px);
}
// Use a decent color for non-hovered links and ensure specificity
// Lighten color for non-hovered text links
html &.md-typeset a {
color: var(--md-footer-fg-color--light);
// Focused or hovered link
// Text link on focus/hover
&:focus,
&:hover {
color: var(--md-footer-fg-color);
@ -162,7 +162,7 @@
}
}
// Copyright and theme information
// Footer copyright metadata
.md-footer-copyright {
width: 100%;
margin: auto px2rem(12px);
@ -170,28 +170,29 @@
color: var(--md-footer-fg-color--lighter);
font-size: px2rem(12.8px);
// [tablet portrait +]: Show next to social media links
// [tablet portrait +]: Show copyright and social links in one line
@include break-from-device(tablet portrait) {
width: auto;
}
// Highlight copyright information
// Footer copyright highlight - this is the upper part of the copyright and
// theme information, which will include a darker color than the theme link
&__highlight {
color: var(--md-footer-fg-color--light);
}
}
// Social links
// Footer social metadata
.md-footer-social {
margin: 0 px2rem(8px);
padding: px2rem(4px) 0 px2rem(12px);
// [tablet portrait +]: Show next to copyright information
// [tablet portrait +]: Show copyright and social links in one line
@include break-from-device(tablet portrait) {
padding: px2rem(12px) 0;
}
// Link with icon
// Footer social link
&__link {
display: inline-block;
width: px2rem(32px);
@ -203,7 +204,7 @@
line-height: 1.9;
}
// Social icon
// Fill icon with current color
svg {
max-height: px2rem(16px);
vertical-align: -25%;

137
src/assets/stylesheets/main/layout/_header.scss
View File

@ -24,14 +24,14 @@
// Rules
// ----------------------------------------------------------------------------
// Application header (stays always on top)
// Header - by default, the header will be sticky and stay always on top of the
// viewport. If this behavior is not desired, just set `position: static`.
.md-header {
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 2;
height: px2rem(48px);
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
// Hack: reduce jitter by adding a transparent box shadow of the same size
@ -43,64 +43,74 @@
color 250ms,
background-color 250ms;
// Always hide shadow, in case JavaScript is not available
.no-js & {
box-shadow: none;
transition: none;
// [print]: Hide header
@media print {
display: none;
}
// Show and animate shadow
// Header in shadow state, i.e. shadow is visible
&[data-md-state="shadow"] {
box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
transition:
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
color 250ms,
background-color 250ms,
box-shadow 250ms;
}
// Hide for print
@media print {
display: none;
// Header in hidden state, i.e. moved out of sight
&[data-md-state="hidden"] {
transform: translateY(-100%);
transition:
transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
color 250ms,
background-color 250ms,
box-shadow 250ms;
}
}
// Navigation within header
// Header navigation - if the header exceeds the default height of `48px`, i.e.
// by adding a bigger logo, the items are agned at the center
.md-header-nav {
display: flex;
align-items: center;
padding: 0 px2rem(4px);
// Icon buttons
// Header navigation button
&__button {
position: relative;
z-index: 1;
display: block;
display: inline-block;
margin: px2rem(4px);
padding: px2rem(8px);
color: currentColor;
vertical-align: middle;
cursor: pointer;
transition: opacity 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
// Focused or hovered icon
// Button on focus/hover
&:focus,
&:hover {
opacity: 0.7;
}
// Logo
// Hide outline for pointer devices
&:not(.focus-visible) {
outline: none;
}
// Button with logo, pointing to `config.site_url`
&.md-logo {
margin: px2rem(4px);
padding: px2rem(8px);
// [tablet -]: Hide button
@include break-to-device(tablet) {
display: none;
}
// Image or icon
img,
svg {
@ -111,48 +121,49 @@
}
}
// Hide search icon, if JavaScript is not available.
.no-js &[for="__search"] {
display: none;
}
// Button for search
&[for="__search"] {
// [tablet landscape +]: Hide the search button
@include break-from-device(tablet landscape) {
// Search button
&[for="__search"] {
// [tablet landscape +]: Hide button
@include break-from-device(tablet landscape) {
display: none;
}
// [no-js]: Hide button
.no-js & {
display: none
}
// Adjust for right-to-left languages
[dir="rtl"] & {
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
}
// [tablet -]: Hide the logo
@include break-to-device(tablet) {
// Button for drawer
&[for="__drawer"] {
// Logo
&.md-logo {
display: none;
}
}
// [screen +]: Hide the menu button
@include break-from-device(screen) {
// Menu button
&[for="__drawer"] {
// [screen +]: Hide button
@include break-from-device(screen) {
display: none;
}
}
}
// Header topics
// Header navigation topic
&__topic {
position: absolute;
width: 100%;
display: flex;
max-width: 100%;
transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms;
// Page title
// Second header topic - title of the current page
& + & {
z-index: -1;
transform: translateX(px2rem(25px));
@ -167,26 +178,18 @@
transform: translateX(px2rem(-25px));
}
}
// Induce ellipsis, if no JavaScript is available
.no-js & {
position: initial;
}
// Hide page title as it is invisible anyway and will overflow the header
.no-js & + & {
display: none;
}
}
// Header title - set line height to match icon for correct alignment
// Header navigation title
&__title {
flex-grow: 1;
padding: 0 px2rem(20px);
height: px2rem(48px);
margin-right: px2rem(8px);
margin-left: px2rem(20px);
font-size: px2rem(18px);
line-height: px2rem(48px);
// Show page title
// Header title in active state, i.e. page title is visible
&[data-md-state="active"] .md-header-nav__topic {
z-index: -1;
transform: translateX(px2rem(-25px));
@ -201,7 +204,7 @@
transform: translateX(px2rem(25px));
}
// Page title
// Second header topic - title of the current page
& + .md-header-nav__topic {
z-index: 0;
transform: translateX(0);
@ -213,7 +216,7 @@
}
}
// Patch ellipsis
// Add ellipsis in case of overflowing text
> .md-header-nav__ellipsis {
position: relative;
width: 100%;
@ -221,11 +224,11 @@
}
}
// Repository containing source
// Repository information container
&__source {
display: none;
// [tablet landscape +]: Show the reposistory from tablet
// [tablet landscape +]: Show repository information
@include break-from-device(tablet landscape) {
display: block;
width: px2rem(234px);
@ -239,7 +242,7 @@
}
}
// [screen +]: Increase spacing of search bar
// [screen +]: Adjust spacing of search bar
@include break-from-device(screen) {
margin-left: px2rem(28px);

397
src/assets/stylesheets/main/layout/_nav.scss
View File

@ -33,12 +33,12 @@
// ----------------------------------------------------------------------------
// Navigation container
// Navigation
.md-nav {
font-size: px2rem(14px);
line-height: 1.3;
// List title
// Navigation title
&__title {
display: block;
padding: 0 px2rem(12px);
@ -46,17 +46,17 @@
font-weight: 700;
text-overflow: ellipsis;
// Hide buttons by default
// Navigaton button
.md-nav__button {
display: none;
// Stretch images
// Stretch images based on height, as it's the smaller dimension
img {
width: 100%;
height: auto;
width: auto;
height: 100%;
}
// Logo
// Button with logo, pointing to `config.site_url`
&.md-logo {
// Image or icon
@ -65,33 +65,24 @@
display: block;
width: px2rem(48px);
height: px2rem(48px);
}
// Icon
svg {
fill: currentColor;
}
}
}
}
// List of items
// Navigation list
&__list {
margin: 0;
padding: 0;
list-style: none;
}
// List item
// Navigation item
&__item {
padding: 0 px2rem(12px);
// Add bottom spacing to last item
&:last-child {
padding-bottom: px2rem(12px);
}
// 2nd+ level items
// Navigation item on level 2
& & {
padding-right: 0;
@ -100,15 +91,10 @@
padding-right: px2rem(12px);
padding-left: 0;
}
// Remove bottom spacing for nested items
&:last-child {
padding-bottom: 0;
}
}
}
// Link inside item
// Navigation link
&__link {
display: block;
margin-top: 0.625em;
@ -118,18 +104,7 @@
transition: color 125ms;
scroll-snap-align: start;
// Hide link to table of contents by default - this will only match the
// table of contents inside the drawer below and including tablet portrait
html &[for="__toc"] {
display: none;
// Hide table of contents by default
& ~ .md-nav {
display: none;
}
}
// Blurred link
// Link in blurred state
&[data-md-state="blur"] {
color: var(--md-default-fg-color--light);
}
@ -139,19 +114,38 @@
color: var(--md-typeset-a-color);
}
// Reset active color for nested list titles
// Navigation link in nested list
.md-nav__item--nested > & {
color: inherit;
}
// Focused or hovered link
// Navigation link on focus/hover
&:focus,
&:hover {
color: var(--md-accent-fg-color);
}
// Navigation link to table of contents
.md-nav--primary &[for="__toc"] {
display: none;
// Table of contents icon
.md-icon::after {
display: block;
width: 100%;
height: 100%;
mask-image: var(--md-toc-icon);
background-color: currentColor;
}
// Hide table of contents
& ~ .md-nav {
display: none;
}
}
}
// Repository containing source
// Repository information container
&__source {
display: none;
}
@ -159,9 +153,9 @@
// [tablet -]: Layered navigation
@include break-to-device(tablet) {
// Stretch primary navigation to drawer
// Primary and nested navigation
&--primary,
&--primary .md-nav {
&--primary & {
position: absolute;
top: 0;
right: 0;
@ -173,17 +167,17 @@
background-color: var(--md-default-bg-color);
}
// Adjust styles for primary navigation
// Primary navigation
&--primary {
// List title and item
// Navigation title and item
.md-nav__title,
.md-nav__item {
font-size: px2rem(16px);
line-height: 1.5;
}
// List title
// Navigation title
.md-nav__title {
position: relative;
height: px2rem(112px);
@ -205,7 +199,13 @@
height: px2rem(24px);
margin: px2rem(4px);
// Previous navigation item icon
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(8px);
left: initial;
}
// Navigation icon in link to previous level
&::after {
display: block;
width: 100%;
@ -216,15 +216,9 @@
mask-size: contain;
content: "";
}
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(8px);
left: initial;
}
}
// Main lists
// Navigation list
~ .md-nav__list {
overflow-y: auto;
background-color: var(--md-default-bg-color);
@ -233,57 +227,46 @@
scroll-snap-type: y mandatory;
touch-action: pan-y;
// Remove border for first list item
> .md-nav__item:first-child {
// Omit border on first child
> :first-child {
border-top: 0;
}
}
// Site title in main navigation
// Top-level navigation title
&[for="__drawer"] {
position: relative;
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
}
// Site logo
.md-nav__button {
position: absolute;
top: px2rem(4px);
left: px2rem(4px);
display: block;
margin: px2rem(4px);
padding: px2rem(8px);
font-size: px2rem(48px);
// Button with logo, pointing to `config.site_url`
.md-logo {
position: absolute;
top: px2rem(4px);
left: px2rem(4px);
display: block;
margin: px2rem(4px);
padding: px2rem(8px);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(4px);
left: initial;
}
}
}
// Adjust for right-to-left languages
html [dir="rtl"] & .md-nav__title {
// Site title in main navigation
&[for="__drawer"] .md-nav__button {
right: px2rem(4px);
left: initial;
}
}
// List of items
// Navigation list
.md-nav__list {
flex: 1;
}
// List item
// Navigation item
.md-nav__item {
padding: 0;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: 0;
}
// Increase spacing to account for icon
// Navigation link in nested navigation
&--nested > .md-nav__link {
padding-right: px2rem(48px);
@ -294,11 +277,11 @@
}
}
// Active parent item
// Navigation link in active navigation
&--active > .md-nav__link {
color: var(--md-typeset-a-color);
// Focused or hovered linl
// Navigation link on focus/hover
&:focus,
&:hover {
color: var(--md-accent-fg-color);
@ -306,7 +289,7 @@
}
}
// Link inside item
// Navigation link
.md-nav__link {
position: relative;
margin-top: 0;
@ -323,7 +306,13 @@
color: inherit;
font-size: px2rem(24px);
// Next navigation item icon
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(12px);
}
// Navigation icon in link to next level
&::after {
display: block;
width: 100%;
@ -334,38 +323,32 @@
mask-size: contain;
content: "";
}
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(12px);
}
}
}
// Flip icon vertically
.md-nav__icon::after {
.md-nav__icon {
// Adjust for right-to-left languages
[dir="rtl"] & {
[dir="rtl"] &::after {
transform: scale(-1);
}
}
// Table of contents inside navigation
// Table of contents contained in primary navigation
.md-nav--secondary {
// Set links to static to avoid unnecessary layering
// Navigation link - omit unnecessary layering
.md-nav__link {
position: static;
}
// Set nested navigation for table of contents to static
// Navigation on level 2-6
.md-nav {
position: static;
background-color: transparent;
// 3rd level link
// Navigation link on level 3
.md-nav__link {
padding-left: px2rem(28px);
@ -376,7 +359,7 @@
}
}
// 4th level link
// Navigation link on level 4
.md-nav .md-nav__link {
padding-left: px2rem(40px);
@ -387,7 +370,7 @@
}
}
// 5th level link
// Navigation link on level 5
.md-nav .md-nav .md-nav__link {
padding-left: px2rem(52px);
@ -398,7 +381,7 @@
}
}
// 6th level link
// Navigation link on level 6
.md-nav .md-nav .md-nav .md-nav__link {
padding-left: px2rem(64px);
@ -412,13 +395,13 @@
}
}
// Adjust styles for secondary navigation
// Table of contents
&--secondary {
background-color: transparent;
}
// Hide nested navigation by default
.md-nav__toggle ~ & {
// Toggle for nested navigation
&__toggle ~ & {
display: flex;
transform: translateX(100%);
opacity: 0;
@ -432,58 +415,53 @@
}
}
// Expand nested navigation, if toggle is checked
.md-nav__toggle:checked ~ & {
// Show nested navigation when toggle is active
&__toggle:checked ~ & {
transform: translateX(0);
opacity: 1;
transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 125ms 125ms;
// Hack: reduce jitter
// Navigation list
> .md-nav__list {
// Hack: promote to own layer to reduce jitter
backface-visibility: hidden;
}
}
}
// [tablet portrait -]: Show table of contents in drawer
// [tablet portrait -]: Layered navigation with table of contents
@include break-to-device(tablet portrait) {
// Show link to table of contents - higher specificity is necessary to
// display the table of contents inside the drawer
html &__link[for="__toc"] {
// Show link to table of contents
&--primary &__link[for="__toc"] {
display: block;
padding-right: px2rem(48px);
// Hide link to current item
+ .md-nav__link {
display: none;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(16px);
padding-left: px2rem(48px);
}
// Table of contents icon
// Show table of contents icon
.md-icon::after {
display: block;
width: 100%;
height: 100%;
mask-image: var(--md-toc-icon);
background-color: currentColor;
content: "";
}
// Hide navigation link to current page
+ .md-nav__link {
display: none;
}
// Show table of contents
& ~ .md-nav {
display: flex;
}
}
// Adjust for right-to-left languages
html [dir="rtl"] &__link {
padding-right: px2rem(16px);
padding-left: px2rem(48px);
}
// Repository containing source
// Repository information container
&__source {
display: block;
padding: 0 px2rem(4px);
@ -492,18 +470,50 @@
}
}
// [tablet landscape +]: Tree-like navigation
// [tablet landscape]: Layered navigation with table of contents
@include break-at-device(tablet landscape) {
// Show link to integrated table of contents
&--integrated &__link[for="__toc"] {
display: block;
padding-right: px2rem(48px);
scroll-snap-align: initial;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(16px);
padding-left: px2rem(48px);
}
// Show table of contents icon
.md-icon::after {
content: "";
}
// Hide navigation link to current page
+ .md-nav__link {
display: none;
}
// Show table of contents
& ~ .md-nav {
display: flex;
}
}
}
// [tablet landscape +]: Tree-like table of contents
@include break-from-device(tablet landscape) {
// List title
&--secondary .md-nav__title {
// Navigation title
&--secondary &__title {
// Snap to table of contents title
// Adjust snapping behavior
&[for="__toc"] {
scroll-snap-align: start;
}
// Hide icon
// Hide navigation icon
.md-nav__icon {
display: none;
}
@ -514,35 +524,70 @@
@include break-from-device(screen) {
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
// List title
&--primary .md-nav__title {
// Navigation title
&--primary &__title {
// Snap to site title
// Adjust snapping behavior
&[for="__drawer"] {
scroll-snap-align: start;
}
// Hide icon
// Hide navigation icon
.md-nav__icon {
display: none;
}
}
// Hide nested navigation by default
.md-nav__toggle ~ & {
// Hide toggle for nested navigation
&__toggle ~ & {
display: none;
}
// Show nested navigation, if toggle is checked
.md-nav__toggle:checked ~ & {
// Show nested navigation when toggle is active or indeterminate
&__toggle:checked ~ &,
&__toggle:indeterminate ~ & {
display: block;
}
// Hide titles for nested navigation
&__item--nested > .md-nav > &__title {
// Hide navigation title in nested navigation
&__item--nested > & > &__title {
display: none;
}
// Navigation section
&__item--section {
display: block;
margin: 1.25em 0;
// Adjust spacing on last child
&:last-child {
margin-bottom: 0;
}
// Hide navigation link, as sections are always expanded
> .md-nav__link {
display: none;
}
// Navigation
> .md-nav {
display: block;
// Navigation title
> .md-nav__title {
display: block;
padding: 0;
pointer-events: none;
scroll-snap-align: start;
}
// Adjust spacing on next level item
> .md-nav__list > .md-nav__item {
padding: 0;
}
}
}
// Navigation icon
&__icon {
float: right;
@ -556,7 +601,7 @@
transform: rotate(180deg);
}
// Inline icon and adjust icon to match font size
// Navigation icon content
&::after {
display: inline-block;
width: 100%;
@ -569,10 +614,68 @@
content: "";
}
// Rotate icon for expanded lists
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
// Navigation icon - rotate icon when toggle is active or indeterminate
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link &,
.md-nav__item--nested .md-nav__toggle:indeterminate ~ .md-nav__link & {
transform: rotate(90deg);
}
}
// Modifier for when navigation tabs are rendered
&--lifted {
// Hide nested items on level 1 and site title
> .md-nav__list > .md-nav__item--nested,
> .md-nav__title {
display: none;
}
// Hide level 1 items
> .md-nav__list > .md-nav__item {
display: none;
// Active parent navigation item
&--active {
display: block;
padding: 0;
// Hide nested links
> .md-nav__link {
display: none;
}
// Show title and adjust spacing
> .md-nav > .md-nav__title {
display: block;
padding: 0 px2rem(12px);
pointer-events: none;
scroll-snap-align: start;
}
}
// Adjust spacing for navigation item on level 2
> .md-nav__item {
padding-right: px2rem(12px);
}
}
// Hack: Always show active navigation tab on breakpoint screen, despite
// of checkbox being checked or not. Fixes #1655.
.md-nav[data-md-level="1"] {
display: block;
}
}
// Modifier for when table of contents is rendered in primary navigation
&--integrated &__link[for="__toc"] ~ .md-nav {
display: block;
margin-bottom: 1.25em;
border-left: px2rem(1px) solid var(--md-primary-fg-color);
// Hide navigation title
> .md-nav__title {
display: none;
}
}
}
}

248
src/assets/stylesheets/main/layout/_search.scss
View File

@ -20,14 +20,6 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) search
$md-toggle__search--checked:
"[data-md-toggle=\"search\"]:checked ~ .md-header";
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
@ -39,26 +31,26 @@ $md-toggle__search--checked:
// ----------------------------------------------------------------------------
// Search container
// Search
.md-search {
position: relative;
// Hide search, if JavaScript is not available.
.no-js & {
display: none;
}
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
padding: px2rem(4px) 0;
}
// Search modal overlay
// [no-js]: Hide search
.no-js & {
display: none;
}
// Search overlay
&__overlay {
z-index: 1;
opacity: 0;
// [tablet portrait -]: Full-screen search bar
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
position: absolute;
top: px2rem(4px);
@ -80,8 +72,8 @@ $md-toggle__search--checked:
left: initial;
}
// Expanded overlay
#{$md-toggle__search--checked} & {
// Show overlay when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
opacity: 1;
transition:
transform 400ms,
@ -89,26 +81,7 @@ $md-toggle__search--checked:
}
}
// Set scale factors
#{$md-toggle__search--checked} & {
// [mobile portrait -]: Scale up 45 times
@include break-to-device(mobile portrait) {
transform: scale(45);
}
// [mobile landscape]: Scale up 60 times
@include break-at-device(mobile landscape) {
transform: scale(60);
}
// [tablet portrait]: Scale up 75 times
@include break-at-device(tablet portrait) {
transform: scale(75);
}
}
// [tablet landscape +]: Overlay for better focus on search
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
position: fixed;
top: 0;
@ -128,8 +101,8 @@ $md-toggle__search--checked:
left: initial;
}
// Expanded overlay
#{$md-toggle__search--checked} & {
// Show overlay when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
width: 100%;
height: 100%;
opacity: 1;
@ -139,14 +112,33 @@ $md-toggle__search--checked:
opacity 250ms;
}
}
// Adjust appearance when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
// [mobile portrait -]: Scale up 45 times
@include break-to-device(mobile portrait) {
transform: scale(45);
}
// [mobile landscape]: Scale up 60 times
@include break-at-device(mobile landscape) {
transform: scale(60);
}
// [tablet portrait]: Scale up 75 times
@include break-at-device(tablet portrait) {
transform: scale(75);
}
}
}
// Search modal wrapper
// Search wrapper
&__inner {
// Hack: reduce jitter
// Hack: promote to own layer to reduce jitter
backface-visibility: hidden;
// [tablet portrait -]: Put search modal off-canvas by default
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
position: fixed;
top: 0;
@ -162,8 +154,8 @@ $md-toggle__search--checked:
transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 150ms 150ms;
// Active search modal
#{$md-toggle__search--checked} & {
// Adjust appearance when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
left: 0;
transform: translateX(0);
opacity: 1;
@ -202,15 +194,15 @@ $md-toggle__search--checked:
}
}
// Set maximum width
#{$md-toggle__search--checked} & {
// Adjust appearance when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
// [tablet landscape]: Do not overlay title
// [tablet landscape]: Omit overlaying header title
@include break-at-device(tablet landscape) {
width: px2rem(468px);
}
// [screen +]: Match content width
// [screen +]: Match width of content area
@include break-from-device(screen) {
width: px2rem(688px);
}
@ -243,12 +235,12 @@ $md-toggle__search--checked:
padding: 0 px2rem(72px) 0 px2rem(44px);
}
// Transition on placeholder
// Search placeholder
&::placeholder {
transition: color 250ms;
}
// Placeholder and icon color in active state
// Search icon and placeholder
~ .md-search__icon,
&::placeholder {
color: var(--md-default-fg-color--light);
@ -259,7 +251,7 @@ $md-toggle__search--checked:
display: none;
}
// [tablet portrait -]: Full-screen search bar
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
width: 100%;
height: px2rem(48px);
@ -281,29 +273,29 @@ $md-toggle__search--checked:
padding-right: px2rem(44px);
}
// Search icon color
// Search icon
+ .md-search__icon {
color: var(--md-primary-bg-color);
}
// Placeholder color
// Search placeholder
&::placeholder {
color: var(--md-primary-bg-color--light);
}
// Hovered search field
// Search input on hover
&:hover {
background-color: hsla(0, 0%, 100%, 0.12);
}
// Set light background on active search field
#{$md-toggle__search--checked} & {
// Adjust appearance when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
color: var(--md-default-fg-color);
text-overflow: clip;
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px) px2rem(2px) 0 0;
// Search icon and placeholder color in active state
// Search icon and placeholder
+ .md-search__icon,
&::placeholder {
color: var(--md-default-fg-color--light);
@ -323,12 +315,12 @@ $md-toggle__search--checked:
color 250ms,
opacity 250ms;
// Hovered icon
// Search icon on hover
&:hover {
opacity: 0.7;
}
// Search icon
// Search focus button
&[for="__search"] {
top: px2rem(6px);
left: px2rem(10px);
@ -344,7 +336,7 @@ $md-toggle__search--checked:
}
}
// [tablet portrait -]: Full-screen search bar
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
top: px2rem(12px);
left: px2rem(16px);
@ -355,7 +347,7 @@ $md-toggle__search--checked:
left: initial;
}
// Hide the magnifying glass (1st icon)
// Hide the magnifying glass
svg:first-child {
display: none;
}
@ -365,14 +357,14 @@ $md-toggle__search--checked:
@include break-from-device(tablet landscape) {
pointer-events: none;
// Hide the arrow (2nd icon)
// Hide the back arrow
svg:last-child {
display: none;
}
}
}
// Reset button
// Search reset button
&[type="reset"] {
top: px2rem(6px);
right: px2rem(10px);
@ -389,7 +381,7 @@ $md-toggle__search--checked:
left: px2rem(10px);
}
// [tablet portrait -]: Full-screen search bar
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
top: px2rem(12px);
right: px2rem(16px);
@ -401,14 +393,14 @@ $md-toggle__search--checked:
}
}
// Show reset button if search is active and input non-empty
#{$md-toggle__search--checked}
// Show reset button when search is active and input non-empty
[data-md-toggle="search"]:checked ~ .md-header
.md-search__input:valid ~ & {
transform: scale(1);
opacity: 1;
pointer-events: initial;
// Hovered icon
// Search focus icon
&:hover {
opacity: 0.7;
}
@ -416,7 +408,7 @@ $md-toggle__search--checked:
}
}
// Search output container
// Search output
&__output {
position: absolute;
z-index: 1;
@ -424,7 +416,7 @@ $md-toggle__search--checked:
overflow: hidden;
border-radius: 0 0 px2rem(2px) px2rem(2px);
// [tablet portrait -]: Full-screen search bar
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
top: px2rem(48px);
bottom: 0;
@ -436,8 +428,8 @@ $md-toggle__search--checked:
opacity: 0;
transition: opacity 400ms;
// Show search output in active state
#{$md-toggle__search--checked} & {
// Show output when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
@include z-depth(6);
opacity: 1;
@ -445,12 +437,12 @@ $md-toggle__search--checked:
}
}
// Wrapper for scrolling on overflow
// Search scroll wrapper
&__scrollwrap {
height: 100%;
overflow-y: auto;
background-color: var(--md-default-bg-color);
// Hack: reduce jitter
// Hack: promote to own layer to reduce jitter
backface-visibility: hidden;
scroll-snap-type: y mandatory;
touch-action: pan-y;
@ -460,12 +452,12 @@ $md-toggle__search--checked:
transform: translateZ(0);
}
// [tablet landscape]: Set absolute width to omit unnecessary reflow
// [tablet landscape]: Set fixed width to omit unnecessary reflow
@include break-at-device(tablet landscape) {
width: px2rem(468px);
}
// [screen +]: Set absolute width to omit unnecessary reflow
// [screen +]: Set fixed width to omit unnecessary reflow
@include break-from-device(screen) {
width: px2rem(688px);
}
@ -473,31 +465,30 @@ $md-toggle__search--checked:
// [tablet landscape +]: Limit height to viewport
@include break-from-device(tablet landscape) {
max-height: 0;
// Override Firefox scrollbar style
scrollbar-width: thin;
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
// Expand in active state
#{$md-toggle__search--checked} & {
// Show scroll wrapper when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
max-height: 75vh;
}
// Override Firefox scrollbar hover color
// Search scroll wrapper on hover
&:hover {
scrollbar-color: var(--md-accent-fg-color) transparent;
}
// Override native scrollbar styles
// Webkit scrollbar
&::-webkit-scrollbar {
width: px2rem(4px);
height: px2rem(4px);
}
// Scrollbar thumb
// Webkit scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb
// Webkit scrollbar thumb on hover
&:hover {
background-color: var(--md-accent-fg-color);
}
@ -511,7 +502,7 @@ $md-toggle__search--checked:
color: var(--md-default-fg-color);
word-break: break-word;
// Search metadata
// Search result metadata
&__meta {
padding: 0 px2rem(16px);
color: var(--md-default-fg-color--light);
@ -520,7 +511,7 @@ $md-toggle__search--checked:
background-color: var(--md-default-fg-color--lightest);
scroll-snap-align: start;
// [tablet landscape +]: Increase left indent
// [tablet landscape +]: Adjust spacing
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
@ -532,48 +523,43 @@ $md-toggle__search--checked:
}
}
// List of items
// Search result list
&__list {
margin: 0;
padding: 0;
list-style: none;
}
// List item
// Search result item
&__item {
box-shadow: 0 px2rem(-1px) 0 var(--md-default-fg-color--lightest);
// No border for first item
// Omit border on first child
&:first-child {
box-shadow: none;
}
}
// Link inside item
// Search result link
&__link {
display: block;
outline: none;
transition: background 250ms;
transition: background-color 250ms;
scroll-snap-align: start;
// Focused or hovered link
// Search result link on focus/hover
&:focus,
&:hover {
background-color: var(--md-accent-fg-color--transparent);
// Slightly transparent icon
.md-search-result__article::before {
opacity: 0.7;
}
}
// Add a little spacing on the last element of the last link
// Adjust spacing on last child of last link
&:last-child p:last-child {
margin-bottom: px2rem(12px);
}
}
// Search result container
// Search result more link
&__more summary {
display: block;
padding: px2em(12px) px2rem(16px);
@ -586,46 +572,42 @@ $md-toggle__search--checked:
background-color 250ms;
scroll-snap-align: start;
// Focused or hovered button
// [tablet landscape +]: Adjust spacing
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
padding-left: px2rem(16px);
}
}
// Search result more link on focus/hover
&:focus,
&:hover {
color: var(--md-accent-fg-color);
background-color: var(--md-accent-fg-color--transparent);
}
// [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
padding-left: px2rem(16px);
}
}
// Remove default details marker
// Hide native details marker
&::-webkit-details-marker {
display: none;
}
// All following elements
& ~ * {
// Make less relevant terms more transparent
> * {
opacity: 0.65;
}
// Adjust transparency of less relevant results
& ~ * > * {
opacity: 0.65;
}
}
// Article - document or section
// Search result article
&__article {
position: relative;
padding: 0 px2rem(16px);
overflow: hidden;
// [tablet landscape +]: Increase left indent
// [tablet landscape +]: Adjust spacing
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
@ -636,10 +618,10 @@ $md-toggle__search--checked:
}
}
// Document
// Search result article document
&--document {
// Title
// Search result title
.md-search-result__title {
margin: px2rem(11px) 0;
font-weight: 400;
@ -658,7 +640,12 @@ $md-toggle__search--checked:
margin: px2rem(10px);
color: var(--md-default-fg-color--light);
// Inline icon and adjust icon to match font size
// [tablet portrait -]: Hide icon
@include break-to-device(tablet portrait) {
display: none;
}
// Search result icon content
&::after {
display: inline-block;
width: 100%;
@ -680,14 +667,9 @@ $md-toggle__search--checked:
transform: scaleX(-1);
}
}
// [tablet portrait -]: Hide page icon
@include break-to-device(tablet portrait) {
display: none;
}
}
// Title
// Search result title
&__title {
margin: 0.5em 0;
font-weight: 700;
@ -695,7 +677,7 @@ $md-toggle__search--checked:
line-height: 1.6;
}
// Teaser
// Search result teaser
&__teaser {
display: -webkit-box;
max-height: px2rem(40px);
@ -708,13 +690,13 @@ $md-toggle__search--checked:
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
// [mobile -]: Increase number of lines
// [mobile -]: Adjust number of lines
@include break-to-device(mobile) {
max-height: px2rem(60px);
-webkit-line-clamp: 3;
}
// [tablet landscape]: Increase number of lines
// [tablet landscape]: Adjust number of lines
@include break-at-device(tablet landscape) {
max-height: px2rem(60px);
-webkit-line-clamp: 3;
@ -727,7 +709,7 @@ $md-toggle__search--checked:
}
}
// Terms
// Search result terms
&__terms {
margin: 0.5em 0;
font-size: px2rem(12.8px);

130
src/assets/stylesheets/main/layout/_sidebar.scss
View File

@ -20,56 +20,35 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) drawer
$md-toggle__drawer--checked:
"[data-md-toggle=\"drawer\"]:checked ~ .md-container";
// ----------------------------------------------------------------------------
// Keyframes
// ----------------------------------------------------------------------------
// Activate scroll snapping with delay
@keyframes md-sidebar__scrollwrap--hack {
0%, 99% {
scroll-snap-type: none;
}
100% {
scroll-snap-type: y mandatory;
}
}
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Sidebar container
// Sidebar
.md-sidebar {
position: sticky;
top: px2rem(48px);
flex-shrink: 0;
align-self: flex-start;
width: px2rem(242px);
height: 0;
padding: px2rem(24px) 0;
// Hide for print
// [print]: Hide sidebar
@media print {
display: none;
}
// [tablet -]: Convert navigation to drawer
// [tablet -]: Show navigation as drawer
@include break-to-device(tablet) {
// Render primary sidebar as a slideout container
// Primary sidebar with navigation
&--primary {
position: fixed;
top: 0;
left: px2rem(-242px);
z-index: 3;
display: block;
width: px2rem(242px);
height: 100%;
background-color: var(--md-default-bg-color);
@ -84,8 +63,8 @@ $md-toggle__drawer--checked:
left: initial;
}
// Expanded drawer
#{$md-toggle__drawer--checked} & {
// Show sidebar when drawer is active
[data-md-toggle="drawer"]:checked ~ .md-container & {
@include z-depth(8);
transform: translateX(px2rem(242px));
@ -96,18 +75,25 @@ $md-toggle__drawer--checked:
}
}
// Hide overflow for nested navigation
// Stretch scroll wrapper for primary sidebar
.md-sidebar__scrollwrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
scroll-snap-type: none;
overflow: hidden;
}
}
}
// [screen +]: Convert navigation to sidebar
// [screen +]: Show navigation as sidebar
@include break-from-device(screen) {
height: 0;
// Normal sticky behavior, if JavaScript is not available.
// [no-js]: Switch to native sticky behavior
.no-js & {
height: auto;
}
@ -118,16 +104,20 @@ $md-toggle__drawer--checked:
display: none;
order: 2;
// [tablet landscape +]: Show table of contents next to body copy
// [tablet landscape +]: Show table of contents as sidebar
@include break-from-device(tablet landscape) {
display: block;
height: 0;
// Normal sticky behavior, if JavaScript is not available.
// [no-js]: Switch to native sticky behavior
.no-js & {
height: auto;
}
// Sidebar is visible
&:not([hidden]) {
display: block;
}
// Ensure smooth scrolling on iOS
.md-sidebar__scrollwrap {
touch-action: pan-y;
@ -135,58 +125,68 @@ $md-toggle__drawer--checked:
}
}
// Wrapper for scrolling on overflow
// Sidebar scroll wrapper
&__scrollwrap {
margin: 0 px2rem(4px);
overflow-y: auto;
// Hack: reduce jitter
// Hack: promote to own layer to reduce jitter
backface-visibility: hidden;
// Override Firefox scrollbar style
// Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container
// to the bottom if `scroll-snap-type` is set on the initial render. For
// this reason, we disable scroll snapping until this is resolved (#1667).
// scroll-snap-type: y mandatory;
scrollbar-width: thin;
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
// Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container
// to the bottom if `scroll-snap-type` is set on the initial render. For
// this reason, we use an animation to set scroll snaping with a slight
// delay, which seems to fix the issue (#1667).
.js & {
animation: md-sidebar__scrollwrap--hack 1000ms forwards;
}
// [tablet -]: Adjust margins
@include break-to-device(tablet) {
// Stretch scrollwrap for primary sidebar
.md-sidebar--primary & {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
scroll-snap-type: none;
}
}
// Override Firefox scrollbar hover color
// Sidebar scroll wrapper on hover
&:hover {
scrollbar-color: var(--md-accent-fg-color) transparent;
}
// Override native scrollbar styles
// Webkit scrollbar
&::-webkit-scrollbar {
width: px2rem(4px);
height: px2rem(4px);
}
// Scrollbar thumb
// Webkit scrollbar thumb
&::-webkit-scrollbar-thumb {
background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb
// Webkit scrollbar thumb on hover
&:hover {
background-color: var(--md-accent-fg-color);
}
}
}
}
// [tablet -]: Show overlay on active drawer
@include break-to-device(tablet) {
// Sidebar overlay
.md-overlay {
position: fixed;
top: 0;
z-index: 3;
width: 0;
height: 0;
background-color: hsla(0, 0%, 0%, 0.54);
opacity: 0;
transition:
width 0ms 250ms,
height 0ms 250ms,
opacity 250ms;
// Show overlay when drawer is active
[data-md-toggle="drawer"]:checked ~ & {
width: 100%;
height: 100%;
opacity: 1;
transition:
width 0ms,
height 0ms,
opacity 250ms;
}
}
}

18
src/assets/stylesheets/main/layout/_source.scss
View File

@ -29,7 +29,6 @@
0% {
height: 0;
}
100% {
height: px2rem(13px);
}
@ -41,11 +40,9 @@
transform: translateY(100%);
opacity: 0;
}
50% {
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
@ -56,22 +53,23 @@
// Rules
// ----------------------------------------------------------------------------
// Source container
// Repository information
.md-source {
display: block;
font-size: px2rem(13px);
line-height: 1.2;
white-space: nowrap;
// Hack: reduce jitter
// Hack: promote to own layer to reduce jitter
backface-visibility: hidden;
transition: opacity 250ms;
// Hovered source container
// Repository information on focus/hover
&:focus,
&:hover {
opacity: 0.7;
}
// Repository platform icon
// Repository icon
&__icon {
display: inline-block;
width: px2rem(48px);
@ -90,7 +88,7 @@
}
}
// Correct alignment, if icon is present
// Adjust spacing if icon is present
+ .md-source__repository {
margin-left: px2rem(-40px);
padding-left: px2rem(40px);
@ -116,7 +114,7 @@
vertical-align: middle;
}
// Source facts (statistics etc.)
// Repository facts
&__facts {
margin: 0;
padding: 0;
@ -132,7 +130,7 @@
}
}
// Fact
// Repository fact
&__fact {
float: left;

122
src/assets/stylesheets/main/layout/_tabs.scss
View File

@ -24,30 +24,30 @@
// Rules
// ----------------------------------------------------------------------------
// Tabs with outline
// Navigation tabs
.md-tabs {
width: 100%;
overflow: auto;
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
transition: background 250ms;
transition: background-color 250ms;
// Omit transitions, in case JavaScript is not available
.no-js & {
transition: none;
}
// [tablet -]: Hide tabs for tablet and below, as they don't make any sense
@include break-to-device(tablet) {
display: none;
}
// Hide for print
// [print]: Hide tabs
@media print {
display: none;
}
// List of items
// [tablet -]: Hide tabs
@include break-to-device(tablet) {
display: none;
}
// Tabs in hidden state, i.e. when scrolling down
&[data-md-state="hidden"] {
pointer-events: none;
}
// Navigation tabs list
&__list {
margin: 0;
margin-left: px2rem(4px);
@ -63,7 +63,7 @@
}
}
// List item
// Navigation tabs item
&__item {
display: inline-block;
height: px2rem(48px);
@ -71,26 +71,22 @@
padding-left: px2rem(12px);
}
// Link inside item - could be defined as block elements and aligned via
// Navigation tabs link - could be defined as block elements and aligned via
// line height, but this would imply more repaints when scrolling
&__link {
display: block;
margin-top: px2rem(16px);
font-size: px2rem(14px);
// Hack: save a repaint when the tabs are appearing when scrolling up
// Hack: save a repaint when tabs are appearing on scrolling up
backface-visibility: hidden;
opacity: 0.7;
transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 250ms;
// Omit transitions, in case JavaScript is not available
.no-js & {
transition: none;
}
// Active or hovered link
// Active link and link on focus/hover
&--active,
&:focus,
&:hover {
color: inherit;
opacity: 1;
@ -102,15 +98,10 @@
transition-delay: 20ms * ($i - 1);
}
}
}
// Fade-out tabs background upon scrolling
&[data-md-state="hidden"] {
pointer-events: none;
// Hide tabs upon scrolling - disable transition to minimizes repaints
// while scrolling down, while scrolling up seems to be okay
.md-tabs__link {
.md-tabs[data-md-state="hidden"] & {
transform: translateY(50%);
opacity: 0;
transition:
@ -118,77 +109,4 @@
opacity 100ms;
}
}
// [screen +]: Adjust main navigation styles
@include break-from-device(screen) {
// Hide 1st level nested items, as they are listed in the tabs
~ .md-main .md-nav--primary > .md-nav__list > .md-nav__item--nested {
display: none;
}
// Active tab
&--active ~ .md-main {
// Adjust 1st level styles
.md-nav--primary {
// Show title and remove spacing
.md-nav__title {
display: block;
padding: 0 px2rem(12px);
pointer-events: none;
scroll-snap-align: start;
// Hide site title
&[for="__drawer"] {
display: none;
}
}
// Hide 1st level items
> .md-nav__list > .md-nav__item {
display: none;
// Show 1st level active nested items
&--active {
display: block;
padding: 0;
// Hide nested links
> .md-nav__link {
display: none;
}
}
}
}
// Always expand nested navigation on 2nd level
.md-nav[data-md-level="1"] {
// Hack: always show active navigation tab on breakpoint screen, despite
// of checkbox being checked or not. Fixes #1655.
display: block;
// Remove spacing on 2nd level items
> .md-nav__list > .md-nav__item {
padding: 0 px2rem(12px);
// Add bottom spacing to last item
&:last-child {
padding-bottom: px2rem(12px);
// Remove bottom spacing for nested items
.md-nav__item {
padding-bottom: 0;
}
}
}
// Hide titles from 2nd level on
.md-nav .md-nav__title {
display: none;
}
}
}
}
}

7
src/assets/stylesheets/overrides/_typeset.scss
View File

@ -24,7 +24,7 @@
// Rules
// ----------------------------------------------------------------------------
// Typesetted content
// Scoped in typesetted content to match specificity of regular content
.md-typeset {
// Insiders color (for links, etc.)
@ -32,12 +32,13 @@
color: $clr-pink-500;
}
// Extension: switch buttons
// Switch buttons
.tx-switch button {
cursor: pointer;
transition: opacity 250ms;
// Hovered button
// Button on hover
&:focus,
&:hover {
opacity: 0.75;
}

2
src/assets/stylesheets/overrides/layout/_announce.scss
View File

@ -27,7 +27,7 @@
// Announcement bar
.md-announce {
// Preserve link colors
// Text link, also on focus/hover
a,
a:focus,
a:hover {

8
src/assets/stylesheets/overrides/layout/_content.scss
View File

@ -24,7 +24,7 @@
// Keyframes
// ----------------------------------------------------------------------------
// Heart animation
// Pumping heart animation
@keyframes tx-heart {
0%, 40%, 80%, 100% {
transform: scale(1);
@ -43,7 +43,7 @@
margin-top: px2rem(20px);
text-align: center;
// Link container
// Link to Insiders
a {
display: inline-block;
color: $clr-pink-500;
@ -51,14 +51,14 @@
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
color 125ms;
// Focused or hovered links
// Link to Insiders on focus/hover
&:focus,
&:hover {
transform: scale(1.2);
}
}
// Horizontal separators
// Horizontal separator
hr {
display: inline-block;
width: px2rem(40px);

6
src/assets/stylesheets/overrides/layout/_hero.scss
View File

@ -29,7 +29,7 @@
margin: 0 px2rem(16px);
color: var(--md-primary-bg-color);
// Make main headline thicker
// Main headline
h1 {
margin-bottom: px2rem(20px);
color: currentColor;
@ -51,14 +51,14 @@
display: flex;
align-items: stretch;
// Increase bottom spacing and set dimensions
// Adjust spacing and set dimensions
&__content {
max-width: px2rem(380px);
margin-top: px2rem(70px);
padding-bottom: 14vw;
}
// Swap with teaser and set dimensions
// Adjust order and set dimensions
&__image {
order: 1;
width: px2rem(760px);

14
src/assets/stylesheets/palette/_primary.scss
View File

@ -78,7 +78,7 @@
// Typeset color shades
--md-typeset-a-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
// [tablet portrait +]: Change color of search input
// [tablet portrait +]: Header-embedded search
@include break-from-device(tablet landscape) {
// Search input
@ -102,10 +102,10 @@
}
}
// [screen +]: Set bottom border for tabs
// [screen +]: Add bottom border for tabs
@include break-from-device(screen) {
// Tabs with outline
// Navigation tabs
.md-tabs {
border-bottom: px2rem(1px) solid hsla(0, 0%, 0%, 0.07);
}
@ -127,7 +127,7 @@
// Text color shades
--md-typeset-a-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
// Application header (stays always on top)
// Header
.md-header {
background-color: hsla(0, 0%, 0%, 1);
}
@ -135,7 +135,7 @@
// [tablet portrait -]: Layered navigation
@include break-to-device(tablet portrait) {
// Repository containing source
// Repository information container
.md-nav__source {
background-color: hsla(0, 0%, 0%, 0.87);
}
@ -148,7 +148,7 @@
.md-search__input {
background-color: hsla(0, 0%, 100%, 0.12);
// Hovered search field
// Search form on hover
&:hover {
background-color: hsla(0, 0%, 100%, 0.3);
}
@ -167,7 +167,7 @@
// [screen +]: Set background color for tabs
@include break-from-device(screen) {
// Tabs with outline
// Navigation tabs
.md-tabs {
background-color: hsla(0, 0%, 0%, 1);
}

33
src/base.html
View File

@ -45,11 +45,6 @@
<meta name="keywords" content="{{ config.site_keywords }}" />
{% endif %}
<!-- Canonical -->
{% if page.canonical_url %}
<link rel="canonical" href="{{ page.canonical_url }}" />
{% endif %}
<!-- Page author -->
{% if page and page.meta and page.meta.author %}
<meta name="author" content="{{ page.meta.author }}" />
@ -57,6 +52,11 @@
<meta name="author" content="{{ config.site_author }}" />
{% endif %}
<!-- Canonical -->
{% if page.canonical_url %}
<link rel="canonical" href="{{ page.canonical_url }}" />
{% endif %}
<!-- Favicon -->
<link rel="shortcut icon" href="{{ config.theme.favicon | url }}" />
@ -110,7 +110,7 @@
<!-- Load fonts from Google -->
{% if config.theme.font != false %}
{% set font = config.theme.font %}
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family={{
@ -185,6 +185,9 @@
<body dir="{{ direction }}">
{% endif %}
<!-- Retrieve features from configuration -->
{% set features = config.theme.features or [] %}
<!--
State toggles - we need to set autocomplete="off" in order to reset the
drawer on back button invocation in some browsers
@ -239,9 +242,9 @@
<!-- Hero teaser -->
{% block hero %}{% endblock %}
<!-- Tabs navigation -->
<!-- Navigation tabs -->
{% block tabs %}
{% if "navigation.tabs" in config.theme.features %}
{% if "navigation.tabs" in features %}
{% include "partials/tabs.html" %}
{% endif %}
{% endblock %}
@ -255,9 +258,13 @@
<!-- Main navigation -->
{% if nav %}
{% if page and page.meta and page.meta.hide %}
{% set hidden = "hidden" if "navigation" in page.meta.hide %}
{% endif %}
<div
class="md-sidebar md-sidebar--primary"
data-md-component="navigation"
{{ hidden }}
>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
@ -268,10 +275,14 @@
{% endif %}
<!-- Table of contents -->
{% if page.toc %}
{% if page.toc and not "toc.integrate" in features %}
{% if page and page.meta and page.meta.hide %}
{% set hidden = "hidden" if "toc" in page.meta.hide %}
{% endif %}
<div
class="md-sidebar md-sidebar--secondary"
data-md-component="toc"
{{ hidden }}
>
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
@ -306,7 +317,7 @@
as the main headline.
-->
{% if not "\x3ch1" in page.content %}
<h1>{{ page.title | default(config.site_name, true)}}</h1>
<h1>{{ page.title | d(config.site_name, true)}}</h1>
{% endif %}
<!-- Content -->
@ -372,7 +383,7 @@
<script>
app = initialize({
base: "{{ base_url }}",
features: {{ config.theme.features or [] | tojson }},
features: {{ features or [] | tojson }},
search: Object.assign({
worker: "{{ 'assets/javascripts/worker/search.js' | url }}"
}, typeof search !== "undefined" && search)

20
src/partials/header.html
View File

@ -21,7 +21,7 @@
-->
<!-- Mitigate bug: https://github.com/mkdocs/mkdocs/issues/2191 -->
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
{% set site_url = site_url ~ "/index.html" %}
{% endif %}
@ -49,16 +49,14 @@
<!-- Header title -->
<div class="md-header-nav__title" data-md-component="header-title">
{% if config.site_name == page.title %}
<div class="md-header-nav__ellipsis md-ellipsis">
{{ config.site_name }}
</div>
{% else %}
<div class="md-header-nav__ellipsis">
<span class="md-header-nav__topic md-ellipsis">
<div class="md-header-nav__ellipsis">
<div class="md-header-nav__topic">
<span class="md-ellipsis">
{{ config.site_name }}
</span>
<span class="md-header-nav__topic md-ellipsis">
</div>
<div class="md-header-nav__topic">
<span class="md-ellipsis">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
{% else %}
@ -66,7 +64,7 @@
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
<!-- Button to open search dialogue -->
@ -79,7 +77,7 @@
{% include "partials/search.html" %}
{% endif %}
<!-- Repository containing source -->
<!-- Repository information -->
{% if config.repo_url %}
<div class="md-header-nav__source">
{% include "partials/source.html" %}

41
src/partials/nav-item.html
View File

@ -20,25 +20,48 @@
IN THE SOFTWARE.
-->
<!-- Determine class according to level -->
<!-- Retrieve features from configuration -->
{% set features = config.theme.features or [] %}
<!-- Determine class according to state -->
{% set class = "md-nav__item" %}
{% if nav_item.active %}
{% set class = "md-nav__item md-nav__item--active" %}
{% set class = class ~ " md-nav__item--active" %}
{% endif %}
<!-- Main navigation item with nested items -->
{% if nav_item.children %}
<!-- Determine whether to render item as a section -->
{% if "navigation.sections" in features and level == 1 + (
"navigation.tabs" in features
) %}
{% set class = class ~ " md-nav__item--section" %}
{% endif %}
<!-- Render item with nested items -->
<li class="{{ class }} md-nav__item--nested">
<!-- Active checkbox expands items contained within nested section -->
{% set checked = "checked" if nav_item.active %}
<input
class="md-nav__toggle md-toggle"
data-md-toggle="{{ path }}"
type="checkbox"
id="{{ path }}"
{{ checked }}
/>
{% if "navigation.expand" in features and not checked %}
<input
class="md-nav__toggle md-toggle"
data-md-toggle="{{ path }}"
data-md-state="indeterminate"
type="checkbox"
id="{{ path }}"
checked
/>
{% else %}
<input
class="md-nav__toggle md-toggle"
data-md-toggle="{{ path }}"
type="checkbox"
id="{{ path }}"
{{ checked }}
/>
{% endif %}
<!-- Expand active pages -->
<label class="md-nav__link" for="{{ path }}">

15
src/partials/nav.html
View File

@ -21,14 +21,23 @@
-->
<!-- Mitigate bug: https://github.com/mkdocs/mkdocs/issues/2191 -->
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
{% set site_url = config.site_url | d(nav.homepage.url, true) | url %}
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
{% set site_url = site_url ~ "/index.html" %}
{% endif %}
<!-- Determine class according to configuration -->
{% set class = "md-nav md-nav--primary" %}
{% if "navigation.tabs" in features %}
{% set class = class ~ " md-nav--lifted" %}
{% endif %}
{% if "toc.integrate" in features %}
{% set class = class ~ " md-nav--integrated" %}
{% endif %}
<!-- Main navigation -->
<nav
class="md-nav md-nav--primary"
class="{{ class }}"
aria-label="{{ lang.t('nav.title') }}"
data-md-level="0"
>
@ -46,7 +55,7 @@
{{ config.site_name }}
</label>
<!-- Repository containing source -->
<!-- Repository information -->
{% if config.repo_url %}
<div class="md-nav__source">
{% include "partials/source.html" %}

40
src/partials/tabs-item.html
View File

@ -20,44 +20,36 @@
IN THE SOFTWARE.
-->
<!-- Home page -->
{% if nav_item.is_homepage or nav_item.url == "index.html" %}
<li class="md-tabs__item">
{% set class = "md-tabs__link" %}
{% if not page.ancestors | length and nav | selectattr("url", page.url) %}
{% set class = "md-tabs__link md-tabs__link--active" %}
{% endif %}
<a href="{{ nav_item.url | url }}" class="{{ class }}">
{{ nav_item.title }}
</a>
</li>
<!-- Determine class according to state -->
{% if not class %}
{% set class = "md-tabs__link" %}
{% if nav_item.active %}
{% set class = class ~ " md-tabs__link--active" %}
{% endif %}
{% endif %}
<!-- Main navigation item with nested items -->
{% elif nav_item.children and nav_item.children | length > 0 %}
{% set title = title | default(nav_item.title) %}
{% if nav_item.children %}
{% set title = title | d(nav_item.title) %}
{% set nav_item = nav_item.children | first %}
<!-- Recurse, if the first item has nested items -->
{% if (nav_item.children | first).children %}
{% set nav_item = nav_item.children | first %}
<!-- Recurse, if the first item has further nested items -->
{% if nav_item.children %}
{% include "partials/tabs-item.html" %}
<!-- Render item -->
{% else %}
<li class="md-tabs__item">
{% set class = "md-tabs__link" %}
{% if nav_item.active %}
{% set class = "md-tabs__link md-tabs__link--active" %}
{% endif %}
<a href="{{ (nav_item.children | first).url | url }}" class="{{ class }}">
<a href="{{ nav_item.url | url }}" class="{{ class }}">
{{ title }}
</a>
</li>
{% endif %}
<!-- Main navigation item with external link -->
{% elif nav_item.url.startswith("http") %}
<!-- Main navigation item -->
{% else %}
<li class="md-tabs__item">
<a href="{{ nav_item.url | url }}" class="md-tabs__link">
<a href="{{ nav_item.url | url }}" class="{{ class }}">
{{ nav_item.title }}
</a>
</li>

11
src/partials/tabs.html
View File

@ -20,15 +20,12 @@
IN THE SOFTWARE.
-->
<!-- Determine class according to level -->
{% set class = "md-tabs" %}
{% if page.ancestors | length > 0 %}
{% set class = "md-tabs md-tabs--active" %}
{% endif %}
<!-- Hack: unset variable, as we're using it recursively in tabs-item.html -->
{% set class = "" %}
<!-- Tabs with outline -->
<!-- Navigation tabs -->
<nav
class="{{ class }}"
class="md-tabs"
aria-label="{{ lang.t('tabs.title') }}"
data-md-component="tabs"
>