From 8f2deff7d256444d5e1b08b6c93cc8d717cf75bc Mon Sep 17 00:00:00 2001 From: Kariton <67470612+Kariton@users.noreply.github.com> Date: Wed, 10 Jul 2024 06:48:54 +0200 Subject: [PATCH 01/11] multilang support; language selector --- assets/css/screen.css | 306 +- assets/css/screen.post.css | 5832 ++++++++++++++++- .../{ => de}/authors/georg-makowski/_index.md | 0 exampleSite/content/{ => de}/blog/_index.md | 0 .../index.md | 0 .../content/{ => de}/blog/codelayout/index.md | 0 .../{ => de}/blog/image/embed/index.md | 0 .../{ => de}/blog/image/standalone/index.md | 0 .../{ => de}/blog/marginal-note/index.md | 0 .../content/{ => de}/categories/_index.md | 0 .../{ => de}/categories/design/_index.md | 0 .../{ => de}/categories/markdown/_index.md | 0 .../{ => de}/categories/module/_index.md | 0 .../{ => de}/categories/overview/_index.md | 0 .../{ => de}/categories/release/_index.md | 0 exampleSite/content/{ => de}/doc/_index.md | 0 .../content/{ => de}/doc/overview/_index.md | 0 .../{ => de}/doc/overview/coming/index.md | 0 .../{ => de}/doc/overview/concept/index.md | 0 .../{ => de}/doc/overview/features/index.md | 0 .../{ => de}/doc/overview/markdown/index.md | 0 exampleSite/content/de/news/_index.md | 15 + .../content/{ => de}/news/dark-mode/index.md | 0 .../{ => de}/news/first-release/index.md | 0 .../content/de/news/open-in-vscode/index.md | 47 + .../news/replacements-module/index.md | 0 .../news/resources-in-data-files/index.md | 0 .../content/{ => de}/news/search/index.md | 0 .../{ => de}/news/second-beta/index.md | 0 exampleSite/content/{ => de}/search/index.md | 0 exampleSite/content/{ => de}/site/_index.md | 0 exampleSite/content/{ => de}/tags/_index.md | 0 .../{ => de}/tags/accessible/_index.md | 0 .../content/{ => de}/tags/author/_index.md | 0 .../content/{ => de}/tags/block/_index.md | 0 .../content/{ => de}/tags/code/_index.md | 0 .../content/{ => de}/tags/feature/_index.md | 0 .../{ => de}/tags/fluid-responsive/_index.md | 0 .../content/{ => de}/tags/hugo/_index.md | 0 .../content/{ => de}/tags/image/_index.md | 0 .../content/{ => de}/tags/inline/_index.md | 0 .../{ => de}/tags/marginal-note/_index.md | 0 .../{ => de}/tags/replacement/_index.md | 0 .../content/{ => de}/tags/resources/_index.md | 0 .../content/{ => de}/tags/search/_index.md | 0 .../{ => de}/tags/stand-alone/_index.md | 0 .../content/{ => de}/tags/vscode/_index.md | 0 .../authors/georg-makowski/Joerg_Makowski.jpg | Bin .../georg-makowski/Joerg_Makowski2.jpg | Bin .../en/authors/georg-makowski/_index.md | 63 + .../authors/georg-makowski/small_portrait.jpg | Bin exampleSite/content/en/blog/_index.md | 11 + .../index.md | 37 + ...resource-database--R7raVu_isU-unsplash.jpg | Bin .../content/en/blog/codelayout/index.md | 123 + .../markus-spiske-1LLh8k2_YFk-unsplash.jpg | Bin .../content/en/blog/image/embed/index.md | 124 + .../{ => en}/blog/image/embed/micro.yaml | 0 .../{ => en}/blog/image/embed/normal.yaml | 0 .../{ => en}/blog/image/embed/small-left.yaml | 0 .../blog/image/embed/small-portrait.yaml | 0 .../blog/image/embed/small-right.yaml | 0 .../{ => en}/blog/image/embed/small.yaml | 0 .../{ => en}/blog/image/embed/text.yaml | 0 .../{ => en}/blog/image/embed/textvar.yaml | 0 .../{ => en}/blog/image/embed/textvar1.yaml | 0 .../{ => en}/blog/image/embed/textvar2.yaml | 0 .../{ => en}/blog/image/embed/tiny-left.yaml | 0 .../blog/image/embed/tiny-portrait.yaml | 0 .../{ => en}/blog/image/embed/tiny-right.yaml | 0 .../{ => en}/blog/image/embed/tiny.yaml | 0 .../blog/image/standalone/featured.yaml | 0 .../content/en/blog/image/standalone/index.md | 81 + .../{ => en}/blog/image/standalone/large.yaml | 0 .../blog/image/standalone/medium-left.yaml | 0 .../blog/image/standalone/medium-right.yaml | 0 .../blog/image/standalone/medium.yaml | 0 .../blog/image/standalone/normal.yaml | 0 .../blog/image/standalone/small-left.yaml | 0 .../blog/image/standalone/small-portrait.yaml | 0 .../blog/image/standalone/small-right.yaml | 0 .../{ => en}/blog/image/standalone/small.yaml | 0 .../{ => en}/blog/image/standalone/text.yaml | 0 .../blog/image/standalone/tiny-left.yaml | 0 .../blog/image/standalone/tiny-portrait.yaml | 0 .../blog/image/standalone/tiny-right.yaml | 0 .../{ => en}/blog/image/standalone/tiny.yaml | 0 .../blog/image/standalone/xlarge.yaml | 0 .../marginal-note/810px-Andrew_wiles1-3.jpg | Bin .../Diophantus-II-8-Fermat_cut.jpg | Bin .../content/en/blog/marginal-note/index.md | 48 + exampleSite/content/en/categories/_index.md | 11 + .../content/en/categories/design/_index.md | 11 + .../hal-gatewood-tZc3vjPCk-Q-unsplash.jpg | Bin .../{ => en}/categories/markdown/Markdown.png | Bin .../{ => en}/categories/markdown/Markdown.svg | 0 .../content/en/categories/markdown/_index.md | 15 + .../content/en/categories/module/_index.md | 11 + .../gerry-roarty-slkENpP5PbI-unsplash.jpg | Bin .../content/en/categories/overview/_index.md | 12 + .../drew-beamer-xU5Mqq0Chck-unsplash.jpg | Bin .../content/en/categories/release/_index.md | 13 + .../ankush-minda-TLBplYQvqn0-unsplash.jpg | Bin .../categories/v2osk-c9OfrVeD_tQ-unsplash.jpg | Bin exampleSite/content/en/doc/_index.md | 27 + exampleSite/content/en/doc/overview/_index.md | 22 + .../content/en/doc/overview/coming/index.md | 56 + .../doc/overview/concept/IBM_Plex_Sans.svg | 0 .../drew-beamer-xU5Mqq0Chck-unsplash.jpg | Bin .../content/en/doc/overview/concept/index.md | 74 + .../content/en/doc/overview/features/index.md | 65 + .../ray-hennessy-gdTxVSAE5sk-unsplash.jpg | Bin .../johannes-plenio-HcNVBkPYT4w-unsplash.jpg | Bin .../doc/overview/markdown/Markdown.png | Bin .../doc/overview/markdown/Markdown.svg | 0 .../erda-estremera-eMX1aIAp9Nw-unsplash.jpg | Bin .../content/en/doc/overview/markdown/index.md | 256 + .../markdown/mulyadi-JJMoAiVl9jA-unsplash.jpg | Bin .../miguel-a-amutio-j5GNmYQQcAo-unsplash.jpg | Bin .../moises-gonzalez-4xFUoiW3i4k-unsplash.jpg | Bin .../rebecca-li-JahHqUiXlig-unsplash.jpg | Bin exampleSite/content/{ => en}/news/_index.md | 0 ...alexander-andrews-vGCErDhrc3E-unsplash.jpg | Bin .../content/en/news/dark-mode/index.md | 19 + .../content/en/news/first-release/index.md | 33 + ...resource-database-jRDZ4_wYCa8-unsplash.jpg | Bin .../{ => en}/news/open-in-vscode/index.md | 0 .../en/news/replacements-module/index.md | 33 + .../news/resources-in-data-files/global.yaml | 0 .../en/news/resources-in-data-files/index.md | 53 + .../news/resources-in-data-files/remote.json | 0 exampleSite/content/en/news/search/index.md | 17 + .../content/en/news/second-beta/index.md | 28 + ...resource-database-GaBX_ooh8-g-unsplash.jpg | Bin exampleSite/content/en/search/index.md | 11 + exampleSite/content/{ => en}/site/Hugo.png | Bin exampleSite/content/{ => en}/site/Hugo.svg | 0 .../content/{ => en}/site/Markdown.png | Bin .../content/{ => en}/site/Markdown.svg | 0 exampleSite/content/{ => en}/site/Perplex.png | Bin exampleSite/content/{ => en}/site/Perplex.svg | 0 exampleSite/content/en/site/_index.md | 37 + .../erda-estremera-eMX1aIAp9Nw-unsplash.jpg | Bin .../site/mulyadi-JJMoAiVl9jA-unsplash.jpg | Bin .../content/{ => en}/site/portrait.jpg | Bin exampleSite/content/en/tags/_index.md | 12 + .../tags/accessible/Accessibility_logo.png | Bin .../tags/accessible/Accessibility_logo.svg | 0 .../content/en/tags/accessible/_index.md | 16 + .../tags/angele-kamp-KaeaUITiWnc-unsplash.jpg | Bin exampleSite/content/en/tags/author/_index.md | 12 + .../charles-etoroma-vkc1YLZ50yE-unsplash.jpg | Bin exampleSite/content/en/tags/block/_index.md | 15 + ...jan-antonin-kolar-HB26V8IRL2k-unsplash.jpg | Bin .../tandem-x-visuals-fYx7mQHxVEw-unsplash.jpg | Bin exampleSite/content/en/tags/code/_index.md | 13 + .../markus-spiske-1LLh8k2_YFk-unsplash.jpg | Bin exampleSite/content/en/tags/feature/_index.md | 12 + .../ray-hennessy-gdTxVSAE5sk-unsplash.jpg | Bin .../en/tags/fluid-responsive/_index.md | 11 + .../hal-gatewood-tZc3vjPCk-Q-unsplash.jpg | Bin ...resource-database--R7raVu_isU-unsplash.jpg | Bin .../content/{ => en}/tags/hugo/Hugo.png | Bin .../content/{ => en}/tags/hugo/Hugo.svg | 0 exampleSite/content/en/tags/hugo/_index.md | 14 + exampleSite/content/en/tags/image/_index.md | 12 + .../erda-estremera-eMX1aIAp9Nw-unsplash.jpg | Bin exampleSite/content/en/tags/inline/_index.md | 13 + .../indira-tjokorda-Y-VYK0SDLxs-unsplash.jpg | Bin .../Diophantus-II-8-Fermat_cut.jpg | Bin .../content/en/tags/marginal-note/_index.md | 13 + .../content/en/tags/replacement/_index.md | 11 + .../jackson-sophat-_t-l5FFH8VA-unsplash.jpg | Bin .../content/en/tags/resources/_index.md | 11 + .../alexander-grey-tn57JI3CewI-unsplash.jpg | Bin exampleSite/content/en/tags/search/_index.md | 11 + .../mick-haupt-eQ2Z9ay9Wws-unsplash.jpg | Bin .../content/en/tags/stand-alone/_index.md | 13 + .../austin-mabe-i7x84It0L-Y-unsplash.jpg | Bin .../Visual_Studio_Code_1.35_icon.svg.png | Bin exampleSite/content/en/tags/vscode/_index.md | 15 + exampleSite/hugo.yaml | 18 +- layouts/partials/nav/masthead.html | 1 + .../nav/masthead/language-selector.html | 31 + 184 files changed, 7618 insertions(+), 127 deletions(-) rename exampleSite/content/{ => de}/authors/georg-makowski/_index.md (100%) rename exampleSite/content/{ => de}/blog/_index.md (100%) rename exampleSite/content/{ => de}/blog/accessibility-of-fluid-typography/index.md (100%) rename exampleSite/content/{ => de}/blog/codelayout/index.md (100%) rename exampleSite/content/{ => de}/blog/image/embed/index.md (100%) rename exampleSite/content/{ => de}/blog/image/standalone/index.md (100%) rename exampleSite/content/{ => de}/blog/marginal-note/index.md (100%) rename exampleSite/content/{ => de}/categories/_index.md (100%) rename exampleSite/content/{ => de}/categories/design/_index.md (100%) rename exampleSite/content/{ => de}/categories/markdown/_index.md (100%) rename exampleSite/content/{ => de}/categories/module/_index.md (100%) rename exampleSite/content/{ => de}/categories/overview/_index.md (100%) rename exampleSite/content/{ => de}/categories/release/_index.md (100%) rename exampleSite/content/{ => de}/doc/_index.md (100%) rename exampleSite/content/{ => de}/doc/overview/_index.md (100%) rename exampleSite/content/{ => de}/doc/overview/coming/index.md (100%) rename exampleSite/content/{ => de}/doc/overview/concept/index.md (100%) rename exampleSite/content/{ => de}/doc/overview/features/index.md (100%) rename exampleSite/content/{ => de}/doc/overview/markdown/index.md (100%) create mode 100644 exampleSite/content/de/news/_index.md rename exampleSite/content/{ => de}/news/dark-mode/index.md (100%) rename exampleSite/content/{ => de}/news/first-release/index.md (100%) create mode 100644 exampleSite/content/de/news/open-in-vscode/index.md rename exampleSite/content/{ => de}/news/replacements-module/index.md (100%) rename exampleSite/content/{ => de}/news/resources-in-data-files/index.md (100%) rename exampleSite/content/{ => de}/news/search/index.md (100%) rename exampleSite/content/{ => de}/news/second-beta/index.md (100%) rename exampleSite/content/{ => de}/search/index.md (100%) rename exampleSite/content/{ => de}/site/_index.md (100%) rename exampleSite/content/{ => de}/tags/_index.md (100%) rename exampleSite/content/{ => de}/tags/accessible/_index.md (100%) rename exampleSite/content/{ => de}/tags/author/_index.md (100%) rename exampleSite/content/{ => de}/tags/block/_index.md (100%) rename exampleSite/content/{ => de}/tags/code/_index.md (100%) rename exampleSite/content/{ => de}/tags/feature/_index.md (100%) rename exampleSite/content/{ => de}/tags/fluid-responsive/_index.md (100%) rename exampleSite/content/{ => de}/tags/hugo/_index.md (100%) rename exampleSite/content/{ => de}/tags/image/_index.md (100%) rename exampleSite/content/{ => de}/tags/inline/_index.md (100%) rename exampleSite/content/{ => de}/tags/marginal-note/_index.md (100%) rename exampleSite/content/{ => de}/tags/replacement/_index.md (100%) rename exampleSite/content/{ => de}/tags/resources/_index.md (100%) rename exampleSite/content/{ => de}/tags/search/_index.md (100%) rename exampleSite/content/{ => de}/tags/stand-alone/_index.md (100%) rename exampleSite/content/{ => de}/tags/vscode/_index.md (100%) rename exampleSite/content/{ => en}/authors/georg-makowski/Joerg_Makowski.jpg (100%) rename exampleSite/content/{ => en}/authors/georg-makowski/Joerg_Makowski2.jpg (100%) create mode 100644 exampleSite/content/en/authors/georg-makowski/_index.md rename exampleSite/content/{ => en}/authors/georg-makowski/small_portrait.jpg (100%) create mode 100644 exampleSite/content/en/blog/_index.md create mode 100644 exampleSite/content/en/blog/accessibility-of-fluid-typography/index.md rename exampleSite/content/{ => en}/blog/accessibility-of-fluid-typography/resource-database--R7raVu_isU-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/blog/codelayout/index.md rename exampleSite/content/{ => en}/blog/codelayout/markus-spiske-1LLh8k2_YFk-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/blog/image/embed/index.md rename exampleSite/content/{ => en}/blog/image/embed/micro.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/normal.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/small-left.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/small-portrait.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/small-right.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/small.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/text.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/textvar.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/textvar1.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/textvar2.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/tiny-left.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/tiny-portrait.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/tiny-right.yaml (100%) rename exampleSite/content/{ => en}/blog/image/embed/tiny.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/featured.yaml (100%) create mode 100644 exampleSite/content/en/blog/image/standalone/index.md rename exampleSite/content/{ => en}/blog/image/standalone/large.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/medium-left.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/medium-right.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/medium.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/normal.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/small-left.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/small-portrait.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/small-right.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/small.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/text.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/tiny-left.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/tiny-portrait.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/tiny-right.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/tiny.yaml (100%) rename exampleSite/content/{ => en}/blog/image/standalone/xlarge.yaml (100%) rename exampleSite/content/{ => en}/blog/marginal-note/810px-Andrew_wiles1-3.jpg (100%) rename exampleSite/content/{ => en}/blog/marginal-note/Diophantus-II-8-Fermat_cut.jpg (100%) create mode 100644 exampleSite/content/en/blog/marginal-note/index.md create mode 100644 exampleSite/content/en/categories/_index.md create mode 100644 exampleSite/content/en/categories/design/_index.md rename exampleSite/content/{ => en}/categories/design/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg (100%) rename exampleSite/content/{ => en}/categories/markdown/Markdown.png (100%) rename exampleSite/content/{ => en}/categories/markdown/Markdown.svg (100%) create mode 100644 exampleSite/content/en/categories/markdown/_index.md create mode 100644 exampleSite/content/en/categories/module/_index.md rename exampleSite/content/{ => en}/categories/module/gerry-roarty-slkENpP5PbI-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/categories/overview/_index.md rename exampleSite/content/{ => en}/categories/overview/drew-beamer-xU5Mqq0Chck-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/categories/release/_index.md rename exampleSite/content/{ => en}/categories/release/ankush-minda-TLBplYQvqn0-unsplash.jpg (100%) rename exampleSite/content/{ => en}/categories/v2osk-c9OfrVeD_tQ-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/doc/_index.md create mode 100644 exampleSite/content/en/doc/overview/_index.md create mode 100644 exampleSite/content/en/doc/overview/coming/index.md rename exampleSite/content/{ => en}/doc/overview/concept/IBM_Plex_Sans.svg (100%) rename exampleSite/content/{ => en}/doc/overview/concept/drew-beamer-xU5Mqq0Chck-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/doc/overview/concept/index.md create mode 100644 exampleSite/content/en/doc/overview/features/index.md rename exampleSite/content/{ => en}/doc/overview/features/ray-hennessy-gdTxVSAE5sk-unsplash.jpg (100%) rename exampleSite/content/{ => en}/doc/overview/johannes-plenio-HcNVBkPYT4w-unsplash.jpg (100%) rename exampleSite/content/{ => en}/doc/overview/markdown/Markdown.png (100%) rename exampleSite/content/{ => en}/doc/overview/markdown/Markdown.svg (100%) rename exampleSite/content/{ => en}/doc/overview/markdown/erda-estremera-eMX1aIAp9Nw-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/doc/overview/markdown/index.md rename exampleSite/content/{ => en}/doc/overview/markdown/mulyadi-JJMoAiVl9jA-unsplash.jpg (100%) rename exampleSite/content/{ => en}/doc/overview/miguel-a-amutio-j5GNmYQQcAo-unsplash.jpg (100%) rename exampleSite/content/{ => en}/doc/overview/moises-gonzalez-4xFUoiW3i4k-unsplash.jpg (100%) rename exampleSite/content/{ => en}/doc/overview/rebecca-li-JahHqUiXlig-unsplash.jpg (100%) rename exampleSite/content/{ => en}/news/_index.md (100%) rename exampleSite/content/{ => en}/news/dark-mode/alexander-andrews-vGCErDhrc3E-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/news/dark-mode/index.md create mode 100644 exampleSite/content/en/news/first-release/index.md rename exampleSite/content/{ => en}/news/first-release/resource-database-jRDZ4_wYCa8-unsplash.jpg (100%) rename exampleSite/content/{ => en}/news/open-in-vscode/index.md (100%) create mode 100644 exampleSite/content/en/news/replacements-module/index.md rename exampleSite/content/{ => en}/news/resources-in-data-files/global.yaml (100%) create mode 100644 exampleSite/content/en/news/resources-in-data-files/index.md rename exampleSite/content/{ => en}/news/resources-in-data-files/remote.json (100%) create mode 100644 exampleSite/content/en/news/search/index.md create mode 100644 exampleSite/content/en/news/second-beta/index.md rename exampleSite/content/{ => en}/news/second-beta/resource-database-GaBX_ooh8-g-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/search/index.md rename exampleSite/content/{ => en}/site/Hugo.png (100%) rename exampleSite/content/{ => en}/site/Hugo.svg (100%) rename exampleSite/content/{ => en}/site/Markdown.png (100%) rename exampleSite/content/{ => en}/site/Markdown.svg (100%) rename exampleSite/content/{ => en}/site/Perplex.png (100%) rename exampleSite/content/{ => en}/site/Perplex.svg (100%) create mode 100644 exampleSite/content/en/site/_index.md rename exampleSite/content/{ => en}/site/erda-estremera-eMX1aIAp9Nw-unsplash.jpg (100%) rename exampleSite/content/{ => en}/site/mulyadi-JJMoAiVl9jA-unsplash.jpg (100%) rename exampleSite/content/{ => en}/site/portrait.jpg (100%) create mode 100644 exampleSite/content/en/tags/_index.md rename exampleSite/content/{ => en}/tags/accessible/Accessibility_logo.png (100%) rename exampleSite/content/{ => en}/tags/accessible/Accessibility_logo.svg (100%) create mode 100644 exampleSite/content/en/tags/accessible/_index.md rename exampleSite/content/{ => en}/tags/angele-kamp-KaeaUITiWnc-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/author/_index.md rename exampleSite/content/{ => en}/tags/author/charles-etoroma-vkc1YLZ50yE-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/block/_index.md rename exampleSite/content/{ => en}/tags/block/jan-antonin-kolar-HB26V8IRL2k-unsplash.jpg (100%) rename exampleSite/content/{ => en}/tags/block/tandem-x-visuals-fYx7mQHxVEw-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/code/_index.md rename exampleSite/content/{ => en}/tags/code/markus-spiske-1LLh8k2_YFk-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/feature/_index.md rename exampleSite/content/{ => en}/tags/feature/ray-hennessy-gdTxVSAE5sk-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/fluid-responsive/_index.md rename exampleSite/content/{ => en}/tags/fluid-responsive/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg (100%) rename exampleSite/content/{ => en}/tags/fluid-responsive/resource-database--R7raVu_isU-unsplash.jpg (100%) rename exampleSite/content/{ => en}/tags/hugo/Hugo.png (100%) rename exampleSite/content/{ => en}/tags/hugo/Hugo.svg (100%) create mode 100644 exampleSite/content/en/tags/hugo/_index.md create mode 100644 exampleSite/content/en/tags/image/_index.md rename exampleSite/content/{ => en}/tags/image/erda-estremera-eMX1aIAp9Nw-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/inline/_index.md rename exampleSite/content/{ => en}/tags/inline/indira-tjokorda-Y-VYK0SDLxs-unsplash.jpg (100%) rename exampleSite/content/{ => en}/tags/marginal-note/Diophantus-II-8-Fermat_cut.jpg (100%) create mode 100644 exampleSite/content/en/tags/marginal-note/_index.md create mode 100644 exampleSite/content/en/tags/replacement/_index.md rename exampleSite/content/{ => en}/tags/replacement/jackson-sophat-_t-l5FFH8VA-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/resources/_index.md rename exampleSite/content/{ => en}/tags/resources/alexander-grey-tn57JI3CewI-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/search/_index.md rename exampleSite/content/{ => en}/tags/search/mick-haupt-eQ2Z9ay9Wws-unsplash.jpg (100%) create mode 100644 exampleSite/content/en/tags/stand-alone/_index.md rename exampleSite/content/{ => en}/tags/stand-alone/austin-mabe-i7x84It0L-Y-unsplash.jpg (100%) rename exampleSite/content/{ => en}/tags/vscode/Visual_Studio_Code_1.35_icon.svg.png (100%) create mode 100644 exampleSite/content/en/tags/vscode/_index.md create mode 100644 layouts/partials/nav/masthead/language-selector.html diff --git a/assets/css/screen.css b/assets/css/screen.css index eedc70027..6e76ebbde 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -732,16 +732,16 @@ body { } /* #sidebar-left { - position: fixed; - left: calc(0.5rem + 2rem * var(--se)); - z-index: 2; - @media screen and (min-width: $bp-3col) { - position: relative; - } + position: fixed; + left: calc(0.5rem + 2rem * var(--se)); + z-index: 2; + @media screen and (min-width: $bp-3col) { + position: relative; + } } */ /* @keyframes fade { - from { opacity: 0; } - to { opacity: 1; } + from { opacity: 0; } + to { opacity: 1; } } */ #l-footer { flex: 0 0 auto; @@ -822,22 +822,22 @@ body { } /* .icon-font { - // position: relative; - // bottom: 0.0625em; - display: inline-block; - font-family: "Material Symbols Outlined"; - font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; - font-style: normal; - vertical-align: top; - white-space: nowrap; - letter-spacing: normal; - text-transform: none; - word-wrap: normal; - direction: ltr; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - font-feature-settings: "liga"; + // position: relative; + // bottom: 0.0625em; + display: inline-block; + font-family: "Material Symbols Outlined"; + font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; + font-style: normal; + vertical-align: top; + white-space: nowrap; + letter-spacing: normal; + text-transform: none; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-feature-settings: "liga"; } */ #tgl-sb .icon:after, #toggle-toc .icon:after { display: inline-block; @@ -1349,32 +1349,32 @@ body { z-index: 1; overflow-wrap: break-word; /* .blind { - position: relative; - z-index: 1; - - &:after { - @include font.shapes(sans-cond, semibold); - position: absolute; - top: calc(50% - 0.5em); - left: calc(50% - 5ch); - z-index: -1; - font-size: 200%; - content: 'BLIND TEXT'; - transform: rotate(-10deg); - color: var(--c-watermark); - } - - &.blind-short:after { - font-size: 125%; - } - - &.blind-right:after { - left: calc(75% - 5ch); - } - - &.blind-left:after { - left: calc(25% - 5ch); - } + position: relative; + z-index: 1; + + &:after { + @include font.shapes(sans-cond, semibold); + position: absolute; + top: calc(50% - 0.5em); + left: calc(50% - 5ch); + z-index: -1; + font-size: 200%; + content: 'BLIND TEXT'; + transform: rotate(-10deg); + color: var(--c-watermark); + } + + &.blind-short:after { + font-size: 125%; + } + + &.blind-right:after { + left: calc(75% - 5ch); + } + + &.blind-left:after { + left: calc(25% - 5ch); + } } */ } .md::after, .container::after { @@ -1804,22 +1804,22 @@ body { } /* .md--serif { - > p, > ul, > ol, > dl { - @include font.shapes(serif, regular); - } - - strong { - @include font.weight(serif, semibold); - } - - .p-first { - @include font.shapes(serif, light); - @include font.style(serif, light, italic); - - strong { - @include font.weight(serif, regular); - } - } + > p, > ul, > ol, > dl { + @include font.shapes(serif, regular); + } + + strong { + @include font.weight(serif, semibold); + } + + .p-first { + @include font.shapes(serif, light); + @include font.style(serif, light, italic); + + strong { + @include font.weight(serif, regular); + } + } } */ .md--sans p, .md--sans ul, .md--sans ol, .md--sans dl { font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; @@ -2413,7 +2413,7 @@ sup:target { } /* .md--serif .footnotes p { - @include font.shapes(serif, regular); + @include font.shapes(serif, regular); } */ .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { text-align: left; @@ -2628,83 +2628,83 @@ sup:target { } /* .md--card { - h2 { - @include font.shapes(serif, bold ); - @include font.spacing( 0.05 ); - text-transform: uppercase; - } - .p-meta { - @include font.weight(sans-cond, text); - } - .p-meta + h2 { - margin-top: 0; - } + h2 { + @include font.shapes(serif, bold ); + @include font.spacing( 0.05 ); + text-transform: uppercase; + } + .p-meta { + @include font.weight(sans-cond, text); + } + .p-meta + h2 { + margin-top: 0; + } } .md--card--half { - h2 { - @include font.base-w(serif, bold, 0.95, 1.5, 0, 0.5, 0, 0, false ); - } - .p-meta { - @include font.base-w(sans-cond, light, 0.95, 1.5, 0.5, 0.5, 0, 0, false ); - } + h2 { + @include font.base-w(serif, bold, 0.95, 1.5, 0, 0.5, 0, 0, false ); + } + .p-meta { + @include font.base-w(sans-cond, light, 0.95, 1.5, 0.5, 0.5, 0, 0, false ); + } } .md--card--1 { - h2 { - @include font.base-x(serif, bold, math.div(5,6), 2, 0, 0, 0, 0, false ); - } - @media screen and (min-width: bp.$col-2) { - h2 { - @include font.base-x(serif, bold, 1, 2, 0, 0, 0, 0, false ); - } - } + h2 { + @include font.base-x(serif, bold, math.div(5,6), 2, 0, 0, 0, 0, false ); + } + @media screen and (min-width: bp.$col-2) { + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 0, 0, 0, false ); + } + } } .md--card--2 { - @extend .md--card--1; - @media screen and (min-width: bp.$col-3) { - h2 { - @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); - } - } + @extend .md--card--1; + @media screen and (min-width: bp.$col-3) { + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); + } + } } .md--card--3halfs { - @extend .md--card--1; - h2 { - @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); - } - .p-meta { - @include font.base-w(sans-cond, light, 1, 2, 0, 1, 0, 0, false ); - } + @extend .md--card--1; + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); + } + .p-meta { + @include font.base-w(sans-cond, light, 1, 2, 0, 1, 0, 0, false ); + } } .md--card--2 { - h2 { - @include font.base-x(serif, bold, math.div(5,4), 3, 0, 1, 0, 0, false ); - } - .p-meta { - @include font.base-x(sans-cond, light, 1, 1.5, 0.5, 0.5, 0, 0, false ); - } + h2 { + @include font.base-x(serif, bold, math.div(5,4), 3, 0, 1, 0, 0, false ); + } + .p-meta { + @include font.base-x(sans-cond, light, 1, 1.5, 0.5, 0.5, 0, 0, false ); + } } .md--home { - h1 { - @include font.base-x(serif, bold, 2, 4, 4, 3, -3, 0, false ); - @include font.shapes(serif, bold); - @include font.spacing( 0.05 ); - text-transform: uppercase; - color: black; - } - h2 { - @include font.base-x(serif, bold, math.div(7,8), 2, 2, 1, 0, 0, false ); - @include font.shapes(serif, bold ); - @include font.spacing( 0.05 ); - text-transform: uppercase; - } + h1 { + @include font.base-x(serif, bold, 2, 4, 4, 3, -3, 0, false ); + @include font.shapes(serif, bold); + @include font.spacing( 0.05 ); + text-transform: uppercase; + color: black; + } + h2 { + @include font.base-x(serif, bold, math.div(7,8), 2, 2, 1, 0, 0, false ); + @include font.shapes(serif, bold ); + @include font.spacing( 0.05 ); + text-transform: uppercase; + } } */ .md--article h2 { font-size: 2.86rem; @@ -3166,7 +3166,7 @@ sup:target { .md { /* > ul, > ol { - > li:last-child > p:last-child { padding-bottom: 0; } + > li:last-child > p:last-child { padding-bottom: 0; } } */ } .md ul h5, .md ul h6, .md ol h5, .md ol h6 { @@ -4547,6 +4547,62 @@ sup:target { color: var(--c-frame-border-active); } +.nav__item--dropdown { + position: relative; +} + +.nav__item--dropdown > .ctrl__menulink { + display: inline-block; + cursor: pointer; +} + +.nav__item--dropdown .dropdown { + display: none; + position: absolute; + background-color: var(--c-frame); + min-width: 160px; + z-index: 1; + padding: 0; + margin: 0; + list-style: none; +} + +.nav__item--dropdown:hover .dropdown, +.nav__item--dropdown:focus-within .dropdown { + display: block; +} + +.nav__item--dropdown .dropdown li { + color: var(--c-text-normal); + padding: 0.5rem; + text-decoration: none; + display: block; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.075em; + word-spacing: 0.225em; + text-transform: uppercase; +} + +.nav__item--dropdown .dropdown li:hover, +.nav__item--dropdown .dropdown li:focus { + background-color: var(--c-frame-border-active); + color: var(--c-text-low); +} + +.nav__item--dropdown .dropdown li a { + color: inherit; + text-decoration: none; + display: block; + width: 100%; +} + +.nav__item--dropdown .dropdown li a:hover, +.nav__item--dropdown .dropdown li a:focus { + background-color: transparent; + color: inherit; +} + .nav-main__link { letter-spacing: 0.075em; word-spacing: 0.225em; diff --git a/assets/css/screen.post.css b/assets/css/screen.post.css index 81c981adc..d0b972266 100644 --- a/assets/css/screen.post.css +++ b/assets/css/screen.post.css @@ -1 +1,5831 @@ -:root{--fs: 53.125%;--tnh: 10rem;--tg: 2rem;--es: 0rem;--ta: left}@media screen and (min-width: 39em){:root{--fs: 1.2820512821vw;--tg: 4rem;--es: 1rem;--ta: justify}}@media screen and (min-width: 48em){:root{--fs: 0.8695652174vw;--tnh: 5rem}}@media screen and (min-width: 79em){:root{--fs: 0.6578947368vw}}@media screen and (min-width: 95em){:root{--fs: 62.5%}}@media screen and (min-width: 120em){:root{--fs: 0.4424778761vw}}@media screen and (min-width: 141em){:root{--fs: 62.5%}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{margin:0;padding:0;border:0;margin-top:0;margin-bottom:0;font:inherit;vertical-align:baseline}ul,ol{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}hr{border:none;margin:0}em{font-style:italic}em em{font-style:normal}strong{font-weight:700}code,kbd,var{font-family:'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;-webkit-hyphens:none;hyphens:none}var{font-weight:300;word-wrap:break-word;word-break:break-word}strong var{font-weight:450}a{-webkit-text-decoration:none;text-decoration:none;color:inherit}small{font-size:74%}mark{display:inline-block;line-height:1em;padding:.1em .2em;color:var(--c-warn);background-color:var(--c-warn-bg);border-radius:.5rem;box-shadow:0 0 0 1px var(--c-shadow-2)}.link{position:relative;background-color:rgba(0,0,0,0);border-radius:.5rem}.link--nav,.link--nav-ext,.link--frame,.link--frame-ext{display:inline-block}.link--nav,.link--nav-ext{color:var(--c-nav-link);fill:var(--c-icon-link)}.link--nav:hover,.link--nav:focus,.link--nav:active,.link--nav-ext:hover,.link--nav-ext:focus,.link--nav-ext:active{background-color:var(--c-nav-link-hover-bg)}.link--nav:hover,.link--nav:focus,.link--nav:active,.link--nav.is-active{color:var(--c-nav-link-hover);fill:var(--c-icon-link-hover)}.link--nav-ext:hover,.link--nav-ext:focus,.link--nav-ext:active{color:var(--c-nav-link-ext-hover);fill:var(--c-icon-link-ext-hover)}.link--frame:hover,.link--frame:focus,.link--frame:active,.link--frame-ext:hover,.link--frame-ext:focus,.link--frame-ext:active{background-color:var(--c-frame-button-hover-bg)}.link--frame{color:var(--c-frame-link);fill:var(--c-frame-link)}.link--frame:hover,.link--frame:focus,.link--frame:active{color:var(--c-frame-link-hover);fill:var(--c-frame-link-hover)}.link--frame-ext{color:var(--c-frame-link-ext);fill:var(--c-frame-link-ext)}.link--frame-ext:hover,.link--frame-ext:focus,.link--frame-ext:active{color:var(--c-frame-link-ext-hover);fill:var(--c-frame-link-ext-hover)}.title__link{display:inline-block;color:var(--c-text-normal) !important}.h-a{position:relative}.h-a:before{position:absolute;left:-1.5rem;content:"§";font-size:80%;opacity:0;color:var(--c-nav-link)}.h-a:hover,.h-a:focus{color:var(--c-text-link-hover)}.h-a:hover:before,.h-a:focus:before{opacity:1}h1:target .h-a,h2:target .h-a,h3:target .h-a,h4:target .h-a,h5:target .h-a,h6:target .h-a{position:relative;background-color:rgba(0,0,0,0);box-shadow:none;box-shadow:initial}h1:target .h-a:before,h2:target .h-a:before,h3:target .h-a:before,h4:target .h-a:before,h5:target .h-a:before,h6:target .h-a:before{opacity:1;color:var(--c-nav-link-hover)}.link--text,.pagefind-ui__result-link{padding-left:.2em;padding-right:.2em;margin-left:-0.2em;margin-right:-0.2em;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-underline-offset:.075em;text-decoration-thickness:.075em;color:var(--c-text-link);text-decoration-color:var(--c-text-link)}.link--text code,.pagefind-ui__result-link code{text-decoration:inherit;text-decoration-thickness:inherit;text-underline-offset:inherit}.link--text:hover,.pagefind-ui__result-link:hover,.link--text:focus,.pagefind-ui__result-link:focus,.link--text:active,.pagefind-ui__result-link:active{color:var(--c-text-link-hover);text-decoration-color:var(--c-text-link-hover);background-color:var(--c-text-link-hover-bg)}.link--text[href^=http],[href^=http].pagefind-ui__result-link{color:var(--c-text-link-ext);text-decoration-color:var(--c-text-link-ext)}.link--text[href^=http]:after,[href^=http].pagefind-ui__result-link:after{content:"↗"}.link--text[href^=http]:hover,[href^=http].pagefind-ui__result-link:hover,.link--text[href^=http]:focus,[href^=http].pagefind-ui__result-link:focus{background-color:var(--c-text-link-ext-hover-bg);color:var(--c-text-link-ext-hover);text-decoration-color:var(--c-text-link-ext-hover)}.icon-link .icon{fill:var(--c-icon-link)}.icon-link:hover .icon,.icon-link:focus .icon,.icon-link.is-active .icon{fill:var(--c-nav-link-hover)}.icon-link-ext .icon{fill:var(--c-icon-link-ext)}.icon-link-ext:hover .icon,.icon-link-ext:focus .icon,.icon-link-ext.is-active .icon{fill:var(--c-icon-link-ext-hover)}.img__frame,.img__c{display:block;line-height:0}.img__frame{overflow:hidden}.img__frame--bg-white{background:#fff}.img__frame--bg-light{background:var(--c-frame-bg-1)}.img__frame--bg-dark{background:var(--c-frame)}.img__frame--box-none{box-shadow:none}.img__frame--box-shadow{box-shadow:0 0 0 1px var(--c-shadow-3)}.img__frame--pad-half{padding:.5rem}.img__frame--pad-one{padding:1rem}.img__frame--pad-two{padding:2rem}.img__frame--pad-three{padding:3rem}.l-footer .img__frame{box-shadow:0 0 0 .2rem var(--c-frame-shadow-1)}.img__c{filter:var(--f-img)}.img__c svg{width:100%;height:100%;margin:0 auto}.img__c--c-red{fill:var(--c-frame-border-active)}.img__c--t-symbol img{-o-object-fit:contain !important;object-fit:contain !important}.img--svg{width:100%;height:auto}#l-footer .img__c{filter:brightness(90%) grayscale(50%)}.caption{display:block;font-size:1.43rem;line-height:2rem;padding-top:.714465rem;margin-bottom:-.214465rem;min-height:2rem;text-align:left}.caption__text,.caption__attr{-webkit-hyphens:none !important;hyphens:none !important;color:var(--c-text-extralow)}.caption__text{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.caption__attr{float:right;text-align:right;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:300}.caption__id{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;color:var(--c-text-low)}.ls-blur-up-img,.img--ls{position:absolute;top:0;left:0;width:100%;height:100%;display:block;font-family:"blur-up: always","object-fit: cover";-o-object-fit:cover;object-fit:cover}.img--ls.ls-blur-up-is-loading{visibility:hidden}.ls-blur-up-img{opacity:1;filter:blur(0.4rem);transition:opacity 1s ease, filter 2s ease}.ls-blur-up-img.ls-inview.ls-original-loaded{opacity:0;filter:blur(0.4rem)}.img--lqip.lazyload,.img--lqip.lazyloading{filter:blur(0.4rem)}.img--lqip.lazyloaded{filter:blur(0);transition:filter 150ms ease}.img--ph{opacity:0;transition:opacity 150ms ease}.img--ph.lazyloaded{opacity:1}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}html{font-size:var(--fs);font-synthesis:weight style}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga" on,"clig" on,"dlig" off;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable both-edges;min-height:0;color:var(--c-text-normal);background-color:var(--c-page)}@media screen and (min-width: 79em){body{overflow:hidden}}.l-tnp{padding-top:calc(var(--tnh) + var(--tg))}@media screen and (min-width: 39em){.l-wrap{padding:0 2rem}}@media screen and (min-width: 48em){.l-wrap{padding:0}}::-moz-selection{color:var(--c-selection);background-color:var(--c-selection-bg)}::selection,.selection .cl{color:var(--c-selection);background-color:var(--c-selection-bg)}#l-masthead{position:fixed;top:0;z-index:100;width:100vw;height:10rem;color:var(--c-frame-text-normal);background-color:var(--c-frame);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);display:grid;justify-content:center;grid-template-columns:repeat(2, 50%);grid-template-rows:5rem 5rem;grid-template-areas:"logo ctrl" "menu menu"}@media screen and (min-width: 39em){#l-masthead{grid-template-columns:2rem repeat(2, 37rem) 2rem;grid-template-areas:". logo ctrl ." ". menu menu ."}}@media screen and (min-width: 48em){#l-masthead{height:5rem;grid-template-rows:5rem;grid-template-columns:2rem repeat(3, 37rem) 2rem;grid-template-areas:". logo menu ctrl ."}}@media screen and (min-width: 79em){#l-masthead{grid-template-columns:minmax(2rem, auto) repeat(4, 37rem) minmax(2rem, auto);grid-template-areas:". logo menu menu ctrl ."}}@media screen and (min-width: 120em){#l-masthead{grid-template-columns:minmax(2rem, auto) repeat(6, 37rem) minmax(2rem, auto);grid-template-areas:". logo . menu menu ctrl . ."}}#l-logo{grid-area:logo;width:150%}@media screen and (min-width: 39em){#l-logo{width:100%}}#l-menu{width:100%;height:100%;grid-area:menu;overflow:hidden}#l-ctrl{grid-area:ctrl;position:relative}#l-content-box{position:relative;flex-grow:1;flex-shrink:1;flex-basis:auto;display:flex;flex-direction:column;justify-content:space-between;scroll-margin-top:calc(var(--tnh) + var(--tg))}#l-content{padding-bottom:calc(2rem + 1 * var(--es))}.l-box{width:100%}@media screen and (min-width: 39em){.l-box{width:74rem}}@media screen and (min-width: 48em){.l-box{width:111rem}}@media screen and (min-width: 120em){.l-box--doc{width:148rem}}@media screen and (min-width: 79em){.l-box--full{width:148rem}}.l-page{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:repeat(2, 50%);grid-template-areas:"main main"}@media screen and (min-width: 39em){.l-page{grid-template-columns:2rem repeat(4, 18.5rem) 2rem;grid-template-areas:". main main main main main"}}@media screen and (min-width: 48em){.l-page{grid-template-columns:2rem repeat(6, 18.5rem) 2rem;grid-template-areas:". main main main main main main main"}}@media screen and (min-width: 79em){.l-page{grid-template-columns:minmax(2rem, auto) repeat(8, 18.5rem) minmax(2rem, auto);grid-template-areas:". main main main main main main main main main"}}@media screen and (min-width: 120em){.l-page{grid-template-columns:minmax(2rem, auto) repeat(12, 18.5rem) minmax(2rem, auto);grid-template-areas:". . . main main main main main main main main main main main"}}@media screen and (min-width: 79em){.l-page--doc{grid-template-areas:"fill left left main main main main main main main"}}@media screen and (min-width: 120em){.l-page--doc{grid-template-areas:"fill left left main main main main main main main main main main main"}}.l-page--doc.is-locked{background:#000}.l-page--doc.is-locked>#l-main{z-index:-1}#l-overlay{display:none;position:fixed;top:var(--tnh);left:0;z-index:9;height:100%;width:100%;background-color:rgba(0,0,0,.5333333333);cursor:inherit}#l-overlay.is-visible{display:block;cursor:pointer}#l-main{grid-area:main;display:flex;flex-direction:column;position:relative;z-index:5}@media screen and (min-width: 79em){#l-main{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;scrollbar-color:var(--c-scrollbar) var(--c-bg-3)}#l-main::-webkit-scrollbar{width:1rem;height:1rem}#l-main::-webkit-scrollbar-thumb{background:var(--c-scrollbar)}#l-main::-webkit-scrollbar-track{background:var(--c-bg-3)}}#l-sidebar{position:fixed;top:0;left:-100vw;z-index:90;transition:transform 250ms ease-out;width:100vw;height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;background-color:var(--c-frame)}#l-sidebar.is-visible{transform:translateX(100vw);transition:transform 250ms ease-in}@media screen and (min-width: 39em){#l-sidebar{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 48em){#l-sidebar{left:-55.5rem;width:55.5rem;margin-right:2rem;scrollbar-gutter:stable;scrollbar-color:var(--c-scrollbar) var(--c-bg-3)}#l-sidebar::-webkit-scrollbar{width:1rem;height:1rem}#l-sidebar::-webkit-scrollbar-thumb{background:var(--c-scrollbar)}#l-sidebar::-webkit-scrollbar-track{background:var(--c-bg-3)}#l-sidebar.is-visible{transform:translateX(55.5rem)}}@media screen and (min-width: 79em){#l-sidebar{grid-area:left;position:static;width:35rem;height:100%;padding-left:0;padding-right:0}}@media screen and (min-width: 79em){#l-fill{grid-area:fill;background-color:var(--c-frame)}}#l-footer{flex:0 0 auto;margin-top:2rem;background:var(--c-frame);box-shadow:0 0 0 1px var(--c-shadow-1)}#l-footer hr{border-bottom:.2rem solid #fff;height:1rem;margin:0 2rem}.l-footer--home{grid-area:fo}.l-footer__columns{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:0 .01rem;margin-bottom:calc(1rem + 1 * var(--es))}@media screen and (min-width: 48em){.l-footer__columns{flex-wrap:nowrap}}.footer__col{flex-grow:1;flex-shrink:1;flex-basis:18.5rem;margin:1rem 0}@media screen and (min-width: 39em){.footer__col{flex-grow:1;flex-shrink:0}}@media screen and (min-width: 48em){.footer__col{flex:1 1 18.5rem}}.icon{display:inline-block;flex-shrink:0;width:3rem;height:3rem}.icon--material svg{width:100%;height:100%}.icon--small{padding:.3rem}.icon--tiny{padding:.5rem}.icon--big{width:4rem;height:4rem;padding:0}.icon--simple{padding:.3rem}#tgl-sb .icon:after,#toggle-toc .icon:after{display:inline-block;width:3rem;height:3rem;content:"";mask-size:cover;-webkit-mask-size:cover;background-color:var(--c-frame-button)}#tgl-sb.is-visible .icon:after,#toggle-toc.is-visible .icon:after{background-color:var(--c-frame-button-hover)}#tgl-sb .icon:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A")}#tgl-sb.is-visible .icon:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E")}@media screen and (min-width: 79em){#tgl-sb{display:none}}#toggle-toc .icon:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E")}#toggle-toc.is-visible .icon:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E")}@media screen and (min-width: 120em){#toggle-toc{display:none}}.copy-code{position:absolute;top:2rem;right:2rem;height:2rem;padding:.2rem .1rem 0 0;width:2rem;fill:var(--c-icon);background:rgba(0,0,0,0);opacity:0;transition:opacity 150ms;cursor:pointer}.highlight{position:relative}.highlight:hover .copy-code{opacity:1}.meta{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;max-width:71rem;color:var(--c-text-low);fill:var(--c-icon);margin:0 1.5rem 2rem 1.5rem}@media screen and (min-width: 79em){.meta--head .taxo-shape .icon-font{margin-left:-2.5rem}}.meta--foot{flex-shrink:0;align-items:end;margin-bottom:1rem}@media screen and (min-width: 79em){.meta--left{position:relative;z-index:5;flex-direction:row-reverse;justify-content:start;float:left;width:34rem;margin:0 1.5rem}.meta--left .meta__list{width:17rem}.meta--left .meta__list--date{align-items:flex-start}.meta--left .meta__hanging{margin-left:-3rem}}@media screen and (min-width: 120em){.meta--left-doc{position:relative;z-index:5;flex-direction:row-reverse;justify-content:start;float:left;width:34rem;margin:0 1.5rem}.meta--left-doc .meta__list{width:17rem}.meta--left-doc .meta__list--date{align-items:flex-start}.meta--left-doc .meta__hanging{margin-left:-3rem}}.meta--card{margin:0 1.5rem;max-width:none;max-width:initial}.meta--card--1 .meta__text,.meta--card--1 .meta__separator{font-size:1.43rem;line-height:1.5rem;padding-top:.714465rem;padding-bottom:.285535rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.meta--card--half{justify-content:start;margin:0 1.5rem}.meta--card--half .meta__text,.meta--card--half .meta__separator{font-size:1.287rem;line-height:1.5rem;padding-top:.2680185rem;padding-bottom:.2319815rem}.meta__date{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.meta__list{display:flex;flex-direction:column;align-items:flex-start;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;letter-spacing:.01em;word-spacing:.03em}.meta__list--date{flex-shrink:0;align-items:flex-end;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.meta__item{display:inline-flex;flex-shrink:0;align-items:flex-end}.meta__item--taxo{max-width:16.5rem}.meta__separator,.meta__text{display:inline-block}.meta__text,.meta__count,.meta__separator{font-size:1.43rem;line-height:2rem;padding-top:.564465rem;padding-bottom:.435535rem}.meta__text{padding-left:.5rem;padding-right:.5rem;max-width:16.5rem}.meta__separator{padding-left:0;padding-right:0}.meta__count{padding-left:0;padding-right:.5rem}.titlehead{margin:2rem;padding:1rem 0;max-width:70rem;border-radius:.5rem;box-shadow:0 0 0 .1rem var(--c-shadow-1)}.titlehead--todo{background-color:var(--c-bg-2)}.titlehead--draft{padding:0;background-color:var(--c-frame)}.titlehead--draft>p,.titlehead--draft>ol,.titlehead--draft>ul,.titlehead--draft>dl{color:var(--c-frame-text-normal)}.titlehead--draft>p strong,.titlehead--draft>ol strong,.titlehead--draft>ul strong,.titlehead--draft>dl strong{color:var(--c-frame-text-normal)}.titlehead--deprecated{color:var(--c-warn);background-color:var(--c-warn-bg)}.titlehead--experimental{background-color:var(--c-danger-bg)}.titlehead--experimental>p,.titlehead--experimental>ol,.titlehead--experimental>ul{color:var(--c-danger)}@media screen and (min-width: 79em){.titlehead--margin{margin-left:39rem}}.title{padding:0 calc(1rem + 1 * var(--es)) 2rem calc(1rem + 1 * var(--es));margin:0 1rem;max-width:74rem}.title h1,.title h2{font-size:2.86rem;line-height:4rem;margin-top:-.07107rem;margin-bottom:calc(-0.92893rem + var(--es))}@media screen and (min-width: 39em){.title{margin:0}}.title--site h1{font-size:12.87rem;line-height:18rem;padding-top:.180185rem;padding-bottom:calc(0.819815rem + var(--es));font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;letter-spacing:.03em;word-spacing:.09em;text-align:center;text-transform:uppercase}.title--site .p-first{text-align:center}.title--bg{height:5rem;max-width:100%;margin:0 1rem;padding-bottom:0;box-shadow:inset 0 0 1rem rgba(0,0,0,.1),0 0 0 1px var(--c-shadow-2)}.title--bg h1{color:#fff;margin:0;font-size:2.86rem;line-height:3rem;padding-top:.92893rem;padding-bottom:1.07107rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;letter-spacing:.04em;word-spacing:.12em;text-transform:uppercase}@media screen and (min-width: 39em){.title--bg{margin:1rem 0 0 0}}.title--news{background:var(--ctg-news-title)}@media screen and (min-width: 79em){.title--news{background:var(--ctg4-news-title)}}.title--blog{background:var(--ctg-blog-title)}@media screen and (min-width: 79em){.title--blog{background:var(--ctg4-blog-title)}}.title--sans h1,.title--sans h2{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700;letter-spacing:.005em;word-spacing:.015em}@media screen and (min-width: 79em){.title--left{float:left;width:37rem}}.title--author{display:inline-flex;flex-direction:row;margin:-1rem 0}@media screen and (min-width: 79em){.title--author{flex-direction:column-reverse}}.title--first,.title--second,.title--third{padding-top:1rem;padding-bottom:calc(3rem + 2 * var(--es))}.title--first>hr,.title--second>hr,.title--third>hr{margin-bottom:-2rem}.title--first h1,.title--second h1,.title--third h1{font-size:2.86rem;line-height:4rem;padding-top:.92893rem;margin-bottom:-0.92893rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600}.title--first>hr,.title--second>hr{border-top:.35rem solid var(--c-text-normal);height:1rem}.title--first h1{text-transform:uppercase;letter-spacing:.03em;word-spacing:.09em}.title--second h1{letter-spacing:.015em;word-spacing:.045em}.title--third>hr{border-top:.25rem solid var(--c-text-normal);height:1rem}.title--third h1{font-weight:450;letter-spacing:.005em;word-spacing:.015em}.title--taxo{max-width:none;max-width:initial}.title--taxo h1{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.title--taxo h2{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.title--article h1{font-size:2.86rem;line-height:3rem;padding-top:.42893rem;padding-bottom:calc(0.57107rem + var(--es));scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 3rem );font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;font-style:italic;text-transform:none;letter-spacing:0;word-spacing:0}@media screen and (min-width: 48em){.title--article{margin-bottom:-2rem}.title--article h1{position:relative;top:-2rem;font-size:4.29rem;line-height:5rem;padding-top:.893395rem;padding-bottom:calc(0.106605rem + var(--es));scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 5rem );font-weight:600}}.title__description,.title__profession{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:300}.title__description strong,.title__profession strong{font-weight:450}.title__description{font-size:1.95rem;line-height:3rem;padding-top:.769725rem;padding-bottom:.230275rem}.title__profession{font-size:2.86rem;line-height:3rem;padding-top:.42893rem;padding-bottom:.57107rem}.section{padding:calc(4rem + 2 * var(--es)) 0rem}.section>hr{border-bottom:.35rem solid var(--c-text-normal);height:1rem;margin:0 2rem}.section>h2{font-size:1.915rem;line-height:2rem;padding-top:.2828325rem;padding-bottom:.7171675rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.03em;word-spacing:.09em;margin-left:2rem;margin-right:2rem}.section>h3{font-size:1.43rem;line-height:1.5rem;padding-top:.714465rem;padding-bottom:1.785535rem;font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;word-spacing:.12em;margin-left:2rem;margin-right:2rem}.md>h1,.container>h1,.md>h2,.container>h2,.md>h3,.container>h3,.md>h4,.container>h4,.md>h5,.container>h5,.md>h6,.container>h6,.md>hr,.container>hr,.md>table,.container>table{max-width:70rem;margin-left:2rem;margin-right:2rem}.md>p,.container>p,.md>ul,.container>ul,.md>ol,.container>ol,.md>dl,.container>dl,.md>blockquote,.container>blockquote,.md>pre,.container>pre,.md>.fig-diagram,.container>.fig-diagram,.md>.maincol,.container>.maincol,.md>.literature,.container>.literature,.md>.footnotes,.container>.footnotes,.md>.gist,.container>.gist,.md>.asciicast,.container>.asciicast,.md>.box,.container>.box,.md>.math-block,.container>.math-block,.md>.chem-block,.container>.chem-block{max-width:74rem;padding-left:2rem;padding-right:2rem}.md,.container{position:relative;z-index:1;word-wrap:break-word}.md::after,.container::after{display:table;content:"";clear:both}.md>p,.md>blockquote,.md li,.md dd,.container>p,.container>blockquote,.container li,.container dd{text-align:var(--ta)}.md li,.md dt,.md dd,.container li,.container dt,.container dd{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}.md dt,.container dt{page-break-before:auto;-moz-column-break-before:auto;break-before:auto}.md p,.md li,.md dd,.container p,.container li,.container dd{-webkit-hyphens:auto;hyphens:auto}.md p strong,.md p em,.md p a,.md p span,.md li strong,.md li em,.md li a,.md li span,.md dd strong,.md dd em,.md dd a,.md dd span,.container p strong,.container p em,.container p a,.container p span,.container li strong,.container li em,.container li a,.container li span,.container dd strong,.container dd em,.container dd a,.container dd span{-webkit-hyphens:auto;hyphens:auto}.md .no-hyphens,.container .no-hyphens{-webkit-hyphens:none;hyphens:none}.md .br-cond,.container .br-cond{display:none}@media screen and (min-width: 39em){.md .br-cond,.container .br-cond{display:inline;display:initial}}.md>p,.md>ul,.md>ol,.md>dl,.container>p,.container>ul,.container>ol,.container>dl{font-size:1.9375rem;line-height:3rem;padding-top:.77440625rem;padding-bottom:calc(0.22559375rem + var(--es));scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 3rem )}.md>p:target,.md>ul:target,.md>ol:target,.md>blockquote:target,.md>dl:target,.container>p:target,.container>ul:target,.container>ol:target,.container>blockquote:target,.container>dl:target{border-radius:.5rem;background-color:var(--c-bg-3)}.md p>.pull-quote,.container p>.pull-quote{margin-left:-0.5em}.md blockquote,.container blockquote{padding:1rem 2rem 1rem calc(5rem + 2 * var(--es))}.md blockquote>p,.md blockquote>ul,.md blockquote>ol,.md blockquote>dl,.container blockquote>p,.container blockquote>ul,.container blockquote>ol,.container blockquote>dl{font-size:1.9375rem;line-height:3rem;padding-top:.77440625rem;padding-bottom:.22559375rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 3rem );-webkit-hyphens:none;hyphens:none}.md blockquote footer,.md blockquote cite,.container blockquote footer,.container blockquote cite{font-style:italic}.md blockquote.left,.md blockquote.left-in-half,.md blockquote.left-in,.md blockquote.right,.md blockquote.right-in-half,.md blockquote.right-in,.container blockquote.left,.container blockquote.left-in-half,.container blockquote.left-in,.container blockquote.right,.container blockquote.right-in-half,.container blockquote.right-in{padding:0 2rem;font-style:italic;color:var(--c-text-semihigh)}.md strong,.container strong{font-size:99%;color:var(--c-text-medium)}.md strong a,.md a strong,.container strong a,.container a strong{color:inherit}.md .blockquote-hero,.container .blockquote-hero{color:var(--c-text-semihigh);font-style:italic;padding-right:calc(5rem + 2 * var(--es))}.md .blockquote-hero>p,.md .blockquote-hero>ul,.md .blockquote-hero>ol,.md .blockquote-hero>dl,.container .blockquote-hero>p,.container .blockquote-hero>ul,.container .blockquote-hero>ol,.container .blockquote-hero>dl{font-size:2.5833333333rem;line-height:4rem;padding-top:.0325416667rem;margin-bottom:-.0325416667rem}.md hr,.container hr{margin:calc(1.4rem + 0.5 * var(--es)) 2rem calc(0.5rem + 1.5 * var(--es)) 2rem;height:.1rem;border-top:.1rem solid var(--c-text-extralow)}@media screen and (min-width: 39em){.md>p:not(:empty)+ul,.md>p:not(:empty)+ol,.container>p:not(:empty)+ul,.container>p:not(:empty)+ol{margin-top:-1rem}}.md dd p+ol,.md dd p+ul,.container dd p+ol,.container dd p+ul{padding-top:1rem}.md dd ul,.md dd ol,.md dd dl,.container dd ul,.container dd ol,.container dd dl{text-align:left}.md dd>ul,.md dd>ol,.md dd>dl,.container dd>ul,.container dd>ol,.container dd>dl{margin-top:1rem}.md .p-first,.container .p-first{font-size:2.275rem;line-height:3.5rem;padding-top:.8980125rem;padding-bottom:1.1019875rem;text-align:left;color:var(--c-text-low);-webkit-hyphens:none;hyphens:none}.md .p-first strong,.md .p-first em,.md .p-first a,.md .p-first span,.container .p-first strong,.container .p-first em,.container .p-first a,.container .p-first span{-webkit-hyphens:none;hyphens:none}.md .p-first em,.container .p-first em{font-style:normal}.md .p-first strong,.container .p-first strong{font-weight:450;color:var(--c-text-medium)}@media screen and (min-width: 39em){.md .p-first,.container .p-first{font-size:2.6rem;line-height:4rem;padding-top:.0263rem;padding-bottom:1.9737rem}}.md .p-big,.container .p-big{font-size:2.5833333333rem;line-height:4rem;padding-top:.6992083333rem;padding-bottom:1.3007916667rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 4.6666666667rem );color:var(--c-text-medium)}.md .p-small,.container .p-small{font-size:1.43rem;line-height:2rem;padding-top:.464465rem;padding-bottom:calc(0.535535rem + var(--es));scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2rem );color:var(--c-text-semihigh)}.md .placeholder,.container .placeholder{color:var(--c-text-extralow)}.md .hang-quote,.container .hang-quote{margin-left:-0.5em}@media screen and (min-width: 48em){.md .up-1,.container .up-1{margin-top:-1rem}.md .up-2,.container .up-2{margin-top:-2rem}.md .up-3,.container .up-3{margin-top:-3rem}.md .up-4,.container .up-4{margin-top:-4rem}.md .up-5,.container .up-5{margin-top:-5rem}.md .up-6,.container .up-6{margin-top:-6rem}.md .up-7,.container .up-7{margin-top:-7rem}.md .up-8,.container .up-8{margin-top:-8rem}.md .up-9,.container .up-9{margin-top:-9rem}.md .up-10,.container .up-10{margin-top:-10rem}.md .up-11,.container .up-11{margin-top:-11rem}.md .up-12,.container .up-12{margin-top:-12rem}.md .up-13,.container .up-13{margin-top:-13rem}.md .up-14,.container .up-14{margin-top:-14rem}.md .up-15,.container .up-15{margin-top:-15rem}.md .up-16,.container .up-16{margin-top:-16rem}.md .up-17,.container .up-17{margin-top:-17rem}.md .up-18,.container .up-18{margin-top:-18rem}.md .up-19,.container .up-19{margin-top:-19rem}.md .up-20,.container .up-20{margin-top:-20rem}.md .up-21,.container .up-21{margin-top:-21rem}.md .up-22,.container .up-22{margin-top:-22rem}.md .up-23,.container .up-23{margin-top:-23rem}.md .up-24,.container .up-24{margin-top:-24rem}.md .up-25,.container .up-25{margin-top:-25rem}.md .up-26,.container .up-26{margin-top:-26rem}.md .up-27,.container .up-27{margin-top:-27rem}.md .up-28,.container .up-28{margin-top:-28rem}.md .up-29,.container .up-29{margin-top:-29rem}.md .up-30,.container .up-30{margin-top:-30rem}.md .up-31,.container .up-31{margin-top:-31rem}.md .up-32,.container .up-32{margin-top:-32rem}.md .up-33,.container .up-33{margin-top:-33rem}.md .up-34,.container .up-34{margin-top:-34rem}.md .up-35,.container .up-35{margin-top:-35rem}.md .up-36,.container .up-36{margin-top:-36rem}.md .up-37,.container .up-37{margin-top:-37rem}.md .up-38,.container .up-38{margin-top:-38rem}.md .up-39,.container .up-39{margin-top:-39rem}.md .up-40,.container .up-40{margin-top:-40rem}.md .up-41,.container .up-41{margin-top:-41rem}.md .up-42,.container .up-42{margin-top:-42rem}.md .up-43,.container .up-43{margin-top:-43rem}.md .up-44,.container .up-44{margin-top:-44rem}.md .up-45,.container .up-45{margin-top:-45rem}.md .up-46,.container .up-46{margin-top:-46rem}.md .up-47,.container .up-47{margin-top:-47rem}.md .up-48,.container .up-48{margin-top:-48rem}.md .up-49,.container .up-49{margin-top:-49rem}.md .up-50,.container .up-50{margin-top:-50rem}.md .up-51,.container .up-51{margin-top:-51rem}.md .up-52,.container .up-52{margin-top:-52rem}.md .up-53,.container .up-53{margin-top:-53rem}.md .up-54,.container .up-54{margin-top:-54rem}.md .up-55,.container .up-55{margin-top:-55rem}.md .up-56,.container .up-56{margin-top:-56rem}.md .up-57,.container .up-57{margin-top:-57rem}.md .up-58,.container .up-58{margin-top:-58rem}.md .up-59,.container .up-59{margin-top:-59rem}.md .up-60,.container .up-60{margin-top:-60rem}.md .down-1,.container .down-1{margin-top:1rem}.md .down-2,.container .down-2{margin-top:2rem}.md .down-3,.container .down-3{margin-top:3rem}.md .down-4,.container .down-4{margin-top:4rem}.md .down-5,.container .down-5{margin-top:5rem}.md .down-6,.container .down-6{margin-top:6rem}.md .down-7,.container .down-7{margin-top:7rem}.md .down-8,.container .down-8{margin-top:8rem}.md .down-9,.container .down-9{margin-top:9rem}.md .down-10,.container .down-10{margin-top:10rem}.md .down-11,.container .down-11{margin-top:11rem}.md .down-12,.container .down-12{margin-top:12rem}.md .down-13,.container .down-13{margin-top:13rem}.md .down-14,.container .down-14{margin-top:14rem}.md .down-15,.container .down-15{margin-top:15rem}.md .down-16,.container .down-16{margin-top:16rem}.md .down-17,.container .down-17{margin-top:17rem}.md .down-18,.container .down-18{margin-top:18rem}.md .down-19,.container .down-19{margin-top:19rem}.md .down-20,.container .down-20{margin-top:20rem}.md .down-21,.container .down-21{margin-top:21rem}.md .down-22,.container .down-22{margin-top:22rem}.md .down-23,.container .down-23{margin-top:23rem}.md .down-24,.container .down-24{margin-top:24rem}.md .down-25,.container .down-25{margin-top:25rem}.md .down-26,.container .down-26{margin-top:26rem}.md .down-27,.container .down-27{margin-top:27rem}.md .down-28,.container .down-28{margin-top:28rem}.md .down-29,.container .down-29{margin-top:29rem}.md .down-30,.container .down-30{margin-top:30rem}}.md p:empty,.container p:empty{display:none}.md--sans p,.md--sans ul,.md--sans ol,.md--sans dl{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:400}.md--sans blockquote p,.md--sans blockquote ul,.md--sans blockquote ol,.md--sans blockquote dl{font-family:'IBM Plex Serif', Georgia, Times, serif;font-weight:400}.md--sans blockquote strong{font-weight:600}.md--sans strong{font-weight:700}.md--sans .p-first{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:300}.md--sans .p-first strong{font-weight:450}.md--home{padding-bottom:1rem}.md--home>p,.md--home>ul,.md--home>ol,.md--home>dl,.md--home>blockquote{font-size:1.95rem;line-height:3rem;padding-top:.769725rem;padding-bottom:calc(0.230275rem + var(--es));font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:300;text-align:left}.md--home>p strong,.md--home>ul strong,.md--home>ol strong,.md--home>dl strong,.md--home>blockquote strong{font-weight:450}.md--home dl>dt{font-weight:450}.md--home .p-small{font-size:1.43rem;line-height:2rem;padding-top:1.464465rem;padding-bottom:calc(0.535535rem + var(--es));font-weight:450}.md--card{margin-bottom:0}.md--card>p,.md--card>.p-first{color:var(--c-text-medium);font-size:1.6083333333rem;line-height:2.5rem;padding-top:.6476791667rem;padding-bottom:.3523208333rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;text-align:left;-webkit-hyphens:none;hyphens:none}.md--card>p strong,.md--card>.p-first strong{font-weight:600}.md--card--half>p,.md--card--half>.p-first{font-size:1.43rem;line-height:1.5rem;padding-top:.214465rem;padding-bottom:.285535rem}.md--card--small>p,.md--card--small>.p-first{font-size:1.6083333333rem;line-height:2.5rem;padding-top:.1476791667rem;margin-bottom:-.1476791667rem}.md--card--3halfs{padding-bottom:2rem}@media screen and (min-width: 48em){.md--card--3halfs>p,.md--card--3halfs>.p-first{font-size:1.95rem;line-height:3rem;padding-top:.769725rem;padding-bottom:.230275rem}}@media screen and (min-width: 48em){.md--card--2{max-width:74rem}.md--card--2 p,.md--card--2 .p-first{font-size:2.4375rem;line-height:4rem;padding-top:.58715625rem;padding-bottom:.91284375rem}}@media screen and (min-width: 79em){.md--card--2 p,.md--card--2 .p-first{font-size:1.95rem;line-height:3rem;padding-top:.769725rem;padding-bottom:.230275rem}}.md--taxo>p,.md--taxo>ul,.md--taxo>ol,.md--taxo>dl{font-size:1.43rem;line-height:3rem;padding-top:.964465rem;padding-bottom:.035535rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;text-align:left}.md--footer>p,.md--footer>ul,.md--footer>ol,.md--footer>dl{font-size:1.93rem;line-height:3rem;padding-top:.777215rem;padding-bottom:.222785rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.md--footer li{padding-left:3rem}@media screen and (min-width: 48em){.md--footer>p,.md--footer>ul,.md--footer>ol,.md--footer>dl{font-size:1.6083333333rem;line-height:2.5rem;padding-top:.6476791667rem;padding-bottom:.3523208333rem}.md--footer li{padding-left:2.5rem}}.md--small>p,.md--small>ul,.md--small>ol,.md--small>dl{font-size:1.6083333333rem;line-height:2.5rem;padding-top:.6476791667rem;padding-bottom:.3523208333rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.md--tiny>p,.md--tiny>ul,.md--tiny>ol,.md--tiny>dl{font-size:1.43rem;line-height:2rem;padding-top:.464465rem;padding-bottom:.535535rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.md--dropcap2>p:first-child:first-letter{float:left;font-size:6.3rem;line-height:1;margin:-0.2rem .35rem -1rem -0.2rem}.md--dropcap3>p:first-child:first-letter{float:left;font-size:10.5rem;line-height:1;margin:-0.9rem .5rem -1rem -0.2rem}@media screen and (min-width: 120em){.md--margin-doc{text-align:center}.md--margin-doc>h1,.md--margin-doc>h2,.md--margin-doc>h3,.md--margin-doc>h4,.md--margin-doc>h5,.md--margin-doc>h6,.md--margin-doc>hr,.md--margin-doc>table{margin-left:39rem}.md--margin-doc>p,.md--margin-doc>ul,.md--margin-doc>ol,.md--margin-doc>dl,.md--margin-doc>blockquote,.md--margin-doc>pre,.md--margin-doc>.fig-diagram,.md--margin-doc>.maincol,.md--margin-doc>.literature,.md--margin-doc>.footnotes,.md--margin-doc>.gist,.md--margin-doc>.asciicast,.md--margin-doc>.box,.md--margin-doc>.math-block,.md--margin-doc>.chem-block{width:74rem;margin-left:auto;margin-right:auto}}@media screen and (min-width: 79em){.md--margin-full{text-align:center}.md--margin-full>h1,.md--margin-full>h2,.md--margin-full>h3,.md--margin-full>h4,.md--margin-full>h5,.md--margin-full>h6,.md--margin-full>hr{margin-left:39rem}.md--margin-full>p,.md--margin-full>ul,.md--margin-full>ol,.md--margin-full>dl,.md--margin-full>blockquote,.md--margin-full>pre,.md--margin-full>.fig-diagram,.md--margin-full>.maincol,.md--margin-full>.literature,.md--margin-full>.footnotes,.md--margin-full>.gist,.md--margin-full>.asciicast,.md--margin-full>.box,.md--margin-full>.math-block,.md--margin-full>.chem-block{width:74rem;margin-left:auto;margin-right:auto}.md--margin-full table{margin-left:37rem}}.md--frame{color:var(--c-frame-text-normal)}.md--frame p,.md--frame li,.md--frame dd{text-align:left}.md--frame .fig{float:none}.md--frame .link--text{color:var(--c-frame-text-link);text-decoration-color:var(--c-frame-text-link)}.md--frame .link--text[href^=http]{color:var(--c-frame-text-link-ext);text-decoration-color:var(--c-frame-text-link-ext)}.md--frame .link--text:hover,.md--frame .link--text:focus,.md--frame .link--text:active{color:var(--c-frame-text-link-high);text-decoration-color:var(--c-frame-text-link-high);background-color:var(--c-frame-button-hover-bg)}.md--blog{padding-top:calc(3rem + 2 * var(--es))}.md--list{padding-bottom:0;margin-bottom:0}.md p>code,.md li>code,.md dt>code,.md dd>code,.md .caption>code{font-size:75%;font-family:'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;font-weight:450;margin:0 .075em;padding:.1em .25em;text-transform:none;border-radius:.5rem;box-shadow:0 0 0 1px var(--c-shadow-2);color:var(--c-chroma-fg);background-color:var(--c-chroma-bg)}.md dt>code{font-weight:700}.md pre :target,.md .highlight :target{-webkit-text-decoration:none;text-decoration:none;outline:ridge var(--c-code);scroll-margin-top:10rem}.md pre{position:relative;overflow:auto;clear:both;font-family:'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;font-weight:450;font-size:1.43rem;line-height:2rem;padding-top:.464465rem;padding-bottom:.535535rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2rem );word-break:normal;-webkit-hyphens:none;hyphens:none;text-align:left}.md pre code{display:block;white-space:pre}.md .highlight>pre>code{padding-left:.8em;padding-right:.8rem}.md .highlight{display:block;max-height:200rem;padding:2rem 2rem 1.5rem;min-width:100%;max-width:74rem;margin-bottom:calc(0.5 * var(--es));color:var(--c-code)}.md .highlight>pre,.md .highlight>div{overflow:auto;scrollbar-color:var(--c-scrollbar) var(--c-bg-3);border-radius:.25rem;box-shadow:0 0 0 1px var(--c-shadow-2);padding-right:.25em}.md .highlight>pre::-webkit-scrollbar,.md .highlight>div::-webkit-scrollbar{width:1rem;height:1rem}.md .highlight>pre::-webkit-scrollbar-thumb,.md .highlight>div::-webkit-scrollbar-thumb{background:var(--c-scrollbar)}.md .highlight>pre::-webkit-scrollbar-track,.md .highlight>div::-webkit-scrollbar-track{background:var(--c-bg-3)}.md .highlight table:after{display:none}@media screen and (min-width: 39em){.md .highlight{min-width:74rem;width:74rem}}@media screen and (min-width: 48em){.md .highlight.expand{display:inline-block;max-width:148rem;width:auto;width:initial}}.md li .highlight,.md dd .highlight{padding-left:0;padding-right:0;min-width:100%;max-width:100%}.md li .highlight .copy-code,.md dd .highlight .copy-code{right:0}.md .lh15 pre{font-size:1.43rem;line-height:1.5rem;padding-top:1.214465rem;padding-bottom:.785535rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2.5rem )}.md .note .highlight{padding:1rem 0}.md .note code{color:var(--c-code-extralow)}.md .language-mermaid{text-align:center}.md .language-mermaid>svg{max-width:100%;height:auto}.md .col4,.md .col2-l3,.md .col2-l2,.md .col2,.md .col3{-moz-column-gap:4rem;column-gap:4rem}.md .col4 li,.md .col2-l3 li,.md .col2-l2 li,.md .col2 li,.md .col3 li,.md .col4 p,.md .col2-l3 p,.md .col2-l2 p,.md .col2 p,.md .col3 p,.md .col4 dd,.md .col2-l3 dd,.md .col2-l2 dd,.md .col2 dd,.md .col3 dd{text-align:left}@media screen and (min-width: 39em){.md .col2,.md .col3{-moz-column-count:2;column-count:2}}@media screen and (min-width: 39em){.md .col2-l2{-moz-column-count:2;column-count:2;width:62rem}}@media screen and (min-width: 39em){.md .col2-l3{-moz-column-count:2;column-count:2;width:54rem}}@media screen and (min-width: 39em){.md .col4{-moz-column-count:4;column-count:4}}@media screen and (min-width: 120em){.md--margin-doc .col3{-moz-column-count:3;column-count:3;max-width:111rem}}@media screen and (min-width: 79em){.md--margin-full .col3{-moz-column-count:3;column-count:3;max-width:111rem}}.md dt{text-align:left}.md dd{padding:0 0 1rem calc(3rem + 1 * var(--es))}.md dd ul>li,.md dd ol>li{padding-left:3rem}.md dd+dt{margin-top:1rem}.md .dl-tight>dt{float:left;clear:left;width:auto;padding:0 3rem 0 0}.md .dl-tight>dt:after{display:table;clear:both;content:""}.md .dl-tight>dd{padding:0}.md .dl-loose,.md .dl-icon,.md .dl-loose2,.md .dl-loose3{position:relative}@media screen and (min-width: 39em){.md .dl-loose>dt,.md .dl-icon>dt,.md .dl-loose2>dt,.md .dl-loose3>dt{float:left;clear:left;width:16.5rem;padding-bottom:0}.md .dl-loose>dt:after,.md .dl-icon>dt:after,.md .dl-loose2>dt:after,.md .dl-loose3>dt:after{content:"‍"}.md .dl-loose>dd,.md .dl-icon>dd,.md .dl-loose2>dd,.md .dl-loose3>dd{margin-left:0;padding-left:18.5rem}}@media screen and (min-width: 39em){.md .dl-loose3>dt{width:24.011rem}.md .dl-loose3>dd{padding-left:26.011rem}}@media screen and (min-width: 39em){.md .dl-loose2>dt{width:35rem}.md .dl-loose2>dd{padding-left:37rem}}@media screen and (min-width: 39em){.md .dl-icon>dt{width:4rem}.md .dl-icon>dd{padding-left:6rem}}.md .dl-tight>dd+dt,.md .dl-loose>dd+dt,.md .dl-loose3>dd+dt,.md .dl-loose2>dd+dt,.md .dl-icon>dd+dt{margin-top:0}.md--home .p-first{text-align:center}.md--home dt{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.md--sans dt{font-weight:500}.md--sans dt var{font-weight:450}.md--sans dt strong{font-weight:700}sup:target{background-color:var(--c-bg-3);scroll-margin-top:calc(var(--tnh) + var(--tg))}.footnote-ref{color:var(--c-text-link)}.footnote-ref:before{content:" ["}.footnote-ref:after{content:"]"}.footnote-ref:hover,.footnote-ref:focus,.footnote-ref:active{color:var(--c-text-link-hover);background-color:var(--c-text-link-hover-bg)}.footnotes{text-align:left;margin-top:-0.35em;word-wrap:break-word}.footnotes hr{width:25%;margin-top:2rem;margin-bottom:calc(1rem + 1 * var(--es));margin-left:0;padding:0;border-top:.35em solid var(--c-text-normal)}.footnotes ol{counter-reset:nr}.footnotes ol li{counter-increment:nr;background-color:rgba(0,0,0,0);page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid-column;font-size:1.6953125rem;line-height:2.625rem;padding-top:.6776054687rem;padding-bottom:.3223945313rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2.625rem )}.footnotes ol li:target{border-radius:.5rem;background-color:var(--c-bg-3)}.footnotes ol li:before{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;float:left;height:1em;content:counter(nr, decimal) "."}.footnotes ol li p+p{margin-top:-0.875rem;text-indent:2.5rem}.footnote-backref{visibility:hidden}.footnote-backref:before{visibility:visible;font-family:inherit;font-weight:bold;content:"⬏"}.footnote-backref+.footnote-backref{margin-left:-0.75em}@media screen and (min-width: 48em){.footnotecols>.footnotes{width:auto;margin-right:0;margin-left:0;padding-right:0;padding-left:0}.footnotecols>.footnotes>ol{-moz-column-count:3;column-count:3;-moz-column-gap:4rem;column-gap:4rem}.footnotecols>.footnotes>ol>li>p{padding-left:3rem}}@media screen and (min-width: 79em){.footnotecols>.footnotes>ol{-moz-column-count:4;column-count:4}}.md--sans .footnotes p{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:400}.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{text-align:left}.md h1 .br-cond,.md h2 .br-cond,.md h3 .br-cond,.md h4 .br-cond{display:none}@media screen and (min-width: 39em){.md h1 .br-cond,.md h2 .br-cond,.md h3 .br-cond,.md h4 .br-cond{display:inline;display:initial}}.md h5,.md h6,.md .h-p,.md .h-p-s{display:inline-block;float:left;padding-bottom:0}.js-has-pseudo [csstools-has-1a-31-2s-w-2w-1f-1m-2w-2p-37-14-17-2s-30-18-17-39-30-18-17-33-30-15]:not(does-not-exist):not(does-not-exist){margin-bottom:1rem}.md h3:has(+dl,+ul,+ol){margin-bottom:1rem}.md .h-danger .h-a,.md .h-warn .h-a,.md .h-info .h-a,.md .h-success .h-a{display:inline-block;padding:0 .5rem;margin-left:-0.5rem;border-radius:.5rem;box-shadow:0 0 0 1px var(--c-shadow-1)}.md .h-danger{color:var(--c-danger)}.md .h-danger .h-a{background-color:var(--c-danger-bg)}.md .h-danger:hover .h-a{color:var(--c-danger)}.md .h-warn{color:var(--c-warn)}.md .h-warn .h-a{background-color:var(--c-warn-bg)}.md .h-info{color:var(--c-info)}.md .h-info .h-a{background-color:var(--c-info-bg)}.md .h-info:hover .h-a{color:var(--c-info)}.md .h-success{color:var(--c-success)}.md .h-success .h-a{background-color:var(--c-success-bg)}.md--h-sans h1,.md--h-sans h2,.md--h-sans h3,.md--h-sans h4{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700}.md--h-sans h1 var,.md--h-sans h2 var,.md--h-sans h3 var,.md--h-sans h4 var{font-weight:700}.md--h-sans h5,.md--h-sans .h-p{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600}.md--h-sans h6,.md--h-sans .h-p-s{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.md--h-sans h1{font-size:2.86rem;line-height:3rem;padding-top:1.42893rem;padding-bottom:calc(0.57107rem + var(--es));scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 4rem );letter-spacing:.005em;word-spacing:.015em}.md--h-sans h2{font-size:2.145rem;line-height:3rem;padding-top:calc(2.6966975rem + var(--es));padding-bottom:calc(0.3033025rem + var(--es));scroll-margin-top:calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es)));text-transform:uppercase;letter-spacing:.02em;word-spacing:.06em}.md--h-sans h3{font-size:2.145rem;line-height:3rem;padding-top:calc(1.6966975rem + var(--es));margin-bottom:calc(-0.1966975rem + 0.5 * var(--es));scroll-margin-top:calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es)));letter-spacing:.005em;word-spacing:.015em}.md--h-sans h4{font-size:1.60875rem;line-height:2rem;padding-top:1.397523125rem;padding-bottom:.102476875rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 3rem );text-transform:uppercase;letter-spacing:.02em;word-spacing:.06em}.md--h-sans h4+ul,.md--h-sans h4+ol,.md--h-sans h4+dl{margin-top:1rem}.md--h-sans h5,.md--h-sans h6,.md--h-sans .h-p{font-size:1.93rem;line-height:3rem;padding-top:.777215rem;margin-bottom:-0.777215rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 3rem );text-transform:inherit;margin-right:.5em}.md--h-sans h5,.md--h-sans .h-p{letter-spacing:.01em;word-spacing:.03em}.md--h-sans h6,.md--h-sans .h-p-s{letter-spacing:.01em;word-spacing:.03em;color:var(--c-text-high)}.md--h-sans .p-meta{font-size:1.4475rem;line-height:1rem;padding-top:1.95791125rem;margin-bottom:-0.95791125rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;color:var(--c-taxo-link)}.md--h-sans .p-meta+h3{margin-top:calc(-0.5rem + -1 * var(--es))}.md--h-sans .p-meta+h4{margin-top:calc(-0.5rem + -0.5 * var(--es))}.md--h-big h1{font-size:4.29rem;line-height:5rem;padding-top:1.893395rem;padding-bottom:calc(0.106605rem + var(--es));scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 6rem );letter-spacing:.005em;word-spacing:.015em}.md--h-big h2{font-size:3.81rem;line-height:3rem;padding-top:calc(2.073155rem + var(--es));padding-bottom:calc(0.926845rem + var(--es));scroll-margin-top:calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es)));text-transform:uppercase;letter-spacing:.02em;word-spacing:.06em}.md--h-big h3{font-size:2.86rem;line-height:3rem;padding-top:calc(1.42893rem + var(--es));padding-bottom:calc(0.57107rem + var(--es));scroll-margin-top:calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es)));letter-spacing:.005em;word-spacing:.015em}.md--h-big h4{font-size:1.905rem;line-height:2rem;padding-top:calc(1.2865775rem + var(--es));padding-bottom:.7134225rem;scroll-margin-top:calc(var(--tnh) + var(--tg) + 2rem - (3rem + 1 * var(--es)));text-transform:uppercase;letter-spacing:.02em;word-spacing:.06em}.md--h-big h4+ul,.md--h-big h4+ol,.md--h-big h4+dl{margin-top:1rem}.md--footer h2{font-size:1.7145rem;line-height:2.5rem;padding-top:.60791975rem;margin-bottom:-.10791975rem;font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700;letter-spacing:.05em;word-spacing:.15em;text-transform:uppercase}@media screen and (min-width: 48em){.md--footer h2{font-size:1.43rem;line-height:2rem;padding-top:.464465rem;padding-bottom:.035535rem}}.md--footer a:hover,.md--footer a:focus{color:inherit}.md--article h2{font-size:2.86rem;line-height:3rem;padding-top:calc(1.42893rem + var(--es));padding-bottom:calc(0.57107rem + var(--es));scroll-margin-top:calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es)));font-weight:600;text-transform:none;letter-spacing:.02em;word-spacing:.06em}.md--article h3{font-size:2.3833333333rem;line-height:3rem;padding-top:1.6074416667rem;padding-bottom:.3925583333rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 4rem );font-weight:600;letter-spacing:.01em;word-spacing:.03em}.emb{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;display:block;text-align:left;position:relative;z-index:2;-webkit-hyphens:auto;hyphens:auto}.emb svg{display:block;width:100%;height:auto}.emb--w-small{font-size:1.43rem;line-height:2rem;padding-top:.814465rem;padding-bottom:1.035535rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2.35rem );width:calc(50% + 1rem)}@media screen and (min-width: 39em){.emb--w-small{width:37rem}}.emb--w-tiny{font-size:1.43rem;line-height:2rem;padding-top:.814465rem;padding-bottom:1.035535rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2.35rem );width:calc(25% + 1rem)}.emb--w-micro{font-size:1.43rem;line-height:2rem;padding-top:.814465rem;padding-bottom:.035535rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2.35rem );width:calc(12.5% + 1rem)}.emb--ph-left{float:left;clear:left;padding-right:2rem}.emb--ph-left.emb--w-tiny,.emb--ph-left.emb--w-small{padding-right:2rem}@media screen and (min-width: 39em){.emb--ph-left.emb--w-tiny,.emb--ph-left.emb--w-small{padding-right:4rem}}@media screen and (min-width: 39em){.emb--ph-left.emb--w-micro{padding-right:2rem}}.emb--ph-right{float:right;clear:right;padding-left:2rem}.emb--ph-right.emb--w-tiny,.emb--ph-right.emb--w-small{padding-left:2rem}@media screen and (min-width: 39em){.emb--ph-right.emb--w-tiny,.emb--ph-right.emb--w-small{padding-left:4rem}}@media screen and (min-width: 39em){.emb--ph-right.emb--w-micro{padding-left:2rem}}@media screen and (min-width: 39em){.emb--pv-middle{padding-top:4rem}.emb--pv-middle.emb--w-micro{padding-top:1rem}}.emb--w-text{float:none;width:100%;padding:1.25rem 0 0 0}.md del,.md ins{text-decoration-color:var(--c-danger-bg);text-decoration-thickness:.075em;-webkit-text-decoration-skip:auto;text-decoration-skip:auto}.md del{text-decoration-line:line-through;text-line-through:double}.md ins{text-decoration-line:underline;text-underline-offset:.075em}.md sup,.md sub{position:relative;font-size:.6666667em;font-weight:500;line-height:1;font-feature-settings:"lnum" on}.md sup{top:-0.6em}.md sup>a{font-size:1em}.md sub{bottom:-0.25em}.md kbd{display:inline-block;font-size:90%;font-family:'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;font-weight:450;line-height:1em;min-width:1.2em;margin:0 .1em;padding:.1em .2em;text-align:center;border-radius:.5rem;background-color:var(--c-bg-2);box-shadow:0 0 0 2px var(--c-shadow-2)}.md cite{letter-spacing:.03em;word-spacing:.09em}.md dfn{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;letter-spacing:.02em;word-spacing:.06em}.md .asciicast{margin-top:1rem !important;padding:1rem 0 .5rem 0 !important;max-width:70rem;text-align:center;border-radius:.5rem;background-color:var(--c-bg-1)}@media screen and (min-width: 39em){.md .asciicast{margin:0 2rem 1rem 2rem !important}}@media screen and (min-width: 48em){.md>.vimeo{max-width:70rem;height:auto}}.note{position:relative;margin-top:1.4rem;margin-bottom:calc(0.9rem + 1 * var(--es))}@media screen and (min-width: 39em){.note{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 48em){.note{padding:0;margin:0;border:none}}.note__content{border-top:.1rem solid var(--c-shadow-2);border-bottom:.1rem solid var(--c-shadow-2);padding:1rem 2rem;background:var(--c-bg-2);overflow:hidden}.note__content>p{text-align:left;font-size:1.68875rem;line-height:2rem;padding-top:.367563125rem;padding-bottom:.632436875rem;scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 2rem );font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;color:var(--c-text-extralow)}.note__content>p strong{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;color:var(--c-text-low)}.note__content var{color:var(--c-text-medium)}.note__content>p:not(:empty)+p{margin-top:-1rem;text-indent:2rem}@media screen and (min-width: 48em){.note__content{margin:0;padding:1rem 0;border:none;background:rgba(0,0,0,0);overflow:visible}}.note-star1 .note__content>p:first-of-type,.note-star2 .note__content>p:first-of-type,.note-dagger1 .note__content>p:first-of-type,.note-dagger2 .note__content>p:first-of-type{position:relative}.note-star1 .note__content>p:first-of-type:before,.note-star2 .note__content>p:first-of-type:before,.note-dagger1 .note__content>p:first-of-type:before,.note-dagger2 .note__content>p:first-of-type:before{position:absolute;font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:400;top:.1em;left:-1rem;font-size:80%;line-height:1;color:var(--c-text-semihigh)}.note-star1 .note__content>p:first-of-type:before{content:"*"}.note-star2 .note__content>p:first-of-type:before{left:-1.5rem;content:"**"}.note-dagger1 .note__content>p:first-of-type:before{content:"†"}.note-dagger2 .note__content>p:first-of-type:before{content:"‡"}@media screen and (min-width: 48em){.note-long .note__content{position:static;overflow:auto;height:auto}.note-long .note__content:after{display:none}}.checkbox-note{position:absolute;visibility:hidden;top:-9999px;left:-9999px}.checkbox-note~.note__content:after{position:absolute;bottom:.1rem;z-index:9;width:calc(100% - 4rem);height:100%;content:"";pointer-events:none;background-image:linear-gradient(to bottom, transparent 33%, var(--c-bg-2) 90%)}@media screen and (min-width: 48em){.checkbox-note~.note__content{overflow:visible;height:auto}}.checkbox-note~.open-note{display:block;position:absolute;z-index:999;width:50%;height:5rem;margin-left:25%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0)}.checkbox-note~.open-note>.arrow{display:block;z-index:999;width:0;height:0;margin:2rem auto;border-color:rgba(0,0,0,0);border-style:solid;border-width:1rem}.checkbox-note~.open-note:focus{color:rgba(0,0,0,0)}.checkbox-note~.note__content{height:10.5rem}.checkbox-note~.note__content:after{transition:opacity 150ms;opacity:1}@media screen and (min-width: 48em){.checkbox-note~.note__content{height:100%}.checkbox-note~.note__content:after{display:none}}.checkbox-note~.open-note{bottom:-3rem}.checkbox-note~.open-note>.arrow{border-top-color:var(--c-text-normal);border-bottom-color:currentcolor;border-bottom-color:initial}@media screen and (min-width: 48em){.checkbox-note~.open-note{display:none}}.checkbox-note:checked~.note__content{height:100%}.checkbox-note:checked~.note__content:after{opacity:0;height:100%}.checkbox-note:checked~.open-note{bottom:-1rem}.checkbox-note:checked~.open-note>.arrow{border-top-color:currentcolor;border-top-color:initial;border-bottom-color:var(--c-text-normal)}@media screen and (min-width: 48em){.checkbox-note:checked~.open-note{display:none}}.md table:not(.lntable){border-collapse:separate;border-radius:.5rem;box-shadow:0 0 0 1px var(--c-shadow-2);overflow:hidden;margin-top:calc(1rem + 1 * var(--es));margin-bottom:calc(1rem + 1 * var(--es))}.md table:not(.lntable) th:first-child,.md table:not(.lntable) td:first-child{padding-left:2rem}.md table:not(.lntable) th:last-child,.md table:not(.lntable) td:last-child{padding-right:2rem}.md thead,.md tbody{font-size:1.9375rem;line-height:3rem;padding-top:.77440625rem;padding-bottom:.22559375rem}.md thead{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;letter-spacing:.02em;word-spacing:.06em}.md thead>tr{background-color:var(--c-text-medium);color:var(--c-text-contrast)}.md tbody{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.md tbody tr:nth-child(2n){background-color:var(--c-bg-1);color:var(--c-text-semihigh)}.md tbody tr:nth-child(2n+1){background-color:var(--c-bg-4);color:var(--c-text-high)}.md th,.md td{padding:1rem}.js-has-pseudo [csstools-has-1a-31-2s-w-30-2x-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-2r-2w-2t-2r-2z-2q-33-3c-2l-15]:not(.does-not-exist):not(does-not-exist){padding-left:0}.md li:has([type=checkbox]){padding-left:0}.js-has-pseudo [csstools-has-1a-31-2s-w-30-2x-1m-2w-2p-37-14-2j-38-3d-34-2t-1p-2r-2w-2t-2r-2z-2q-33-3c-2l-15]:not(.does-not-exist):not(does-not-exist)::before{content:""}.md li:has([type=checkbox])::before{content:""}.md li input[type=checkbox]:disabled{margin:0 2rem 0 0;color:var(--c-text-extralow);border-color:var(--c-text-extralow);background-color:var(--c-text-extralow)}.md ul h5,.md ul h6,.md ol h5,.md ol h6{margin:0;padding:0}.md>ul,.md>ol{margin-bottom:1rem}.md>ul>li:last-child,.md>ol>li:last-child{margin-bottom:-1rem}.md ul li:before{content:"•"}.md ol{counter-reset:ol1}.md ol>li>ol{counter-reset:ol2}.md ol>li>ol>li>ol{counter-reset:ol3}.md ol>li:before{content:counter(ol1) ".";counter-increment:ol1}.md ol>li>ol>li:before{content:counter(ol2, lower-alpha) ")";counter-increment:ol2}.md ol>li>ol>li>ol>li:before{content:counter(ol3, lower-roman) ".";counter-increment:ol3;letter-spacing:-0.05em}.md li{position:relative;padding-left:calc(3rem + 1 * var(--es));page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid-column;overflow:visible}.md li>p{margin-bottom:1rem;overflow:visible}.md li:before{font-weight:600;position:absolute;left:0}.md li li:before{font-weight:450}.md li li li:before{font-weight:300}.md .ol-continue{counter-reset:none}.js-has-pseudo [csstools-has-1a-31-2s-w-30-2x-1m-2w-2p-37-14-1a-2t-31-2q-19-19-3b-19-2u-39-30-30-15]:not(.does-not-exist):not(does-not-exist),.js-has-pseudo [csstools-has-1a-31-2s-w-2s-2s-1m-2w-2p-37-14-1a-2t-31-2q-19-19-3b-19-2u-39-30-30-15]:not(.does-not-exist):not(does-not-exist),.js-has-pseudo [csstools-has-1a-31-2s-w-30-2x-1q-34-1m-2w-2p-37-14-1a-2t-31-2q-19-19-3b-19-2u-39-30-30-15]:not(.does-not-exist):not(does-not-exist):not(does-not-exist),.js-has-pseudo [csstools-has-1a-31-2s-w-2s-2s-1q-34-1m-2w-2p-37-14-1a-2t-31-2q-19-19-3b-19-2u-39-30-30-15]:not(.does-not-exist):not(does-not-exist):not(does-not-exist){text-align:left}.md li:has(.emb--w-full),.md dd:has(.emb--w-full),.md li>p:has(.emb--w-full),.md dd>p:has(.emb--w-full){text-align:left}.js-has-pseudo [csstools-has-1a-31-2s-w-30-2x-1m-2w-2p-37-14-1a-2t-31-2q-15]:not(.does-not-exist):not(does-not-exist):after,.js-has-pseudo [csstools-has-1a-31-2s-w-30-2x-1q-34-1m-2w-2p-37-14-1a-2t-31-2q-15]:not(.does-not-exist):not(does-not-exist):not(does-not-exist):after{display:table;content:"";clear:both}.md li:has(.emb):after,.md li>p:has(.emb):after{display:table;content:"";clear:both}.md--footer li{padding-left:3rem}@media screen and (min-width: 48em){.md--footer li{padding-left:2.5rem}}.md--small li{padding-left:2.5rem}.md--tiny li{padding-left:2rem}.smallindent li{padding-left:3rem !important}.md .icon{fill:var(--c-text-low)}.md p .icon--tiny{position:relative;top:.55rem;height:2rem;width:2rem;padding:0}.md--frame .icon{fill:var(--c-frame-text-low)}.md .math-block,.md .chem-block{font-size:1.9375rem;line-height:3rem;padding-top:.77440625rem;padding-bottom:calc(0.22559375rem + var(--es));scroll-margin-top:calc( var(--tnh) + var(--tg) + 2rem - 3rem )}.md .katex{font-size:1.1em}.md .ta-left{text-align:left}.md .ta-right{text-align:right}.md .ta-center{text-align:center}@media screen and (min-width: 48em){.md .ta-left3{text-align:left}.md .ta-right3{text-align:right}}@media screen and (min-width: 120em){.md .ta-left6{text-align:left}.md .ta-right6{text-align:right}}.md .half{min-width:50%;width:50%}@media screen and (min-width: 39em){.md .normal{width:74rem}}.md .full{max-width:148rem}@media screen and (min-width: 48em){.md .inline{display:inline-block}}@media screen and (min-width: 48em){.md .block{display:block;margin-right:37rem}}@media screen and (min-width: 79em){.md .block{margin-left:37rem}}.box,.box-danger,.box-warn,.box-info,.box-success{--box-shadow-color: var(--c-shadow-3);position:relative;z-index:2;margin:1rem 0;background-color:var(--c-bg-2);border-radius:.5rem;box-shadow:0 0 0 1px var(--box-shadow-color);text-align:left !important;clear:both}.box.left,.left.box-danger,.left.box-warn,.left.box-info,.left.box-success,.box.left-in,.left-in.box-danger,.left-in.box-warn,.left-in.box-info,.left-in.box-success,.box.left-in-half,.left-in-half.box-danger,.left-in-half.box-warn,.left-in-half.box-info,.left-in-half.box-success,.box.right,.right.box-danger,.right.box-warn,.right.box-info,.right.box-success,.box.right-in,.right-in.box-danger,.right-in.box-warn,.right-in.box-info,.right-in.box-success,.box.right-in-half,.right-in-half.box-danger,.right-in-half.box-warn,.right-in-half.box-info,.right-in-half.box-success{width:33rem}.box.left,.left.box-danger,.left.box-warn,.left.box-info,.left.box-success,.box.left-in,.left-in.box-danger,.left-in.box-warn,.left-in.box-info,.left-in.box-success,.box.left-in-half,.left-in-half.box-danger,.left-in-half.box-warn,.left-in-half.box-info,.left-in-half.box-success{margin-right:4rem;margin-left:2rem}.box.right,.right.box-danger,.right.box-warn,.right.box-info,.right.box-success,.box.right-in,.right-in.box-danger,.right-in.box-warn,.right-in.box-info,.right-in.box-success,.box.right-in-half,.right-in-half.box-danger,.right-in-half.box-warn,.right-in-half.box-info,.right-in-half.box-success{margin-left:4rem;margin-right:2rem}.box-danger,.box-warn,.box-info,.box-success{padding-left:1rem;padding-right:1rem;border-left-width:1rem;border-left-style:solid;border-left-color:var(--box-shadow-color)}.box-danger{color:var(--c-text-high);background-color:var(--c-danger-box-bg);border-left-color:var(--c-danger-bg);--box-shadow-color: var(--c-danger-bg)}.box-warn{color:var(--c-text-high);background-color:var(--c-warn-box-bg);--box-shadow-color: var(--c-warn-box)}.box-info{color:var(--c-text-semihigh);background-color:var(--c-info-box-bg);--box-shadow-color: var(--c-info-bg)}.box-success{color:var(--c-text-semihigh);background-color:var(--c-success-box-bg);--box-shadow-color: var(--c-success-bg)}.md>.box,.md>.box-danger,.md>.box-warn,.md>.box-info,.md>.box-success{max-width:70rem;margin:1rem 2rem 3rem}.layout-box{position:relative;border-radius:1rem;background-color:var(--c-bg-2);z-index:-10}.layout-box:after{display:block;position:absolute;z-index:-9;top:0;left:0;width:100%;height:100%;content:"";padding:0 1rem;box-shadow:inset 0 0 .75rem .25rem var(--c-page)}@media screen and (min-width: 120em){.md--margin-doc .box,.md--margin-doc .box-danger,.md--margin-doc .box-warn,.md--margin-doc .box-info,.md--margin-doc .box-success{margin-left:auto;margin-right:auto}}@media screen and (min-width: 79em){.md--margin-full .box,.md--margin-full .box-danger,.md--margin-full .box-warn,.md--margin-full .box-info,.md--margin-full .box-success{margin-left:auto;margin-right:auto}}.container:after{display:table;content:"";clear:both}@media screen and (min-width: 39em){.md .left,.md .right,.md .left-in,.md .right-in,.md .left-in-half,.md .right-in-half{position:relative;z-index:2;min-width:0;min-width:initial;width:37rem}}@media screen and (min-width: 39em){.md .left,.md .left-in,.md .left-in-half{float:left;clear:left;margin-right:2rem !important}}@media screen and (min-width: 39em){.md .right,.md .right-in,.md .right-in-half{float:right;clear:right;margin-left:2rem !important}}@media screen and (min-width: 48em){.md .right3{position:relative;z-index:2;width:37rem;padding:0 2rem;float:right;clear:right}}@media screen and (min-width: 120em){.md--margin-doc .highlight{margin-left:auto;margin-right:auto}.md--margin-doc .left-in{margin-right:2rem}.md--margin-doc .left-in-half{margin-left:18.5rem}.md--margin-doc .left-in{margin-left:37rem}.md--margin-doc .left-in+.highlight,.md--margin-doc .left-in+.inline{margin-left:-36.9rem}.md--margin-doc .highlight+.right-in,.md--margin-doc .highlight+.right3,.md--margin-doc .highlight+.fig--ph-right,.md--margin-doc .inline+.right-in,.md--margin-doc .inline+.right3,.md--margin-doc .inline+.fig--ph-right{margin-left:-36.9rem}}@media screen and (min-width: 79em){.md--margin-full .highlight{margin-left:auto;margin-right:auto}.md--margin-full .left-in{margin-right:2rem}.md--margin-full .left-in-half{margin-left:19.5rem}.md--margin-full .left-in{margin-left:37rem}.md--margin-full .left-in+.highlight,.md--margin-full .left-in+.inline{margin-left:-36.9rem}.md--margin-full .highlight+.right-in,.md--margin-full .highlight+.right3,.md--margin-full .highlight+.fig--ph-right,.md--margin-full .inline+.right-in,.md--margin-full .inline+.right3,.md--margin-full .inline+.fig--ph-right{margin-left:-36.9rem}}.md--margin-full .left-in,.md--margin-full .left-in-half,.md--margin-full .right-in,.md--margin-full .right-in-half,.md--margin-doc .left-in,.md--margin-doc .left-in-half,.md--margin-doc .right-in,.md--margin-doc .right-in-half{margin-bottom:0}@media screen and (min-width: 48em){.md--margin-full .right-in,.md--margin-doc .right-in{margin-left:2rem}.md--margin-full .right-in-half,.md--margin-doc .right-in-half{margin-right:19.5rem}.md--margin-full .right-in,.md--margin-doc .right-in{margin-right:37rem}}.page-header{position:relative;z-index:2;margin:0 1px}.page-header>hr{border-top:.3rem solid var(--c-text-normal);height:1rem}.page-header--home{margin-bottom:6rem}@media screen and (min-width: 79em){.page-header--left .title,.page-header--left #author{position:absolute;left:0;top:0;width:37rem}}.page-list>hr{border-bottom:.2rem solid var(--c-text-normal);height:1rem;margin:0 2rem 5rem 2rem}.page-footer{flex:0 0 auto;padding-top:calc(2rem + 1 * var(--es));margin-top:auto}.page-footer>hr{border-top:.15rem solid var(--c-text-extralow);height:1rem;margin:0 2rem;max-width:70rem}@media screen and (min-width: 79em){.padding-full{padding-left:39rem}}@media screen and (min-width: 79em){.padding-full-half{padding-left:20.5rem}}@media screen and (min-width: 120em){.margin-doc{margin-left:37rem}}@media screen and (min-width: 120em){.margin-doc-half{margin-left:18.5rem}}@media screen and (min-width: 79em){.margin-full{margin-left:37rem}}@media screen and (min-width: 79em){.margin-full-half{margin-left:18.5rem}}.ul--row{display:flex;flex-direction:row;flex-wrap:wrap}.li-box{padding-top:2rem}.li-box:last-child>hr{display:none}@media screen and (min-width: 39em){.li-box{padding-top:4rem}}.news-separator{height:1rem;box-shadow:inset 0 0 .25rem rgba(0,0,0,.1);margin:3.5rem 1rem 0 1rem;background:var(--ctg-news-title)}@media screen and (min-width: 39em){.news-separator{margin:3.5rem 0 0 0}}@media screen and (min-width: 79em){.news-separator{background:var(--ctg4-news-title)}}.li-header{position:relative}.fig,.goat{position:relative;z-index:5;padding-top:1.75rem;padding-bottom:1rem;width:100%}.fig .caption,.goat .caption{padding-left:2rem;padding-right:2rem}@media screen and (min-width: 39em){.fig,.goat{padding-left:2rem;padding-right:2rem}.fig .caption,.goat .caption{padding-left:0;padding-right:0}}.fig--w-tiny,.fig--w-small,.fig--w-medium{float:left;clear:left;padding-left:2rem;padding-right:2rem}.fig--w-tiny .caption,.fig--w-small .caption,.fig--w-medium .caption{padding-left:0;padding-right:0}.fig--w-small,.fig--w-medium{width:calc(50% + 1rem)}@media screen and (min-width: 39em){.fig--w-small,.fig--w-medium{width:37rem}}.fig--w-small.fig--ph-right,.fig--ph-right.fig--w-medium{float:right;clear:right}.fig--w-tiny{padding-left:2rem;padding-right:2rem;width:calc(33.3334% + 1rem)}@media screen and (min-width: 39em){.fig--w-tiny{width:18.5rem}}.fig--w-tiny.fig--ph-right{float:right;clear:right}@media screen and (min-width: 48em){.fig--w-tiny.fig--ph-right{width:37rem;padding-right:18.5rem}}.fig--w-tiny .img__c-t-symbol{padding:1rem}@media screen and (min-width: 48em){.fig--w-medium.fig--ph-right{width:55.5rem}}.fig--w-text,.goat,.fig--w-large,.fig--w-xlarge{padding-bottom:2rem}@media screen and (max-width: 39em){.fig--w-text .img__c,.goat .img__c,.fig--w-large .img__c,.fig--w-xlarge .img__c{border-radius:0;border-left:none;border-right:none}}@media screen and (min-width: 48em){.fig--w-text,.goat{max-width:74rem}.fig--w-text .caption,.goat .caption{position:absolute;z-index:10;right:-35rem;top:1.25rem;width:33rem;height:calc(100% - 3.75rem);margin-left:2rem;text-align:left;padding-left:0;padding-right:0}.fig--w-text .caption__attr,.goat .caption__attr{position:absolute;bottom:0;left:0;float:none;text-align:left}}@media screen and (min-width: 120em){.md--margin-doc .fig--w-tiny.fig--ph-left{width:37rem;padding-left:18.5rem}.md--margin-doc .fig--w-tiny.fig--ph-left-inside{margin-left:37rem}.md--margin-doc>.fig--w-text,.md--margin-doc>.goat{margin-left:37rem}.md--margin-doc .fig--w-medium.fig--ph-left{width:55.5rem}.md--margin-doc .fig--w-large{margin-left:18.5rem;padding-left:0;padding-right:0}.md--margin-doc .fig--w-large .caption{margin-left:18.5rem}.md--margin-doc .fig--w-large .caption__attr{width:18.5rem}.md--margin-doc .fig--w-xlarge{width:148rem}.md--margin-doc .fig--w-xlarge .caption{margin-left:37rem}}@media screen and (min-width: 79em){.md--margin-full .fig--w-tiny.fig--ph-left{width:37rem;padding-left:18.5rem}.md--margin-full .fig--w-tiny.fig--ph-left-inside{margin-left:37rem}.md--margin-full>.fig--w-text,.md--margin-full>.goat{margin-left:37rem}.md--margin-full .fig--w-medium.fig--ph-left{width:55.5rem}.md--margin-full .fig--w-large{margin-left:18.5rem;padding-left:0;padding-right:0}.md--margin-full .fig--w-large .caption{margin-left:18.5rem}.md--margin-full .fig--w-large .caption__attr{width:18.5rem}.md--margin-full .fig--w-xlarge{width:148rem}.md--margin-full .fig--w-xlarge .caption{margin-left:37rem}}@media screen and (min-width: 48em){.fig--w-large .caption__text,.fig--w-xlarge .caption__text{display:inline-block;max-width:70rem;padding-left:4rem;padding-right:4rem}.fig--w-large .caption__attr,.fig--w-xlarge .caption__attr{width:33rem}}@media screen and (min-width: 79em){.fig--w-large{width:111rem}}@media screen and (min-width: 39em){.fig--w-tiny.fig--ph-left,.fig--w-small.fig--ph-left,.fig--w-medium.fig--ph-left{margin-right:2rem}.fig--w-tiny.fig--ph-right,.fig--w-small.fig--ph-right,.fig--w-medium.fig--ph-right{margin-left:2rem}}@media screen and (min-width: 39em){.fig--ph-left{float:left;clear:left}}@media screen and (min-width: 39em){.fig--ph-right{float:right;clear:right}}.fig--featured{float:right;clear:both;padding-top:1.75rem}@media screen and (min-width: 39em){.fig--featured{padding-top:1rem}}@media screen and (min-width: 48em){.fig--featured{position:absolute;z-index:2;top:-0.5rem;right:0;float:none;clear:none;padding-top:1.5rem;margin:0}}.fig--portrait{padding:0;height:8rem;width:8rem}@media screen and (min-width: 79em){.fig--portrait{margin-top:2rem;height:16.5rem;width:16.5rem}}.fig--w-pt2{padding:.75rem;height:6rem;width:6rem;overflow:hidden}.fig--w-pt1{padding:.5rem;height:4rem;width:4rem}.fig--portrait .img__frame,.fig--w-pt2 .img__frame,.fig--w-pt1 .img__frame{box-shadow:0 0 0 1px var(--c-shadow-2);border-radius:50%;overflow:hidden}.fig--diagram .img__c{border:1px solid rgba(0,0,0,.5333333333);box-shadow:none;background:#fff}.goat{font-size:1.43rem;line-height:2rem;padding-top:.464465rem;margin-bottom:-0.464465rem;font-family:'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;font-weight:450}.md--footer figure{width:100%;padding:0 2rem}.md--footer h2+figure{margin-top:1rem}.bg{color:var(--c-chroma-fg);background-color:var(--c-chroma-bg)}.chroma{color:var(--c-chroma-fg);background-color:var(--c-chroma-bg)}.chroma .err{color:var(--c-chroma-err-fg);background-color:var(--c-chroma-err-bg)}.chroma .lnlinks{outline:none;-webkit-text-decoration:none;text-decoration:none;color:inherit}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0}.chroma .hl{background-color:var(--c-chroma-hl)}.chroma .lnt{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em 0 .4em;color:var(--c-chroma-lnt)}.chroma .ln{white-space:pre;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-right:.2em;padding-right:.4em;color:var(--c-chroma-ln)}.chroma .line{display:flex}.chroma .k{color:var(--c-chroma-k);font-weight:var(--fw-chroma-k)}.chroma .kc{color:var(--c-chroma-kc);font-weight:var(--fw-chroma-kc)}.chroma .kd{color:var(--c-chroma-kd);font-weight:var(--fw-chroma-kd)}.chroma .kn{color:var(--c-chroma-kn);font-weight:var(--fw-chroma-kn)}.chroma .kp{color:var(--c-chroma-kp);font-weight:var(--fw-chroma-kp)}.chroma .kr{color:var(--c-chroma-kr);font-weight:var(--fw-chroma-kr)}.chroma .kt{color:var(--c-chroma-kt);font-weight:var(--fw-chroma-kt)}.chroma .na{color:var(--c-chroma-na)}.chroma .nb{color:var(--c-chroma-nb)}.chroma .bp{color:var(--c-chroma-bp)}.chroma .nc{color:var(--c-chroma-nc);font-weight:bold}.chroma .no{color:var(--c-chroma-no);font-weight:var(--fw-chroma-no)}.chroma .nd{color:var(--c-chroma-nd);font-weight:bold}.chroma .ni{color:var(--c-chroma-ni)}.chroma .ne{color:var(--c-chroma-ne);font-weight:bold}.chroma .nf{color:var(--c-chroma-nf);font-weight:bold}.chroma .nl{color:var(--c-chroma-nl);font-weight:bold}.chroma .nn{color:var(--c-chroma-nn)}.chroma .py{color:var(--c-chroma-py)}.chroma .nt{color:var(--c-chroma-nt)}.chroma .nv{color:var(--c-chroma-nv)}.chroma .vc{color:var(--c-chroma-vc)}.chroma .vg{color:var(--c-chroma-vg)}.chroma .vi{color:var(--c-chroma-vi)}.chroma .vm{color:var(--c-chroma-vm)}.chroma .l{color:var(--c-chroma-l)}.chroma .ld{color:var(--c-chroma-ld)}.chroma .s{color:var(--c-chroma-s)}.chroma .sa{color:var(--c-chroma-sa)}.chroma .sb{color:var(--c-chroma-sb)}.chroma .sc{color:var(--c-chroma-sc)}.chroma .dl{color:var(--c-chroma-dl)}.chroma .sd{color:var(--c-chroma-sd)}.chroma .s2{color:var(--c-chroma-s2)}.chroma .se{color:var(--c-chroma-se)}.chroma .sh{color:var(--c-chroma-sh)}.chroma .si{color:var(--c-chroma-si)}.chroma .sx{color:var(--c-chroma-sx)}.chroma .sr{color:var(--c-chroma-sr)}.chroma .s1{color:var(--c-chroma-s1)}.chroma .ss{color:var(--c-chroma-ss)}.chroma .m{color:var(--c-chroma-m)}.chroma .mb{color:var(--c-chroma-mb)}.chroma .mf{color:var(--c-chroma-mf)}.chroma .mh{color:var(--c-chroma-mh)}.chroma .mi{color:var(--c-chroma-mi)}.chroma .il{color:var(--c-chroma-il)}.chroma .mo{color:var(--c-chroma-mo)}.chroma .o{color:var(--c-chroma-o);font-weight:bold}.chroma .ow{color:var(--c-chroma-ow);font-weight:bold}.chroma .c{color:var(--c-chroma-c);font-style:italic}.chroma .ch{color:var(--c-chroma-ch);font-style:italic}.chroma .cm{color:var(--c-chroma-cm);font-style:italic}.chroma .c1{color:var(--c-chroma-c1);font-style:italic}.chroma .cs{color:var(--c-chroma-cs);font-weight:bold;font-style:italic}.chroma .cp{color:var(--c-chroma-cp);font-weight:bold;font-style:italic}.chroma .cpf{color:var(--c-chroma-cpf);font-weight:bold;font-style:italic}.chroma .gd{color:var(--c-chroma-gd-fg);background-color:var(--c-chroma-gd-bg)}.chroma .ge{font-style:italic}.chroma .gr{color:var(--c-chroma-gr)}.chroma .gh{color:var(--c-chroma-gh);font-weight:var(--fw-chroma-gh)}.chroma .gi{color:var(--c-chroma-gi-fg);background-color:var(--c-chroma-gi-bg)}.chroma .go{color:var(--c-chroma-go)}.chroma .gp{color:var(--c-chroma-gp)}.chroma .gs{font-weight:bold}.chroma .gu{color:var(--c-chroma-gu)}.chroma .gt{color:var(--c-chroma-gt)}.chroma .gl{-webkit-text-decoration:underline;text-decoration:underline}.chroma .w{color:var(--c-chroma-w)}#author{display:inline-grid;width:100%;padding:0 2rem;padding-bottom:3rem;grid-template-columns:10rem auto auto;grid-template-rows:repeat(3, minmax(4rem, auto));grid-template-areas:"img title title" "img description description" ". follow contact"}@media screen and (min-width: 25em){#author{grid-template-columns:10rem 50% 1fr;grid-template-rows:auto auto;grid-template-areas:"img title follow" "img description contact"}}@media screen and (min-width: 39em){#author{width:74rem}}@media screen and (min-width: 79em){#author{width:37rem;grid-template-columns:22.5rem 4rem 4rem;grid-template-rows:auto auto auto;grid-template-areas:"title title title" "description description description" "img follow contact"}}#author__portrait{grid-area:img}#author__title{grid-area:title}.h1--author{font-size:2.86rem;line-height:3rem;padding-top:.42893rem;padding-bottom:.57107rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;letter-spacing:.02em;word-spacing:.06em}#author__description{grid-area:description}#author__follow,#author__contact{display:inline-block;align-self:end;justify-self:start;margin-left:-0.3rem}@media screen and (min-width: 25em){#author__follow,#author__contact{justify-self:end;align-self:center;height:auto;height:initial}}@media screen and (min-width: 79em){#author__follow,#author__contact{justify-self:center;align-self:center}}#author__follow{grid-area:follow}#author__contact{grid-area:contact}.author__icon-list{display:inline-flex;flex-direction:row}@media screen and (min-width: 79em){.author__icon-list{flex-direction:column}}.author__icon-item{display:inline-block;padding:0 .2rem}@media screen and (min-width: 79em){.author__icon-item{padding:.2rem 0}}.published{display:flex;flex-direction:row;flex-shrink:0}@media screen and (min-width: 79em){.published{flex-direction:column-reverse}}.author-list{display:flex;flex-direction:row;flex-wrap:wrap}.nav__item:empty{display:none}.nav__item--1{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700;letter-spacing:.04em;word-spacing:.12em}.nav__item--2{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:500;letter-spacing:.02em;word-spacing:.06em}.nav__item--3{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:400}.nav__title:hover,.nav__title:focus{color:var(--c-frame-border-active)}.nav-main__link{letter-spacing:.075em;word-spacing:.225em;text-transform:uppercase;border-bottom:.6rem solid var(--c-frame);transition:border-bottom-color 250ms}.nav-main__link:hover,.nav-main__link:focus{border-bottom-color:var(--c-frame-border-active)}.nav-main__link.is-active,.nav-main__link.has-active{border-bottom-color:var(--c-frame-border-active)}.social a,.social .nav-main__link{letter-spacing:.025em}.ctrl{min-width:13rem;display:flex;flex-direction:row;padding:0 2rem;align-items:flex-start}@media screen and (min-width: 48em){.ctrl{width:37rem}}.ctrl__button,.ctrl__extlink{display:inline-block;padding:1rem .5rem 0 .5rem}.ctrl__button .icon,.ctrl__extlink .icon{fill:currentColor;background-color:rgba(0,0,0,0);border-radius:.5rem}.ctrl__button{line-height:3rem;font-size:3rem;background:inherit;color:inherit}.ctrl__button:not([disabled]) .icon{fill:var(--c-frame-button)}.ctrl__button:not([disabled]):hover{cursor:pointer}.ctrl__button:not([disabled]):hover .icon{fill:var(--c-frame-button-hover);background-color:var(--c-frame-button-hover-bg)}.ctrl__button:disabled .icon{fill:var(--c-frame-button-disabled)}.ctrl__extlink:hover .icon{fill:var(--c-frame-text-link-ext)}.ctrl__menulink{display:inline-block;font-size:1.43rem;line-height:1rem;padding-top:1.964465rem;padding-bottom:1.535535rem;font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700;margin:0 1rem}.ctrl__title{display:inline-block;padding:1rem 1rem 0 1rem}.ctrl__title--logo img{height:3rem;width:auto}.ctrl__title--text span{font-size:1.93rem;line-height:3rem;padding-top:.777215rem;margin-bottom:-0.777215rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;letter-spacing:.04em;word-spacing:.12em;text-transform:uppercase}@media screen and (min-width: 25em){.ctrl__title--text span{font-size:2.86rem;line-height:3rem;padding-top:.42893rem;margin-bottom:-.42893rem;letter-spacing:.03em;word-spacing:.09em;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:300}}.ctrl-left{justify-content:flex-start;padding-left:1rem}.ctrl-right{justify-content:flex-end;padding-right:1rem}.section-nav{padding:calc(0.5rem + 0.5 * var(--es)) 0rem;-moz-column-count:2;column-count:2;-moz-column-width:37rem;column-width:37rem;-moz-column-gap:0;column-gap:0;max-width:74rem;clear:both}.section-nav__li{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid-column;-webkit-column-break-inside:avoid}.section-nav__link{display:flex;flex-wrap:nowrap;align-items:start;height:100%;padding:calc(1.5rem + 0.5 * var(--es)) 2rem calc(0.5rem + 0.5 * var(--es)) 2rem}.section-nav__link:hover,.section-nav__link:focus,.section-nav__link:active{background-color:rgba(0,0,0,0)}.section-nav__link:hover .section-nav__title,.section-nav__link:focus .section-nav__title,.section-nav__link:active .section-nav__title{text-decoration-color:var(--c-text-normal)}.section-nav__title{font-size:1.915rem;line-height:2rem;padding-top:.5328325rem;margin-bottom:-0.5328325rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;color:var(--c-text-normal);letter-spacing:.01em;-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:.075em;text-decoration-thickness:.075em;text-decoration-color:rgba(0,0,0,0)}.section-nav__icon{width:4.5rem;flex-shrink:0}.section-nav__description{color:var(--c-text-low);font-size:1.6083333333rem;line-height:2rem;padding-top:1.3976791667rem;padding-bottom:.6023208333rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.section-nav__description strong{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600}.section-nav--top{padding-top:0;clear:none}.page-nav{max-width:74rem;margin:1rem 0}.page-nav__list{display:flex;flex-direction:column}@media screen and (min-width: 39em){.page-nav__list{flex-direction:row;justify-content:space-between;align-items:stretch}.page-nav__list .page-nav__link--prev,.page-nav__list .page-nav__link--start{margin:auto 0}}.page-nav__li{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid-column;-webkit-column-break-inside:avoid}@media screen and (min-width: 39em){.page-nav__li{width:50%;align-self:stretch}}.page-nav__link{display:flex;flex-wrap:nowrap;align-items:center;height:100%;padding:2rem 1rem;margin:0 1rem}@media screen and (min-width: 39em){.page-nav__link{padding:2rem;margin:0}}.page-nav__link:hover,.page-nav__link:focus,.page-nav__link:active{background-color:rgba(0,0,0,0)}.page-nav__link:hover .page-nav__title,.page-nav__link:focus .page-nav__title,.page-nav__link:active .page-nav__title{text-decoration-color:var(--c-text-normal)}.page-nav__link--prev,.page-nav__link--next,.page-nav__link--start{justify-content:space-between;text-align:center}.page-nav__link--start{visibility:hidden;display:none}@media screen and (min-width: 39em){.page-nav__link--start{display:flex}}.page-nav__link--prev{flex-flow:row-reverse}.page-nav__link--prev .page-nav__icon--arrow{text-align:left}@media screen and (min-width: 39em){.page-nav__link--prev{text-align:right}}.page-nav__link--next .page-nav__icon--arrow{text-align:right}@media screen and (min-width: 39em){.page-nav__link--next{text-align:left}}.page-nav__title{display:block;font-size:1.915rem;line-height:3rem;margin-top:-.0171675rem;padding-bottom:.0171675rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;color:var(--c-text-normal);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:.075em;text-decoration-thickness:.075em;text-decoration-color:rgba(0,0,0,0)}.page-nav__icon{width:4rem;height:3rem;flex-shrink:0;color:var(--c-nav-link)}.page-nav__icon .icon--material{height:3rem;width:3rem}.page-nav__icon--arrow{align-self:center;font-size:3rem;padding:0;margin:0}@media screen and (min-width: 39em){.page-nav__icon--arrow{flex:10 1}}.page-nav__itemcol{display:block;width:4rem;height:3rem;align-self:center}.page-nav__meta{display:block;font-size:1.43rem;line-height:1.5rem;padding-top:.464465rem;padding-bottom:.035535rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450;color:var(--c-text-low)}.page-nav__meta--dir{font-weight:300}.page-nav__description{font-size:1.625rem;line-height:2rem;padding-top:1.3914375rem;padding-bottom:.6085625rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:300}.page-nav__description strong{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}@media screen and (min-width: 79em){.card-nav--top{margin-top:-1rem}}@media screen and (min-width: 79em){.card-nav--section{margin-top:-2rem}}.card-nav--2{max-width:74rem}.card-nav--3{max-width:111rem}.card-nav--4{padding:calc(2rem + 2 * var(--es)) 0rem;max-width:100%}.card-nav__list{display:flex;align-items:stretch;flex-direction:row;flex-wrap:wrap}.card-nav__list--top{margin-top:-2rem}.card{padding:2rem;width:100%}.card .br-cond{display:none}.card--half{width:50%;margin-bottom:1rem}@media screen and (min-width: 39em){.card--half{width:18.5rem}}@media screen and (min-width: 39em){.card--1{width:37rem}}.card--1--row{margin-bottom:0}@media screen and (min-width: 39em){.card__hover{display:block;transition:transform 150ms ease-out}.card__hover:hover,.card__hover:focus,.card__hover:active{transform:scale(1.075);transition:transform 150ms ease-in}}.card__flex{display:flex;flex-direction:row;width:100%;height:100%}.card__flex--1 .card__content{flex-grow:1;padding:1.5rem 0}@media screen and (min-width: 39em){.card__flex--1{flex-direction:column;justify-content:space-between;height:100%}.card__flex--1 .card__content{padding:1.5rem 0}}.card__fig{padding:0}.card__fig .img__frame{width:100%;height:100%;overflow:hidden}.card__fig .img__c--t-symbol svg{display:block;margin:0 auto}.card__fig--half{flex-shrink:0;width:14.5rem;height:12.5rem}.js-has-pseudo [csstools-has-1a-2r-2p-36-2s-2n-2n-2u-2x-2v-19-19-2w-2p-30-2u-w-1a-2x-31-2v-2n-2n-2u-36-2p-31-2t-1m-2w-2p-37-14-1a-2x-31-2v-2n-2n-2r-19-19-38-19-37-3d-31-2q-33-30-15]:not(.does-not-exist):not(.does-not-exist){padding:1rem}.card__fig--half .img__frame:has(.img__c--t-symbol){padding:1rem}.card__fig--half .img__c--t-symbol{width:12.5rem;height:10.5rem}.card__fig--1{flex-shrink:0;width:7.25rem;height:4.8333575rem;margin-right:1px}.js-has-pseudo [csstools-has-1a-2r-2p-36-2s-2n-2n-2u-2x-2v-19-19-1d-w-1a-2x-31-2v-2n-2n-2u-36-2p-31-2t-1m-2w-2p-37-14-1a-2x-31-2v-2n-2n-2r-19-19-38-19-37-3d-31-2q-33-30-15]:not(.does-not-exist):not(.does-not-exist){padding:.5rem}.card__fig--1 .img__frame:has(.img__c--t-symbol){padding:.5rem}.card__fig--1 .img__c--t-symbol{width:6.25rem;height:3.83333575rem}@media screen and (min-width: 25em){.card__fig--1{flex-shrink:0;width:14.5rem;height:9.666715rem}.js-has-pseudo [csstools-has-1a-2r-2p-36-2s-2n-2n-2u-2x-2v-19-19-1d-w-1a-2x-31-2v-2n-2n-2u-36-2p-31-2t-1m-2w-2p-37-14-1a-2x-31-2v-2n-2n-2r-19-19-38-19-37-3d-31-2q-33-30-15]:not(.does-not-exist):not(.does-not-exist){padding:1rem}.card__fig--1 .img__frame:has(.img__c--t-symbol){padding:1rem}.card__fig--1 .img__c--t-symbol{width:12.5rem;height:7.6666715rem}}@media screen and (min-width: 39em){.card__fig--1{width:33rem;height:22.000011rem;padding:0;margin-right:0}.js-has-pseudo [csstools-has-1a-2r-2p-36-2s-2n-2n-2u-2x-2v-19-19-1d-w-1a-2x-31-2v-2n-2n-2u-36-2p-31-2t-1m-2w-2p-37-14-1a-2x-31-2v-2n-2n-2r-19-19-38-19-37-3d-31-2q-33-30-15]:not(.does-not-exist):not(.does-not-exist){padding:2rem}.card__fig--1 .img__frame:has(.img__c--t-symbol){padding:2rem}.card__fig--1 .img__c--t-symbol{width:29rem;height:18.000011rem}}.card__title{margin:0 2rem;font-size:1.915rem;line-height:2rem;padding-top:.7828325rem;padding-bottom:.2171675rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;letter-spacing:.01em;word-spacing:.03em;text-decoration-color:rgba(0,0,0,0)}.card__title--top{margin-top:1rem}.card__title--half{display:inline-block;margin-bottom:0;font-size:1.5015rem;line-height:1.5rem;padding-top:.18768825rem;padding-bottom:.31231175rem;letter-spacing:.02em;word-spacing:.06em}.card__title--small .title__link{font-size:1.43rem;line-height:1.75rem;padding-top:.589465rem;padding-bottom:.660535rem;letter-spacing:.02em;word-spacing:.06em}.card__content{display:flex;flex-direction:column;justify-content:space-between;width:100%;background-color:var(--c-bg-2);box-shadow:0 0 0 1px var(--c-shadow-3);padding:1rem 0}.card__footer{display:flex;flex-direction:row;justify-content:space-between;width:100%;padding:1rem 2rem 0 1.5rem}.card__footer .link{display:inline-block;width:9rem;height:3rem;margin:.5rem 0;text-align:center;color:#fff;fill:#fff;border-radius:1.5rem;box-shadow:0 0 0 1px var(--c-shadow-2)}.card__footer .link:hover,.card__footer .link:focus{box-shadow:0 0 0 1px rgba(0,0,0,.5)}.card__footer .link--doc{background:var(--cbg-doc-button)}.card__footer .link--blog{background:var(--cbg-blog-button)}.card__footer .link--news{background:var(--cbg-news-button)}.sidebar-box{margin-top:-1rem}@media screen and (min-width: 79em){.sidebar-box{scrollbar-gutter:stable;scrollbar-color:var(--c-scrollbar) var(--c-bg-3)}.sidebar-box::-webkit-scrollbar{width:1rem;height:1rem}.sidebar-box::-webkit-scrollbar-thumb{background:var(--c-scrollbar)}.sidebar-box::-webkit-scrollbar-track{background:var(--c-bg-3)}}.sidebar{height:100%;width:100%;padding:.5rem 2rem 3rem 2rem}@media screen and (min-width: 79em){.sidebar{width:34rem}}.sidebar__title{display:inline-block;font-size:1.905rem;line-height:2rem;padding-top:1.2865775rem;padding-bottom:.7134225rem;font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em}@media screen and (min-width: 79em){.sidebar__title{font-size:1.43rem;line-height:2rem;padding-top:1.464465rem;padding-bottom:.535535rem}}.sidebar__list--1{padding-bottom:calc(1rem + 1 * var(--es))}.sidebar__list--1 .sidebar__text{padding-left:2rem}.sidebar__list--2 .sidebar__text,.sidebar__list--3 .sidebar__text{padding-left:1rem}.sidebar__list--2{margin-left:4.5rem}.sidebar__list--3{margin-left:3.5rem}.sidebar__item{position:relative;border-bottom:.1rem solid var(--c-shadow-2)}.sidebar__item:last-child{border-bottom-color:rgba(0,0,0,0)}@media screen and (min-width: 79em){.sidebar__item{border-bottom-color:rgba(0,0,0,0)}}.items-have-no-children{display:block;-moz-column-count:3;column-count:3;-moz-column-width:15rem;column-width:15rem;padding-bottom:1rem}.items-have-no-children .sidebar__item{padding-bottom:0;border-bottom-color:rgba(0,0,0,0)}.items-have-no-children .sidebar__link,.items-have-no-children .sidebar__open,.items-have-no-children .sidebar__chk{margin:.5rem 0 .4rem 0}@media screen and (min-width: 79em){.items-have-no-children{-moz-column-count:1;column-count:1;margin-bottom:0;padding-top:0;padding-bottom:0}}.sidebar__link,.sidebar__open,.sidebar__chk{display:inline-flex;align-items:center;margin:1rem 0 .9rem 0}@media screen and (min-width: 79em){.sidebar__link,.sidebar__open,.sidebar__chk{margin:.5rem 0 .4rem 0}}.sidebar__link:hover,.sidebar__link:focus,.sidebar__link.is-active{background-color:rgba(0,0,0,0)}.sidebar__link:hover .sidebar__text,.sidebar__link:focus .sidebar__text,.sidebar__link.is-active .sidebar__text{--shadow: --c-shadow-3;color:#fff}.sidebar__text{align-self:stretch;font-size:1.43rem;line-height:1.5rem;padding-top:.814465rem;padding-bottom:.685535rem;color:var(--c-frame-text-low)}.sidebar__chk,.sidebar__open{z-index:10;position:absolute;right:0;width:3rem;height:3rem}.sidebar__open{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.sidebar__open>.icon{position:static}.sidebar__open>.icon:after{display:inline-block;height:3rem;width:3rem;background-color:var(--c-frame-text-low);content:"";mask-size:cover;-webkit-mask-size:cover;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E")}.sidebar__chk{-webkit-appearance:none;-moz-appearance:none;appearance:none}.sidebar__chk~ul{display:none;height:0}.sidebar__chk:checked~ul{display:block;height:100%}.sidebar__chk:checked~.sidebar__open>.icon:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E")}.has-active>.sidebar__chk~ul{display:block;height:100%}.has-active>.sidebar__chk~.sidebar__open>span:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E")}.has-active>.sidebar__chk:checked~ul{display:none;height:0}.has-active>.sidebar__chk:checked~.sidebar__open>span:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E")}li:empty{display:none}li:empty:before{display:none}#toc{display:block;position:absolute;top:calc(var(--tnh) + 1rem);right:0;width:33rem;max-height:calc(100vh - var(--tnh) - 2 * 3rem - 4rem);box-shadow:0 0 0 .25rem var(--c-shadow-2);overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;scrollbar-color:var(--c-scrollbar) var(--c-bg-3)}#toc::-webkit-scrollbar{width:1rem;height:1rem}#toc::-webkit-scrollbar-thumb{background:var(--c-scrollbar)}#toc::-webkit-scrollbar-track{background:var(--c-bg-3)}#toc.is-closed{display:none}@media screen and (min-width: 39em){#toc{top:calc(var(--tnh) + var(--tg) + 1rem);grid-area:control;right:2rem}}@media screen and (min-width: 120em){#toc{right:-35rem}#toc.is-closed{display:block}}.toc__box{padding:1rem;background:var(--c-frame)}.toc__list{font-size:1.684375rem;line-height:2rem;padding-top:0.3692015625rem;padding-bottom:0.6307984375rem;font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:500;letter-spacing:.01em;word-spacing:.03em;color:var(--c-frame-text-medium)}.toc__list .br-cond{display:none}.toc__list a{display:block;padding:.5rem 0 .5rem 1.5rem;border-left:.5rem solid #555}.toc__list a .text{background-color:rgba(0,0,0,0)}.toc__list a:hover,.toc__list a:focus{color:#fff;border-color:var(--c-frame-border-active)}.toc__list a:hover .icon-font,.toc__list a:focus .icon-font{color:var(--c-frame-border-active)}.toc__list a:hover path,.toc__list a:focus path{fill:var(--c-frame-border-active)}.toc__list li li a{padding-left:3rem}.toc__list li li li a{padding-left:4.5rem}@media screen and (min-width: 79em){.toc__list{font-size:1.43rem;line-height:2rem;padding-top:.464465rem;margin-bottom:-0.464465rem}}.toc__title a{font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:700;letter-spacing:.05em;word-spacing:.15em;text-transform:uppercase;color:#fff}@media screen and (min-width: 79em){.taxo--left{position:absolute;top:37rem;left:0;z-index:5;margin-top:1rem;padding-top:0;width:37rem}}.taxo__list{display:flex;flex-direction:column}@media screen and (min-width: 39em){.taxo__list{flex-direction:row;flex-wrap:wrap}}.taxo__item{padding:1rem 1.5rem}@media screen and (min-width: 39em){.taxo__item{width:37rem}}.taxo-title{color:var(--c-nav-link-hover)}.taxo-shape--category{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600}.taxo-shape--tag{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.taxo-shape--series{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;font-style:italic}.pagefind-ui-box{max-width:74rem}@media screen and (min-width: 79em){.pagefind-ui-box{margin-left:37rem}}.pagefind-ui{margin:2rem;font-size:1.93rem;line-height:3rem;padding-top:.777215rem;padding-bottom:.222785rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:450}.pagefind-ui__form{position:relative}.pagefind-ui__search-input{padding-left:2rem;font-family:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;font-weight:500;font-size:inherit;background-color:var(--c-bg-3);border:1px solid var(--c-shadow-3);height:5rem;width:100%}.pagefind-ui__search-clear{position:absolute;z-index:10;top:1rem;right:0;width:7rem;background:none}.pagefind-ui__message{padding:calc(1rem + 1 * var(--es)) 0rem;font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600}.pagefind-ui__result{display:inline-flex;flex-direction:row;padding:calc(0.9rem + 1 * var(--es)) 0 calc(1rem + 1 * var(--es)) 0;border-top:.1rem solid var(--c-shadow-3)}.pagefind-ui__result-thumb{display:block;flex-shrink:0;align-self:auto;margin:1rem 2rem 0 0}@media screen and (min-width: 39em){.pagefind-ui__result-thumb{margin:1rem 4rem 0 0}}.pagefind-ui__result-image{display:block;width:7.25rem;border-radius:.5rem;box-shadow:0 0 0 1px var(--c-shadow-2);height:4.833575rem;-o-object-fit:cover;object-fit:cover}@media screen and (min-width: 39em){.pagefind-ui__result-image{width:14.5rem;height:9.66715rem}}.pagefind-ui__result-title{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600}.pagefind-ui__result-excerpt{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:300}.pagefind-ui__button{font-family:'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;font-weight:600;font-size:inherit;border:1px solid var(--c-shadow-3);border-radius:.5rem;height:5rem;width:100%}.clear:before,.clear:after{content:" ";display:table}.clear:after{clear:both}.font-italic{font-style:italic}.font-normal{font-style:normal}.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.hide{display:none !important}@media screen and (max-width: 39em){.hide-mobile{display:none !important}}@media screen and (min-width: 39em){.hide2{display:none !important}}@media screen and (max-width: 39em){.show2{display:none !important}}@media screen and (min-width: 48em){.hide3{display:none !important}}@media screen and (max-width: 48em){.show3{display:none !important}}@media screen and (min-width: 79em){.hide4{display:none !important}}@media screen and (max-width: 79em){.show4{display:none !important}}@media screen and (min-width: 120em){.hide6{display:none !important}}@media screen and (max-width: 120em){.show6{display:none !important}}.mt05{margin-top:.5rem}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}.mt-05{margin-top:-0.5rem}.mt-1{margin-top:-1rem}.mb05{margin-bottom:.5rem !important}.mb1{margin-bottom:1rem !important}.mb2{margin-bottom:2rem !important}.mb3{margin-bottom:3rem !important} \ No newline at end of file +:root { + --fs: 53.125%; + --tnh: 10rem; + --tg: 2rem; + --es: 0rem; + --ta: left; + } + @media screen and (min-width: 39em) { + :root { + --fs: 1.2820512821vw; + --tg: 4rem; + --es: 1rem; + --ta: justify; + } + } + @media screen and (min-width: 48em) { + :root { + --fs: 0.8695652174vw; + --tnh: 5rem; + } + } + @media screen and (min-width: 79em) { + :root { + --fs: 0.6578947368vw; + } + } + @media screen and (min-width: 95em) { + :root { + --fs: 62.5%; + } + } + @media screen and (min-width: 120em) { + :root { + --fs: 0.4424778761vw; + } + } + @media screen and (min-width: 141em) { + :root { + --fs: 62.5%; + } + } + + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video, button { + margin: 0; + padding: 0; + border: 0; + margin-block-start: 0; + margin-block-end: 0; + font: inherit; + vertical-align: baseline; + } + + ul, ol { + list-style: none; + } + + blockquote, q { + quotes: none; + } + + blockquote:before, blockquote:after, + q:before, q:after { + content: none; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + hr { + border: none; + margin: 0; + } + + em { + font-style: italic; + } + em em { + font-style: normal; + } + + strong { + font-weight: 700; + } + + code, kbd, var { + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + hyphens: none; + } + + var { + font-weight: 300; + word-wrap: break-word; + word-break: break-word; + } + + strong var { + font-weight: 450; + } + + a { + text-decoration: none; + color: inherit; + } + + small { + font-size: 74%; + } + + mark { + display: inline-block; + line-height: 1em; + padding: 0.1em 0.2em; + color: var(--c-warn); + background-color: var(--c-warn-bg); + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + } + + .link { + position: relative; + background-color: transparent; + border-radius: 0.5rem; + } + + .link--nav, .link--nav-ext, .link--frame, .link--frame-ext { + display: inline-block; + } + + .link--nav, .link--nav-ext { + color: var(--c-nav-link); + fill: var(--c-icon-link); + } + .link--nav:hover, .link--nav:focus, .link--nav:active, .link--nav-ext:hover, .link--nav-ext:focus, .link--nav-ext:active { + background-color: var(--c-nav-link-hover-bg); + } + + .link--nav:hover, .link--nav:focus, .link--nav:active, .link--nav.is-active { + color: var(--c-nav-link-hover); + fill: var(--c-icon-link-hover); + } + + .link--nav-ext:hover, .link--nav-ext:focus, .link--nav-ext:active { + color: var(--c-nav-link-ext-hover); + fill: var(--c-icon-link-ext-hover); + } + + .link--frame:hover, .link--frame:focus, .link--frame:active, .link--frame-ext:hover, .link--frame-ext:focus, .link--frame-ext:active { + background-color: var(--c-frame-button-hover-bg); + } + + .link--frame { + color: var(--c-frame-link); + fill: var(--c-frame-link); + } + .link--frame:hover, .link--frame:focus, .link--frame:active { + color: var(--c-frame-link-hover); + fill: var(--c-frame-link-hover); + } + + .link--frame-ext { + color: var(--c-frame-link-ext); + fill: var(--c-frame-link-ext); + } + .link--frame-ext:hover, .link--frame-ext:focus, .link--frame-ext:active { + color: var(--c-frame-link-ext-hover); + fill: var(--c-frame-link-ext-hover); + } + + .title__link { + display: inline-block; + color: var(--c-text-normal) !important; + } + + .h-a { + position: relative; + } + .h-a:before { + position: absolute; + left: -1.5rem; + content: "§"; + font-size: 80%; + opacity: 0; + color: var(--c-nav-link); + } + .h-a:hover, .h-a:focus { + color: var(--c-text-link-hover); + } + .h-a:hover:before, .h-a:focus:before { + opacity: 1; + } + + h1:target .h-a, h2:target .h-a, h3:target .h-a, h4:target .h-a, h5:target .h-a, h6:target .h-a { + position: relative; + background-color: transparent; + box-shadow: unset; + } + h1:target .h-a:before, h2:target .h-a:before, h3:target .h-a:before, h4:target .h-a:before, h5:target .h-a:before, h6:target .h-a:before { + opacity: 1; + color: var(--c-nav-link-hover); + } + + .link--text, .pagefind-ui__result-link { + padding-left: 0.2em; + padding-right: 0.2em; + margin-left: -0.2em; + margin-right: -0.2em; + text-decoration: underline dotted; + text-underline-offset: 0.075em; + text-decoration-thickness: 0.075em; + color: var(--c-text-link); + text-decoration-color: var(--c-text-link); + } + .link--text code, .pagefind-ui__result-link code { + text-decoration: inherit; + text-decoration-thickness: inherit; + text-underline-offset: inherit; + } + .link--text:hover, .pagefind-ui__result-link:hover, .link--text:focus, .pagefind-ui__result-link:focus, .link--text:active, .pagefind-ui__result-link:active { + color: var(--c-text-link-hover); + text-decoration-color: var(--c-text-link-hover); + background-color: var(--c-text-link-hover-bg); + } + .link--text[href^=http], [href^=http].pagefind-ui__result-link { + color: var(--c-text-link-ext); + text-decoration-color: var(--c-text-link-ext); + } + .link--text[href^=http]:after, [href^=http].pagefind-ui__result-link:after { + content: "↗"; + } + .link--text[href^=http]:hover, [href^=http].pagefind-ui__result-link:hover, .link--text[href^=http]:focus, [href^=http].pagefind-ui__result-link:focus { + background-color: var(--c-text-link-ext-hover-bg); + color: var(--c-text-link-ext-hover); + text-decoration-color: var(--c-text-link-ext-hover); + } + + .icon-link .icon { + fill: var(--c-icon-link); + } + .icon-link:hover .icon, .icon-link:focus .icon, .icon-link.is-active .icon { + fill: var(--c-nav-link-hover); + } + + .icon-link-ext .icon { + fill: var(--c-icon-link-ext); + } + .icon-link-ext:hover .icon, .icon-link-ext:focus .icon, .icon-link-ext.is-active .icon { + fill: var(--c-icon-link-ext-hover); + } + + .img__frame, .img__c { + display: block; + line-height: 0; + } + + .img__frame { + overflow: hidden; + } + + .img__frame--bg-white { + background: #fff; + } + + .img__frame--bg-light { + background: var(--c-frame-bg-1); + } + + .img__frame--bg-dark { + background: var(--c-frame); + } + + .img__frame--box-none { + box-shadow: none; + } + + .img__frame--box-shadow { + box-shadow: 0 0 0 1px var(--c-shadow-3); + } + + .img__frame--pad-half { + padding: 0.5rem; + } + + .img__frame--pad-one { + padding: 1rem; + } + + .img__frame--pad-two { + padding: 2rem; + } + + .img__frame--pad-three { + padding: 3rem; + } + + .l-footer .img__frame { + box-shadow: 0 0 0 0.2rem var(--c-frame-shadow-1); + } + + .img__c { + filter: var(--f-img); + } + .img__c svg { + width: 100%; + height: 100%; + margin: 0 auto; + } + + .img__c--c-red { + fill: var(--c-frame-border-active); + } + + .img__c--t-symbol img { + object-fit: contain !important; + } + + .img--svg { + width: 100%; + height: auto; + } + + #l-footer .img__c { + filter: brightness(90%) grayscale(50%); + } + + .caption { + display: block; + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.714465rem; + margin-bottom: -0.214465rem; + min-height: 2rem; + text-align: left; + } + + .caption__text, .caption__attr { + hyphens: none !important; + color: var(--c-text-extralow); + } + + .caption__text { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .caption__attr { + float: right; + text-align: right; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + } + + .caption__id { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-low); + } + + .ls-blur-up-img, + .img--ls { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + font-family: "blur-up: always", "object-fit: cover"; + object-fit: cover; + } + + .img--ls.ls-blur-up-is-loading { + visibility: hidden; + } + + .ls-blur-up-img { + opacity: 1; + filter: blur(0.4rem); + transition: opacity 1s ease, filter 2s ease; + } + + .ls-blur-up-img.ls-inview.ls-original-loaded { + opacity: 0; + filter: blur(0.4rem); + } + + .img--lqip.lazyload, + .img--lqip.lazyloading { + filter: blur(0.4rem); + } + + .img--lqip.lazyloaded { + filter: blur(0); + transition: filter 150ms ease; + } + + .img--ph { + opacity: 0; + transition: opacity 150ms ease; + } + + .img--ph.lazyloaded { + opacity: 1; + } + + *, *:before, *:after { + box-sizing: border-box; + } + + html, body { + height: 100%; + } + + html { + font-size: var(--fs); + font-synthesis: weight style; + } + + body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-feature-settings: "liga" on, "clig" on, "dlig" off; + scroll-behavior: smooth; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable both-edges; + min-height: 0; + color: var(--c-text-normal); + background-color: var(--c-page); + } + @media screen and (min-width: 79em) { + body { + overflow: hidden; + } + } + + .l-tnp { + padding-top: calc(var(--tnh) + var(--tg)); + } + + @media screen and (min-width: 39em) { + .l-wrap { + padding: 0 2rem; + } + } + @media screen and (min-width: 48em) { + .l-wrap { + padding: 0; + } + } + + ::selection, .selection .cl { + color: var(--c-selection); + background-color: var(--c-selection-bg); + } + + #l-masthead { + position: fixed; + top: 0; + z-index: 100; + width: 100vw; + height: 10rem; + color: var(--c-frame-text-normal); + background-color: var(--c-frame); + backdrop-filter: blur(1rem); + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 50%); + grid-template-rows: 5rem 5rem; + grid-template-areas: "logo ctrl" "menu menu"; + } + @media screen and (min-width: 39em) { + #l-masthead { + grid-template-columns: 2rem repeat(2, 37rem) 2rem; + grid-template-areas: ". logo ctrl ." ". menu menu ."; + } + } + @media screen and (min-width: 48em) { + #l-masthead { + height: 5rem; + grid-template-rows: 5rem; + grid-template-columns: 2rem repeat(3, 37rem) 2rem; + grid-template-areas: ". logo menu ctrl ."; + } + } + @media screen and (min-width: 79em) { + #l-masthead { + grid-template-columns: minmax(2rem, auto) repeat(4, 37rem) minmax(2rem, auto); + grid-template-areas: ". logo menu menu ctrl ."; + } + } + @media screen and (min-width: 120em) { + #l-masthead { + grid-template-columns: minmax(2rem, auto) repeat(6, 37rem) minmax(2rem, auto); + grid-template-areas: ". logo . menu menu ctrl . ."; + } + } + + #l-logo { + grid-area: logo; + width: 150%; + } + @media screen and (min-width: 39em) { + #l-logo { + width: 100%; + } + } + + #l-menu { + width: 100%; + height: 100%; + grid-area: menu; + overflow: hidden; + } + + #l-ctrl { + grid-area: ctrl; + position: relative; + } + + #l-content-box { + position: relative; + flex-grow: 1; + flex-shrink: 1; + flex-basis: auto; + display: flex; + flex-direction: column; + justify-content: space-between; + scroll-margin-top: calc(var(--tnh) + var(--tg)); + } + + #l-content { + padding-bottom: calc(2rem + 1 * var(--es)); + } + + .l-box { + width: 100%; + } + @media screen and (min-width: 39em) { + .l-box { + width: 74rem; + } + } + @media screen and (min-width: 48em) { + .l-box { + width: 111rem; + } + } + + @media screen and (min-width: 120em) { + .l-box--doc { + width: 148rem; + } + } + + @media screen and (min-width: 79em) { + .l-box--full { + width: 148rem; + } + } + + /* @keyframes content { + from {opacity: 0;} + to {opacity: 1;} + } */ + .l-page { + position: relative; + z-index: 1; + height: 100%; + display: grid; + grid-template-columns: repeat(2, 50%); + grid-template-areas: "main main"; + } + @media screen and (min-width: 39em) { + .l-page { + grid-template-columns: 2rem repeat(4, 18.5rem) 2rem; + grid-template-areas: ". main main main main main"; + } + } + @media screen and (min-width: 48em) { + .l-page { + grid-template-columns: 2rem repeat(6, 18.5rem) 2rem; + grid-template-areas: ". main main main main main main main"; + } + } + @media screen and (min-width: 79em) { + .l-page { + grid-template-columns: minmax(2rem, auto) repeat(8, 18.5rem) minmax(2rem, auto); + grid-template-areas: ". main main main main main main main main main"; + } + } + @media screen and (min-width: 120em) { + .l-page { + grid-template-columns: minmax(2rem, auto) repeat(12, 18.5rem) minmax(2rem, auto); + grid-template-areas: ". . . main main main main main main main main main main main"; + } + } + + @media screen and (min-width: 79em) { + .l-page--doc { + grid-template-areas: "fill left left main main main main main main main"; + } + } + @media screen and (min-width: 120em) { + .l-page--doc { + grid-template-areas: "fill left left main main main main main main main main main main main"; + } + } + .l-page--doc.is-locked { + background: black; + } + .l-page--doc.is-locked > #l-main { + z-index: -1; + } + + #l-overlay { + display: none; + position: fixed; + top: var(--tnh); + left: 0; + z-index: 9; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.5333333333); + cursor: unset; + } + #l-overlay.is-visible { + display: block; + cursor: pointer; + } + + #l-main { + grid-area: main; + display: flex; + flex-direction: column; + position: relative; + z-index: 5; + } + @media screen and (min-width: 79em) { + #l-main { + overflow-x: hidden; + overflow-y: auto; + scrollbar-gutter: stable; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); + } + #l-main::-webkit-scrollbar { + width: 1rem; + height: 1rem; + } + #l-main::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); + } + #l-main::-webkit-scrollbar-track { + background: var(--c-bg-3); + } + } + + #l-sidebar { + position: fixed; + top: 0; + left: -100vw; + z-index: 90; + transition: transform 250ms ease-out; + width: 100vw; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: none; + background-color: var(--c-frame); + } + #l-sidebar.is-visible { + transform: translateX(100vw); + transition: transform 250ms ease-in; + } + @media screen and (min-width: 39em) { + #l-sidebar { + padding-left: 2rem; + padding-right: 2rem; + } + } + @media screen and (min-width: 48em) { + #l-sidebar { + left: -55.5rem; + width: 55.5rem; + margin-right: 2rem; + scrollbar-gutter: stable; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); + } + #l-sidebar::-webkit-scrollbar { + width: 1rem; + height: 1rem; + } + #l-sidebar::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); + } + #l-sidebar::-webkit-scrollbar-track { + background: var(--c-bg-3); + } + #l-sidebar.is-visible { + transform: translateX(55.5rem); + } + } + @media screen and (min-width: 79em) { + #l-sidebar { + grid-area: left; + position: static; + width: 35rem; + height: 100%; + padding-left: 0; + padding-right: 0; + } + } + + @media screen and (min-width: 79em) { + #l-fill { + grid-area: fill; + background-color: var(--c-frame); + } + } + + /* #sidebar-left { + position: fixed; + left: calc(0.5rem + 2rem * var(--se)); + z-index: 2; + @media screen and (min-width: $bp-3col) { + position: relative; + } + } */ + /* @keyframes fade { + from { opacity: 0; } + to { opacity: 1; } + } */ + #l-footer { + flex: 0 0 auto; + margin-top: 2rem; + background: var(--c-frame); + box-shadow: 0 0 0 1px var(--c-shadow-1); + } + #l-footer hr { + border-bottom: 0.2rem solid #fff; + height: 1rem; + margin: 0 2rem; + } + .l-footer--home { + grid-area: fo; + } + + .l-footer__columns { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + gap: 0 0.01rem; + margin-bottom: calc(1rem + 1 * var(--es)); + } + @media screen and (min-width: 48em) { + .l-footer__columns { + flex-wrap: nowrap; + } + } + + .footer__col { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 18.5rem; + margin: 1rem 0; + } + @media screen and (min-width: 39em) { + .footer__col { + flex-grow: 1; + flex-shrink: 0; + } + } + @media screen and (min-width: 48em) { + .footer__col { + flex: 1 1 18.5rem; + } + } + + .icon { + display: inline-block; + flex-shrink: 0; + width: 3rem; + height: 3rem; + } + + .icon--material svg { + width: 100%; + height: 100%; + } + + .icon--small { + padding: 0.3rem; + } + + .icon--tiny { + padding: 0.5rem; + } + + .icon--big { + width: 4rem; + height: 4rem; + padding: 0; + } + + .icon--simple { + padding: 0.3rem; + } + + /* .icon-font { + // position: relative; + // bottom: 0.0625em; + display: inline-block; + font-family: "Material Symbols Outlined"; + font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; + font-style: normal; + vertical-align: top; + white-space: nowrap; + letter-spacing: normal; + text-transform: none; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-feature-settings: "liga"; + } */ + #tgl-sb .icon:after, #toggle-toc .icon:after { + display: inline-block; + width: 3rem; + height: 3rem; + content: ""; + mask-size: cover; + -webkit-mask-size: cover; + background-color: var(--c-frame-button); + } + #tgl-sb.is-visible .icon:after, #toggle-toc.is-visible .icon:after { + background-color: var(--c-frame-button-hover); + } + + #tgl-sb .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A"); + } + #tgl-sb.is-visible .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E"); + } + @media screen and (min-width: 79em) { + #tgl-sb { + display: none; + } + } + + #toggle-toc .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E"); + } + #toggle-toc.is-visible .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E"); + } + @media screen and (min-width: 120em) { + #toggle-toc { + display: none; + } + } + + .copy-code { + position: absolute; + top: 2rem; + right: 2rem; + height: 2rem; + padding: 0.2rem 0.1rem 0 0; + width: 2rem; + fill: var(--c-icon); + background: transparent; + opacity: 0; + transition: opacity 150ms; + cursor: pointer; + } + + .highlight { + position: relative; + } + .highlight:hover .copy-code { + opacity: 1; + } + + .meta { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + max-width: 71rem; + color: var(--c-text-low); + fill: var(--c-icon); + margin: 0 1.5rem 2rem 1.5rem; + } + + @media screen and (min-width: 79em) { + .meta--head .taxo-shape .icon-font { + margin-left: -2.5rem; + } + } + + .meta--foot { + flex-shrink: 0; + align-items: end; + margin-bottom: 1rem; + } + + @media screen and (min-width: 79em) { + .meta--left { + position: relative; + z-index: 5; + flex-direction: row-reverse; + justify-content: start; + float: left; + width: 34rem; + margin: 0 1.5rem; + } + .meta--left .meta__list { + width: 17rem; + } + .meta--left .meta__list--date { + align-items: flex-start; + } + .meta--left .meta__hanging { + margin-left: -3rem; + } + } + + @media screen and (min-width: 120em) { + .meta--left-doc { + position: relative; + z-index: 5; + flex-direction: row-reverse; + justify-content: start; + float: left; + width: 34rem; + margin: 0 1.5rem; + } + .meta--left-doc .meta__list { + width: 17rem; + } + .meta--left-doc .meta__list--date { + align-items: flex-start; + } + .meta--left-doc .meta__hanging { + margin-left: -3rem; + } + } + + .meta--card { + margin: 0 1.5rem; + max-width: unset; + } + + .meta--card--1 .meta__text, .meta--card--1 .meta__separator { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.714465rem; + padding-bottom: 0.285535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .meta--card--half { + justify-content: start; + margin: 0 1.5rem; + } + .meta--card--half .meta__text, .meta--card--half .meta__separator { + font-size: 1.287rem; + line-height: 1.5rem; + padding-top: 0.2680185rem; + padding-bottom: 0.2319815rem; + } + + .meta__date { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .meta__list { + display: flex; + flex-direction: column; + align-items: flex-start; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.01em; + word-spacing: 0.03em; + } + + .meta__list--date { + flex-shrink: 0; + align-items: flex-end; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .meta__item { + display: inline-flex; + flex-shrink: 0; + align-items: flex-end; + } + + .meta__item--taxo { + max-width: 16.5rem; + } + + .meta__separator, .meta__text { + display: inline-block; + } + + .meta__text, .meta__count, .meta__separator { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.564465rem; + padding-bottom: 0.435535rem; + } + + .meta__text { + padding-left: 0.5rem; + padding-right: 0.5rem; + max-width: 16.5rem; + } + + .meta__separator { + padding-left: 0; + padding-right: 0; + } + + .meta__count { + padding-left: 0; + padding-right: 0.5rem; + } + + .titlehead { + margin: 2rem; + padding: 1rem 0; + max-width: 70rem; + border-radius: 0.5rem; + box-shadow: 0 0 0 0.1rem var(--c-shadow-1); + } + + .titlehead--todo { + background-color: var(--c-bg-2); + } + + .titlehead--draft { + padding: 0; + background-color: var(--c-frame); + } + .titlehead--draft > p, .titlehead--draft > ol, .titlehead--draft > ul, .titlehead--draft > dl { + color: var(--c-frame-text-normal); + } + .titlehead--draft > p strong, .titlehead--draft > ol strong, .titlehead--draft > ul strong, .titlehead--draft > dl strong { + color: var(--c-frame-text-normal); + } + + .titlehead--deprecated { + color: var(--c-warn); + background-color: var(--c-warn-bg); + } + + .titlehead--experimental { + background-color: var(--c-danger-bg); + } + .titlehead--experimental > p, .titlehead--experimental > ol, .titlehead--experimental > ul { + color: var(--c-danger); + } + + @media screen and (min-width: 79em) { + .titlehead--margin { + margin-left: 39rem; + } + } + + .title { + padding: 0 calc(1rem + 1 * var(--es)) 2rem calc(1rem + 1 * var(--es)); + margin: 0 1rem; + max-width: 74rem; + } + .title h1, .title h2 { + font-size: 2.86rem; + line-height: 4rem; + margin-top: -0.07107rem; + margin-bottom: calc(-0.92893rem + var(--es)); + } + @media screen and (min-width: 39em) { + .title { + margin: 0; + } + } + + .title--site h1 { + font-size: 12.87rem; + line-height: 18rem; + padding-top: 0.180185rem; + padding-bottom: calc(0.819815rem + var(--es)); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.03em; + word-spacing: 0.09em; + text-align: center; + text-transform: uppercase; + } + .title--site .p-first { + text-align: center; + } + + .title--bg { + height: 5rem; + max-width: 100%; + margin: 0 1rem; + padding-bottom: 0; + box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1), 0 0 0 1px var(--c-shadow-2); + } + .title--bg h1 { + color: #fff; + margin: 0; + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.92893rem; + padding-bottom: 1.07107rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.04em; + word-spacing: 0.12em; + text-transform: uppercase; + } + @media screen and (min-width: 39em) { + .title--bg { + margin: 1rem 0 0 0; + } + } + + .title--news { + background: var(--ctg-news-title); + } + @media screen and (min-width: 79em) { + .title--news { + background: var(--ctg4-news-title); + } + } + + .title--blog { + background: var(--ctg-blog-title); + } + @media screen and (min-width: 79em) { + .title--blog { + background: var(--ctg4-blog-title); + } + } + + .title--sans h1, .title--sans h2 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.005em; + word-spacing: 0.015em; + } + + @media screen and (min-width: 79em) { + .title--left { + float: left; + width: 37rem; + } + } + + .title--author { + display: inline-flex; + flex-direction: row; + margin: -1rem 0; + } + @media screen and (min-width: 79em) { + .title--author { + flex-direction: column-reverse; + } + } + + .title--first, .title--second, .title--third { + padding-top: 1rem; + padding-bottom: calc(3rem + 2 * var(--es)); + } + .title--first > hr, .title--second > hr, .title--third > hr { + margin-bottom: -2rem; + } + .title--first h1, .title--second h1, .title--third h1 { + font-size: 2.86rem; + line-height: 4rem; + padding-top: 0.92893rem; + margin-bottom: -0.92893rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + } + + .title--first > hr, .title--second > hr { + border-top: 0.35rem solid var(--c-text-normal); + height: 1rem; + } + + .title--first h1 { + text-transform: uppercase; + letter-spacing: 0.03em; + word-spacing: 0.09em; + } + + .title--second h1 { + letter-spacing: 0.015em; + word-spacing: 0.045em; + } + + .title--third > hr { + border-top: 0.25rem solid var(--c-text-normal); + height: 1rem; + } + .title--third h1 { + font-weight: 450; + letter-spacing: 0.005em; + word-spacing: 0.015em; + } + + .title--taxo { + max-width: unset; + } + .title--taxo h1 { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + .title--taxo h2 { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .title--article h1 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + font-style: italic; + text-transform: none; + letter-spacing: 0; + word-spacing: 0; + } + @media screen and (min-width: 48em) { + .title--article { + margin-bottom: -2rem; + } + .title--article h1 { + position: relative; + top: -2rem; + font-size: 4.29rem; + line-height: 5rem; + padding-top: 0.893395rem; + padding-bottom: calc(0.106605rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 5rem ); + font-weight: 600; + } + } + + .title__description, .title__profession { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + } + .title__description strong, .title__profession strong { + font-weight: 450; + } + + .title__description { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: 0.230275rem; + } + + .title__profession { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + padding-bottom: 0.57107rem; + } + + .section { + padding: calc(4rem + 2 * var(--es)) 0rem; + } + .section > hr { + border-bottom: 0.35rem solid var(--c-text-normal); + height: 1rem; + margin: 0 2rem; + } + .section > h2 { + font-size: 1.915rem; + line-height: 2rem; + padding-top: 0.2828325rem; + padding-bottom: 0.7171675rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; + word-spacing: 0.09em; + margin-left: 2rem; + margin-right: 2rem; + } + .section > h3 { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.714465rem; + padding-bottom: 1.785535rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + word-spacing: 0.12em; + margin-left: 2rem; + margin-right: 2rem; + } + + .md > h1, .container > h1, .md > h2, .container > h2, .md > h3, .container > h3, .md > h4, .container > h4, .md > h5, .container > h5, .md > h6, .container > h6, .md > hr, .container > hr, .md > table, .container > table { + max-width: 70rem; + margin-left: 2rem; + margin-right: 2rem; + } + .md > p, .container > p, .md > ul, .container > ul, .md > ol, .container > ol, .md > dl, .container > dl, .md > blockquote, .container > blockquote, .md > pre, .container > pre, .md > .fig-diagram, .container > .fig-diagram, .md > .maincol, .container > .maincol, .md > .literature, .container > .literature, .md > .footnotes, .container > .footnotes, .md > .gist, .container > .gist, .md > .asciicast, .container > .asciicast, .md > .box, .container > .box, .md > .math-block, .container > .math-block, .md > .chem-block, .container > .chem-block { + max-width: 74rem; + padding-left: 2rem; + padding-right: 2rem; + } + + .md, .container { + position: relative; + z-index: 1; + overflow-wrap: break-word; + /* .blind { + position: relative; + z-index: 1; + + &:after { + @include font.shapes(sans-cond, semibold); + position: absolute; + top: calc(50% - 0.5em); + left: calc(50% - 5ch); + z-index: -1; + font-size: 200%; + content: 'BLIND TEXT'; + transform: rotate(-10deg); + color: var(--c-watermark); + } + + &.blind-short:after { + font-size: 125%; + } + + &.blind-right:after { + left: calc(75% - 5ch); + } + + &.blind-left:after { + left: calc(25% - 5ch); + } + } */ + } + .md::after, .container::after { + display: table; + content: ""; + clear: both; + } + .md > p, .md > blockquote, .md li, .md dd, .container > p, .container > blockquote, .container li, .container dd { + text-align: var(--ta); + } + .md li, .md dt, .md dd, .container li, .container dt, .container dd { + break-inside: avoid; + } + .md dt, .container dt { + break-before: auto; + } + .md p, .md li, .md dd, .container p, .container li, .container dd { + hyphens: auto; + } + .md p strong, .md p em, .md p a, .md p span, .md li strong, .md li em, .md li a, .md li span, .md dd strong, .md dd em, .md dd a, .md dd span, .container p strong, .container p em, .container p a, .container p span, .container li strong, .container li em, .container li a, .container li span, .container dd strong, .container dd em, .container dd a, .container dd span { + hyphens: auto; + } + .md .no-hyphens, .container .no-hyphens { + hyphens: none; + } + .md .br-cond, .container .br-cond { + display: none; + } + @media screen and (min-width: 39em) { + .md .br-cond, .container .br-cond { + display: initial; + } + } + .md > p, .md > ul, .md > ol, .md > dl, .container > p, .container > ul, .container > ol, .container > dl { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: calc(0.22559375rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + } + .md > p:target, .md > ul:target, .md > ol:target, .md > blockquote:target, .md > dl:target, .container > p:target, .container > ul:target, .container > ol:target, .container > blockquote:target, .container > dl:target { + border-radius: 0.5rem; + background-color: var(--c-bg-3); + } + .md p > .pull-quote, .container p > .pull-quote { + margin-left: -0.5em; + } + .md blockquote, .container blockquote { + padding: 1rem 2rem 1rem calc(5rem + 2 * var(--es)); + } + .md blockquote > p, .md blockquote > ul, .md blockquote > ol, .md blockquote > dl, .container blockquote > p, .container blockquote > ul, .container blockquote > ol, .container blockquote > dl { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: 0.22559375rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + hyphens: none; + } + .md blockquote footer, .md blockquote cite, .container blockquote footer, .container blockquote cite { + font-style: italic; + } + .md blockquote.left, .md blockquote.left-in-half, .md blockquote.left-in, .md blockquote.right, .md blockquote.right-in-half, .md blockquote.right-in, .container blockquote.left, .container blockquote.left-in-half, .container blockquote.left-in, .container blockquote.right, .container blockquote.right-in-half, .container blockquote.right-in { + padding: 0 2rem; + font-style: italic; + color: var(--c-text-semihigh); + } + .md strong, .container strong { + font-size: 99%; + color: var(--c-text-medium); + } + .md strong a, .md a strong, .container strong a, .container a strong { + color: inherit; + } + .md .blockquote-hero, .container .blockquote-hero { + color: var(--c-text-semihigh); + font-style: italic; + padding-right: calc(5rem + 2 * var(--es)); + } + .md .blockquote-hero > p, .md .blockquote-hero > ul, .md .blockquote-hero > ol, .md .blockquote-hero > dl, .container .blockquote-hero > p, .container .blockquote-hero > ul, .container .blockquote-hero > ol, .container .blockquote-hero > dl { + font-size: 2.5833333333rem; + line-height: 4rem; + padding-top: 0.0325416667rem; + margin-bottom: -0.0325416667rem; + } + .md hr, .container hr { + margin: calc(1.4rem + 0.5 * var(--es)) 2rem calc(0.5rem + 1.5 * var(--es)) 2rem; + height: 0.1rem; + border-top: 0.1rem solid var(--c-text-extralow); + } + @media screen and (min-width: 39em) { + .md > p:not(:empty) + ul, .md > p:not(:empty) + ol, .container > p:not(:empty) + ul, .container > p:not(:empty) + ol { + margin-top: -1rem; + } + } + .md dd p + ol, .md dd p + ul, .container dd p + ol, .container dd p + ul { + padding-top: 1rem; + } + .md dd ul, .md dd ol, .md dd dl, .container dd ul, .container dd ol, .container dd dl { + text-align: left; + } + .md dd > ul, .md dd > ol, .md dd > dl, .container dd > ul, .container dd > ol, .container dd > dl { + margin-top: 1rem; + } + .md .p-first, .container .p-first { + font-size: 2.275rem; + line-height: 3.5rem; + padding-top: 0.8980125rem; + padding-bottom: 1.1019875rem; + text-align: left; + color: var(--c-text-low); + hyphens: none; + } + .md .p-first strong, .md .p-first em, .md .p-first a, .md .p-first span, .container .p-first strong, .container .p-first em, .container .p-first a, .container .p-first span { + hyphens: none; + } + .md .p-first em, .container .p-first em { + font-style: normal; + } + .md .p-first strong, .container .p-first strong { + font-weight: 450; + color: var(--c-text-medium); + } + @media screen and (min-width: 39em) { + .md .p-first, .container .p-first { + font-size: 2.6rem; + line-height: 4rem; + padding-top: 0.0263rem; + padding-bottom: 1.9737rem; + } + } + .md .p-big, .container .p-big { + font-size: 2.5833333333rem; + line-height: 4rem; + padding-top: 0.6992083333rem; + padding-bottom: 1.3007916667rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4.6666666667rem ); + color: var(--c-text-medium); + } + .md .p-small, .container .p-small { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: calc(0.535535rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); + color: var(--c-text-semihigh); + } + .md .placeholder, .container .placeholder { + color: var(--c-text-extralow); + } + .md .hang-quote, .container .hang-quote { + margin-left: -0.5em; + } + @media screen and (min-width: 48em) { + .md .up-1, .container .up-1 { + margin-top: -1rem; + } + .md .up-2, .container .up-2 { + margin-top: -2rem; + } + .md .up-3, .container .up-3 { + margin-top: -3rem; + } + .md .up-4, .container .up-4 { + margin-top: -4rem; + } + .md .up-5, .container .up-5 { + margin-top: -5rem; + } + .md .up-6, .container .up-6 { + margin-top: -6rem; + } + .md .up-7, .container .up-7 { + margin-top: -7rem; + } + .md .up-8, .container .up-8 { + margin-top: -8rem; + } + .md .up-9, .container .up-9 { + margin-top: -9rem; + } + .md .up-10, .container .up-10 { + margin-top: -10rem; + } + .md .up-11, .container .up-11 { + margin-top: -11rem; + } + .md .up-12, .container .up-12 { + margin-top: -12rem; + } + .md .up-13, .container .up-13 { + margin-top: -13rem; + } + .md .up-14, .container .up-14 { + margin-top: -14rem; + } + .md .up-15, .container .up-15 { + margin-top: -15rem; + } + .md .up-16, .container .up-16 { + margin-top: -16rem; + } + .md .up-17, .container .up-17 { + margin-top: -17rem; + } + .md .up-18, .container .up-18 { + margin-top: -18rem; + } + .md .up-19, .container .up-19 { + margin-top: -19rem; + } + .md .up-20, .container .up-20 { + margin-top: -20rem; + } + .md .up-21, .container .up-21 { + margin-top: -21rem; + } + .md .up-22, .container .up-22 { + margin-top: -22rem; + } + .md .up-23, .container .up-23 { + margin-top: -23rem; + } + .md .up-24, .container .up-24 { + margin-top: -24rem; + } + .md .up-25, .container .up-25 { + margin-top: -25rem; + } + .md .up-26, .container .up-26 { + margin-top: -26rem; + } + .md .up-27, .container .up-27 { + margin-top: -27rem; + } + .md .up-28, .container .up-28 { + margin-top: -28rem; + } + .md .up-29, .container .up-29 { + margin-top: -29rem; + } + .md .up-30, .container .up-30 { + margin-top: -30rem; + } + .md .up-31, .container .up-31 { + margin-top: -31rem; + } + .md .up-32, .container .up-32 { + margin-top: -32rem; + } + .md .up-33, .container .up-33 { + margin-top: -33rem; + } + .md .up-34, .container .up-34 { + margin-top: -34rem; + } + .md .up-35, .container .up-35 { + margin-top: -35rem; + } + .md .up-36, .container .up-36 { + margin-top: -36rem; + } + .md .up-37, .container .up-37 { + margin-top: -37rem; + } + .md .up-38, .container .up-38 { + margin-top: -38rem; + } + .md .up-39, .container .up-39 { + margin-top: -39rem; + } + .md .up-40, .container .up-40 { + margin-top: -40rem; + } + .md .up-41, .container .up-41 { + margin-top: -41rem; + } + .md .up-42, .container .up-42 { + margin-top: -42rem; + } + .md .up-43, .container .up-43 { + margin-top: -43rem; + } + .md .up-44, .container .up-44 { + margin-top: -44rem; + } + .md .up-45, .container .up-45 { + margin-top: -45rem; + } + .md .up-46, .container .up-46 { + margin-top: -46rem; + } + .md .up-47, .container .up-47 { + margin-top: -47rem; + } + .md .up-48, .container .up-48 { + margin-top: -48rem; + } + .md .up-49, .container .up-49 { + margin-top: -49rem; + } + .md .up-50, .container .up-50 { + margin-top: -50rem; + } + .md .up-51, .container .up-51 { + margin-top: -51rem; + } + .md .up-52, .container .up-52 { + margin-top: -52rem; + } + .md .up-53, .container .up-53 { + margin-top: -53rem; + } + .md .up-54, .container .up-54 { + margin-top: -54rem; + } + .md .up-55, .container .up-55 { + margin-top: -55rem; + } + .md .up-56, .container .up-56 { + margin-top: -56rem; + } + .md .up-57, .container .up-57 { + margin-top: -57rem; + } + .md .up-58, .container .up-58 { + margin-top: -58rem; + } + .md .up-59, .container .up-59 { + margin-top: -59rem; + } + .md .up-60, .container .up-60 { + margin-top: -60rem; + } + .md .down-1, .container .down-1 { + margin-top: 1rem; + } + .md .down-2, .container .down-2 { + margin-top: 2rem; + } + .md .down-3, .container .down-3 { + margin-top: 3rem; + } + .md .down-4, .container .down-4 { + margin-top: 4rem; + } + .md .down-5, .container .down-5 { + margin-top: 5rem; + } + .md .down-6, .container .down-6 { + margin-top: 6rem; + } + .md .down-7, .container .down-7 { + margin-top: 7rem; + } + .md .down-8, .container .down-8 { + margin-top: 8rem; + } + .md .down-9, .container .down-9 { + margin-top: 9rem; + } + .md .down-10, .container .down-10 { + margin-top: 10rem; + } + .md .down-11, .container .down-11 { + margin-top: 11rem; + } + .md .down-12, .container .down-12 { + margin-top: 12rem; + } + .md .down-13, .container .down-13 { + margin-top: 13rem; + } + .md .down-14, .container .down-14 { + margin-top: 14rem; + } + .md .down-15, .container .down-15 { + margin-top: 15rem; + } + .md .down-16, .container .down-16 { + margin-top: 16rem; + } + .md .down-17, .container .down-17 { + margin-top: 17rem; + } + .md .down-18, .container .down-18 { + margin-top: 18rem; + } + .md .down-19, .container .down-19 { + margin-top: 19rem; + } + .md .down-20, .container .down-20 { + margin-top: 20rem; + } + .md .down-21, .container .down-21 { + margin-top: 21rem; + } + .md .down-22, .container .down-22 { + margin-top: 22rem; + } + .md .down-23, .container .down-23 { + margin-top: 23rem; + } + .md .down-24, .container .down-24 { + margin-top: 24rem; + } + .md .down-25, .container .down-25 { + margin-top: 25rem; + } + .md .down-26, .container .down-26 { + margin-top: 26rem; + } + .md .down-27, .container .down-27 { + margin-top: 27rem; + } + .md .down-28, .container .down-28 { + margin-top: 28rem; + } + .md .down-29, .container .down-29 { + margin-top: 29rem; + } + .md .down-30, .container .down-30 { + margin-top: 30rem; + } + } + .md p:empty, .container p:empty { + display: none; + } + + /* .md--serif { + > p, > ul, > ol, > dl { + @include font.shapes(serif, regular); + } + + strong { + @include font.weight(serif, semibold); + } + + .p-first { + @include font.shapes(serif, light); + @include font.style(serif, light, italic); + + strong { + @include font.weight(serif, regular); + } + } + } */ + .md--sans p, .md--sans ul, .md--sans ol, .md--sans dl { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; + } + .md--sans blockquote p, .md--sans blockquote ul, .md--sans blockquote ol, .md--sans blockquote dl { + font-family: 'IBM Plex Serif', Georgia, Times, serif; + font-weight: 400; + } + .md--sans blockquote strong { + font-weight: 600; + } + .md--sans strong { + font-weight: 700; + } + .md--sans .p-first { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + } + .md--sans .p-first strong { + font-weight: 450; + } + + .md--home { + padding-bottom: 1rem; + } + .md--home > p, .md--home > ul, .md--home > ol, .md--home > dl, .md--home > blockquote { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: calc(0.230275rem + var(--es)); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + text-align: left; + } + .md--home > p strong, .md--home > ul strong, .md--home > ol strong, .md--home > dl strong, .md--home > blockquote strong { + font-weight: 450; + } + .md--home dl > dt { + font-weight: 450; + } + .md--home .p-small { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 1.464465rem; + padding-bottom: calc(0.535535rem + var(--es)); + font-weight: 450; + } + + .md--card { + margin-bottom: 0; + } + .md--card > p, .md--card > .p-first { + color: var(--c-text-medium); + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.6476791667rem; + padding-bottom: 0.3523208333rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + text-align: left; + hyphens: none; + } + .md--card > p strong, .md--card > .p-first strong { + font-weight: 600; + } + + .md--card--half > p, .md--card--half > .p-first { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.214465rem; + padding-bottom: 0.285535rem; + } + + .md--card--small > p, .md--card--small > .p-first { + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.1476791667rem; + margin-bottom: -0.1476791667rem; + } + + .md--card--3halfs { + padding-bottom: 2rem; + } + @media screen and (min-width: 48em) { + .md--card--3halfs > p, .md--card--3halfs > .p-first { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: 0.230275rem; + } + } + + @media screen and (min-width: 48em) { + .md--card--2 { + max-width: 74rem; + } + .md--card--2 p, .md--card--2 .p-first { + font-size: 2.4375rem; + line-height: 4rem; + padding-top: 0.58715625rem; + padding-bottom: 0.91284375rem; + } + } + @media screen and (min-width: 79em) { + .md--card--2 p, .md--card--2 .p-first { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: 0.230275rem; + } + } + + .md--taxo > p, .md--taxo > ul, .md--taxo > ol, .md--taxo > dl { + font-size: 1.43rem; + line-height: 3rem; + padding-top: 0.964465rem; + padding-bottom: 0.035535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + text-align: left; + } + + .md--footer > p, .md--footer > ul, .md--footer > ol, .md--footer > dl { + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + padding-bottom: 0.222785rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + .md--footer li { + padding-left: 3rem; + } + @media screen and (min-width: 48em) { + .md--footer > p, .md--footer > ul, .md--footer > ol, .md--footer > dl { + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.6476791667rem; + padding-bottom: 0.3523208333rem; + } + .md--footer li { + padding-left: 2.5rem; + } + } + + .md--small > p, .md--small > ul, .md--small > ol, .md--small > dl { + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.6476791667rem; + padding-bottom: 0.3523208333rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .md--tiny > p, .md--tiny > ul, .md--tiny > ol, .md--tiny > dl { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: 0.535535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .md--dropcap2 > p:first-child:first-letter { + float: left; + font-size: 6.3rem; + line-height: 1; + margin: -0.2rem 0.35rem -1rem -0.2rem; + } + + .md--dropcap3 > p:first-child:first-letter { + float: left; + font-size: 10.5rem; + line-height: 1; + margin: -0.9rem 0.5rem -1rem -0.2rem; + } + + @media screen and (min-width: 120em) { + .md--margin-doc { + text-align: center; + } + .md--margin-doc > h1, .md--margin-doc > h2, .md--margin-doc > h3, .md--margin-doc > h4, .md--margin-doc > h5, .md--margin-doc > h6, .md--margin-doc > hr, .md--margin-doc > table { + margin-left: 39rem; + } + .md--margin-doc > p, .md--margin-doc > ul, .md--margin-doc > ol, .md--margin-doc > dl, .md--margin-doc > blockquote, .md--margin-doc > pre, .md--margin-doc > .fig-diagram, .md--margin-doc > .maincol, .md--margin-doc > .literature, .md--margin-doc > .footnotes, .md--margin-doc > .gist, .md--margin-doc > .asciicast, .md--margin-doc > .box, .md--margin-doc > .math-block, .md--margin-doc > .chem-block { + width: 74rem; + margin-left: auto; + margin-right: auto; + } + } + + @media screen and (min-width: 79em) { + .md--margin-full { + text-align: center; + } + .md--margin-full > h1, .md--margin-full > h2, .md--margin-full > h3, .md--margin-full > h4, .md--margin-full > h5, .md--margin-full > h6, .md--margin-full > hr { + margin-left: 39rem; + } + .md--margin-full > p, .md--margin-full > ul, .md--margin-full > ol, .md--margin-full > dl, .md--margin-full > blockquote, .md--margin-full > pre, .md--margin-full > .fig-diagram, .md--margin-full > .maincol, .md--margin-full > .literature, .md--margin-full > .footnotes, .md--margin-full > .gist, .md--margin-full > .asciicast, .md--margin-full > .box, .md--margin-full > .math-block, .md--margin-full > .chem-block { + width: 74rem; + margin-left: auto; + margin-right: auto; + } + .md--margin-full table { + margin-left: 37rem; + } + } + + .md--frame { + color: var(--c-frame-text-normal); + } + .md--frame p, .md--frame li, .md--frame dd { + text-align: left; + } + .md--frame .fig { + float: none; + } + .md--frame .link--text { + color: var(--c-frame-text-link); + text-decoration-color: var(--c-frame-text-link); + } + .md--frame .link--text[href^=http] { + color: var(--c-frame-text-link-ext); + text-decoration-color: var(--c-frame-text-link-ext); + } + .md--frame .link--text:hover, .md--frame .link--text:focus, .md--frame .link--text:active { + color: var(--c-frame-text-link-high); + text-decoration-color: var(--c-frame-text-link-high); + background-color: var(--c-frame-button-hover-bg); + } + + .md--blog { + padding-top: calc(3rem + 2 * var(--es)); + } + + .md--list { + padding-bottom: 0; + margin-bottom: 0; + } + + .md p > code, .md li > code, .md dt > code, .md dd > code, .md .caption > code { + font-size: 75%; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; + margin: 0 0.075em; + padding: 0.1em 0.25em; + text-transform: none; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + color: var(--c-chroma-fg); + background-color: var(--c-chroma-bg); + } + .md dt > code { + font-weight: 700; + } + .md pre :target, .md .highlight :target { + text-decoration: none; + outline: ridge var(--c-code); + scroll-margin-top: 10rem; + } + .md pre { + position: relative; + overflow: auto; + clear: both; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: 0.535535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); + word-break: normal; + hyphens: none; + text-align: left; + } + .md pre code { + display: block; + white-space: pre; + } + .md .highlight > pre > code { + padding-left: 0.8em; + padding-right: 0.8rem; + } + .md .highlight { + display: block; + max-height: 200rem; + padding: 2rem 2rem 1.5rem; + min-width: 100%; + max-width: 74rem; + margin-bottom: calc(0.5 * var(--es)); + color: var(--c-code); + } + .md .highlight > pre, .md .highlight > div { + overflow: auto; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); + border-radius: 0.25rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + padding-right: 0.25em; + } + .md .highlight > pre::-webkit-scrollbar, .md .highlight > div::-webkit-scrollbar { + width: 1rem; + height: 1rem; + } + .md .highlight > pre::-webkit-scrollbar-thumb, .md .highlight > div::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); + } + .md .highlight > pre::-webkit-scrollbar-track, .md .highlight > div::-webkit-scrollbar-track { + background: var(--c-bg-3); + } + .md .highlight table:after { + display: none; + } + @media screen and (min-width: 39em) { + .md .highlight { + min-width: 74rem; + width: 74rem; + } + } + @media screen and (min-width: 48em) { + .md .highlight.expand { + display: inline-block; + max-width: 148rem; + width: unset; + } + } + .md li .highlight, .md dd .highlight { + padding-left: 0; + padding-right: 0; + min-width: 100%; + max-width: 100%; + } + .md li .highlight .copy-code, .md dd .highlight .copy-code { + right: 0; + } + .md .lh15 pre { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 1.214465rem; + padding-bottom: 0.785535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.5rem ); + } + .md .note .highlight { + padding: 1rem 0; + } + .md .note code { + color: var(--c-code-extralow); + } + .md .language-mermaid { + text-align: center; + } + .md .language-mermaid > svg { + max-width: 100%; + height: auto; + } + + .md .col4, .md .col2-l3, .md .col2-l2, .md .col2, .md .col3 { + column-gap: 4rem; + } + .md .col4 li, .md .col2-l3 li, .md .col2-l2 li, .md .col2 li, .md .col3 li, .md .col4 p, .md .col2-l3 p, .md .col2-l2 p, .md .col2 p, .md .col3 p, .md .col4 dd, .md .col2-l3 dd, .md .col2-l2 dd, .md .col2 dd, .md .col3 dd { + text-align: left; + } + + @media screen and (min-width: 39em) { + .md .col2, .md .col3 { + column-count: 2; + } + } + @media screen and (min-width: 39em) { + .md .col2-l2 { + column-count: 2; + width: 62rem; + } + } + @media screen and (min-width: 39em) { + .md .col2-l3 { + column-count: 2; + width: 54rem; + } + } + @media screen and (min-width: 39em) { + .md .col4 { + column-count: 4; + } + } + + @media screen and (min-width: 120em) { + .md--margin-doc .col3 { + column-count: 3; + max-width: 111rem; + } + } + + @media screen and (min-width: 79em) { + .md--margin-full .col3 { + column-count: 3; + max-width: 111rem; + } + } + + .md dt { + text-align: left; + } + .md dd { + padding: 0 0 1rem calc(3rem + 1 * var(--es)); + } + .md dd ul > li, .md dd ol > li { + padding-left: 3rem; + } + .md dd + dt { + margin-top: 1rem; + } + .md .dl-tight > dt { + float: left; + clear: left; + width: auto; + padding: 0 3rem 0 0; + } + .md .dl-tight > dt:after { + display: table; + clear: both; + content: ""; + } + .md .dl-tight > dd { + padding: 0; + } + .md .dl-loose, .md .dl-icon, .md .dl-loose2, .md .dl-loose3 { + position: relative; + } + @media screen and (min-width: 39em) { + .md .dl-loose > dt, .md .dl-icon > dt, .md .dl-loose2 > dt, .md .dl-loose3 > dt { + float: left; + clear: left; + width: 16.5rem; + padding-bottom: 0; + } + .md .dl-loose > dt:after, .md .dl-icon > dt:after, .md .dl-loose2 > dt:after, .md .dl-loose3 > dt:after { + content: "‍"; + } + .md .dl-loose > dd, .md .dl-icon > dd, .md .dl-loose2 > dd, .md .dl-loose3 > dd { + margin-left: 0; + padding-left: 18.5rem; + } + } + @media screen and (min-width: 39em) { + .md .dl-loose3 > dt { + width: 24.011rem; + } + .md .dl-loose3 > dd { + padding-left: 26.011rem; + } + } + @media screen and (min-width: 39em) { + .md .dl-loose2 > dt { + width: 35rem; + } + .md .dl-loose2 > dd { + padding-left: 37rem; + } + } + @media screen and (min-width: 39em) { + .md .dl-icon > dt { + width: 4rem; + } + .md .dl-icon > dd { + padding-left: 6rem; + } + } + .md .dl-tight > dd + dt, .md .dl-loose > dd + dt, .md .dl-loose3 > dd + dt, .md .dl-loose2 > dd + dt, .md .dl-icon > dd + dt { + margin-top: 0; + } + + .md--home .p-first { + text-align: center; + } + .md--home dt { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + .md--sans dt { + font-weight: 500; + } + .md--sans dt var { + font-weight: 450; + } + .md--sans dt strong { + font-weight: 700; + } + + sup:target { + background-color: var(--c-bg-3); + scroll-margin-top: calc(var(--tnh) + var(--tg)); + } + + .footnote-ref { + color: var(--c-text-link); + } + .footnote-ref:before { + content: " ["; + } + .footnote-ref:after { + content: "]"; + } + .footnote-ref:hover, .footnote-ref:focus, .footnote-ref:active { + color: var(--c-text-link-hover); + background-color: var(--c-text-link-hover-bg); + } + + .footnotes { + text-align: left; + margin-top: -0.35em; + overflow-wrap: break-word; + } + .footnotes hr { + width: 25%; + margin-top: 2rem; + margin-bottom: calc(1rem + 1 * var(--es)); + margin-left: 0; + padding: 0; + border-top: 0.35em solid var(--c-text-normal); + } + .footnotes ol { + counter-reset: nr; + } + .footnotes ol li { + counter-increment: nr; + background-color: transparent; + page-break-inside: avoid; + -webkit-column-break-inside: avoid; + break-inside: avoid-column; + font-size: 1.6953125rem; + line-height: 2.625rem; + padding-top: 0.6776054687rem; + padding-bottom: 0.3223945313rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.625rem ); + } + .footnotes ol li:target { + border-radius: 0.5rem; + background-color: var(--c-bg-3); + } + .footnotes ol li:before { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + float: left; + height: 1em; + content: counter(nr, decimal) "."; + } + .footnotes ol li p + p { + margin-top: -0.875rem; + text-indent: 2.5rem; + } + + .footnote-backref { + visibility: hidden; + } + .footnote-backref:before { + visibility: visible; + font-family: inherit; + font-weight: bold; + content: "⬏"; + } + .footnote-backref + .footnote-backref { + margin-left: -0.75em; + } + + @media screen and (min-width: 48em) { + .footnotecols > .footnotes { + width: auto; + margin-right: 0; + margin-left: 0; + padding-right: 0; + padding-left: 0; + } + .footnotecols > .footnotes > ol { + column-count: 3; + column-gap: 4rem; + } + .footnotecols > .footnotes > ol > li > p { + padding-left: 3rem; + } + } + @media screen and (min-width: 79em) { + .footnotecols > .footnotes > ol { + column-count: 4; + } + } + .md--sans .footnotes p { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; + } + + /* .md--serif .footnotes p { + @include font.shapes(serif, regular); + } */ + .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { + text-align: left; + } + .md h1 .br-cond, .md h2 .br-cond, .md h3 .br-cond, .md h4 .br-cond { + display: none; + } + @media screen and (min-width: 39em) { + .md h1 .br-cond, .md h2 .br-cond, .md h3 .br-cond, .md h4 .br-cond { + display: initial; + } + } + .md h5, .md h6, .md .h-p, .md .h-p-s { + display: inline-block; + float: left; + padding-bottom: 0; + } + .md h3:has(+ dl, + ul, + ol) { + margin-bottom: 1rem; + } + .md .h-danger .h-a, .md .h-warn .h-a, .md .h-info .h-a, .md .h-success .h-a { + display: inline-block; + padding: 0 0.5rem; + margin-left: -0.5rem; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-1); + } + .md .h-danger { + color: var(--c-danger); + } + .md .h-danger .h-a { + background-color: var(--c-danger-bg); + } + .md .h-danger:hover .h-a { + color: var(--c-danger); + } + .md .h-warn { + color: var(--c-warn); + } + .md .h-warn .h-a { + background-color: var(--c-warn-bg); + } + .md .h-info { + color: var(--c-info); + } + .md .h-info .h-a { + background-color: var(--c-info-bg); + } + .md .h-info:hover .h-a { + color: var(--c-info); + } + .md .h-success { + color: var(--c-success); + } + .md .h-success .h-a { + background-color: var(--c-success-bg); + } + + .md--h-sans h1, .md--h-sans h2, .md--h-sans h3, .md--h-sans h4 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + } + .md--h-sans h1 var, .md--h-sans h2 var, .md--h-sans h3 var, .md--h-sans h4 var { + font-weight: 700; + } + .md--h-sans h5, .md--h-sans .h-p { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + } + .md--h-sans h6, .md--h-sans .h-p-s { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + .md--h-sans h1 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 1.42893rem; + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4rem ); + letter-spacing: 0.005em; + word-spacing: 0.015em; + } + .md--h-sans h2 { + font-size: 2.145rem; + line-height: 3rem; + padding-top: calc(2.6966975rem + var(--es)); + padding-bottom: calc(0.3033025rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es))); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + .md--h-sans h3 { + font-size: 2.145rem; + line-height: 3rem; + padding-top: calc(1.6966975rem + var(--es)); + margin-bottom: calc(-0.1966975rem + 0.5 * var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); + letter-spacing: 0.005em; + word-spacing: 0.015em; + } + .md--h-sans h4 { + font-size: 1.60875rem; + line-height: 2rem; + padding-top: 1.397523125rem; + padding-bottom: 0.102476875rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + .md--h-sans h4 + ul, .md--h-sans h4 + ol, .md--h-sans h4 + dl { + margin-top: 1rem; + } + .md--h-sans h5, .md--h-sans h6, .md--h-sans .h-p { + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + margin-bottom: -0.777215rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + text-transform: unset; + margin-right: 0.5em; + } + .md--h-sans h5, .md--h-sans .h-p { + letter-spacing: 0.01em; + word-spacing: 0.03em; + } + .md--h-sans h6, .md--h-sans .h-p-s { + letter-spacing: 0.01em; + word-spacing: 0.03em; + color: var(--c-text-high); + } + .md--h-sans .p-meta { + font-size: 1.4475rem; + line-height: 1rem; + padding-top: 1.95791125rem; + margin-bottom: -0.95791125rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + color: var(--c-taxo-link); + } + .md--h-sans .p-meta + h3 { + margin-top: calc(-0.5rem + -1 * var(--es)); + } + .md--h-sans .p-meta + h4 { + margin-top: calc(-0.5rem + -0.5 * var(--es)); + } + + .md--h-big h1 { + font-size: 4.29rem; + line-height: 5rem; + padding-top: 1.893395rem; + padding-bottom: calc(0.106605rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 6rem ); + letter-spacing: 0.005em; + word-spacing: 0.015em; + } + .md--h-big h2 { + font-size: 3.81rem; + line-height: 3rem; + padding-top: calc(2.073155rem + var(--es)); + padding-bottom: calc(0.926845rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es))); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + .md--h-big h3 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: calc(1.42893rem + var(--es)); + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); + letter-spacing: 0.005em; + word-spacing: 0.015em; + } + .md--h-big h4 { + font-size: 1.905rem; + line-height: 2rem; + padding-top: calc(1.2865775rem + var(--es)); + padding-bottom: 0.7134225rem; + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (3rem + 1 * var(--es))); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + .md--h-big h4 + ul, .md--h-big h4 + ol, .md--h-big h4 + dl { + margin-top: 1rem; + } + + .md--footer h2 { + font-size: 1.7145rem; + line-height: 2.5rem; + padding-top: 0.60791975rem; + margin-bottom: -0.10791975rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.05em; + word-spacing: 0.15em; + text-transform: uppercase; + } + @media screen and (min-width: 48em) { + .md--footer h2 { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: 0.035535rem; + } + } + .md--footer a:hover, .md--footer a:focus { + color: inherit; + } + + /* .md--card { + h2 { + @include font.shapes(serif, bold ); + @include font.spacing( 0.05 ); + text-transform: uppercase; + } + .p-meta { + @include font.weight(sans-cond, text); + } + .p-meta + h2 { + margin-top: 0; + } + } + + .md--card--half { + h2 { + @include font.base-w(serif, bold, 0.95, 1.5, 0, 0.5, 0, 0, false ); + } + .p-meta { + @include font.base-w(sans-cond, light, 0.95, 1.5, 0.5, 0.5, 0, 0, false ); + } + } + + .md--card--1 { + h2 { + @include font.base-x(serif, bold, math.div(5,6), 2, 0, 0, 0, 0, false ); + } + @media screen and (min-width: bp.$col-2) { + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 0, 0, 0, false ); + } + } + } + + .md--card--2 { + @extend .md--card--1; + @media screen and (min-width: bp.$col-3) { + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); + } + } + } + + .md--card--3halfs { + @extend .md--card--1; + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); + } + .p-meta { + @include font.base-w(sans-cond, light, 1, 2, 0, 1, 0, 0, false ); + } + } + + .md--card--2 { + h2 { + @include font.base-x(serif, bold, math.div(5,4), 3, 0, 1, 0, 0, false ); + } + .p-meta { + @include font.base-x(sans-cond, light, 1, 1.5, 0.5, 0.5, 0, 0, false ); + } + } + + + + .md--home { + h1 { + @include font.base-x(serif, bold, 2, 4, 4, 3, -3, 0, false ); + @include font.shapes(serif, bold); + @include font.spacing( 0.05 ); + text-transform: uppercase; + color: black; + } + h2 { + @include font.base-x(serif, bold, math.div(7,8), 2, 2, 1, 0, 0, false ); + @include font.shapes(serif, bold ); + @include font.spacing( 0.05 ); + text-transform: uppercase; + } + } */ + .md--article h2 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: calc(1.42893rem + var(--es)); + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); + font-weight: 600; + text-transform: none; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + .md--article h3 { + font-size: 2.3833333333rem; + line-height: 3rem; + padding-top: 1.6074416667rem; + padding-bottom: 0.3925583333rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4rem ); + font-weight: 600; + letter-spacing: 0.01em; + word-spacing: 0.03em; + } + + .emb { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + display: block; + text-align: left; + position: relative; + z-index: 2; + hyphens: auto; + } + .emb svg { + display: block; + width: 100%; + height: auto; + } + + .emb--w-small { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.814465rem; + padding-bottom: 1.035535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); + width: calc(50% + 1rem); + } + @media screen and (min-width: 39em) { + .emb--w-small { + width: 37rem; + } + } + + .emb--w-tiny { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.814465rem; + padding-bottom: 1.035535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); + width: calc(25% + 1rem); + } + + .emb--w-micro { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.814465rem; + padding-bottom: 0.035535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); + width: calc(12.5% + 1rem); + } + + .emb--ph-left { + float: left; + clear: left; + padding-right: 2rem; + } + .emb--ph-left.emb--w-tiny, .emb--ph-left.emb--w-small { + padding-right: 2rem; + } + @media screen and (min-width: 39em) { + .emb--ph-left.emb--w-tiny, .emb--ph-left.emb--w-small { + padding-right: 4rem; + } + } + @media screen and (min-width: 39em) { + .emb--ph-left.emb--w-micro { + padding-right: 2rem; + } + } + + .emb--ph-right { + float: right; + clear: right; + padding-left: 2rem; + } + .emb--ph-right.emb--w-tiny, .emb--ph-right.emb--w-small { + padding-left: 2rem; + } + @media screen and (min-width: 39em) { + .emb--ph-right.emb--w-tiny, .emb--ph-right.emb--w-small { + padding-left: 4rem; + } + } + @media screen and (min-width: 39em) { + .emb--ph-right.emb--w-micro { + padding-left: 2rem; + } + } + + @media screen and (min-width: 39em) { + .emb--pv-middle { + padding-top: 4rem; + } + .emb--pv-middle.emb--w-micro { + padding-top: 1rem; + } + } + + .emb--w-text { + float: none; + width: 100%; + padding: 1.25rem 0 0 0; + } + + .md del, .md ins { + text-decoration-color: var(--c-danger-bg); + text-decoration-thickness: 0.075em; + text-decoration-skip: auto; + } + .md del { + text-decoration-line: line-through; + text-line-through: double; + } + .md ins { + text-decoration-line: underline; + text-underline-offset: 0.075em; + } + .md sup, .md sub { + position: relative; + font-size: 0.6666667em; + font-weight: 500; + line-height: 1; + font-feature-settings: "lnum" on; + } + .md sup { + top: -0.6em; + } + .md sup > a { + font-size: 1em; + } + .md sub { + bottom: -0.25em; + } + .md kbd { + display: inline-block; + font-size: 90%; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; + line-height: 1em; + min-width: 1.2em; + margin: 0 0.1em; + padding: 0.1em 0.2em; + text-align: center; + border-radius: 0.5rem; + background-color: var(--c-bg-2); + box-shadow: 0 0 0 2px var(--c-shadow-2); + } + .md cite { + letter-spacing: 0.03em; + word-spacing: 0.09em; + } + .md dfn { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + + .md .asciicast { + margin-top: 1rem !important; + padding: 1rem 0 0.5rem 0 !important; + max-width: 70rem; + text-align: center; + border-radius: 0.5rem; + background-color: var(--c-bg-1); + } + @media screen and (min-width: 39em) { + .md .asciicast { + margin: 0 2rem 1rem 2rem !important; + } + } + @media screen and (min-width: 48em) { + .md > .vimeo { + max-width: 70rem; + height: auto; + } + } + + .note { + position: relative; + margin-top: 1.4rem; + margin-bottom: calc(0.9rem + 1 * var(--es)); + } + @media screen and (min-width: 39em) { + .note { + margin-left: 2rem; + margin-right: 2rem; + } + } + @media screen and (min-width: 48em) { + .note { + padding: 0; + margin: 0; + border: none; + } + } + + .note__content { + border-top: 0.1rem solid var(--c-shadow-2); + border-bottom: 0.1rem solid var(--c-shadow-2); + padding: 1rem 2rem; + background: var(--c-bg-2); + overflow: hidden; + } + .note__content > p { + text-align: left; + font-size: 1.68875rem; + line-height: 2rem; + padding-top: 0.367563125rem; + padding-bottom: 0.632436875rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + color: var(--c-text-extralow); + } + .note__content > p strong { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-low); + } + .note__content var { + color: var(--c-text-medium); + } + .note__content > p:not(:empty) + p { + margin-top: -1rem; + text-indent: 2rem; + } + @media screen and (min-width: 48em) { + .note__content { + margin: 0; + padding: 1rem 0; + border: none; + background: transparent; + overflow: visible; + } + } + + .note-star1 .note__content > p:first-of-type, .note-star2 .note__content > p:first-of-type, .note-dagger1 .note__content > p:first-of-type, .note-dagger2 .note__content > p:first-of-type { + position: relative; + } + .note-star1 .note__content > p:first-of-type:before, .note-star2 .note__content > p:first-of-type:before, .note-dagger1 .note__content > p:first-of-type:before, .note-dagger2 .note__content > p:first-of-type:before { + position: absolute; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; + top: 0.1em; + left: -1rem; + font-size: 80%; + line-height: 1; + color: var(--c-text-semihigh); + } + + .note-star1 .note__content > p:first-of-type:before { + content: "*"; + } + + .note-star2 .note__content > p:first-of-type:before { + left: -1.5rem; + content: "**"; + } + + .note-dagger1 .note__content > p:first-of-type:before { + content: "†"; + } + + .note-dagger2 .note__content > p:first-of-type:before { + content: "‡"; + } + + @media screen and (min-width: 48em) { + .note-long .note__content { + position: static; + overflow: auto; + height: auto; + } + .note-long .note__content:after { + display: none; + } + } + + .checkbox-note { + position: absolute; + visibility: hidden; + top: -9999px; + left: -9999px; + } + .checkbox-note ~ .note__content:after { + position: absolute; + bottom: 0.1rem; + z-index: 9; + width: calc(100% - 4rem); + height: 100%; + content: ""; + pointer-events: none; + background-image: linear-gradient(to bottom, transparent 33%, var(--c-bg-2) 90%); + } + @media screen and (min-width: 48em) { + .checkbox-note ~ .note__content { + overflow: visible; + height: auto; + } + } + .checkbox-note ~ .open-note { + display: block; + position: absolute; + z-index: 999; + width: 50%; + height: 5rem; + margin-left: 25%; + cursor: pointer; + user-select: none; + color: transparent; + -webkit-tap-highlight-color: transparent; + } + .checkbox-note ~ .open-note > .arrow { + display: block; + z-index: 999; + width: 0; + height: 0; + margin: 2rem auto; + border-color: transparent; + border-style: solid; + border-width: 1rem; + } + .checkbox-note ~ .open-note:focus { + color: transparent; + } + + .checkbox-note ~ .note__content { + height: 10.5rem; + } + .checkbox-note ~ .note__content:after { + transition: opacity 150ms; + opacity: 1; + } + @media screen and (min-width: 48em) { + .checkbox-note ~ .note__content { + height: 100%; + } + .checkbox-note ~ .note__content:after { + display: none; + } + } + .checkbox-note ~ .open-note { + bottom: -3rem; + } + .checkbox-note ~ .open-note > .arrow { + border-top-color: var(--c-text-normal); + border-bottom-color: unset; + } + @media screen and (min-width: 48em) { + .checkbox-note ~ .open-note { + display: none; + } + } + + .checkbox-note:checked ~ .note__content { + height: 100%; + } + .checkbox-note:checked ~ .note__content:after { + opacity: 0; + height: 100%; + } + .checkbox-note:checked ~ .open-note { + bottom: -1rem; + } + .checkbox-note:checked ~ .open-note > .arrow { + border-top-color: unset; + border-bottom-color: var(--c-text-normal); + } + @media screen and (min-width: 48em) { + .checkbox-note:checked ~ .open-note { + display: none; + } + } + + .md table:not(.lntable) { + border-collapse: separate; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + overflow: hidden; + margin-top: calc(1rem + 1 * var(--es)); + margin-bottom: calc(1rem + 1 * var(--es)); + } + .md table:not(.lntable) th:first-child, .md table:not(.lntable) td:first-child { + padding-left: 2rem; + } + .md table:not(.lntable) th:last-child, .md table:not(.lntable) td:last-child { + padding-right: 2rem; + } + .md thead, .md tbody { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: 0.22559375rem; + } + .md thead { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + .md thead > tr { + background-color: var(--c-text-medium); + color: var(--c-text-contrast); + } + .md tbody { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + .md tbody tr:nth-child(2n) { + background-color: var(--c-bg-1); + color: var(--c-text-semihigh); + } + .md tbody tr:nth-child(2n+1) { + background-color: var(--c-bg-4); + color: var(--c-text-high); + } + .md th, .md td { + padding: 1rem; + } + + /* .table-half-left { + @media screen and (min-width: $bp-3col) { + float: left; + width: calc(50% - $s-gutter); + } + } */ + .md li:has([type=checkbox]) { + padding-left: 0; + } + .md li:has([type=checkbox])::before { + content: ""; + } + .md li input[type=checkbox]:disabled { + margin: 0 2rem 0 0; + color: var(--c-text-extralow); + border-color: var(--c-text-extralow); + background-color: var(--c-text-extralow); + } + + .md { + /* > ul, > ol { + > li:last-child > p:last-child { padding-bottom: 0; } + } */ + } + .md ul h5, .md ul h6, .md ol h5, .md ol h6 { + margin: 0; + padding: 0; + } + .md > ul, .md > ol { + margin-bottom: 1rem; + } + .md > ul > li:last-child, .md > ol > li:last-child { + margin-bottom: -1rem; + } + .md ul li:before { + content: "•"; + } + .md ol { + counter-reset: ol1; + } + .md ol > li > ol { + counter-reset: ol2; + } + .md ol > li > ol > li > ol { + counter-reset: ol3; + } + .md ol > li:before { + content: counter(ol1) "."; + counter-increment: ol1; + } + .md ol > li > ol > li:before { + content: counter(ol2, lower-alpha) ")"; + counter-increment: ol2; + } + .md ol > li > ol > li > ol > li:before { + content: counter(ol3, lower-roman) "."; + counter-increment: ol3; + letter-spacing: -0.05em; + } + .md li { + position: relative; + padding-left: calc(3rem + 1 * var(--es)); + page-break-inside: avoid; + -webkit-column-break-inside: avoid; + break-inside: avoid-column; + overflow: visible; + } + .md li > p { + margin-bottom: 1rem; + overflow: visible; + } + .md li:before { + font-weight: 600; + position: absolute; + left: 0; + } + .md li li:before { + font-weight: 450; + } + .md li li li:before { + font-weight: 300; + } + .md .ol-continue { + counter-reset: none; + } + .md li:has(.emb--w-full), .md dd:has(.emb--w-full), .md li > p:has(.emb--w-full), .md dd > p:has(.emb--w-full) { + text-align: left; + } + .md li:has(.emb):after, .md li > p:has(.emb):after { + display: table; + content: ""; + clear: both; + } + + .md--footer li { + padding-left: 3rem; + } + @media screen and (min-width: 48em) { + .md--footer li { + padding-left: 2.5rem; + } + } + + .md--small li { + padding-left: 2.5rem; + } + + .md--tiny li { + padding-left: 2rem; + } + + .smallindent li { + padding-left: 3rem !important; + } + + .md .icon { + fill: var(--c-text-low); + } + .md p .icon--tiny { + position: relative; + top: 0.55rem; + height: 2rem; + width: 2rem; + padding: 0; + } + + .md--frame .icon { + fill: var(--c-frame-text-low); + } + + .md .math-block, .md .chem-block { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: calc(0.22559375rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + } + .md .katex { + font-size: 1.1em; + } + + .md .ta-left { + text-align: left; + } + .md .ta-right { + text-align: right; + } + .md .ta-center { + text-align: center; + } + @media screen and (min-width: 48em) { + .md .ta-left3 { + text-align: left; + } + .md .ta-right3 { + text-align: right; + } + } + @media screen and (min-width: 120em) { + .md .ta-left6 { + text-align: left; + } + .md .ta-right6 { + text-align: right; + } + } + + .md { + /* .large { + max-width: 3 * $u-col-g; + } */ + } + .md .half { + min-width: 50%; + width: 50%; + } + @media screen and (min-width: 39em) { + .md .normal { + width: 74rem; + } + } + .md .full { + max-width: 148rem; + } + @media screen and (min-width: 48em) { + .md .inline { + display: inline-block; + } + } + @media screen and (min-width: 48em) { + .md .block { + display: block; + margin-right: 37rem; + } + } + @media screen and (min-width: 79em) { + .md .block { + margin-left: 37rem; + } + } + + .box, .box-danger, .box-warn, .box-info, .box-success { + --box-shadow-color: var(--c-shadow-3); + position: relative; + z-index: 2; + margin: 1rem 0; + background-color: var(--c-bg-2); + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--box-shadow-color); + text-align: left !important; + clear: both; + } + .box.left, .left.box-danger, .left.box-warn, .left.box-info, .left.box-success, .box.left-in, .left-in.box-danger, .left-in.box-warn, .left-in.box-info, .left-in.box-success, .box.left-in-half, .left-in-half.box-danger, .left-in-half.box-warn, .left-in-half.box-info, .left-in-half.box-success, .box.right, .right.box-danger, .right.box-warn, .right.box-info, .right.box-success, .box.right-in, .right-in.box-danger, .right-in.box-warn, .right-in.box-info, .right-in.box-success, .box.right-in-half, .right-in-half.box-danger, .right-in-half.box-warn, .right-in-half.box-info, .right-in-half.box-success { + width: 33rem; + } + .box.left, .left.box-danger, .left.box-warn, .left.box-info, .left.box-success, .box.left-in, .left-in.box-danger, .left-in.box-warn, .left-in.box-info, .left-in.box-success, .box.left-in-half, .left-in-half.box-danger, .left-in-half.box-warn, .left-in-half.box-info, .left-in-half.box-success { + margin-right: 4rem; + margin-left: 2rem; + } + .box.right, .right.box-danger, .right.box-warn, .right.box-info, .right.box-success, .box.right-in, .right-in.box-danger, .right-in.box-warn, .right-in.box-info, .right-in.box-success, .box.right-in-half, .right-in-half.box-danger, .right-in-half.box-warn, .right-in-half.box-info, .right-in-half.box-success { + margin-left: 4rem; + margin-right: 2rem; + } + + .box-danger, .box-warn, .box-info, .box-success { + padding-left: 1rem; + padding-right: 1rem; + border-left-width: 1rem; + border-left-style: solid; + border-left-color: var(--box-shadow-color); + } + + .box-danger { + color: var(--c-text-high); + background-color: var(--c-danger-box-bg); + border-left-color: var(--c-danger-bg); + --box-shadow-color: var(--c-danger-bg); + } + + .box-warn { + color: var(--c-text-high); + background-color: var(--c-warn-box-bg); + --box-shadow-color: var(--c-warn-box); + } + + .box-info { + color: var(--c-text-semihigh); + background-color: var(--c-info-box-bg); + --box-shadow-color: var(--c-info-bg); + } + + .box-success { + color: var(--c-text-semihigh); + background-color: var(--c-success-box-bg); + --box-shadow-color: var(--c-success-bg); + } + + .md > .box, .md > .box-danger, .md > .box-warn, .md > .box-info, .md > .box-success { + max-width: 70rem; + margin: 1rem 2rem 3rem; + } + + .layout-box { + position: relative; + border-radius: 1rem; + background-color: var(--c-bg-2); + z-index: -10; + } + .layout-box:after { + display: block; + position: absolute; + z-index: -9; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ""; + padding: 0 1rem; + box-shadow: inset 0 0 0.75rem 0.25rem var(--c-page); + } + + @media screen and (min-width: 120em) { + .md--margin-doc .box, .md--margin-doc .box-danger, .md--margin-doc .box-warn, .md--margin-doc .box-info, .md--margin-doc .box-success { + margin-left: auto; + margin-right: auto; + } + } + + @media screen and (min-width: 79em) { + .md--margin-full .box, .md--margin-full .box-danger, .md--margin-full .box-warn, .md--margin-full .box-info, .md--margin-full .box-success { + margin-left: auto; + margin-right: auto; + } + } + + .container:after { + display: table; + content: ""; + clear: both; + } + + @media screen and (min-width: 39em) { + .md .left, .md .right, .md .left-in, .md .right-in, .md .left-in-half, .md .right-in-half { + position: relative; + z-index: 2; + min-width: unset; + width: 37rem; + } + } + @media screen and (min-width: 39em) { + .md .left, .md .left-in, .md .left-in-half { + float: left; + clear: left; + margin-right: 2rem !important; + } + } + @media screen and (min-width: 39em) { + .md .right, .md .right-in, .md .right-in-half { + float: right; + clear: right; + margin-left: 2rem !important; + } + } + @media screen and (min-width: 48em) { + .md .right3 { + position: relative; + z-index: 2; + width: 37rem; + padding: 0 2rem; + float: right; + clear: right; + } + } + + @media screen and (min-width: 120em) { + .md--margin-doc .highlight { + margin-left: auto; + margin-right: auto; + } + .md--margin-doc .left-in { + margin-right: 2rem; + } + .md--margin-doc .left-in-half { + margin-left: 18.5rem; + } + .md--margin-doc .left-in { + margin-left: 37rem; + } + .md--margin-doc .left-in + .highlight, .md--margin-doc .left-in + .inline { + margin-left: -36.9rem; + } + .md--margin-doc .highlight + .right-in, .md--margin-doc .highlight + .right3, .md--margin-doc .highlight + .fig--ph-right, .md--margin-doc .inline + .right-in, .md--margin-doc .inline + .right3, .md--margin-doc .inline + .fig--ph-right { + margin-left: -36.9rem; + } + } + + @media screen and (min-width: 79em) { + .md--margin-full .highlight { + margin-left: auto; + margin-right: auto; + } + .md--margin-full .left-in { + margin-right: 2rem; + } + .md--margin-full .left-in-half { + margin-left: 19.5rem; + } + .md--margin-full .left-in { + margin-left: 37rem; + } + .md--margin-full .left-in + .highlight, .md--margin-full .left-in + .inline { + margin-left: -36.9rem; + } + .md--margin-full .highlight + .right-in, .md--margin-full .highlight + .right3, .md--margin-full .highlight + .fig--ph-right, .md--margin-full .inline + .right-in, .md--margin-full .inline + .right3, .md--margin-full .inline + .fig--ph-right { + margin-left: -36.9rem; + } + } + + .md--margin-full .left-in, .md--margin-full .left-in-half, .md--margin-full .right-in, .md--margin-full .right-in-half, .md--margin-doc .left-in, .md--margin-doc .left-in-half, .md--margin-doc .right-in, .md--margin-doc .right-in-half { + margin-bottom: 0; + } + @media screen and (min-width: 48em) { + .md--margin-full .right-in, .md--margin-doc .right-in { + margin-left: 2rem; + } + .md--margin-full .right-in-half, .md--margin-doc .right-in-half { + margin-right: 19.5rem; + } + .md--margin-full .right-in, .md--margin-doc .right-in { + margin-right: 37rem; + } + } + + .page-header { + position: relative; + z-index: 2; + margin: 0 1px; + } + .page-header > hr { + border-top: 0.3rem solid var(--c-text-normal); + height: 1rem; + } + + .page-header--home { + margin-bottom: 6rem; + } + + @media screen and (min-width: 79em) { + .page-header--left .title, .page-header--left #author { + position: absolute; + left: 0; + top: 0; + width: 37rem; + } + } + + .page-list > hr { + border-bottom: 0.2rem solid var(--c-text-normal); + height: 1rem; + margin: 0 2rem 5rem 2rem; + } + + .page-footer { + flex: 0 0 auto; + padding-top: calc(2rem + 1 * var(--es)); + margin-top: auto; + } + .page-footer > hr { + border-top: 0.15rem solid var(--c-text-extralow); + height: 1rem; + margin: 0 2rem; + max-width: 70rem; + } + + @media screen and (min-width: 79em) { + .padding-full { + padding-left: 39rem; + } + } + + @media screen and (min-width: 79em) { + .padding-full-half { + padding-left: 20.5rem; + } + } + + @media screen and (min-width: 120em) { + .margin-doc { + margin-left: 37rem; + } + } + + @media screen and (min-width: 120em) { + .margin-doc-half { + margin-left: 18.5rem; + } + } + + @media screen and (min-width: 79em) { + .margin-full { + margin-left: 37rem; + } + } + + @media screen and (min-width: 79em) { + .margin-full-half { + margin-left: 18.5rem; + } + } + + .ul--row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .li-box { + padding-top: 2rem; + } + .li-box:last-child > hr { + display: none; + } + @media screen and (min-width: 39em) { + .li-box { + padding-top: 4rem; + } + } + + .news-separator { + height: 1rem; + box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.1); + margin: 3.5rem 1rem 0 1rem; + background: var(--ctg-news-title); + } + @media screen and (min-width: 39em) { + .news-separator { + margin: 3.5rem 0 0 0; + } + } + @media screen and (min-width: 79em) { + .news-separator { + background: var(--ctg4-news-title); + } + } + + .li-header { + position: relative; + } + + .fig, .goat { + position: relative; + z-index: 5; + padding-top: 1.75rem; + padding-bottom: 1rem; + width: 100%; + } + .fig .caption, .goat .caption { + padding-left: 2rem; + padding-right: 2rem; + } + @media screen and (min-width: 39em) { + .fig, .goat { + padding-left: 2rem; + padding-right: 2rem; + } + .fig .caption, .goat .caption { + padding-left: 0; + padding-right: 0; + } + } + + .fig--w-tiny, .fig--w-small, .fig--w-medium { + float: left; + clear: left; + padding-left: 2rem; + padding-right: 2rem; + } + .fig--w-tiny .caption, .fig--w-small .caption, .fig--w-medium .caption { + padding-left: 0; + padding-right: 0; + } + + .fig--w-small, .fig--w-medium { + width: calc(50% + 1rem); + } + @media screen and (min-width: 39em) { + .fig--w-small, .fig--w-medium { + width: 37rem; + } + } + .fig--w-small.fig--ph-right, .fig--ph-right.fig--w-medium { + float: right; + clear: right; + } + + .fig--w-tiny { + padding-left: 2rem; + padding-right: 2rem; + width: calc(33.3334% + 1rem); + } + @media screen and (min-width: 39em) { + .fig--w-tiny { + width: 18.5rem; + } + } + .fig--w-tiny.fig--ph-right { + float: right; + clear: right; + } + @media screen and (min-width: 48em) { + .fig--w-tiny.fig--ph-right { + width: 37rem; + padding-right: 18.5rem; + } + } + .fig--w-tiny .img__c-t-symbol { + padding: 1rem; + } + + @media screen and (min-width: 48em) { + .fig--w-medium.fig--ph-right { + width: 55.5rem; + } + } + + .fig--w-text, .goat, .fig--w-large, .fig--w-xlarge { + padding-bottom: 2rem; + } + @media screen and (max-width: 39em) { + .fig--w-text .img__c, .goat .img__c, .fig--w-large .img__c, .fig--w-xlarge .img__c { + border-radius: 0; + border-left: none; + border-right: none; + } + } + + @media screen and (min-width: 48em) { + .fig--w-text, .goat { + max-width: 74rem; + } + .fig--w-text .caption, .goat .caption { + position: absolute; + z-index: 10; + right: -35rem; + top: 1.25rem; + width: 33rem; + height: calc(100% - 3.75rem); + margin-left: 2rem; + text-align: left; + padding-left: 0; + padding-right: 0; + } + .fig--w-text .caption__attr, .goat .caption__attr { + position: absolute; + bottom: 0; + left: 0; + float: none; + text-align: left; + } + } + + @media screen and (min-width: 120em) { + .md--margin-doc .fig--w-tiny.fig--ph-left { + width: 37rem; + padding-left: 18.5rem; + } + .md--margin-doc .fig--w-tiny.fig--ph-left-inside { + margin-left: 37rem; + } + .md--margin-doc > .fig--w-text, .md--margin-doc > .goat { + margin-left: 37rem; + } + .md--margin-doc .fig--w-medium.fig--ph-left { + width: 55.5rem; + } + .md--margin-doc .fig--w-large { + margin-left: 18.5rem; + padding-left: 0; + padding-right: 0; + } + .md--margin-doc .fig--w-large .caption { + margin-left: 18.5rem; + } + .md--margin-doc .fig--w-large .caption__attr { + width: 18.5rem; + } + .md--margin-doc .fig--w-xlarge { + width: 148rem; + } + .md--margin-doc .fig--w-xlarge .caption { + margin-left: 37rem; + } + } + + @media screen and (min-width: 79em) { + .md--margin-full .fig--w-tiny.fig--ph-left { + width: 37rem; + padding-left: 18.5rem; + } + .md--margin-full .fig--w-tiny.fig--ph-left-inside { + margin-left: 37rem; + } + .md--margin-full > .fig--w-text, .md--margin-full > .goat { + margin-left: 37rem; + } + .md--margin-full .fig--w-medium.fig--ph-left { + width: 55.5rem; + } + .md--margin-full .fig--w-large { + margin-left: 18.5rem; + padding-left: 0; + padding-right: 0; + } + .md--margin-full .fig--w-large .caption { + margin-left: 18.5rem; + } + .md--margin-full .fig--w-large .caption__attr { + width: 18.5rem; + } + .md--margin-full .fig--w-xlarge { + width: 148rem; + } + .md--margin-full .fig--w-xlarge .caption { + margin-left: 37rem; + } + } + + @media screen and (min-width: 48em) { + .fig--w-large .caption__text, .fig--w-xlarge .caption__text { + display: inline-block; + max-width: 70rem; + padding-left: 4rem; + padding-right: 4rem; + } + .fig--w-large .caption__attr, .fig--w-xlarge .caption__attr { + width: 33rem; + } + } + + @media screen and (min-width: 79em) { + .fig--w-large { + width: 111rem; + } + } + + @media screen and (min-width: 39em) { + .fig--w-tiny.fig--ph-left, .fig--w-small.fig--ph-left, .fig--w-medium.fig--ph-left { + margin-right: 2rem; + } + .fig--w-tiny.fig--ph-right, .fig--w-small.fig--ph-right, .fig--w-medium.fig--ph-right { + margin-left: 2rem; + } + } + + @media screen and (min-width: 39em) { + .fig--ph-left { + float: left; + clear: left; + } + } + + @media screen and (min-width: 39em) { + .fig--ph-right { + float: right; + clear: right; + } + } + + .fig--featured { + float: right; + clear: both; + padding-top: 1.75rem; + } + @media screen and (min-width: 39em) { + .fig--featured { + padding-top: 1rem; + } + } + @media screen and (min-width: 48em) { + .fig--featured { + position: absolute; + z-index: 2; + top: -0.5rem; + right: 0; + float: none; + clear: none; + padding-top: 1.5rem; + margin: 0; + } + } + + .fig--portrait { + padding: 0; + height: 8rem; + width: 8rem; + } + @media screen and (min-width: 79em) { + .fig--portrait { + margin-top: 2rem; + height: 16.5rem; + width: 16.5rem; + } + } + + .fig--w-pt2 { + padding: 0.75rem; + height: 6rem; + width: 6rem; + overflow: hidden; + } + + .fig--w-pt1 { + padding: 0.5rem; + height: 4rem; + width: 4rem; + } + + .fig--portrait .img__frame, .fig--w-pt2 .img__frame, .fig--w-pt1 .img__frame { + box-shadow: 0 0 0 1px var(--c-shadow-2); + border-radius: 50%; + overflow: hidden; + } + + .fig--diagram .img__c { + border: 1px solid rgba(0, 0, 0, 0.5333333333); + box-shadow: none; + background: white; + } + + .goat { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + margin-bottom: -0.464465rem; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; + } + + .md--footer figure { + width: 100%; + padding: 0 2rem; + } + .md--footer h2 + figure { + margin-top: 1rem; + } + + /* Background */ + .bg { + color: var(--c-chroma-fg); + background-color: var(--c-chroma-bg); + } + + /* PreWrapper */ + .chroma { + color: var(--c-chroma-fg); + background-color: var(--c-chroma-bg); + } + + /* Other */ + /* Error */ + .chroma .err { + color: var(--c-chroma-err-fg); + background-color: var(--c-chroma-err-bg); + } + + /* CodeLine */ + /* LineLink */ + .chroma .lnlinks { + outline: none; + text-decoration: none; + color: inherit; + } + + /* LineTableTD */ + .chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + + /* LineTable */ + .chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + } + + /* LineHighlight */ + .chroma .hl { + background-color: var(--c-chroma-hl); + } + + /* LineNumbersTable */ + .chroma .lnt { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: var(--c-chroma-lnt); + } + + /* LineNumbers */ + .chroma .ln { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.2em; + padding-right: 0.4em; + color: var(--c-chroma-ln); + } + + /* Line */ + .chroma .line { + display: flex; + } + + /* Keyword */ + .chroma .k { + color: var(--c-chroma-k); + font-weight: var(--fw-chroma-k); + } + + /* KeywordConstant */ + .chroma .kc { + color: var(--c-chroma-kc); + font-weight: var(--fw-chroma-kc); + } + + /* KeywordDeclaration */ + .chroma .kd { + color: var(--c-chroma-kd); + font-weight: var(--fw-chroma-kd); + } + + /* KeywordNamespace */ + .chroma .kn { + color: var(--c-chroma-kn); + font-weight: var(--fw-chroma-kn); + } + + /* KeywordPseudo */ + .chroma .kp { + color: var(--c-chroma-kp); + font-weight: var(--fw-chroma-kp); + } + + /* KeywordReserved */ + .chroma .kr { + color: var(--c-chroma-kr); + font-weight: var(--fw-chroma-kr); + } + + /* KeywordType */ + .chroma .kt { + color: var(--c-chroma-kt); + font-weight: var(--fw-chroma-kt); + } + + /* Name */ + /* NameAttribute */ + .chroma .na { + color: var(--c-chroma-na); + } + + /* NameBuiltin */ + .chroma .nb { + color: var(--c-chroma-nb); + } + + /* NameBuiltinPseudo */ + .chroma .bp { + color: var(--c-chroma-bp); + } + + /* NameClass */ + .chroma .nc { + color: var(--c-chroma-nc); + font-weight: bold; + } + + /* NameConstant */ + .chroma .no { + color: var(--c-chroma-no); + font-weight: var(--fw-chroma-no); + } + + /* NameDecorator */ + .chroma .nd { + color: var(--c-chroma-nd); + font-weight: bold; + } + + /* NameEntity */ + .chroma .ni { + color: var(--c-chroma-ni); + } + + /* NameException */ + .chroma .ne { + color: var(--c-chroma-ne); + font-weight: bold; + } + + /* NameFunction */ + .chroma .nf { + color: var(--c-chroma-nf); + font-weight: bold; + } + + /* NameFunctionMagic */ + /* NameLabel */ + .chroma .nl { + color: var(--c-chroma-nl); + font-weight: bold; + } + + /* NameNamespace */ + .chroma .nn { + color: var(--c-chroma-nn); + } + + /* NameOther */ + /* NameProperty */ + .chroma .py { + color: var(--c-chroma-py); + } + + /* NameTag */ + .chroma .nt { + color: var(--c-chroma-nt); + } + + /* NameVariable */ + .chroma .nv { + color: var(--c-chroma-nv); + } + + /* NameVariableClass */ + .chroma .vc { + color: var(--c-chroma-vc); + } + + /* NameVariableGlobal */ + .chroma .vg { + color: var(--c-chroma-vg); + } + + /* NameVariableInstance */ + .chroma .vi { + color: var(--c-chroma-vi); + } + + /* NameVariableMagic */ + .chroma .vm { + color: var(--c-chroma-vm); + } + + /* Literal */ + .chroma .l { + color: var(--c-chroma-l); + } + + /* LiteralDate */ + .chroma .ld { + color: var(--c-chroma-ld); + } + + /* LiteralString */ + .chroma .s { + color: var(--c-chroma-s); + } + + /* LiteralStringAffix */ + .chroma .sa { + color: var(--c-chroma-sa); + } + + /* LiteralStringBacktick */ + .chroma .sb { + color: var(--c-chroma-sb); + } + + /* LiteralStringChar */ + .chroma .sc { + color: var(--c-chroma-sc); + } + + /* LiteralStringDelimiter */ + .chroma .dl { + color: var(--c-chroma-dl); + } + + /* LiteralStringDoc */ + .chroma .sd { + color: var(--c-chroma-sd); + } + + /* LiteralStringDouble */ + .chroma .s2 { + color: var(--c-chroma-s2); + } + + /* LiteralStringEscape */ + .chroma .se { + color: var(--c-chroma-se); + } + + /* LiteralStringHeredoc */ + .chroma .sh { + color: var(--c-chroma-sh); + } + + /* LiteralStringInterpol */ + .chroma .si { + color: var(--c-chroma-si); + } + + /* LiteralStringOther */ + .chroma .sx { + color: var(--c-chroma-sx); + } + + /* LiteralStringRegex */ + .chroma .sr { + color: var(--c-chroma-sr); + } + + /* LiteralStringSingle */ + .chroma .s1 { + color: var(--c-chroma-s1); + } + + /* LiteralStringSymbol */ + .chroma .ss { + color: var(--c-chroma-ss); + } + + /* LiteralNumber */ + .chroma .m { + color: var(--c-chroma-m); + } + + /* LiteralNumberBin */ + .chroma .mb { + color: var(--c-chroma-mb); + } + + /* LiteralNumberFloat */ + .chroma .mf { + color: var(--c-chroma-mf); + } + + /* LiteralNumberHex */ + .chroma .mh { + color: var(--c-chroma-mh); + } + + /* LiteralNumberInteger */ + .chroma .mi { + color: var(--c-chroma-mi); + } + + /* LiteralNumberIntegerLong */ + .chroma .il { + color: var(--c-chroma-il); + } + + /* LiteralNumberOct */ + .chroma .mo { + color: var(--c-chroma-mo); + } + + /* Operator */ + .chroma .o { + color: var(--c-chroma-o); + font-weight: bold; + } + + /* OperatorWord */ + .chroma .ow { + color: var(--c-chroma-ow); + font-weight: bold; + } + + /* Punctuation */ + /* Comment */ + .chroma .c { + color: var(--c-chroma-c); + font-style: italic; + } + + /* CommentHashbang */ + .chroma .ch { + color: var(--c-chroma-ch); + font-style: italic; + } + + /* CommentMultiline */ + .chroma .cm { + color: var(--c-chroma-cm); + font-style: italic; + } + + /* CommentSingle */ + .chroma .c1 { + color: var(--c-chroma-c1); + font-style: italic; + } + + /* CommentSpecial */ + .chroma .cs { + color: var(--c-chroma-cs); + font-weight: bold; + font-style: italic; + } + + /* CommentPreproc */ + .chroma .cp { + color: var(--c-chroma-cp); + font-weight: bold; + font-style: italic; + } + + /* CommentPreprocFile */ + .chroma .cpf { + color: var(--c-chroma-cpf); + font-weight: bold; + font-style: italic; + } + + /* Generic */ + /* GenericDeleted */ + .chroma .gd { + color: var(--c-chroma-gd-fg); + background-color: var(--c-chroma-gd-bg); + } + + /* GenericEmph */ + .chroma .ge { + font-style: italic; + } + + /* GenericError */ + .chroma .gr { + color: var(--c-chroma-gr); + } + + /* GenericHeading */ + .chroma .gh { + color: var(--c-chroma-gh); + font-weight: var(--fw-chroma-gh); + } + + /* GenericInserted */ + .chroma .gi { + color: var(--c-chroma-gi-fg); + background-color: var(--c-chroma-gi-bg); + } + + /* GenericOutput */ + .chroma .go { + color: var(--c-chroma-go); + } + + /* GenericPrompt */ + .chroma .gp { + color: var(--c-chroma-gp); + } + + /* GenericStrong */ + .chroma .gs { + font-weight: bold; + } + + /* GenericSubheading */ + .chroma .gu { + color: var(--c-chroma-gu); + } + + /* GenericTraceback */ + .chroma .gt { + color: var(--c-chroma-gt); + } + + /* GenericUnderline */ + .chroma .gl { + text-decoration: underline; + } + + /* TextWhitespace */ + .chroma .w { + color: var(--c-chroma-w); + } + + #author { + display: inline-grid; + width: 100%; + padding: 0 2rem; + padding-bottom: 3rem; + grid-template-columns: 10rem auto auto; + grid-template-rows: repeat(3, minmax(4rem, auto)); + grid-template-areas: "img title title" "img description description" ". follow contact"; + } + @media screen and (min-width: 25em) { + #author { + grid-template-columns: 10rem 50% 1fr; + grid-template-rows: auto auto; + grid-template-areas: "img title follow" "img description contact"; + } + } + @media screen and (min-width: 39em) { + #author { + width: 74rem; + } + } + @media screen and (min-width: 79em) { + #author { + width: 37rem; + grid-template-columns: 22.5rem 4rem 4rem; + grid-template-rows: auto auto auto; + grid-template-areas: "title title title" "description description description" "img follow contact"; + } + } + + #author__portrait { + grid-area: img; + } + + #author__title { + grid-area: title; + } + + .h1--author { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + padding-bottom: 0.57107rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + + #author__description { + grid-area: description; + } + + #author__follow, #author__contact { + display: inline-block; + align-self: end; + justify-self: start; + margin-left: -0.3rem; + } + @media screen and (min-width: 25em) { + #author__follow, #author__contact { + justify-self: end; + align-self: center; + height: unset; + } + } + @media screen and (min-width: 79em) { + #author__follow, #author__contact { + justify-self: center; + align-self: center; + } + } + + #author__follow { + grid-area: follow; + } + + #author__contact { + grid-area: contact; + } + + .author__icon-list { + display: inline-flex; + flex-direction: row; + } + @media screen and (min-width: 79em) { + .author__icon-list { + flex-direction: column; + } + } + + .author__icon-item { + display: inline-block; + padding: 0 0.2rem; + } + @media screen and (min-width: 79em) { + .author__icon-item { + padding: 0.2rem 0; + } + } + + .published { + display: flex; + flex-direction: row; + flex-shrink: 0; + } + @media screen and (min-width: 79em) { + .published { + flex-direction: column-reverse; + } + } + + .author-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .nav__item:empty { + display: none; + } + + .nav__item--1 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.04em; + word-spacing: 0.12em; + } + + .nav__item--2 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 500; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + + .nav__item--3 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; + } + + .nav__title:hover, .nav__title:focus { + color: var(--c-frame-border-active); + } + + .nav__item--dropdown { + position: relative; + } + + .nav__item--dropdown > .ctrl__menulink { + display: inline-block; + cursor: pointer; + } + + .nav__item--dropdown .dropdown { + display: none; + position: absolute; + background-color: var(--c-frame); + min-width: 160px; + z-index: 1; + padding: 0; + margin: 0; + list-style: none; + } + + .nav__item--dropdown:hover .dropdown, + .nav__item--dropdown:focus-within .dropdown { + display: block; + } + + .nav__item--dropdown .dropdown li { + color: var(--c-text-normal); + padding: 0.5rem; + text-decoration: none; + display: block; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.075em; + word-spacing: 0.225em; + text-transform: uppercase; + } + + .nav__item--dropdown .dropdown li:hover, + .nav__item--dropdown .dropdown li:focus { + background-color: var(--c-frame-border-active); + color: var(--c-text-low); + } + + .nav__item--dropdown .dropdown li a { + color: inherit; + text-decoration: none; + display: block; + width: 100%; + } + + .nav__item--dropdown .dropdown li a:hover, + .nav__item--dropdown .dropdown li a:focus { + background-color: transparent; + color: inherit; + } + + .nav-main__link { + letter-spacing: 0.075em; + word-spacing: 0.225em; + text-transform: uppercase; + border-bottom: 0.6rem solid var(--c-frame); + transition: border-bottom-color 250ms; + } + .nav-main__link:hover, .nav-main__link:focus { + border-bottom-color: var(--c-frame-border-active); + } + .nav-main__link.is-active, .nav-main__link.has-active { + border-bottom-color: var(--c-frame-border-active); + } + + .social a, .social .nav-main__link { + letter-spacing: 0.025em; + } + .ctrl { + min-width: 13rem; + display: flex; + flex-direction: row; + padding: 0 2rem; + align-items: flex-start; + } + @media screen and (min-width: 48em) { + .ctrl { + width: 37rem; + } + } + + .ctrl__button, .ctrl__extlink { + display: inline-block; + padding: 1rem 0.5rem 0 0.5rem; + } + .ctrl__button .icon, .ctrl__extlink .icon { + fill: currentColor; + background-color: transparent; + border-radius: 0.5rem; + } + + .ctrl__button { + line-height: 3rem; + font-size: 3rem; + background: inherit; + color: inherit; + } + .ctrl__button:not([disabled]) .icon { + fill: var(--c-frame-button); + } + .ctrl__button:not([disabled]):hover { + cursor: pointer; + } + .ctrl__button:not([disabled]):hover .icon { + fill: var(--c-frame-button-hover); + background-color: var(--c-frame-button-hover-bg); + } + .ctrl__button:disabled .icon { + fill: var(--c-frame-button-disabled); + } + + .ctrl__extlink:hover .icon { + fill: var(--c-frame-text-link-ext); + } + + .ctrl__menulink { + display: inline-block; + font-size: 1.43rem; + line-height: 1rem; + padding-top: 1.964465rem; + padding-bottom: 1.535535rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + margin: 0 1rem; + } + + .ctrl__title { + display: inline-block; + padding: 1rem 1rem 0 1rem; + } + + .ctrl__title--logo img { + height: 3rem; + width: auto; + } + + .ctrl__title--text span { + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + margin-bottom: -0.777215rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + letter-spacing: 0.04em; + word-spacing: 0.12em; + text-transform: uppercase; + } + @media screen and (min-width: 25em) { + .ctrl__title--text span { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + margin-bottom: -0.42893rem; + letter-spacing: 0.03em; + word-spacing: 0.09em; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + } + } + + .ctrl-left { + justify-content: flex-start; + padding-left: 1rem; + } + + .ctrl-right { + justify-content: flex-end; + padding-right: 1rem; + } + + .section-nav { + padding: calc(0.5rem + 0.5 * var(--es)) 0rem; + column-count: 2; + column-width: 37rem; + column-gap: 0; + max-width: 74rem; + clear: both; + } + .section-nav__li { + page-break-inside: avoid; + break-inside: avoid-column; + -webkit-column-break-inside: avoid; + } + .section-nav__link { + display: flex; + flex-wrap: nowrap; + align-items: start; + height: 100%; + padding: calc(1.5rem + 0.5 * var(--es)) 2rem calc(0.5rem + 0.5 * var(--es)) 2rem; + } + .section-nav__link:hover, .section-nav__link:focus, .section-nav__link:active { + background-color: transparent; + } + .section-nav__link:hover .section-nav__title, .section-nav__link:focus .section-nav__title, .section-nav__link:active .section-nav__title { + text-decoration-color: var(--c-text-normal); + } + .section-nav__title { + font-size: 1.915rem; + line-height: 2rem; + padding-top: 0.5328325rem; + margin-bottom: -0.5328325rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-normal); + letter-spacing: 0.01em; + text-decoration: underline; + text-underline-offset: 0.075em; + text-decoration-thickness: 0.075em; + text-decoration-color: transparent; + } + .section-nav__icon { + width: 4.5rem; + flex-shrink: 0; + } + .section-nav__description { + color: var(--c-text-low); + font-size: 1.6083333333rem; + line-height: 2rem; + padding-top: 1.3976791667rem; + padding-bottom: 0.6023208333rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + .section-nav__description strong { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + } + + .section-nav--top { + padding-top: 0; + clear: none; + } + + .page-nav { + max-width: 74rem; + margin: 1rem 0; + } + + .page-nav__list { + display: flex; + flex-direction: column; + } + @media screen and (min-width: 39em) { + .page-nav__list { + flex-direction: row; + justify-content: space-between; + align-items: stretch; + } + .page-nav__list .page-nav__link--prev, .page-nav__list .page-nav__link--start { + margin: auto 0; + } + } + + .page-nav__li { + page-break-inside: avoid; + break-inside: avoid-column; + -webkit-column-break-inside: avoid; + } + @media screen and (min-width: 39em) { + .page-nav__li { + width: 50%; + align-self: stretch; + } + } + + .page-nav__link { + display: flex; + flex-wrap: nowrap; + align-items: center; + height: 100%; + padding: 2rem 1rem; + margin: 0 1rem; + } + @media screen and (min-width: 39em) { + .page-nav__link { + padding: 2rem; + margin: 0; + } + } + .page-nav__link:hover, .page-nav__link:focus, .page-nav__link:active { + background-color: transparent; + } + .page-nav__link:hover .page-nav__title, .page-nav__link:focus .page-nav__title, .page-nav__link:active .page-nav__title { + text-decoration-color: var(--c-text-normal); + } + + .page-nav__link--prev, .page-nav__link--next, .page-nav__link--start { + justify-content: space-between; + text-align: center; + } + + .page-nav__link--start { + visibility: hidden; + display: none; + } + @media screen and (min-width: 39em) { + .page-nav__link--start { + display: flex; + } + } + + .page-nav__link--prev { + flex-flow: row-reverse; + } + .page-nav__link--prev .page-nav__icon--arrow { + text-align: left; + } + @media screen and (min-width: 39em) { + .page-nav__link--prev { + text-align: right; + } + } + + .page-nav__link--next .page-nav__icon--arrow { + text-align: right; + } + @media screen and (min-width: 39em) { + .page-nav__link--next { + text-align: left; + } + } + + .page-nav__title { + display: block; + font-size: 1.915rem; + line-height: 3rem; + margin-top: -0.0171675rem; + padding-bottom: 0.0171675rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-normal); + text-decoration: underline; + text-underline-offset: 0.075em; + text-decoration-thickness: 0.075em; + text-decoration-color: transparent; + } + + .page-nav__icon { + width: 4rem; + height: 3rem; + flex-shrink: 0; + color: var(--c-nav-link); + } + .page-nav__icon .icon--material { + height: 3rem; + width: 3rem; + } + + .page-nav__icon--arrow { + align-self: center; + font-size: 3rem; + padding: 0; + margin: 0; + } + @media screen and (min-width: 39em) { + .page-nav__icon--arrow { + flex: 10; + } + } + + .page-nav__itemcol { + display: block; + width: 4rem; + height: 3rem; + align-self: center; + } + + .page-nav__meta { + display: block; + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.464465rem; + padding-bottom: 0.035535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + color: var(--c-text-low); + } + + .page-nav__meta--dir { + font-weight: 300; + } + + .page-nav__description { + font-size: 1.625rem; + line-height: 2rem; + padding-top: 1.3914375rem; + padding-bottom: 0.6085625rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + } + .page-nav__description strong { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + + @media screen and (min-width: 79em) { + .card-nav--top { + margin-top: -1rem; + } + } + @media screen and (min-width: 79em) { + .card-nav--section { + margin-top: -2rem; + } + } + .card-nav--2 { + max-width: 74rem; + } + .card-nav--3 { + max-width: 111rem; + } + .card-nav--4 { + padding: calc(2rem + 2 * var(--es)) 0rem; + max-width: 100%; + } + .card-nav__list { + display: flex; + align-items: stretch; + flex-direction: row; + flex-wrap: wrap; + } + .card-nav__list--top { + margin-top: -2rem; + } + + .card { + padding: 2rem; + width: 100%; + } + .card .br-cond { + display: none; + } + + .card--half { + width: 50%; + margin-bottom: 1rem; + } + @media screen and (min-width: 39em) { + .card--half { + width: 18.5rem; + } + } + + @media screen and (min-width: 39em) { + .card--1 { + width: 37rem; + } + } + + .card--1--row { + margin-bottom: 0; + } + + /* .card--3halfs { + @media screen and (min-width: bp.$col-2) { + width: 2 * $u-col-g; + } + @media screen and (min-width: bp.$col-3) { + width: 1.5 * $u-col-g; + } + } + + .card--2 { + @media screen and (min-width: bp.$col-2) { + max-width: 2*$u-col-g; + } + @media screen and (min-width: bp.$col-3) { + max-width: 3*$u-col-g; + } + @media screen and (min-width: bp.$col-4) { + max-width: 2*$u-col-g; + margin-bottom: 4rem; + } + + } + + .card--3 { + @media screen and (min-width: bp.$col-2) { + max-width: 3*$u-col-g; + } + } */ + @media screen and (min-width: 39em) { + .card__hover { + display: block; + transition: transform 150ms ease-out; + } + .card__hover:hover, .card__hover:focus, .card__hover:active { + transform: scale(1.075); + transition: transform 150ms ease-in; + } + } + + /* .card__hover--grey { + .img__c { + img, svg { + filter: grayscale(25%) brightness(95%); + stransition: filter, transform, box-shadow; + transition-timing-function: ease-in-out; + transition-duration: t.$nav-hover; + } + } + + &:hover, &:focus, &:active { + .img__c { + img, svg { + filter: grayscale(0%) brightness(100%); + } + } + } + } */ + .card__flex { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + } + + .card__flex--1 .card__content { + flex-grow: 1; + padding: 1.5rem 0; + } + @media screen and (min-width: 39em) { + .card__flex--1 { + flex-direction: column; + justify-content: space-between; + height: 100%; + } + .card__flex--1 .card__content { + padding: 1.5rem 0; + } + } + + /* .card__flex--2 { + flex-direction: row; + + .card__content { + margin: 1.5rem 0 0 0; + } + + @media screen and (min-width: bp.$col-2) { + max-width: 2 * $u-col-g; + margin: 0 1rem; + .card__content { + margin: 2rem 0 0 -1rem; + } + } + @media screen and (min-width: bp.$col-3) { + max-width: 3 * $u-col-g; + } + @media screen and (min-width: bp.$col-4) { + max-width: 2 * $u-col-g; + } + } + + .card__flex--3 { + @media screen and (min-width: bp.$col-3) { + flex-direction: row; + } + } */ + .card__fig { + padding: 0; + } + .card__fig .img__frame { + width: 100%; + height: 100%; + overflow: hidden; + } + .card__fig .img__c--t-symbol svg { + display: block; + margin: 0 auto; + } + + .card__fig--half { + flex-shrink: 0; + width: 14.5rem; + height: 12.5rem; + } + .card__fig--half .img__frame:has(.img__c--t-symbol) { + padding: 1rem; + } + .card__fig--half .img__c--t-symbol { + width: 12.5rem; + height: 10.5rem; + } + + .card__fig--1 { + flex-shrink: 0; + width: 7.25rem; + height: 4.8333575rem; + margin-right: 1px; + } + .card__fig--1 .img__frame:has(.img__c--t-symbol) { + padding: 0.5rem; + } + .card__fig--1 .img__c--t-symbol { + width: 6.25rem; + height: 3.83333575rem; + } + @media screen and (min-width: 25em) { + .card__fig--1 { + flex-shrink: 0; + width: 14.5rem; + height: 9.666715rem; + } + .card__fig--1 .img__frame:has(.img__c--t-symbol) { + padding: 1rem; + } + .card__fig--1 .img__c--t-symbol { + width: 12.5rem; + height: 7.6666715rem; + } + } + @media screen and (min-width: 39em) { + .card__fig--1 { + width: 33rem; + height: 22.000011rem; + padding: 0; + margin-right: 0; + } + .card__fig--1 .img__frame:has(.img__c--t-symbol) { + padding: 2rem; + } + .card__fig--1 .img__c--t-symbol { + width: 29rem; + height: 18.000011rem; + } + } + + .card__title { + margin: 0 2rem; + font-size: 1.915rem; + line-height: 2rem; + padding-top: 0.7828325rem; + padding-bottom: 0.2171675rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.01em; + word-spacing: 0.03em; + text-decoration-color: transparent; + } + + .card__title--top { + margin-top: 1rem; + } + + .card__title--half { + display: inline-block; + margin-bottom: 0; + font-size: 1.5015rem; + line-height: 1.5rem; + padding-top: 0.18768825rem; + padding-bottom: 0.31231175rem; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + + .card__title--small .title__link { + font-size: 1.43rem; + line-height: 1.75rem; + padding-top: 0.589465rem; + padding-bottom: 0.660535rem; + letter-spacing: 0.02em; + word-spacing: 0.06em; + } + + .card__content { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + background-color: var(--c-bg-2); + box-shadow: 0 0 0 1px var(--c-shadow-3); + padding: 1rem 0; + } + + .card__footer { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + padding: 1rem 2rem 0 1.5rem; + } + .card__footer .link { + display: inline-block; + width: 9rem; + height: 3rem; + margin: 0.5rem 0; + text-align: center; + color: #fff; + fill: #fff; + border-radius: 1.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + } + .card__footer .link:hover, .card__footer .link:focus { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); + } + .card__footer .link--doc { + background: var(--cbg-doc-button); + } + .card__footer .link--blog { + background: var(--cbg-blog-button); + } + .card__footer .link--news { + background: var(--cbg-news-button); + } + + .sidebar-box { + margin-top: -1rem; + } + @media screen and (min-width: 79em) { + .sidebar-box { + scrollbar-gutter: stable; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); + } + .sidebar-box::-webkit-scrollbar { + width: 1rem; + height: 1rem; + } + .sidebar-box::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); + } + .sidebar-box::-webkit-scrollbar-track { + background: var(--c-bg-3); + } + } + + .sidebar { + height: 100%; + width: 100%; + padding: 0.5rem 2rem 3rem 2rem; + } + @media screen and (min-width: 79em) { + .sidebar { + width: 34rem; + } + } + + .sidebar__title { + display: inline-block; + font-size: 1.905rem; + line-height: 2rem; + padding-top: 1.2865775rem; + padding-bottom: 0.7134225rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + } + @media screen and (min-width: 79em) { + .sidebar__title { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 1.464465rem; + padding-bottom: 0.535535rem; + } + } + + .sidebar__list--1 { + padding-bottom: calc(1rem + 1 * var(--es)); + } + .sidebar__list--1 .sidebar__text { + padding-left: 2rem; + } + + .sidebar__list--2 .sidebar__text, .sidebar__list--3 .sidebar__text { + padding-left: 1rem; + } + + .sidebar__list--2 { + margin-left: 4.5rem; + } + + .sidebar__list--3 { + margin-left: 3.5rem; + } + + .sidebar__item { + position: relative; + border-bottom: 0.1rem solid var(--c-shadow-2); + } + .sidebar__item:last-child { + border-bottom-color: transparent; + } + @media screen and (min-width: 79em) { + .sidebar__item { + border-bottom-color: transparent; + } + } + + .items-have-no-children { + display: block; + column-count: 3; + column-width: 15rem; + padding-bottom: 1rem; + } + .items-have-no-children .sidebar__item { + padding-bottom: 0; + border-bottom-color: transparent; + } + .items-have-no-children .sidebar__link, .items-have-no-children .sidebar__open, .items-have-no-children .sidebar__chk { + margin: 0.5rem 0 0.4rem 0; + } + @media screen and (min-width: 79em) { + .items-have-no-children { + column-count: 1; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + } + } + + .sidebar__link, .sidebar__open, .sidebar__chk { + display: inline-flex; + align-items: center; + margin: 1rem 0 0.9rem 0; + } + @media screen and (min-width: 79em) { + .sidebar__link, .sidebar__open, .sidebar__chk { + margin: 0.5rem 0 0.4rem 0; + } + } + + .sidebar__link:hover, .sidebar__link:focus, .sidebar__link.is-active { + background-color: transparent; + } + .sidebar__link:hover .sidebar__text, .sidebar__link:focus .sidebar__text, .sidebar__link.is-active .sidebar__text { + --shadow: --c-shadow-3; + color: #fff; + } + + .sidebar__text { + align-self: stretch; + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.814465rem; + padding-bottom: 0.685535rem; + color: var(--c-frame-text-low); + } + + .sidebar__chk, .sidebar__open { + z-index: 10; + position: absolute; + right: 0; + width: 3rem; + height: 3rem; + } + + .sidebar__open { + cursor: pointer; + user-select: none; + -webkit-tap-highlight-color: transparent; + } + .sidebar__open > .icon { + position: static; + } + .sidebar__open > .icon:after { + display: inline-block; + height: 3rem; + width: 3rem; + background-color: var(--c-frame-text-low); + content: ""; + mask-size: cover; + -webkit-mask-size: cover; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); + } + + .sidebar__chk { + appearance: none; + } + .sidebar__chk ~ ul { + display: none; + height: 0; + } + .sidebar__chk:checked ~ ul { + display: block; + height: 100%; + } + .sidebar__chk:checked ~ .sidebar__open > .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); + } + + .has-active > .sidebar__chk ~ ul { + display: block; + height: 100%; + } + .has-active > .sidebar__chk ~ .sidebar__open > span:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); + } + .has-active > .sidebar__chk:checked ~ ul { + display: none; + height: 0; + } + .has-active > .sidebar__chk:checked ~ .sidebar__open > span:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); + } + + li:empty { + display: none; + } + li:empty:before { + display: none; + } + + #toc { + display: block; + position: absolute; + top: calc(var(--tnh) + 1rem); + right: 0; + width: 33rem; + max-height: calc(100vh - var(--tnh) - 2 * 3rem - 4rem); + box-shadow: 0 0 0 0.25rem var(--c-shadow-2); + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: none; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); + } + #toc::-webkit-scrollbar { + width: 1rem; + height: 1rem; + } + #toc::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); + } + #toc::-webkit-scrollbar-track { + background: var(--c-bg-3); + } + #toc.is-closed { + display: none; + } + @media screen and (min-width: 39em) { + #toc { + top: calc(var(--tnh) + var(--tg) + 1rem); + grid-area: control; + right: 2rem; + } + } + @media screen and (min-width: 120em) { + #toc { + right: -35rem; + } + #toc.is-closed { + display: block; + } + } + + .toc__box { + padding: 1rem; + background: var(--c-frame); + } + + .toc__list { + font-size: 1.684375rem; + line-height: 2rem; + padding-top: 0.3692015625rem; + padding-bottom: 0.6307984375rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 500; + letter-spacing: 0.01em; + word-spacing: 0.03em; + color: var(--c-frame-text-medium); + } + .toc__list .br-cond { + display: none; + } + .toc__list a { + display: block; + padding: 0.5rem 0 0.5rem 1.5rem; + border-left: 0.5rem solid #555; + } + .toc__list a .text { + background-color: transparent; + } + .toc__list a:hover, .toc__list a:focus { + color: #fff; + border-color: var(--c-frame-border-active); + } + .toc__list a:hover .icon-font, .toc__list a:focus .icon-font { + color: var(--c-frame-border-active); + } + .toc__list a:hover path, .toc__list a:focus path { + fill: var(--c-frame-border-active); + } + .toc__list li li a { + padding-left: 3rem; + } + .toc__list li li li a { + padding-left: 4.5rem; + } + @media screen and (min-width: 79em) { + .toc__list { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + margin-bottom: -0.464465rem; + } + } + + .toc__title a { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.05em; + word-spacing: 0.15em; + text-transform: uppercase; + color: #fff; + } + + @media screen and (min-width: 79em) { + .taxo--left { + position: absolute; + top: 37rem; + left: 0; + z-index: 5; + margin-top: 1rem; + padding-top: 0; + width: 37rem; + } + } + + .taxo__list { + display: flex; + flex-direction: column; + } + @media screen and (min-width: 39em) { + .taxo__list { + flex-direction: row; + flex-wrap: wrap; + } + } + + .taxo__item { + padding: 1rem 1.5rem; + } + @media screen and (min-width: 39em) { + .taxo__item { + width: 37rem; + } + } + + .taxo-title { + color: var(--c-nav-link-hover); + } + + .taxo-shape--category { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + } + .taxo-shape--tag { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + .taxo-shape--series { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + font-style: italic; + } + + .pagefind-ui-box { + max-width: 74rem; + } + @media screen and (min-width: 79em) { + .pagefind-ui-box { + margin-left: 37rem; + } + } + + .pagefind-ui { + margin: 2rem; + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + padding-bottom: 0.222785rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + } + .pagefind-ui__form { + position: relative; + } + .pagefind-ui__search-input { + padding-left: 2rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 500; + font-size: inherit; + background-color: var(--c-bg-3); + border: 1px solid var(--c-shadow-3); + height: 5rem; + width: 100%; + } + .pagefind-ui__search-clear { + position: absolute; + z-index: 10; + top: 1rem; + right: 0; + width: 7rem; + background: none; + } + .pagefind-ui__message { + padding: calc(1rem + 1 * var(--es)) 0rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + } + .pagefind-ui__result { + display: inline-flex; + flex-direction: row; + padding: calc(0.9rem + 1 * var(--es)) 0 calc(1rem + 1 * var(--es)) 0; + border-top: 0.1rem solid var(--c-shadow-3); + } + .pagefind-ui__result-thumb { + display: block; + flex-shrink: 0; + align-self: auto; + margin: 1rem 2rem 0 0; + } + @media screen and (min-width: 39em) { + .pagefind-ui__result-thumb { + margin: 1rem 4rem 0 0; + } + } + .pagefind-ui__result-image { + display: block; + width: 7.25rem; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + height: 4.833575rem; + object-fit: cover; + } + @media screen and (min-width: 39em) { + .pagefind-ui__result-image { + width: 14.5rem; + height: 9.66715rem; + } + } + .pagefind-ui__result-title { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + } + .pagefind-ui__result-excerpt { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + } + .pagefind-ui__button { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + font-size: inherit; + border: 1px solid var(--c-shadow-3); + border-radius: 0.5rem; + height: 5rem; + width: 100%; + } + + .clear:before, + .clear:after { + content: " "; /* 1 */ + display: table; /* 2 */ + } + + .clear:after { + clear: both; + } + + .font-italic { + font-style: italic; + } + + .font-normal { + font-style: normal; + } + + .sr-only { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + } + + .hide { + display: none !important; + } + + @media screen and (max-width: 39em) { + .hide-mobile { + display: none !important; + } + } + + @media screen and (min-width: 39em) { + .hide2 { + display: none !important; + } + } + + @media screen and (max-width: 39em) { + .show2 { + display: none !important; + } + } + + @media screen and (min-width: 48em) { + .hide3 { + display: none !important; + } + } + + @media screen and (max-width: 48em) { + .show3 { + display: none !important; + } + } + + @media screen and (min-width: 79em) { + .hide4 { + display: none !important; + } + } + + @media screen and (max-width: 79em) { + .show4 { + display: none !important; + } + } + + @media screen and (min-width: 120em) { + .hide6 { + display: none !important; + } + } + + @media screen and (max-width: 120em) { + .show6 { + display: none !important; + } + } + + .mt05 { + margin-top: 0.5rem; + } + + .mt1 { + margin-top: 1rem; + } + + .mt2 { + margin-top: 2rem; + } + + .mt3 { + margin-top: 3rem; + } + + .mt-05 { + margin-top: -0.5rem; + } + + .mt-1 { + margin-top: -1rem; + } + + .mb05 { + margin-bottom: 0.5rem !important; + } + + .mb1 { + margin-bottom: 1rem !important; + } + + .mb2 { + margin-bottom: 2rem !important; + } + + .mb3 { + margin-bottom: 3rem !important; + } \ No newline at end of file diff --git a/exampleSite/content/authors/georg-makowski/_index.md b/exampleSite/content/de/authors/georg-makowski/_index.md similarity index 100% rename from exampleSite/content/authors/georg-makowski/_index.md rename to exampleSite/content/de/authors/georg-makowski/_index.md diff --git a/exampleSite/content/blog/_index.md b/exampleSite/content/de/blog/_index.md similarity index 100% rename from exampleSite/content/blog/_index.md rename to exampleSite/content/de/blog/_index.md diff --git a/exampleSite/content/blog/accessibility-of-fluid-typography/index.md b/exampleSite/content/de/blog/accessibility-of-fluid-typography/index.md similarity index 100% rename from exampleSite/content/blog/accessibility-of-fluid-typography/index.md rename to exampleSite/content/de/blog/accessibility-of-fluid-typography/index.md diff --git a/exampleSite/content/blog/codelayout/index.md b/exampleSite/content/de/blog/codelayout/index.md similarity index 100% rename from exampleSite/content/blog/codelayout/index.md rename to exampleSite/content/de/blog/codelayout/index.md diff --git a/exampleSite/content/blog/image/embed/index.md b/exampleSite/content/de/blog/image/embed/index.md similarity index 100% rename from exampleSite/content/blog/image/embed/index.md rename to exampleSite/content/de/blog/image/embed/index.md diff --git a/exampleSite/content/blog/image/standalone/index.md b/exampleSite/content/de/blog/image/standalone/index.md similarity index 100% rename from exampleSite/content/blog/image/standalone/index.md rename to exampleSite/content/de/blog/image/standalone/index.md diff --git a/exampleSite/content/blog/marginal-note/index.md b/exampleSite/content/de/blog/marginal-note/index.md similarity index 100% rename from exampleSite/content/blog/marginal-note/index.md rename to exampleSite/content/de/blog/marginal-note/index.md diff --git a/exampleSite/content/categories/_index.md b/exampleSite/content/de/categories/_index.md similarity index 100% rename from exampleSite/content/categories/_index.md rename to exampleSite/content/de/categories/_index.md diff --git a/exampleSite/content/categories/design/_index.md b/exampleSite/content/de/categories/design/_index.md similarity index 100% rename from exampleSite/content/categories/design/_index.md rename to exampleSite/content/de/categories/design/_index.md diff --git a/exampleSite/content/categories/markdown/_index.md b/exampleSite/content/de/categories/markdown/_index.md similarity index 100% rename from exampleSite/content/categories/markdown/_index.md rename to exampleSite/content/de/categories/markdown/_index.md diff --git a/exampleSite/content/categories/module/_index.md b/exampleSite/content/de/categories/module/_index.md similarity index 100% rename from exampleSite/content/categories/module/_index.md rename to exampleSite/content/de/categories/module/_index.md diff --git a/exampleSite/content/categories/overview/_index.md b/exampleSite/content/de/categories/overview/_index.md similarity index 100% rename from exampleSite/content/categories/overview/_index.md rename to exampleSite/content/de/categories/overview/_index.md diff --git a/exampleSite/content/categories/release/_index.md b/exampleSite/content/de/categories/release/_index.md similarity index 100% rename from exampleSite/content/categories/release/_index.md rename to exampleSite/content/de/categories/release/_index.md diff --git a/exampleSite/content/doc/_index.md b/exampleSite/content/de/doc/_index.md similarity index 100% rename from exampleSite/content/doc/_index.md rename to exampleSite/content/de/doc/_index.md diff --git a/exampleSite/content/doc/overview/_index.md b/exampleSite/content/de/doc/overview/_index.md similarity index 100% rename from exampleSite/content/doc/overview/_index.md rename to exampleSite/content/de/doc/overview/_index.md diff --git a/exampleSite/content/doc/overview/coming/index.md b/exampleSite/content/de/doc/overview/coming/index.md similarity index 100% rename from exampleSite/content/doc/overview/coming/index.md rename to exampleSite/content/de/doc/overview/coming/index.md diff --git a/exampleSite/content/doc/overview/concept/index.md b/exampleSite/content/de/doc/overview/concept/index.md similarity index 100% rename from exampleSite/content/doc/overview/concept/index.md rename to exampleSite/content/de/doc/overview/concept/index.md diff --git a/exampleSite/content/doc/overview/features/index.md b/exampleSite/content/de/doc/overview/features/index.md similarity index 100% rename from exampleSite/content/doc/overview/features/index.md rename to exampleSite/content/de/doc/overview/features/index.md diff --git a/exampleSite/content/doc/overview/markdown/index.md b/exampleSite/content/de/doc/overview/markdown/index.md similarity index 100% rename from exampleSite/content/doc/overview/markdown/index.md rename to exampleSite/content/de/doc/overview/markdown/index.md diff --git a/exampleSite/content/de/news/_index.md b/exampleSite/content/de/news/_index.md new file mode 100644 index 000000000..7a6258d48 --- /dev/null +++ b/exampleSite/content/de/news/_index.md @@ -0,0 +1,15 @@ +--- +title: News +description: Short postings and announcements +subtitle: false +date: 2022-02-12T13:35:18+01:00 +menu: + main: + name: News + identifier: stream + weight: 10 +cascade: + toc: false +math: true +mermaid: true +--- diff --git a/exampleSite/content/news/dark-mode/index.md b/exampleSite/content/de/news/dark-mode/index.md similarity index 100% rename from exampleSite/content/news/dark-mode/index.md rename to exampleSite/content/de/news/dark-mode/index.md diff --git a/exampleSite/content/news/first-release/index.md b/exampleSite/content/de/news/first-release/index.md similarity index 100% rename from exampleSite/content/news/first-release/index.md rename to exampleSite/content/de/news/first-release/index.md diff --git a/exampleSite/content/de/news/open-in-vscode/index.md b/exampleSite/content/de/news/open-in-vscode/index.md new file mode 100644 index 000000000..ab4c9855f --- /dev/null +++ b/exampleSite/content/de/news/open-in-vscode/index.md @@ -0,0 +1,47 @@ +--- +authors: [Georg Makowski] +title: Open files in VSCode{/}from Hugo’s server preview +linktitle: Open VSCode from server mode +date: 2023-03-31T00:44:36+02:00 +categories: [module] +tags: [vscode, hugo] +--- + +Two short partials create a link to open the content file{/}of the current page in Hugo’s server mode. +{.p-first} + + +The first one renders the opening anchor tag with the VSCode link, the second one places the closing tag. The tags are generated only if Hugo runs in server mode and if a local file is present. + +## {$vscode_start.html} + +```go-html-template {.inline} +{{- if .Site.IsServer -}} + {{- with .File -}} + {{- $path := print "vscode://file" .Filename -}} + + {{- end -}} +{{- end -}}{{- /**/ -}} +``` + +{{< mnote >}} +**If and only if** Hugo’s server is configured to deliver the preview to a public IP address, there may be a security concern with `.Filename`. The link shows the full path to the content files. But by default, Hugo’s preview server only responds on {$localhost}. It is **not meant** to act as a public server. +{{< /mnote >}} + +## {$vscode_end.html} + +```go-html-template +{{ if .Site.IsServer }} + {{- with .File }} + + {{- end }} +{{ end }}{{- /**/ -}} +``` + +## How to apply these partials + +You can copy-paste these small snippets into your project, there is no need for a citation or something. The core functionality stems from [VSCode](https://code.visualstudio.com/docs/editor/command-line#_opening-vs-code-with-urls). + +The partials are also available as an Apache-licensed module: [{$hugo-mod-open-in-vscode}](https://github.com/bowman2001/hugo-mod-open-in-vscode). This is the better option if you’re interested in possible updates. + +The Perplex theme places them around the publishing date or --- in case there is none --- around the title. diff --git a/exampleSite/content/news/replacements-module/index.md b/exampleSite/content/de/news/replacements-module/index.md similarity index 100% rename from exampleSite/content/news/replacements-module/index.md rename to exampleSite/content/de/news/replacements-module/index.md diff --git a/exampleSite/content/news/resources-in-data-files/index.md b/exampleSite/content/de/news/resources-in-data-files/index.md similarity index 100% rename from exampleSite/content/news/resources-in-data-files/index.md rename to exampleSite/content/de/news/resources-in-data-files/index.md diff --git a/exampleSite/content/news/search/index.md b/exampleSite/content/de/news/search/index.md similarity index 100% rename from exampleSite/content/news/search/index.md rename to exampleSite/content/de/news/search/index.md diff --git a/exampleSite/content/news/second-beta/index.md b/exampleSite/content/de/news/second-beta/index.md similarity index 100% rename from exampleSite/content/news/second-beta/index.md rename to exampleSite/content/de/news/second-beta/index.md diff --git a/exampleSite/content/search/index.md b/exampleSite/content/de/search/index.md similarity index 100% rename from exampleSite/content/search/index.md rename to exampleSite/content/de/search/index.md diff --git a/exampleSite/content/site/_index.md b/exampleSite/content/de/site/_index.md similarity index 100% rename from exampleSite/content/site/_index.md rename to exampleSite/content/de/site/_index.md diff --git a/exampleSite/content/tags/_index.md b/exampleSite/content/de/tags/_index.md similarity index 100% rename from exampleSite/content/tags/_index.md rename to exampleSite/content/de/tags/_index.md diff --git a/exampleSite/content/tags/accessible/_index.md b/exampleSite/content/de/tags/accessible/_index.md similarity index 100% rename from exampleSite/content/tags/accessible/_index.md rename to exampleSite/content/de/tags/accessible/_index.md diff --git a/exampleSite/content/tags/author/_index.md b/exampleSite/content/de/tags/author/_index.md similarity index 100% rename from exampleSite/content/tags/author/_index.md rename to exampleSite/content/de/tags/author/_index.md diff --git a/exampleSite/content/tags/block/_index.md b/exampleSite/content/de/tags/block/_index.md similarity index 100% rename from exampleSite/content/tags/block/_index.md rename to exampleSite/content/de/tags/block/_index.md diff --git a/exampleSite/content/tags/code/_index.md b/exampleSite/content/de/tags/code/_index.md similarity index 100% rename from exampleSite/content/tags/code/_index.md rename to exampleSite/content/de/tags/code/_index.md diff --git a/exampleSite/content/tags/feature/_index.md b/exampleSite/content/de/tags/feature/_index.md similarity index 100% rename from exampleSite/content/tags/feature/_index.md rename to exampleSite/content/de/tags/feature/_index.md diff --git a/exampleSite/content/tags/fluid-responsive/_index.md b/exampleSite/content/de/tags/fluid-responsive/_index.md similarity index 100% rename from exampleSite/content/tags/fluid-responsive/_index.md rename to exampleSite/content/de/tags/fluid-responsive/_index.md diff --git a/exampleSite/content/tags/hugo/_index.md b/exampleSite/content/de/tags/hugo/_index.md similarity index 100% rename from exampleSite/content/tags/hugo/_index.md rename to exampleSite/content/de/tags/hugo/_index.md diff --git a/exampleSite/content/tags/image/_index.md b/exampleSite/content/de/tags/image/_index.md similarity index 100% rename from exampleSite/content/tags/image/_index.md rename to exampleSite/content/de/tags/image/_index.md diff --git a/exampleSite/content/tags/inline/_index.md b/exampleSite/content/de/tags/inline/_index.md similarity index 100% rename from exampleSite/content/tags/inline/_index.md rename to exampleSite/content/de/tags/inline/_index.md diff --git a/exampleSite/content/tags/marginal-note/_index.md b/exampleSite/content/de/tags/marginal-note/_index.md similarity index 100% rename from exampleSite/content/tags/marginal-note/_index.md rename to exampleSite/content/de/tags/marginal-note/_index.md diff --git a/exampleSite/content/tags/replacement/_index.md b/exampleSite/content/de/tags/replacement/_index.md similarity index 100% rename from exampleSite/content/tags/replacement/_index.md rename to exampleSite/content/de/tags/replacement/_index.md diff --git a/exampleSite/content/tags/resources/_index.md b/exampleSite/content/de/tags/resources/_index.md similarity index 100% rename from exampleSite/content/tags/resources/_index.md rename to exampleSite/content/de/tags/resources/_index.md diff --git a/exampleSite/content/tags/search/_index.md b/exampleSite/content/de/tags/search/_index.md similarity index 100% rename from exampleSite/content/tags/search/_index.md rename to exampleSite/content/de/tags/search/_index.md diff --git a/exampleSite/content/tags/stand-alone/_index.md b/exampleSite/content/de/tags/stand-alone/_index.md similarity index 100% rename from exampleSite/content/tags/stand-alone/_index.md rename to exampleSite/content/de/tags/stand-alone/_index.md diff --git a/exampleSite/content/tags/vscode/_index.md b/exampleSite/content/de/tags/vscode/_index.md similarity index 100% rename from exampleSite/content/tags/vscode/_index.md rename to exampleSite/content/de/tags/vscode/_index.md diff --git a/exampleSite/content/authors/georg-makowski/Joerg_Makowski.jpg b/exampleSite/content/en/authors/georg-makowski/Joerg_Makowski.jpg similarity index 100% rename from exampleSite/content/authors/georg-makowski/Joerg_Makowski.jpg rename to exampleSite/content/en/authors/georg-makowski/Joerg_Makowski.jpg diff --git a/exampleSite/content/authors/georg-makowski/Joerg_Makowski2.jpg b/exampleSite/content/en/authors/georg-makowski/Joerg_Makowski2.jpg similarity index 100% rename from exampleSite/content/authors/georg-makowski/Joerg_Makowski2.jpg rename to exampleSite/content/en/authors/georg-makowski/Joerg_Makowski2.jpg diff --git a/exampleSite/content/en/authors/georg-makowski/_index.md b/exampleSite/content/en/authors/georg-makowski/_index.md new file mode 100644 index 000000000..ebe62b5e1 --- /dev/null +++ b/exampleSite/content/en/authors/georg-makowski/_index.md @@ -0,0 +1,63 @@ +--- +title: Georg Makowski +description: "Web designer" +subtitle: true +date: 2023-04-25T14:53:30+02:00 +menu: + main: + name: About + weight: 100 +follow_icons: +- name: GitHub + icon: github + url: "https://github.com/bowman2001" +- name: Twitter + icon: twitter + url: "https://twitter.com/GeorgMakowski" +contact_icons: +- name: KeyBase + icon: keybase + url: "https://keybase.io/bowman2001" +- name: Email + icon: gmail + url: "mailto:gm@desider.at" +resources: +- src: Joerg_Makowski.jpg + name: featured + params: + alt: Georg Makowski + attr: Elisa Makowski + attrlink: "http://elisa-makowski.de" + anchor: Top +- src: small_portrait.jpg + name: portrait + params: + alt: Georg Makowski +--- + +Front-end developer[^1] specializing in typographic layout & SSG. +{.p-first} + + +I’m engaged in web publishing. My focus lies on a consistent layout and optimal legibility. I’m developing fluid-responsive designs because they can integrate many achievements of classic typographic page design on all kinds of screens --- from mobile phones up to high density monitors. + +Baseline grids and evenly spaced columns bear many fruits when the layout proportions are at least partially fixed like on physical pages. My fluid-responsive templates contain a few layout versions and each one beyond mobile preserves fixed proportions between its breakpoints. I can offer outstanding layout flows and details on very fast-loading pages. + +[^1]: I’ve got an advanced degree in physics (diploma thesis in the field of applied non-linear dynamics, minor field: IT). + +**C**ascading **S**tyle **S**heets +: are my main field of expertise. Style sheets are a collection of mechanisms to add fonts and styling to a web document. They’re not a consistent programming language and every rigorous system reducing their complexity for the sake of technical maintainability tends to diminish their capabilities. + + I don’t follow one CSS methodology on my projects and combine particular achievements of {=SMACSS}, {=BEM}, and {=OOCSS}. Similarly, I use {=SASS} and {=PostCSS} to simplify and optimize the style sheet generation. + +Markdown +: is a very popular heuristic markup system to structure text files. Because Markdown has been derived from intuitive markup habits in early text forums and emails it's overly simplistic. I’m an expert in enriching and styling the resulting HTML. + +Hugo +: I’ve been using this reliable engine since version {$0.18} to build fast static websites that require minimal maintenance. When Markdown attributes became available in version {$0.86} I started to dive deep into Markdown styling. I’ve been constantly following Hugo’s growing capabilities and have become a proficient template programmer. + +Javascript +: I have experience with vanilla Javascript, Typescript, and Node. I like to progressively enhance static sites following the JAMStack concept. +{.dl-loose} + +I’m also a writer and speaker (in German) with a focus on the epistemology of the natural sciences, and a lecturer at the University of Applied Sciences{/}in Frankfurt. diff --git a/exampleSite/content/authors/georg-makowski/small_portrait.jpg b/exampleSite/content/en/authors/georg-makowski/small_portrait.jpg similarity index 100% rename from exampleSite/content/authors/georg-makowski/small_portrait.jpg rename to exampleSite/content/en/authors/georg-makowski/small_portrait.jpg diff --git a/exampleSite/content/en/blog/_index.md b/exampleSite/content/en/blog/_index.md new file mode 100644 index 000000000..be348ac02 --- /dev/null +++ b/exampleSite/content/en/blog/_index.md @@ -0,0 +1,11 @@ +--- +title: Blog +description: List of blog postings +subtitle: false +date: 2022-02-12T13:35:18+01:00 +menu: + main: + name: Blog + identifier: blog + weight: 30 +--- diff --git a/exampleSite/content/en/blog/accessibility-of-fluid-typography/index.md b/exampleSite/content/en/blog/accessibility-of-fluid-typography/index.md new file mode 100644 index 000000000..dce7392b0 --- /dev/null +++ b/exampleSite/content/en/blog/accessibility-of-fluid-typography/index.md @@ -0,0 +1,37 @@ +--- +authors: [Georg Makowski] +title: Accessible fluid Design +description: Accessibility is one advantage of this type of design +date: 2022-07-12T22:38:10+02:00 +categories: [design] +tags: [accessible, fluid responsive] +resources: +- name: fluid + src: resource-database--R7raVu_isU-unsplash.jpg + params: + alt: Fluid frame +--- + +Websites with a fluid-responsive design can be especially user-friendly and accessible. This site is an example. +{.p-first} + + +![](fluid?ph=left&w=tiny) + +Fluid sizes solely depend on the width of the browser window or the view-port width of the mobile device. When a user changes the zoom factor of his browser or his device, they are not affected at all. ⇒ That’s the problem with fixed fluid sizes. + +The solution is obvious: We need to change fluid sizes accordingly when we change the layout responsively. + +Just give it a try with {~Ctrl} + {~+} and {~Ctrl} + {~-} or the zoom setting of your desktop browser. You may have to take a few zooming steps, before the layout changes. +{.p-big} + +Fluid sizes and especially fluid fonts are not suitable for every screen width. For various reasons, we shouldn’t deviate too much from the default browser font size on mobile devices. + +Fluid-responsive design is most beneficial on larger screens --- tablet sizes and up. Breakpoints depending on the ‘em’-unit allow fitting our fluid text precisely into the changing fluid variants of our responsive layout. On large desktop screens, we need to stop the fluidity again, because their height is usually more restricted than their width, and the fonts shouldn’t get too large. +{.inline} + +{{< mnote >}} +The CSS function {$clamp} has been introduced to allow a single view-port dependent size within min-max constraints. + +For a layout with different fluid states like this one two constraints aren’t enough and breakpoints are the only way to go. +{{< /mnote >}} diff --git a/exampleSite/content/blog/accessibility-of-fluid-typography/resource-database--R7raVu_isU-unsplash.jpg b/exampleSite/content/en/blog/accessibility-of-fluid-typography/resource-database--R7raVu_isU-unsplash.jpg similarity index 100% rename from exampleSite/content/blog/accessibility-of-fluid-typography/resource-database--R7raVu_isU-unsplash.jpg rename to exampleSite/content/en/blog/accessibility-of-fluid-typography/resource-database--R7raVu_isU-unsplash.jpg diff --git a/exampleSite/content/en/blog/codelayout/index.md b/exampleSite/content/en/blog/codelayout/index.md new file mode 100644 index 000000000..c1171eb39 --- /dev/null +++ b/exampleSite/content/en/blog/codelayout/index.md @@ -0,0 +1,123 @@ +--- +authors: [Georg Makowski] +title: Code Block Layout Demo +description: Code Blocks on full width pages (without sidebar) +linktitle: Code Demo +date: 2022-11-01T14:54:07+01:00 +categories: [markdown] +tags: [code, block] +series: [demo] +--- + +On large screens, code blocks expand into the margins as long as possible and may include up to {$160} characters in one line. +{.p-first} + +This is a layout demonstration for pages without a sidebar. The docs contain the [syntax options](https://perplex.desider.at/doc/basic/code). + +## Default + +```md +The HTML tag at the **beginning** of code is ``. +And to mark the **end** we use the corresponding closing tag ``. +``` + +## With line numbers + +```md {linenos=true} +The HTML tag at the **beginning** of code is ``. +And to mark the **end** we use the corresponding closing tag ``. +``` + +## Long lines + +```go {.expand} +// NodeRendererFunc is a function that renders a given node. +type NodeRendererFunc func(writer util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) + +// A NodeRenderer interface offers NodeRendererFuncs. +type NodeRenderer interface { + // RendererFuncs registers NodeRendererFuncs to given NodeRendererFuncRegisterer. + RegisterFuncs(NodeRendererFuncRegisterer) +} +``` + +## Short lines + +```json {.left} +{ + "firstName": "John", + "lastName": "Smith", + "age": 35, + "profession": "Last Man Standing" +} +``` + +{{% pangram 7 %}} +{.placeholder data-pagefind-ignore="all"} + +```bash {.lh15 .right} +├── archetypes +├── assets +├── content +├── data +└── themes +``` + +{{% pangram 7 %}} +{.placeholder data-pagefind-ignore="all"} + +```json {.left-in-half} +{ + "firstName": "John", + "lastName": "Smith", + "age": 35, + "profession": "Last Man Standing" +} +``` + +{{% pangram 5 %}} +{.placeholder data-pagefind-ignore="all"} + +```bash {.lh15 .right-in-half} +├── archetypes +├── assets +├── content +├── data +└── themes +``` + +{{% pangram 5 %}} +{.placeholder data-pagefind-ignore="all"} + + +```json {.left-in} +{ + "firstName": "John", + "lastName": "Smith", + "age": 35, + "profession": "Last Man Standing" +} +``` + +{{% pangram 7 %}} +{.placeholder data-pagefind-ignore="all"} + +```bash {.lh15 .right-in} +├── archetypes +├── assets +├── content +├── data +└── themes +``` + +{{% pangram 7 %}} +{.placeholder data-pagefind-ignore="all"} + +## In lists + +- List entries are indented and code blocks fit inside. + + ```md + The HTML tag at the **beginning** of code is ``. + And to mark the **end** we use the corresponding closing tag ``. + ``` \ No newline at end of file diff --git a/exampleSite/content/blog/codelayout/markus-spiske-1LLh8k2_YFk-unsplash.jpg b/exampleSite/content/en/blog/codelayout/markus-spiske-1LLh8k2_YFk-unsplash.jpg similarity index 100% rename from exampleSite/content/blog/codelayout/markus-spiske-1LLh8k2_YFk-unsplash.jpg rename to exampleSite/content/en/blog/codelayout/markus-spiske-1LLh8k2_YFk-unsplash.jpg diff --git a/exampleSite/content/en/blog/image/embed/index.md b/exampleSite/content/en/blog/image/embed/index.md new file mode 100644 index 000000000..f46d74be5 --- /dev/null +++ b/exampleSite/content/en/blog/image/embed/index.md @@ -0,0 +1,124 @@ +--- +authors: [Georg Makowski] +title: Embedded images +description: Demo for enhanced inline images +subtitle: false +featured: micro +date: 2023-03-23T10:10:51+01:00 +categories: [markdown] +tags: [image, embedded] +series: [images] +--- + +Demo for the layout options of enhanced embedded images. +{.p-first} + + +The documentation of the Markdown syntax is filed under [basic image](https://perplex.desider.at/doc/basic/image) and [enhanced image](https://perplex.desider.at/doc/enhancing/image/syntax). The [concept demo](https://perplex.desider.at/doc/enhancing/image/embed) contains width parameters. + +## At the beginning of a text block + +### Small width (default) + +![](small-left?anchor=Center) {{% pangram 15 %}} +{.placeholder data-pagefind-ignore="all"} + +![](small-right) {{% pangram 15 %}} +{.placeholder data-pagefind-ignore="all"} + +### Tiny width + +![](tiny-left) {{% pangram 15 %}} +{.placeholder data-pagefind-ignore="all"} + +![](tiny-right) {{% pangram 15 %}} +{.placeholder data-pagefind-ignore="all"} + +### Micro width + +![](micro) {{% pangram 9 %}} +{.placeholder data-pagefind-ignore="all"} + +![](micro?ph=right) {{% pangram 9 %}} +{.placeholder data-pagefind-ignore="all"} + +## In the middle of a text block + +Small and tiny images need some additional spacing when they are placed in the middle of a text block: + +{{% pangram 4 %}} ![](small-left?pv=middle) {{% pangram 6 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 8 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 4 %}} ![](small-right?pv=middle) {{% pangram 6 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 8 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 4 %}} ![](tiny-left?pv=middle) {{% pangram 6 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 8 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 4 %}} ![](tiny-right?pv=middle) {{% pangram 6 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 8 %}} +{.placeholder data-pagefind-ignore="all"} + +## In lists + +Embedded images always scale to a fixed percentage of the containing text width. + +### Micro width + +1. ![](micro) {{% pangram 4 %}} + + 1. ![](micro?posh=right) {{% pangram 4 %}} + + 2. ![](micro) {{% pangram 4 %}} + +2. {{% pangram 2 %}} ![](micro?posh=right) {{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +### Tiny width + +1. ![](tiny-left.yaml) {{% pangram 12 %}} + + 1. ![](tiny-right) {{% pangram 11 %}} + + 2. ![](tiny-left) {{% pangram 7 %}} + +2. {{% pangram 4 %}} ![](tiny-right?posv=middle) {{% pangram 15 %}} +{.placeholder data-pagefind-ignore="all"} + +### Variable text width + +Because stand-alone images do not fit in lists or other structured text blocks, we need embedded ones to fill up the full width of the containing text block. + +#### Normal list + +1. {{% pangram 2 %}} ![](textvar1) + +2. {{% pangram 2 %}} ![](textvar2) +{.placeholder data-pagefind-ignore="all"} + +#### Columned list + +1. {{% pangram 1 %}} ![](textvar1) + +2. {{% pangram 1 %}} ![](textvar2) +{.col2 .placeholder data-pagefind-ignore="all"} + +#### Loose definition list + +First term +: {{% pangram 3 %}} ![](textvar1) + +Second term +: {{% pangram 3 %}} ![](textvar2) +{.dl-loose .placeholder data-pagefind-ignore="all"} diff --git a/exampleSite/content/blog/image/embed/micro.yaml b/exampleSite/content/en/blog/image/embed/micro.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/micro.yaml rename to exampleSite/content/en/blog/image/embed/micro.yaml diff --git a/exampleSite/content/blog/image/embed/normal.yaml b/exampleSite/content/en/blog/image/embed/normal.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/normal.yaml rename to exampleSite/content/en/blog/image/embed/normal.yaml diff --git a/exampleSite/content/blog/image/embed/small-left.yaml b/exampleSite/content/en/blog/image/embed/small-left.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/small-left.yaml rename to exampleSite/content/en/blog/image/embed/small-left.yaml diff --git a/exampleSite/content/blog/image/embed/small-portrait.yaml b/exampleSite/content/en/blog/image/embed/small-portrait.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/small-portrait.yaml rename to exampleSite/content/en/blog/image/embed/small-portrait.yaml diff --git a/exampleSite/content/blog/image/embed/small-right.yaml b/exampleSite/content/en/blog/image/embed/small-right.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/small-right.yaml rename to exampleSite/content/en/blog/image/embed/small-right.yaml diff --git a/exampleSite/content/blog/image/embed/small.yaml b/exampleSite/content/en/blog/image/embed/small.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/small.yaml rename to exampleSite/content/en/blog/image/embed/small.yaml diff --git a/exampleSite/content/blog/image/embed/text.yaml b/exampleSite/content/en/blog/image/embed/text.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/text.yaml rename to exampleSite/content/en/blog/image/embed/text.yaml diff --git a/exampleSite/content/blog/image/embed/textvar.yaml b/exampleSite/content/en/blog/image/embed/textvar.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/textvar.yaml rename to exampleSite/content/en/blog/image/embed/textvar.yaml diff --git a/exampleSite/content/blog/image/embed/textvar1.yaml b/exampleSite/content/en/blog/image/embed/textvar1.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/textvar1.yaml rename to exampleSite/content/en/blog/image/embed/textvar1.yaml diff --git a/exampleSite/content/blog/image/embed/textvar2.yaml b/exampleSite/content/en/blog/image/embed/textvar2.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/textvar2.yaml rename to exampleSite/content/en/blog/image/embed/textvar2.yaml diff --git a/exampleSite/content/blog/image/embed/tiny-left.yaml b/exampleSite/content/en/blog/image/embed/tiny-left.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/tiny-left.yaml rename to exampleSite/content/en/blog/image/embed/tiny-left.yaml diff --git a/exampleSite/content/blog/image/embed/tiny-portrait.yaml b/exampleSite/content/en/blog/image/embed/tiny-portrait.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/tiny-portrait.yaml rename to exampleSite/content/en/blog/image/embed/tiny-portrait.yaml diff --git a/exampleSite/content/blog/image/embed/tiny-right.yaml b/exampleSite/content/en/blog/image/embed/tiny-right.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/tiny-right.yaml rename to exampleSite/content/en/blog/image/embed/tiny-right.yaml diff --git a/exampleSite/content/blog/image/embed/tiny.yaml b/exampleSite/content/en/blog/image/embed/tiny.yaml similarity index 100% rename from exampleSite/content/blog/image/embed/tiny.yaml rename to exampleSite/content/en/blog/image/embed/tiny.yaml diff --git a/exampleSite/content/blog/image/standalone/featured.yaml b/exampleSite/content/en/blog/image/standalone/featured.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/featured.yaml rename to exampleSite/content/en/blog/image/standalone/featured.yaml diff --git a/exampleSite/content/en/blog/image/standalone/index.md b/exampleSite/content/en/blog/image/standalone/index.md new file mode 100644 index 000000000..3d09bbd3a --- /dev/null +++ b/exampleSite/content/en/blog/image/standalone/index.md @@ -0,0 +1,81 @@ +--- +authors: [Georg Makowski] +title: Stand-alone Images +description: Demo for enhanced block images +date: 2023-03-27T12:02:10+02:00 +categories: [Markdown] +tags: [stand-alone, image] +series: [images] +--- + +Demo for enhanced images and their layout possibilities. +{.p-first} + + +For the Markdown syntax see [basic image](https://perplex.desider.at/doc/basic/image). You find the syntax for enhanced layout options in [enhancing images](https://perplex.desider.at/doc/enhancing/image/syntax). + +## Large + +{{% pangram 4 %}} +{.placeholder data-pagefind-ignore="all"} + +![Large placeholder image](large) + +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +## Tiny width + +![Tiny placeholder image in portrait ratio](tiny-left) + +{{% pangram 7 %}} +{.placeholder data-pagefind-ignore="all"} + +![Tiny placeholder image](tiny-right) + +{{% pangram 8 %}} +{.placeholder data-pagefind-ignore="all"} + +## Small width + +![Small placeholder image in portrait ratio](small-left?ratio=0.75) + +{{% pangram 17 %}} +{.placeholder data-pagefind-ignore="all"} + +![Small placeholder image](small-right) + +{{% pangram 13 %}} +{.placeholder data-pagefind-ignore="all"} + +## Medium width + +![Medium placeholder image](medium-left) + +{{% pangram 10 %}} +{.placeholder data-pagefind-ignore="all"} + +![Medium placeholder image](medium-right) + +{{% pangram 14 %}} +{.placeholder data-pagefind-ignore="all"} + +## Text width (default) + +{{% pangram 4 %}} +{.placeholder data-pagefind-ignore="all"} + +![Placeholder image](text) + +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +## Extra Large + +{{% pangram 4 %}} +{.placeholder data-pagefind-ignore="all"} + +![Extra large placeholder image](xlarge) + +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} diff --git a/exampleSite/content/blog/image/standalone/large.yaml b/exampleSite/content/en/blog/image/standalone/large.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/large.yaml rename to exampleSite/content/en/blog/image/standalone/large.yaml diff --git a/exampleSite/content/blog/image/standalone/medium-left.yaml b/exampleSite/content/en/blog/image/standalone/medium-left.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/medium-left.yaml rename to exampleSite/content/en/blog/image/standalone/medium-left.yaml diff --git a/exampleSite/content/blog/image/standalone/medium-right.yaml b/exampleSite/content/en/blog/image/standalone/medium-right.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/medium-right.yaml rename to exampleSite/content/en/blog/image/standalone/medium-right.yaml diff --git a/exampleSite/content/blog/image/standalone/medium.yaml b/exampleSite/content/en/blog/image/standalone/medium.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/medium.yaml rename to exampleSite/content/en/blog/image/standalone/medium.yaml diff --git a/exampleSite/content/blog/image/standalone/normal.yaml b/exampleSite/content/en/blog/image/standalone/normal.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/normal.yaml rename to exampleSite/content/en/blog/image/standalone/normal.yaml diff --git a/exampleSite/content/blog/image/standalone/small-left.yaml b/exampleSite/content/en/blog/image/standalone/small-left.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/small-left.yaml rename to exampleSite/content/en/blog/image/standalone/small-left.yaml diff --git a/exampleSite/content/blog/image/standalone/small-portrait.yaml b/exampleSite/content/en/blog/image/standalone/small-portrait.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/small-portrait.yaml rename to exampleSite/content/en/blog/image/standalone/small-portrait.yaml diff --git a/exampleSite/content/blog/image/standalone/small-right.yaml b/exampleSite/content/en/blog/image/standalone/small-right.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/small-right.yaml rename to exampleSite/content/en/blog/image/standalone/small-right.yaml diff --git a/exampleSite/content/blog/image/standalone/small.yaml b/exampleSite/content/en/blog/image/standalone/small.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/small.yaml rename to exampleSite/content/en/blog/image/standalone/small.yaml diff --git a/exampleSite/content/blog/image/standalone/text.yaml b/exampleSite/content/en/blog/image/standalone/text.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/text.yaml rename to exampleSite/content/en/blog/image/standalone/text.yaml diff --git a/exampleSite/content/blog/image/standalone/tiny-left.yaml b/exampleSite/content/en/blog/image/standalone/tiny-left.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/tiny-left.yaml rename to exampleSite/content/en/blog/image/standalone/tiny-left.yaml diff --git a/exampleSite/content/blog/image/standalone/tiny-portrait.yaml b/exampleSite/content/en/blog/image/standalone/tiny-portrait.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/tiny-portrait.yaml rename to exampleSite/content/en/blog/image/standalone/tiny-portrait.yaml diff --git a/exampleSite/content/blog/image/standalone/tiny-right.yaml b/exampleSite/content/en/blog/image/standalone/tiny-right.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/tiny-right.yaml rename to exampleSite/content/en/blog/image/standalone/tiny-right.yaml diff --git a/exampleSite/content/blog/image/standalone/tiny.yaml b/exampleSite/content/en/blog/image/standalone/tiny.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/tiny.yaml rename to exampleSite/content/en/blog/image/standalone/tiny.yaml diff --git a/exampleSite/content/blog/image/standalone/xlarge.yaml b/exampleSite/content/en/blog/image/standalone/xlarge.yaml similarity index 100% rename from exampleSite/content/blog/image/standalone/xlarge.yaml rename to exampleSite/content/en/blog/image/standalone/xlarge.yaml diff --git a/exampleSite/content/blog/marginal-note/810px-Andrew_wiles1-3.jpg b/exampleSite/content/en/blog/marginal-note/810px-Andrew_wiles1-3.jpg similarity index 100% rename from exampleSite/content/blog/marginal-note/810px-Andrew_wiles1-3.jpg rename to exampleSite/content/en/blog/marginal-note/810px-Andrew_wiles1-3.jpg diff --git a/exampleSite/content/blog/marginal-note/Diophantus-II-8-Fermat_cut.jpg b/exampleSite/content/en/blog/marginal-note/Diophantus-II-8-Fermat_cut.jpg similarity index 100% rename from exampleSite/content/blog/marginal-note/Diophantus-II-8-Fermat_cut.jpg rename to exampleSite/content/en/blog/marginal-note/Diophantus-II-8-Fermat_cut.jpg diff --git a/exampleSite/content/en/blog/marginal-note/index.md b/exampleSite/content/en/blog/marginal-note/index.md new file mode 100644 index 000000000..6e387e7dd --- /dev/null +++ b/exampleSite/content/en/blog/marginal-note/index.md @@ -0,0 +1,48 @@ +--- +authors: [Georg Makowski] +title: The Beauty of Marginal Notes +description: Demo of the marginal note +date: 2022-07-04T22:18:04+02:00 +categories: [Markdown] +tags: [Marginal Note, Shortcode] +series: [Demo] +resources: +- src: 810px-Andrew_wiles1-3.jpg + name: wiles + params: + alt: Portrait of Sir Andrew John Wiles + width: tiny + posh: left + caption: Sir Andrew John Wiles + attr: "© C. J. Mozzochi, Princeton N.J" +--- + +Marginal notes add further information elegantly and unobtrusively. We can add them with the shortcode **{$mnote}**. +{.p-first} + +The famous mathematician Fermat wrote his last conjecture around 1637 in the marginal column besides an ancient Greek proof by Diophantus. The “marvelous proof” Fermat mentioned there has never been uncovered and his note kept mathematicians wondering for over 350 years. + +![](wiles) + +Proof has been considered generally inaccessible until Sir Andrew John Wiles announced to have found one in 1993 after years of ground-breaking work. A few mathematicians were able to follow him and pointed out some flaws in his first preliminary version. Wiley finally published a completely convincing version in 1995 — a breakthrough in number theory that won him a few prizes. + +Wiley’s proof is still only accessible to mathematical specialists. But the initial mathematical problem — Diophantus’ successful method to split a second power into the sum of two second powers and Fermat’s conjecture about the impossibility to do the same for higher powers — are relatively easy to grasp: + +- - - + +> To divide a given square into a sum of two squares. +> +> To divide 16 into a sum of two squares. +> +> Let the first summand be x{^2}, and thus the second 16 -- x{^2}. The latter is to be a square. I form the square of the difference of an arbitrary multiple of x diminished by the root of 16, that is, diminished by 4. I form, for example, the square of 2x -- 4. It is 4x{^2} + 16 -- 16x. I put this expression equal to 16 -- x{^2}. I add to both sides x{^2} + 16x and subtract 16. In this way I obtain 5x{^2} = 16x, hence x = {^16}⁄{_5} +> +> Thus one number is {^256}⁄{_25} and the other {^144}⁄{_25}. The sum of these numbers is 16 and each summand is a square. +{.inline} + +{{< mnote down=9 >}} +It is impossible to separate a cube into two cubes, or a fourth power into two fourth powers, or in general, any power higher than the second, into two like powers. I have discovered a truly marvelous proof of this, which this margin is too narrow to contain. +{{< /mnote >}} + +- - - + +**Like to use marginal notes? Have a look at the shortcode [{$mnote}](https://perplex.desider.at/doc/enhancing/shortcode/mnote).** diff --git a/exampleSite/content/en/categories/_index.md b/exampleSite/content/en/categories/_index.md new file mode 100644 index 000000000..96688114b --- /dev/null +++ b/exampleSite/content/en/categories/_index.md @@ -0,0 +1,11 @@ +--- +title: Categories +description: All general topics on this site +subtitle: true +date: 2022-09-04T19:55:48+02:00 +resources: + - src: v2osk-c9OfrVeD_tQ-unsplash.jpg + name: featured + params: + alt: Some open bags, each filled with a different kind of beans or lentils etc. +--- \ No newline at end of file diff --git a/exampleSite/content/en/categories/design/_index.md b/exampleSite/content/en/categories/design/_index.md new file mode 100644 index 000000000..c2cc69416 --- /dev/null +++ b/exampleSite/content/en/categories/design/_index.md @@ -0,0 +1,11 @@ +--- +title: Design +description: About the Design & Layout of this Theme +subtitle: true +date: 2023-03-14T15:17:05+01:00 +resources: + - src: hal-gatewood-tZc3vjPCk-Q-unsplash.jpg + name: featured + params: + alt: Mobile colored wireframes +--- diff --git a/exampleSite/content/categories/design/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg b/exampleSite/content/en/categories/design/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg similarity index 100% rename from exampleSite/content/categories/design/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg rename to exampleSite/content/en/categories/design/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg diff --git a/exampleSite/content/categories/markdown/Markdown.png b/exampleSite/content/en/categories/markdown/Markdown.png similarity index 100% rename from exampleSite/content/categories/markdown/Markdown.png rename to exampleSite/content/en/categories/markdown/Markdown.png diff --git a/exampleSite/content/categories/markdown/Markdown.svg b/exampleSite/content/en/categories/markdown/Markdown.svg similarity index 100% rename from exampleSite/content/categories/markdown/Markdown.svg rename to exampleSite/content/en/categories/markdown/Markdown.svg diff --git a/exampleSite/content/en/categories/markdown/_index.md b/exampleSite/content/en/categories/markdown/_index.md new file mode 100644 index 000000000..c163b61f3 --- /dev/null +++ b/exampleSite/content/en/categories/markdown/_index.md @@ -0,0 +1,15 @@ +--- +title: Markdown +description: The Intuitive Markup Language +subtitle: true +date: 2022-09-04T18:41:18+02:00 +resources: +- src: Markdown.svg + name: featured + params: + alt: Markdown logo + background: light + padding: one + width: tiny + type: symbol +--- diff --git a/exampleSite/content/en/categories/module/_index.md b/exampleSite/content/en/categories/module/_index.md new file mode 100644 index 000000000..88dd3830b --- /dev/null +++ b/exampleSite/content/en/categories/module/_index.md @@ -0,0 +1,11 @@ +--- +title: Module +description: Public Hugo modules used by this theme +subtitle: true +date: 2022-09-06T06:46:35+02:00 +resources: +- src: gerry-roarty-slkENpP5PbI-unsplash.jpg + name: featured + params: + alt: Modular architecture +--- diff --git a/exampleSite/content/categories/module/gerry-roarty-slkENpP5PbI-unsplash.jpg b/exampleSite/content/en/categories/module/gerry-roarty-slkENpP5PbI-unsplash.jpg similarity index 100% rename from exampleSite/content/categories/module/gerry-roarty-slkENpP5PbI-unsplash.jpg rename to exampleSite/content/en/categories/module/gerry-roarty-slkENpP5PbI-unsplash.jpg diff --git a/exampleSite/content/en/categories/overview/_index.md b/exampleSite/content/en/categories/overview/_index.md new file mode 100644 index 000000000..eaf04191d --- /dev/null +++ b/exampleSite/content/en/categories/overview/_index.md @@ -0,0 +1,12 @@ +--- +title: Overview +description: "TL;DR: short intro for the impatient" +subtitle: true +date: 2023-10-30T18:09:07+01:00 +resources: + - src: drew-beamer-xU5Mqq0Chck-unsplash.jpg + name: featured + params: + alt: Horizon through a lensball + zoom: 1.6 +--- diff --git a/exampleSite/content/categories/overview/drew-beamer-xU5Mqq0Chck-unsplash.jpg b/exampleSite/content/en/categories/overview/drew-beamer-xU5Mqq0Chck-unsplash.jpg similarity index 100% rename from exampleSite/content/categories/overview/drew-beamer-xU5Mqq0Chck-unsplash.jpg rename to exampleSite/content/en/categories/overview/drew-beamer-xU5Mqq0Chck-unsplash.jpg diff --git a/exampleSite/content/en/categories/release/_index.md b/exampleSite/content/en/categories/release/_index.md new file mode 100644 index 000000000..329cd7d48 --- /dev/null +++ b/exampleSite/content/en/categories/release/_index.md @@ -0,0 +1,13 @@ +--- +title: Release +description: "Theme releases" +subtitle: true +date: 2023-10-30T18:31:40+01:00 +resources: + - src: ankush-minda-TLBplYQvqn0-unsplash.jpg + name: featured + params: + alt: Balloons rising into the sky + zoom: 2.5 + anchor: Center +--- diff --git a/exampleSite/content/categories/release/ankush-minda-TLBplYQvqn0-unsplash.jpg b/exampleSite/content/en/categories/release/ankush-minda-TLBplYQvqn0-unsplash.jpg similarity index 100% rename from exampleSite/content/categories/release/ankush-minda-TLBplYQvqn0-unsplash.jpg rename to exampleSite/content/en/categories/release/ankush-minda-TLBplYQvqn0-unsplash.jpg diff --git a/exampleSite/content/categories/v2osk-c9OfrVeD_tQ-unsplash.jpg b/exampleSite/content/en/categories/v2osk-c9OfrVeD_tQ-unsplash.jpg similarity index 100% rename from exampleSite/content/categories/v2osk-c9OfrVeD_tQ-unsplash.jpg rename to exampleSite/content/en/categories/v2osk-c9OfrVeD_tQ-unsplash.jpg diff --git a/exampleSite/content/en/doc/_index.md b/exampleSite/content/en/doc/_index.md new file mode 100644 index 000000000..9f6355c95 --- /dev/null +++ b/exampleSite/content/en/doc/_index.md @@ -0,0 +1,27 @@ +--- +authors: [Georg Makowski] +date: 2021-09-15T11:42:44+02:00 +description: Perplex --- the all purpose technical theme for Hugo +subtitle: false +seo: + title: Documentation for the Hugo theme Perplex + description: +title: Documentation +linktitle: Docs +menu: + main: + identifier: docs + name: Docs + weight: 20 +weight: 1 +resources: +- name: featured + src: jaredd-craig-HH4WBGNyltc-unsplash.jpg + params: + alt: A levitating book seen through an opening in a wall of books +--- + +Perplex is a theme with advanced layout capabilities for technical publishing. It ships with templates for documentation (three levels), a news stream, and a blog. +{.p-first} + +Perplex works out of the box. Only a recent Hugo installation and the theme are required to build a website like this from Markdown files and their resources. diff --git a/exampleSite/content/en/doc/overview/_index.md b/exampleSite/content/en/doc/overview/_index.md new file mode 100644 index 000000000..69d0d782e --- /dev/null +++ b/exampleSite/content/en/doc/overview/_index.md @@ -0,0 +1,22 @@ +--- +authors: [Georg Makowski] +title: TL;DR +description: Overview for seasoned Hugo users +date: 2022-05-11T23:46:08+02:00 +weight: 2 +menu: + doc: + identifier: tldr + name: TL;DR + pre: visibility +resources: + - src: miguel-a-amutio-j5GNmYQQcAo-unsplash.jpg + name: featured + params: + alt: Overview of a mountain range +--- + +Short overview of the Perplex theme for seasoned Hugo users. +{.p-first} + +The theme provides a nice default layout for extended CommonMark content. Styling with attributes or shortcodes offers layout variants familiar from print design. diff --git a/exampleSite/content/en/doc/overview/coming/index.md b/exampleSite/content/en/doc/overview/coming/index.md new file mode 100644 index 000000000..24ce5b2e9 --- /dev/null +++ b/exampleSite/content/en/doc/overview/coming/index.md @@ -0,0 +1,56 @@ +--- +authors: [Georg Makowski] +title: Coming Features +description: Planned additional functionality +subtitle: false +date: 2023-04-12T11:26:56+02:00 +menu: + doc: + name: Coming Features + parent: tldr + pre: rule +categories: [Overview] +tags: [feature] +weight: 9 +--- + +Features, which I consider essential, and the ones which would be nice to have. +{.p-first} + + +## Essential + +Documentation +: The documentation should be up to date :grinning_face_with_sweat:. +{.dl-loose} + +## Nice to have + +Start page +: A distinct starting page always depends on the project. But the theme should include a template that can be filled easily with Markdown and images. + +Article pages +: For long texts a big title, a hero image, and a more centered layout would be more appropriate. + +Media shortcodes +: The difficulty with media is to find self-reliant solutions. + - Video (mp4) + - AsciiCast (self-hosted). The current shortcode is only a wrapper for a call to the official server. + - Audio + - Image galleries + - override Hugo’s shortcodes for Youtube and Vimeo because they are not GDPR-compliant. + +Better SEO +: The meta tags are fine, Lighthouse gives the theme a 100. But there is still some room for improvement. The theme includes the module [{$hugo-mod-meta}](https://github.com/bowman2001/hugo-mod-meta) for this task. + +Archive pages +: Archive pages are not essential for a documentation site. But depending on the content of the other sections, they might come in handy. + +Icons +: Allow to use other icon sets than Material Symbols in the menus. + +New elements +: Many ideas ... +{.dl-loose} + +Suggestions are welcome as new issues in the [repo](https://github.com/bowman2001/perplex). Please check out the existing ones before filing a new one. \ No newline at end of file diff --git a/exampleSite/content/doc/overview/concept/IBM_Plex_Sans.svg b/exampleSite/content/en/doc/overview/concept/IBM_Plex_Sans.svg similarity index 100% rename from exampleSite/content/doc/overview/concept/IBM_Plex_Sans.svg rename to exampleSite/content/en/doc/overview/concept/IBM_Plex_Sans.svg diff --git a/exampleSite/content/doc/overview/concept/drew-beamer-xU5Mqq0Chck-unsplash.jpg b/exampleSite/content/en/doc/overview/concept/drew-beamer-xU5Mqq0Chck-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/concept/drew-beamer-xU5Mqq0Chck-unsplash.jpg rename to exampleSite/content/en/doc/overview/concept/drew-beamer-xU5Mqq0Chck-unsplash.jpg diff --git a/exampleSite/content/en/doc/overview/concept/index.md b/exampleSite/content/en/doc/overview/concept/index.md new file mode 100644 index 000000000..976211024 --- /dev/null +++ b/exampleSite/content/en/doc/overview/concept/index.md @@ -0,0 +1,74 @@ +--- +authors: [Georg Makowski] +title: Concept +description: General goals of the theme +subtitle: false +date: 2022-05-12T22:29:06+02:00 +menu: + doc: + name: Concept + parent: tldr + pre: featured_play_list +resources: + - src: drew-beamer-xU5Mqq0Chck-unsplash.jpg + name: featured + params: + alt: Horizon through a lensball + zoom: 1.6 + - src: IBM_Plex_Sans.svg + name: plex_sample + params: + background: light + posh: left + width: tiny +categories: [Overview] +tags: [feature] +weight: 5 +--- + +A coherent site structure for different publishing formats, a typographic layout for enhanced Markdown content, and good legibility on all screen sizes are the essential goals of this theme. +{.p-first} + +Perplex is an all-purpose theme for technical content. There are templates for three levels of documentation, a news stream, blog postings, author pages, and taxonomy pages. Templates for a distinct start page and articles will follow. + +At the moment, the example site included in the theme shows the news section as a start page the same way this documentation does. +{.inline} + +{{< mnote >}}The entry `url: /` in the front-matter of the section’s list page does accomplish this.{{< /mnote >}} + +## Design & Layout + +![Sample of IBM Plex Sans](plex_sample) + +The theme ships with the open-source font family [Plex](https://www.ibm.com/plex/) for optimized self-hosting. The design has taken their proportions into account from the beginning to provide a good line length for text and code blocks. + +{{< mnote up=11 >}}**The design** does **not** implement IBM’s corporate design system [Carbon](https://carbondesignsystem.com/).{{< /mnote >}} + +The layout adapts to all screen sizes in a **fluid-responsive** way. This concept has been around for a while but doesn’t get realized often despite its [advantages](/blog/accessibility-of-fluid-typography). + +Many proportions can stay fixed between breakpoints beyond mobile and this means: + +- The viewport is always used at full width when the screen space is limited. + +- The optimal line length stays fixed on all wider screens beyond mobile. + +- adjacent columns stay in sync on all larger view-ports, we can place Markdown elements besides each other instead of letting them just flow from top to bottom like a stream. +{.col2} + +All text is placed on a **baseline grid** to introduce a comfortable vertical rhythm and coherence between adjacent text elements. Combined with the fluid-responsive design this allows placing images (and other block elements) in and around the text with high accuracy. There are demos for [stand-alone](/blog/image/standalone) & [embedded](/blog/image/embed) images, or [code blocks](/blog/codelayout). + +## Usage concept + +The theme is as self-sufficient as reasonably possible. Fonts and libraries are included, some libraries for plugins are retrieved from the secure and GDPR-compliant CDN . + +Recent copies of all module dependencies are available in the {$_vendor} folder for an easy start with the theme. No other installations than the extended binary (for WEBP) of a very recent Hugo release and the theme are required. + +The installation of a [GoLang environment](https://go.dev/dl/) to include the theme as a Hugo module from its repository is certainly more convenient than repeated manual downloads if you want to follow the ongoing development. + +## Support & development + +Should you miss some information in the docs, find a bug in the templates, or have a suggestion, please file an official issue in the repositories (→ [Introduction](https://perplex.desider.at/doc/intro/perplex#in-case-of-problems)). + +There will be no public support channel in the foreseeable future because improving this theme takes all my spare time. Support and collaborative development will only work bidirectional. I will not answer private questions. + +In case the theme benefits from contributions and support, I’d love to turn this effort into a community project and change the license holder accordingly to assure, that contributing is never in vain. diff --git a/exampleSite/content/en/doc/overview/features/index.md b/exampleSite/content/en/doc/overview/features/index.md new file mode 100644 index 000000000..189fe8f5a --- /dev/null +++ b/exampleSite/content/en/doc/overview/features/index.md @@ -0,0 +1,65 @@ +--- +authors: [Georg Makowski] +title: Features +description: Special functionality of this theme +subtitle: false +date: 2023-07-27T18:49:54+02:00 +menu: + doc: + identifier: features + name: Features + parent: tldr + pre: star +categories: [Overview] +tags: [feature] +weight: 7 +--- + +A page layout based on classic typographical principles without compromise. +{.p-first} + + +Layout +: Advanced user-friendly design for technical publishing. Different kinds of pages all reside on the same layout grid and you can publish everything with Markdown: + + - Large documentation + + - news stream + + - blog postings + + - author pages + + - in-depth articles (coming) + {.col2} + +Improved styling +: Many Markdown attributes and a few custom shortcodes to enhance the style on your pages. +: Light and dark modes follow your OS settings. + +Icons +: Google’s [Material Symbols](https://fonts.google.com/icons) and [Simple Icons](https://simpleicons.org) for brands can be included simply by name. Material Symbols show automatically in all navigational elements of the documentation. All icon sets can also be used as Markdown content with shortcodes. + +Images +: Provide only one large original image and let Hugo & Perplex handle the generation of all the various sizes for optimized web display and meta tags. + +Navigation +: All elements needed to sift through your information as quickly as possible are auto-generated: + + - Site navigation + + - Page-to-page + + - Breadcrumbs + + - Taxonomies + {.col2} + +Full-text search +: The theme is ready for [Pagefind](https://pagefind.app), a very fast search library for self-hosting. + +Efficiency +: Sites built with this theme are extremely fast (check Lighthouse). Images are optimized and get loaded lazily, fonts are split into small packages, and icons are embedded inline. +: The build process is also as fast, cost-effective, and energy-efficient as it gets --- thanks to Hugo. +{.dl-loose} + \ No newline at end of file diff --git a/exampleSite/content/doc/overview/features/ray-hennessy-gdTxVSAE5sk-unsplash.jpg b/exampleSite/content/en/doc/overview/features/ray-hennessy-gdTxVSAE5sk-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/features/ray-hennessy-gdTxVSAE5sk-unsplash.jpg rename to exampleSite/content/en/doc/overview/features/ray-hennessy-gdTxVSAE5sk-unsplash.jpg diff --git a/exampleSite/content/doc/overview/johannes-plenio-HcNVBkPYT4w-unsplash.jpg b/exampleSite/content/en/doc/overview/johannes-plenio-HcNVBkPYT4w-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/johannes-plenio-HcNVBkPYT4w-unsplash.jpg rename to exampleSite/content/en/doc/overview/johannes-plenio-HcNVBkPYT4w-unsplash.jpg diff --git a/exampleSite/content/doc/overview/markdown/Markdown.png b/exampleSite/content/en/doc/overview/markdown/Markdown.png similarity index 100% rename from exampleSite/content/doc/overview/markdown/Markdown.png rename to exampleSite/content/en/doc/overview/markdown/Markdown.png diff --git a/exampleSite/content/doc/overview/markdown/Markdown.svg b/exampleSite/content/en/doc/overview/markdown/Markdown.svg similarity index 100% rename from exampleSite/content/doc/overview/markdown/Markdown.svg rename to exampleSite/content/en/doc/overview/markdown/Markdown.svg diff --git a/exampleSite/content/doc/overview/markdown/erda-estremera-eMX1aIAp9Nw-unsplash.jpg b/exampleSite/content/en/doc/overview/markdown/erda-estremera-eMX1aIAp9Nw-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/markdown/erda-estremera-eMX1aIAp9Nw-unsplash.jpg rename to exampleSite/content/en/doc/overview/markdown/erda-estremera-eMX1aIAp9Nw-unsplash.jpg diff --git a/exampleSite/content/en/doc/overview/markdown/index.md b/exampleSite/content/en/doc/overview/markdown/index.md new file mode 100644 index 000000000..3a5fc1094 --- /dev/null +++ b/exampleSite/content/en/doc/overview/markdown/index.md @@ -0,0 +1,256 @@ +--- +authors: [Georg Makowski] +title: Markdown Layout +description: One-page Markdown overview +subtitle: false +date: 2022-05-12T22:30:17+02:00 +menu: + doc: + name: Markdown Layout + parent: tldr + pre: edit +resources: +- src: Markdown.svg + name: featured + params: + alt: Markdown logo + background: light + width: tiny + type: symbol + padding: one +- src: erda-estremera-eMX1aIAp9Nw-unsplash.jpg + name: bigsplash + params: + caption: This caption and the attribution are not available for directly included images. We need to provide the additional information in associated resource parameters (→ [Resources](https://perplex.desider.at/doc/intro/workflow/resources)). + alt: Big splash of water +- src: mulyadi-JJMoAiVl9jA-unsplash.jpg + name: smallsplash + params: + caption: Caption (only from a resource) + alt: Splash of water +categories: [Overview, Markdown] +tags: [Block, Inline] +weight: 6 +--- + +Samples of Hugo’s extended CommonMark syntax to give a quick impression of the layout capabilities. +{.p-first} + + +This page only shows their default style. The theme offers style variations for many of these elements. The notes on this page are not part of Hugo’s usual Markdown options and are generated by the theme’s shortcode [`mnote`](https://perplex.desider.at/doc/enhancing/shortcode/mnote). + +## Headings + +The following HTML elements `

`—`

` represent the title, three levels of section headings, and two levels of paragraph headings. + +Because the templates generate the title section from front-matter meta-data the Markdown **should not** contain a title. As usual, the theme processes front-matter parameters for the [title section](https://perplex.desider.at/doc/page/title). +{.box-info} + +--- + +# Title + +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +--- + +## Section +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +### Subsection +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +#### Sub-subsection +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +##### Paragraph +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +###### Small Paragraph +{{% pangram 3 %}} +{.placeholder data-pagefind-ignore="all"} + +## Images + +Since version 0.108.0 Hugo allows distinguishing stand-alone and embedded images. + +### Stand-alone + +![A big splash of water](bigsplash) + +### Embedded + +![A smaller splash of water](smallsplash) {{% pangram 6 %}} +{.placeholder data-pagefind-ignore="all"} + +{{% pangram 6 %}} +{.placeholder data-pagefind-ignore="all"} + +## Link + +- This is an internal [example link](#images). + +- This is an external [example link](https://example.com "example.com"). + +## Blockquotes + +The blockquote element contains content from another source. + +### Without attribution + +> {{% pangram 5 %}} +> {.placeholder data-pagefind-ignore="all"} +> +> **Note** that you can use _Markdown syntax_ within a blockquote. + +### With attribution and footnote + +> Don't communicate by sharing memory, share memory by communicating. +> — _Rob Pike_[^1] + +[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, on November 18, 2015. + +## Tables + +Tables aren't part of CommonMark, but Hugo supports their syntax as an extension by default. + +### Centered table columns + +| Name | Age | +|:-----:|:---:| +| Bob | 27 | +| Alice | 23 | + +### Inline Markdown within tables + +| Inline | Markdown | In | Table | +|:----------|:--------:|:-----------------:|-------:| +| _italics_ | **bold** | ~~strikethrough~~ | `code` | + +## Code Blocks + +### With backticks (code fences) + +```html + + + + + Example HTML5 Document + + +

Test

+ + +``` + +### Code block indented with four spaces + + + + + + Example HTML5 Document + + +

Test

+ + + +### Code block with Hugo's internal highlight shortcode + +{{< highlight html >}} + + + + + Example HTML5 Document + + +

Test

+ + +{{< /highlight >}} + +## List Types + +### Ordered list + +1. First item +2. Second item +3. Third item + +### Unordered list + +- List item +- Another item +- And another item + +### Nested unordered and ordered list + +- Item 1 + + 1. First sub-item of the first item + + 2. Second sub-item of the first item + +- Item 2 + + 1. First sub-item of the second item + + 2. Second sub-item of the second item + +### Definition list + +The definition list is also an extension for Goldmark supported by Hugo. + +First term +: Description of the first term + +Second term +: Description of the second term + +## Missing Markdown elements + +Some inline HTML tags have no corresponding syntax in Goldmark. We can either enable raw HTML in Markdown or use Hugo to generate them. + +### Additional inline elements + +sub & sup +: H{_2}O, X{^n} + Y{^n} = Z{^n} + +kbd +: Press {~CTRL} + {~ALT} + {~Delete} to end the session. + +mark +: Most {!salamanders} are nocturnal, and hunt for insects, worms, and other small creatures. + +cite +: We can reference a {=book}. +{.dl-loose .inline} + +{{< mnote >}} +This theme supports safe Markdown → `unsafe: false`. The elements here are generated by `replaceRE …` of [replacement codes](https://perplex.desider.at/doc/enhancing/replace). +{{< /mnote >}} + +### Inline with special attributes + +The link element is tweaked to produce the following two tags when their name is provided as link target and combined with a title attribute: + +abbr +: The link `[HTML](abbr "HyperText Markup Language")` generates [HTML](abbr "HyperText Markup Language") + +dfn +: The link `[Replacement codes](dfn "replacement codes")` generates the definition tag: + + [Replacement codes](dfn "replacement codes") are defined by curly braces and a marker directly after the first brace. +{.dl-loose .inline} + +{{< mnote >}} +The render-link hook recognizes and processes these special links. +{{< /mnote >}} diff --git a/exampleSite/content/doc/overview/markdown/mulyadi-JJMoAiVl9jA-unsplash.jpg b/exampleSite/content/en/doc/overview/markdown/mulyadi-JJMoAiVl9jA-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/markdown/mulyadi-JJMoAiVl9jA-unsplash.jpg rename to exampleSite/content/en/doc/overview/markdown/mulyadi-JJMoAiVl9jA-unsplash.jpg diff --git a/exampleSite/content/doc/overview/miguel-a-amutio-j5GNmYQQcAo-unsplash.jpg b/exampleSite/content/en/doc/overview/miguel-a-amutio-j5GNmYQQcAo-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/miguel-a-amutio-j5GNmYQQcAo-unsplash.jpg rename to exampleSite/content/en/doc/overview/miguel-a-amutio-j5GNmYQQcAo-unsplash.jpg diff --git a/exampleSite/content/doc/overview/moises-gonzalez-4xFUoiW3i4k-unsplash.jpg b/exampleSite/content/en/doc/overview/moises-gonzalez-4xFUoiW3i4k-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/moises-gonzalez-4xFUoiW3i4k-unsplash.jpg rename to exampleSite/content/en/doc/overview/moises-gonzalez-4xFUoiW3i4k-unsplash.jpg diff --git a/exampleSite/content/doc/overview/rebecca-li-JahHqUiXlig-unsplash.jpg b/exampleSite/content/en/doc/overview/rebecca-li-JahHqUiXlig-unsplash.jpg similarity index 100% rename from exampleSite/content/doc/overview/rebecca-li-JahHqUiXlig-unsplash.jpg rename to exampleSite/content/en/doc/overview/rebecca-li-JahHqUiXlig-unsplash.jpg diff --git a/exampleSite/content/news/_index.md b/exampleSite/content/en/news/_index.md similarity index 100% rename from exampleSite/content/news/_index.md rename to exampleSite/content/en/news/_index.md diff --git a/exampleSite/content/news/dark-mode/alexander-andrews-vGCErDhrc3E-unsplash.jpg b/exampleSite/content/en/news/dark-mode/alexander-andrews-vGCErDhrc3E-unsplash.jpg similarity index 100% rename from exampleSite/content/news/dark-mode/alexander-andrews-vGCErDhrc3E-unsplash.jpg rename to exampleSite/content/en/news/dark-mode/alexander-andrews-vGCErDhrc3E-unsplash.jpg diff --git a/exampleSite/content/en/news/dark-mode/index.md b/exampleSite/content/en/news/dark-mode/index.md new file mode 100644 index 000000000..de574396c --- /dev/null +++ b/exampleSite/content/en/news/dark-mode/index.md @@ -0,0 +1,19 @@ +--- +authors: [Georg Makowski] +title: Dark Mode +description: Theme colors change according to the environment +date: 2023-07-02T00:21:16+02:00 +resources: + - src: alexander-andrews-vGCErDhrc3E-unsplash.jpg + name: featured + params: + alt: Full moon +categories: [Design] +tags: [color] +--- + +The theme offers a dark mode now. The colors follow the setting of the browser or operating system. +{.p-first} + + +The dark mode includes a dark page background and light text colors as usual. It also reduces the overall brightness and changes the color theme of the code highlighting. diff --git a/exampleSite/content/en/news/first-release/index.md b/exampleSite/content/en/news/first-release/index.md new file mode 100644 index 000000000..811f05e1f --- /dev/null +++ b/exampleSite/content/en/news/first-release/index.md @@ -0,0 +1,33 @@ +--- +authors: [Georg Makowski] +lasteditor: Georg Makowski +title: First Pre-release{/}of the Perplex Theme +linktitle: First Pre-release +description: Beta release 1 +date: 2023-04-10T22:04:33+02:00 +categories: [Release] +tags: [fluid responsive] +resources: +- src: resource-database-jRDZ4_wYCa8-unsplash.jpg + name: featured + params: + alt: Rendered spheres +--- + +A new fluid-responsive Hugo theme is available for test runs. +{.p-first} + + +The release is available on [GitHub](https://github.com/bowman2001/perplex/releases/). The extensive (but incomplete) documentation is available as [example project](https://github.com/bowman2001/perplexdoc). + +This site and especially the [documentation section](/doc) are a demonstration and a test of the theme. + +Until I announce the release in the Hugo forum, the overview in the documentation for seasoned Hugo users will be ready: + +- The usual [one-page Markdown demonstration](/doc/overview/markdown) + +- A few remarks about the concept and the goals of this theme. + +- Current and planned features. + +The next beta release will include author pages. I’m planning to implement them as taxonomy pages. diff --git a/exampleSite/content/news/first-release/resource-database-jRDZ4_wYCa8-unsplash.jpg b/exampleSite/content/en/news/first-release/resource-database-jRDZ4_wYCa8-unsplash.jpg similarity index 100% rename from exampleSite/content/news/first-release/resource-database-jRDZ4_wYCa8-unsplash.jpg rename to exampleSite/content/en/news/first-release/resource-database-jRDZ4_wYCa8-unsplash.jpg diff --git a/exampleSite/content/news/open-in-vscode/index.md b/exampleSite/content/en/news/open-in-vscode/index.md similarity index 100% rename from exampleSite/content/news/open-in-vscode/index.md rename to exampleSite/content/en/news/open-in-vscode/index.md diff --git a/exampleSite/content/en/news/replacements-module/index.md b/exampleSite/content/en/news/replacements-module/index.md new file mode 100644 index 000000000..8a5c988c4 --- /dev/null +++ b/exampleSite/content/en/news/replacements-module/index.md @@ -0,0 +1,33 @@ +--- +authors: [Georg Makowski] +title: Hugo Module{/}for missing HTML inline tags +linktitle: Module for missing inline tags +date: 2023-02-22T23:55:26+02:00 +categories: [Module] +tags: [Replacement, Security] +--- + +Replacement codes let us avoid raw HTML in Markdown.{/}A single partial replaces them with the inline tags{/}lacking a syntax element in Goldmark. +{.p-first} + +The codes look like `{*text}`, where `*` is a placeholder for one or more ASCII characters. The superscript tag `` for example is marked by `^` and fits the following regular expression (Golang syntax): + +```go-html-template {.block} +replaceRE `\{\^([^}]*)\}` "$1" +``` + +This syntax does not collide with any other elements --- as far as I know. And it’s safe because the replacements are applied after the Markdown rendering. Hugo discards all HTML in Markdown by default and also checks these codes before the regular expressions are applied. +{.inline} + +{{< mnote >}} +**Markdown attributes** have a similar syntax, but they usually aren’t present in the rendered HTML code anymore. Except for Markdown code examples including attributes. Therefore, the `#` and `.` signs are avoided. +{{< /mnote >}} + +All replacements are chained together in one Hugo partial, which can process every piece of rendered Markdown content in the templates. + +**These replacements are published as a tiny [Hugo module on GitHub][module]**. + +This approach is a workaround. To create extensions for Hugo’s Markdown renderer [Goldmark][goldmark] would be the better solution. + +[module]: https://github.com/bowman2001/hugo-mod-replacements/ +[goldmark]: https://github.com/yuin/goldmark "GitHub repository" diff --git a/exampleSite/content/news/resources-in-data-files/global.yaml b/exampleSite/content/en/news/resources-in-data-files/global.yaml similarity index 100% rename from exampleSite/content/news/resources-in-data-files/global.yaml rename to exampleSite/content/en/news/resources-in-data-files/global.yaml diff --git a/exampleSite/content/en/news/resources-in-data-files/index.md b/exampleSite/content/en/news/resources-in-data-files/index.md new file mode 100644 index 000000000..570905060 --- /dev/null +++ b/exampleSite/content/en/news/resources-in-data-files/index.md @@ -0,0 +1,53 @@ +--- +authors: [Georg Makowski] +title: Resources in Data Files +date: 2023-09-05T00:02:59+02:00 +categories: [module] +tags: [resources] +--- + +The theme offers a new possibility to store local parameters for resources. Data files allow to associate local meta-data with global or remote resources. +{.p-first} + + +Hugo offers to process arbitrary meta-data parameters associated with page resources. We can add a parameter list to [local resources](https://gohugo.io/content-management/page-resources/#page-resources-metadata) in the front-matter of page bundles under `params`: + +```yaml +resources: + - src: hebert-kostan-y6UEUCq2RHw-unsplash.jpg + name: tiger + params: + caption: Local image resource + width: small + posh: left +``` + +![global tiger](global.yaml) + +Depending on the content structure of your project, you may want to store some resources in the global {$assets} folder or on a remote server. Hugo also can retrieve these resources, but there is (currently) no native mechanism to associate them with meta-data parameters. And this is where this module comes in handy. + +The tiger here is stored in the {$assets} folder and gets referenced in a local data file. This way, we can re-use global assets repeatedly and store meta-data in a file like {$global.yaml}: + +```yaml +src: img/tiger/hebert-kostan-y6UEUCq2RHw-unsplash.jpg +caption: Image file from {$assets} +width: small +posh: left +``` + +![Remote image](remote.json) + +The extra parameter keys are the same as the ones above. There is no new name for the resource, we use the data file inside the usual Markdown image syntax like `![global tiger](global.yaml)`. + +We can also use TOML or JSON files, enter a remote URL as source, and call every image service with an HTTP API. The second image here is generated with this data file for example: + +```json +{ + "src": "https://picsum.photos/300/300", + "caption": "Random image", + "posh": "right", + "width": "tiny" +} +``` + +The module is available on [GitHub](https://github.com/bowman2001/hugo-mod-resource). diff --git a/exampleSite/content/news/resources-in-data-files/remote.json b/exampleSite/content/en/news/resources-in-data-files/remote.json similarity index 100% rename from exampleSite/content/news/resources-in-data-files/remote.json rename to exampleSite/content/en/news/resources-in-data-files/remote.json diff --git a/exampleSite/content/en/news/search/index.md b/exampleSite/content/en/news/search/index.md new file mode 100644 index 000000000..982b93d04 --- /dev/null +++ b/exampleSite/content/en/news/search/index.md @@ -0,0 +1,17 @@ +--- +authors: [Georg Makowski] +title: Search +date: 2023-07-04T18:18:12+02:00 +categories: [Design] +tags: [search] +--- + +The theme is now prepared for **{=Pagefind}**, a fast open-source full-text search engine for self-hosting. +{.p-first} + + +The [Pagefind project](https://pagefind.app) is under active development, heading towards its first major version. Its capabilities are impressive, already. Indexing this site takes only a fraction of a second. + +To offer the search, we need to install the [node package pagefind](https://npm.io/package/pagefind) and let it process our HTML after every generation. For a short tutorial see [Search with pagefind][search]. + +[search]: https://perplex.desider.at/doc/site/search-with-pagefind \ No newline at end of file diff --git a/exampleSite/content/en/news/second-beta/index.md b/exampleSite/content/en/news/second-beta/index.md new file mode 100644 index 000000000..fb892112e --- /dev/null +++ b/exampleSite/content/en/news/second-beta/index.md @@ -0,0 +1,28 @@ +--- +authors: [Georg Makowski] +title: Second Pre-release{/}of the Perplex Theme +linktitle: Second Pre-release +description: Beta release 2 +date: 2023-05-10T23:19:38+02:00 +resources: + - src: resource-database-GaBX_ooh8-g-unsplash.jpg + name: featured + params: + alt: Rendered objects +categories: [Release] +tags: [fluid responsive] +--- + +Author pages are now available and some layout elements have been improved. +{.p-first} + + +- The release is available on [GitHub](https://github.com/bowman2001/perplex/releases/). + +- This extensive (but still incomplete) documentation site is available as the [example project](https://github.com/bowman2001/perplexdoc). + +- In the coming weeks, I will improve and modularize some components of the theme to make them reusable: Fonts, plugins, image generation... + +- The next beta release will include social icons and the necessary parameters for the project and for author pages to add links to social networks. + +- And after that, I’m going to add a dark mode to the theme. diff --git a/exampleSite/content/news/second-beta/resource-database-GaBX_ooh8-g-unsplash.jpg b/exampleSite/content/en/news/second-beta/resource-database-GaBX_ooh8-g-unsplash.jpg similarity index 100% rename from exampleSite/content/news/second-beta/resource-database-GaBX_ooh8-g-unsplash.jpg rename to exampleSite/content/en/news/second-beta/resource-database-GaBX_ooh8-g-unsplash.jpg diff --git a/exampleSite/content/en/search/index.md b/exampleSite/content/en/search/index.md new file mode 100644 index 000000000..fd334e2ee --- /dev/null +++ b/exampleSite/content/en/search/index.md @@ -0,0 +1,11 @@ +--- +title: Search +description: Powered by CloudCannon’s [Pagefind](https://pagefind.app) +subtitle: true +date: 2023-07-03T11:10:29+02:00 +type: search +--- + +Search the full-text content of this site. Excluded from the search indices are code segments, tables, and formula blocks. +{.p-first} + \ No newline at end of file diff --git a/exampleSite/content/site/Hugo.png b/exampleSite/content/en/site/Hugo.png similarity index 100% rename from exampleSite/content/site/Hugo.png rename to exampleSite/content/en/site/Hugo.png diff --git a/exampleSite/content/site/Hugo.svg b/exampleSite/content/en/site/Hugo.svg similarity index 100% rename from exampleSite/content/site/Hugo.svg rename to exampleSite/content/en/site/Hugo.svg diff --git a/exampleSite/content/site/Markdown.png b/exampleSite/content/en/site/Markdown.png similarity index 100% rename from exampleSite/content/site/Markdown.png rename to exampleSite/content/en/site/Markdown.png diff --git a/exampleSite/content/site/Markdown.svg b/exampleSite/content/en/site/Markdown.svg similarity index 100% rename from exampleSite/content/site/Markdown.svg rename to exampleSite/content/en/site/Markdown.svg diff --git a/exampleSite/content/site/Perplex.png b/exampleSite/content/en/site/Perplex.png similarity index 100% rename from exampleSite/content/site/Perplex.png rename to exampleSite/content/en/site/Perplex.png diff --git a/exampleSite/content/site/Perplex.svg b/exampleSite/content/en/site/Perplex.svg similarity index 100% rename from exampleSite/content/site/Perplex.svg rename to exampleSite/content/en/site/Perplex.svg diff --git a/exampleSite/content/en/site/_index.md b/exampleSite/content/en/site/_index.md new file mode 100644 index 000000000..a84c5e74d --- /dev/null +++ b/exampleSite/content/en/site/_index.md @@ -0,0 +1,37 @@ +--- +title: site branch bundle +_build: + list: false + render: false +resources : + - src: Perplex.svg + name: featured + params: + alt: Perplex logo + link: https://perplex.desider.at + type: symbol + box: none + - src: Hugo.png + name: hugo + params: + link: https://gohugo.io + alt: Hugo logo + type: symbol + box: none + - src: Markdown.svg + name: markdownlogo + params: + alt: Markdown logo + type: symbol + background: light + padding: one + width: tiny + - name: smallsplash + src: mulyadi-JJMoAiVl9jA-unsplash.jpg + params: + alt: Splashing ring of water + - src: erda-estremera-eMX1aIAp9Nw-unsplash.jpg + name: bigsplash + params: + alt: A splashing drop of water +--- diff --git a/exampleSite/content/site/erda-estremera-eMX1aIAp9Nw-unsplash.jpg b/exampleSite/content/en/site/erda-estremera-eMX1aIAp9Nw-unsplash.jpg similarity index 100% rename from exampleSite/content/site/erda-estremera-eMX1aIAp9Nw-unsplash.jpg rename to exampleSite/content/en/site/erda-estremera-eMX1aIAp9Nw-unsplash.jpg diff --git a/exampleSite/content/site/mulyadi-JJMoAiVl9jA-unsplash.jpg b/exampleSite/content/en/site/mulyadi-JJMoAiVl9jA-unsplash.jpg similarity index 100% rename from exampleSite/content/site/mulyadi-JJMoAiVl9jA-unsplash.jpg rename to exampleSite/content/en/site/mulyadi-JJMoAiVl9jA-unsplash.jpg diff --git a/exampleSite/content/site/portrait.jpg b/exampleSite/content/en/site/portrait.jpg similarity index 100% rename from exampleSite/content/site/portrait.jpg rename to exampleSite/content/en/site/portrait.jpg diff --git a/exampleSite/content/en/tags/_index.md b/exampleSite/content/en/tags/_index.md new file mode 100644 index 000000000..0325244b5 --- /dev/null +++ b/exampleSite/content/en/tags/_index.md @@ -0,0 +1,12 @@ +--- +title: Tags +description: All specific topics or aspects on this site +subtitle: true +date: 2022-08-24T13:40:31+02:00 +resources: + - src: angele-kamp-KaeaUITiWnc-unsplash.jpg + name: featured + params: + alt: Four empty paper labels on strings + zoom: 1.4 +--- \ No newline at end of file diff --git a/exampleSite/content/tags/accessible/Accessibility_logo.png b/exampleSite/content/en/tags/accessible/Accessibility_logo.png similarity index 100% rename from exampleSite/content/tags/accessible/Accessibility_logo.png rename to exampleSite/content/en/tags/accessible/Accessibility_logo.png diff --git a/exampleSite/content/tags/accessible/Accessibility_logo.svg b/exampleSite/content/en/tags/accessible/Accessibility_logo.svg similarity index 100% rename from exampleSite/content/tags/accessible/Accessibility_logo.svg rename to exampleSite/content/en/tags/accessible/Accessibility_logo.svg diff --git a/exampleSite/content/en/tags/accessible/_index.md b/exampleSite/content/en/tags/accessible/_index.md new file mode 100644 index 000000000..a55595a3a --- /dev/null +++ b/exampleSite/content/en/tags/accessible/_index.md @@ -0,0 +1,16 @@ +--- +title: Accessible +description: Easy access to the web for all +subtitle: true +date: 2022-09-13T11:25:21+02:00 +resources: +- src: Accessibility_logo.svg + name: featured + params: + alt: Accessibility logo of the United Nations + attr: SVG by Pablo Busatto + background: light + padding: one + width: tiny + type: symbol +--- diff --git a/exampleSite/content/tags/angele-kamp-KaeaUITiWnc-unsplash.jpg b/exampleSite/content/en/tags/angele-kamp-KaeaUITiWnc-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/angele-kamp-KaeaUITiWnc-unsplash.jpg rename to exampleSite/content/en/tags/angele-kamp-KaeaUITiWnc-unsplash.jpg diff --git a/exampleSite/content/en/tags/author/_index.md b/exampleSite/content/en/tags/author/_index.md new file mode 100644 index 000000000..fbb840942 --- /dev/null +++ b/exampleSite/content/en/tags/author/_index.md @@ -0,0 +1,12 @@ +--- +title: Author +description: "Original content writer or editor" +subtitle: true +date: 2023-10-10T17:29:55+02:00 +resources: + - src: charles-etoroma-vkc1YLZ50yE-unsplash.jpg + name: featured + params: + alt: Anonymous author + anchor: Center +--- diff --git a/exampleSite/content/tags/author/charles-etoroma-vkc1YLZ50yE-unsplash.jpg b/exampleSite/content/en/tags/author/charles-etoroma-vkc1YLZ50yE-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/author/charles-etoroma-vkc1YLZ50yE-unsplash.jpg rename to exampleSite/content/en/tags/author/charles-etoroma-vkc1YLZ50yE-unsplash.jpg diff --git a/exampleSite/content/en/tags/block/_index.md b/exampleSite/content/en/tags/block/_index.md new file mode 100644 index 000000000..f748b509f --- /dev/null +++ b/exampleSite/content/en/tags/block/_index.md @@ -0,0 +1,15 @@ +--- +title: Block +description: Markdown block elements +subtitle: true +date: 2022-09-04T19:27:41+02:00 +resources: +- src: jan-antonin-kolar-HB26V8IRL2k-unsplash.jpg + name: featured + params: + alt: Wooden blocks forming a wall +- src: tandem-x-visuals-fYx7mQHxVEw-unsplash.jpg + name: alternative + params: + alt: A white cube +--- diff --git a/exampleSite/content/tags/block/jan-antonin-kolar-HB26V8IRL2k-unsplash.jpg b/exampleSite/content/en/tags/block/jan-antonin-kolar-HB26V8IRL2k-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/block/jan-antonin-kolar-HB26V8IRL2k-unsplash.jpg rename to exampleSite/content/en/tags/block/jan-antonin-kolar-HB26V8IRL2k-unsplash.jpg diff --git a/exampleSite/content/tags/block/tandem-x-visuals-fYx7mQHxVEw-unsplash.jpg b/exampleSite/content/en/tags/block/tandem-x-visuals-fYx7mQHxVEw-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/block/tandem-x-visuals-fYx7mQHxVEw-unsplash.jpg rename to exampleSite/content/en/tags/block/tandem-x-visuals-fYx7mQHxVEw-unsplash.jpg diff --git a/exampleSite/content/en/tags/code/_index.md b/exampleSite/content/en/tags/code/_index.md new file mode 100644 index 000000000..708211a11 --- /dev/null +++ b/exampleSite/content/en/tags/code/_index.md @@ -0,0 +1,13 @@ +--- +title: Code +description: Text written in a programming language +subtitle: true +date: 2023-03-07T17:21:00+01:00 +resources: +- name: featured + src: markus-spiske-1LLh8k2_YFk-unsplash.jpg + params: + alt: Code on a screen + ratio: 1.5 + zoom: 1.5 +--- diff --git a/exampleSite/content/tags/code/markus-spiske-1LLh8k2_YFk-unsplash.jpg b/exampleSite/content/en/tags/code/markus-spiske-1LLh8k2_YFk-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/code/markus-spiske-1LLh8k2_YFk-unsplash.jpg rename to exampleSite/content/en/tags/code/markus-spiske-1LLh8k2_YFk-unsplash.jpg diff --git a/exampleSite/content/en/tags/feature/_index.md b/exampleSite/content/en/tags/feature/_index.md new file mode 100644 index 000000000..0a70ac72c --- /dev/null +++ b/exampleSite/content/en/tags/feature/_index.md @@ -0,0 +1,12 @@ +--- +title: Feature +description: "**Placeholder**: Short tag description" +subtitle: true +date: 2023-10-02T14:39:44+02:00 +resources: + - src: ray-hennessy-gdTxVSAE5sk-unsplash.jpg + name: featured + params: + alt: Fireworks over open water + zoom: 1.4 +--- diff --git a/exampleSite/content/tags/feature/ray-hennessy-gdTxVSAE5sk-unsplash.jpg b/exampleSite/content/en/tags/feature/ray-hennessy-gdTxVSAE5sk-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/feature/ray-hennessy-gdTxVSAE5sk-unsplash.jpg rename to exampleSite/content/en/tags/feature/ray-hennessy-gdTxVSAE5sk-unsplash.jpg diff --git a/exampleSite/content/en/tags/fluid-responsive/_index.md b/exampleSite/content/en/tags/fluid-responsive/_index.md new file mode 100644 index 000000000..1006bf0a3 --- /dev/null +++ b/exampleSite/content/en/tags/fluid-responsive/_index.md @@ -0,0 +1,11 @@ +--- +title: Fluid Responsive +description: Fluid typography & design adapt smoothly to the view-port +subtitle: true +date: 2023-03-15T15:18:15+01:00 +resources: + - name: featured + src: resource-database--R7raVu_isU-unsplash.jpg + params: + alt: Fluid frame +--- diff --git a/exampleSite/content/tags/fluid-responsive/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg b/exampleSite/content/en/tags/fluid-responsive/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/fluid-responsive/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg rename to exampleSite/content/en/tags/fluid-responsive/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg diff --git a/exampleSite/content/tags/fluid-responsive/resource-database--R7raVu_isU-unsplash.jpg b/exampleSite/content/en/tags/fluid-responsive/resource-database--R7raVu_isU-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/fluid-responsive/resource-database--R7raVu_isU-unsplash.jpg rename to exampleSite/content/en/tags/fluid-responsive/resource-database--R7raVu_isU-unsplash.jpg diff --git a/exampleSite/content/tags/hugo/Hugo.png b/exampleSite/content/en/tags/hugo/Hugo.png similarity index 100% rename from exampleSite/content/tags/hugo/Hugo.png rename to exampleSite/content/en/tags/hugo/Hugo.png diff --git a/exampleSite/content/tags/hugo/Hugo.svg b/exampleSite/content/en/tags/hugo/Hugo.svg similarity index 100% rename from exampleSite/content/tags/hugo/Hugo.svg rename to exampleSite/content/en/tags/hugo/Hugo.svg diff --git a/exampleSite/content/en/tags/hugo/_index.md b/exampleSite/content/en/tags/hugo/_index.md new file mode 100644 index 000000000..1c28e79c6 --- /dev/null +++ b/exampleSite/content/en/tags/hugo/_index.md @@ -0,0 +1,14 @@ +--- +title: Hugo +description: The fastest static site engine in the world +subtitle: true +date: 2023-03-09T10:44:52+01:00 +resources: + - name: featured + src: Hugo.png + params: + alt: The Hugo logo + box: none + type: symbol + background: none +--- diff --git a/exampleSite/content/en/tags/image/_index.md b/exampleSite/content/en/tags/image/_index.md new file mode 100644 index 000000000..ef98ab401 --- /dev/null +++ b/exampleSite/content/en/tags/image/_index.md @@ -0,0 +1,12 @@ +--- +title: Image +description: Stand-alone & embedded images +subtitle: true +date: 2023-03-07T21:55:35+01:00 +resources: + - src: erda-estremera-eMX1aIAp9Nw-unsplash.jpg + name: featured + params: + alt: Splashing drop of water + zoom: 1.2 +--- diff --git a/exampleSite/content/tags/image/erda-estremera-eMX1aIAp9Nw-unsplash.jpg b/exampleSite/content/en/tags/image/erda-estremera-eMX1aIAp9Nw-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/image/erda-estremera-eMX1aIAp9Nw-unsplash.jpg rename to exampleSite/content/en/tags/image/erda-estremera-eMX1aIAp9Nw-unsplash.jpg diff --git a/exampleSite/content/en/tags/inline/_index.md b/exampleSite/content/en/tags/inline/_index.md new file mode 100644 index 000000000..8524232d5 --- /dev/null +++ b/exampleSite/content/en/tags/inline/_index.md @@ -0,0 +1,13 @@ +--- +title: Inline +description: Inline Markdown elements +subtitle: true +date: 2023-03-21T20:22:52+01:00 +resources: + - src: indira-tjokorda-Y-VYK0SDLxs-unsplash.jpg + name: featured + params: + alt: Inline skating + zoom: 1.25 + anchor: Left +--- diff --git a/exampleSite/content/tags/inline/indira-tjokorda-Y-VYK0SDLxs-unsplash.jpg b/exampleSite/content/en/tags/inline/indira-tjokorda-Y-VYK0SDLxs-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/inline/indira-tjokorda-Y-VYK0SDLxs-unsplash.jpg rename to exampleSite/content/en/tags/inline/indira-tjokorda-Y-VYK0SDLxs-unsplash.jpg diff --git a/exampleSite/content/tags/marginal-note/Diophantus-II-8-Fermat_cut.jpg b/exampleSite/content/en/tags/marginal-note/Diophantus-II-8-Fermat_cut.jpg similarity index 100% rename from exampleSite/content/tags/marginal-note/Diophantus-II-8-Fermat_cut.jpg rename to exampleSite/content/en/tags/marginal-note/Diophantus-II-8-Fermat_cut.jpg diff --git a/exampleSite/content/en/tags/marginal-note/_index.md b/exampleSite/content/en/tags/marginal-note/_index.md new file mode 100644 index 000000000..86ad1f355 --- /dev/null +++ b/exampleSite/content/en/tags/marginal-note/_index.md @@ -0,0 +1,13 @@ +--- +title: Marginal Note +description: A note in the right marginal page column +subtitle: true +date: 2023-03-10T13:38:10+01:00 +resources: + - src: Diophantus-II-8-Fermat_cut.jpg + name: featured + params: + alt: Old reprint of a classic proof by Diophantus followed by Fermat’s famous last conjecture + attr: PD + caption: Reprint of Diophantus arithmetica including Fermat’s theorem +--- diff --git a/exampleSite/content/en/tags/replacement/_index.md b/exampleSite/content/en/tags/replacement/_index.md new file mode 100644 index 000000000..bb86a0929 --- /dev/null +++ b/exampleSite/content/en/tags/replacement/_index.md @@ -0,0 +1,11 @@ +--- +title: Replacement +description: Code for missing inline HTML in single curly braces +subtitle: true +date: 2022-09-03T23:21:07+02:00 +resources: + - src: jackson-sophat-_t-l5FFH8VA-unsplash.jpg + name: featured + params: + alt: A HTML tag +--- \ No newline at end of file diff --git a/exampleSite/content/tags/replacement/jackson-sophat-_t-l5FFH8VA-unsplash.jpg b/exampleSite/content/en/tags/replacement/jackson-sophat-_t-l5FFH8VA-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/replacement/jackson-sophat-_t-l5FFH8VA-unsplash.jpg rename to exampleSite/content/en/tags/replacement/jackson-sophat-_t-l5FFH8VA-unsplash.jpg diff --git a/exampleSite/content/en/tags/resources/_index.md b/exampleSite/content/en/tags/resources/_index.md new file mode 100644 index 000000000..035715cc6 --- /dev/null +++ b/exampleSite/content/en/tags/resources/_index.md @@ -0,0 +1,11 @@ +--- +title: Resources +description: Additional Files +subtitle: true +date: 2023-03-13T13:17:45+01:00 +resources: + - src: alexander-grey-tn57JI3CewI-unsplash.jpg + name: featured + params: + alt: A pile of files +--- \ No newline at end of file diff --git a/exampleSite/content/tags/resources/alexander-grey-tn57JI3CewI-unsplash.jpg b/exampleSite/content/en/tags/resources/alexander-grey-tn57JI3CewI-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/resources/alexander-grey-tn57JI3CewI-unsplash.jpg rename to exampleSite/content/en/tags/resources/alexander-grey-tn57JI3CewI-unsplash.jpg diff --git a/exampleSite/content/en/tags/search/_index.md b/exampleSite/content/en/tags/search/_index.md new file mode 100644 index 000000000..e77556b24 --- /dev/null +++ b/exampleSite/content/en/tags/search/_index.md @@ -0,0 +1,11 @@ +--- +title: Search +description: "Full text searching" +subtitle: true +date: 2023-07-05T12:43:40+02:00 +resources: + - src: mick-haupt-eQ2Z9ay9Wws-unsplash.jpg + name: featured + params: + alt: magnifiying glass over old scripture +--- diff --git a/exampleSite/content/tags/search/mick-haupt-eQ2Z9ay9Wws-unsplash.jpg b/exampleSite/content/en/tags/search/mick-haupt-eQ2Z9ay9Wws-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/search/mick-haupt-eQ2Z9ay9Wws-unsplash.jpg rename to exampleSite/content/en/tags/search/mick-haupt-eQ2Z9ay9Wws-unsplash.jpg diff --git a/exampleSite/content/en/tags/stand-alone/_index.md b/exampleSite/content/en/tags/stand-alone/_index.md new file mode 100644 index 000000000..b3c3a6e24 --- /dev/null +++ b/exampleSite/content/en/tags/stand-alone/_index.md @@ -0,0 +1,13 @@ +--- +title: Stand-Alone +description: Separated layout element +subtitle: true +date: 2023-10-10T19:58:54+02:00 +resources: + - src: austin-mabe-i7x84It0L-Y-unsplash.jpg + name: featured + params: + alt: Shadow of a lone man in the sunrise + zoom: 1.6 + anchor: Center +--- diff --git a/exampleSite/content/tags/stand-alone/austin-mabe-i7x84It0L-Y-unsplash.jpg b/exampleSite/content/en/tags/stand-alone/austin-mabe-i7x84It0L-Y-unsplash.jpg similarity index 100% rename from exampleSite/content/tags/stand-alone/austin-mabe-i7x84It0L-Y-unsplash.jpg rename to exampleSite/content/en/tags/stand-alone/austin-mabe-i7x84It0L-Y-unsplash.jpg diff --git a/exampleSite/content/tags/vscode/Visual_Studio_Code_1.35_icon.svg.png b/exampleSite/content/en/tags/vscode/Visual_Studio_Code_1.35_icon.svg.png similarity index 100% rename from exampleSite/content/tags/vscode/Visual_Studio_Code_1.35_icon.svg.png rename to exampleSite/content/en/tags/vscode/Visual_Studio_Code_1.35_icon.svg.png diff --git a/exampleSite/content/en/tags/vscode/_index.md b/exampleSite/content/en/tags/vscode/_index.md new file mode 100644 index 000000000..5705548d6 --- /dev/null +++ b/exampleSite/content/en/tags/vscode/_index.md @@ -0,0 +1,15 @@ +--- +title: VSCode +description: Microsoft’s free code editor Visual Studio Code +subtitle: true +date: 2023-03-31T02:12:45+02:00 +resources: +- src: Visual_Studio_Code_1.35_icon.svg.png + name: featured + params: + alt: Logo of Visual Studio Code + box: none + width: tiny + type: symbol + background: none +--- diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index 7f35bfb38..0f5a4d08a 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -1,5 +1,21 @@ baseURL: https://example.org -title: Perplex Example + +DefaultLanguageCode: en-us +DefaultContentLanguage: en + +languages: + en: + contentDir: content/en + languageCode: en-US + languageName: English + title: Perplex Example + weight: 1 + de: + contentDir: content/de + languageCode: de-DE + languageName: Deutsch + title: Perplex Beispiel + weight: 2 refLinksErrorLevel: WARNING timeout: 600s diff --git a/layouts/partials/nav/masthead.html b/layouts/partials/nav/masthead.html index ce4e28c4e..284d5aa50 100644 --- a/layouts/partials/nav/masthead.html +++ b/layouts/partials/nav/masthead.html @@ -9,6 +9,7 @@ {{/*{{- partial "nav/masthead/social.html" . -}}*/}} {{- partial "nav/masthead/menu-main-social" . }} {{- partial "nav/button/search.html" . -}} + {{- partial "nav/masthead/language-selector.html" . -}} {{- partial "nav/button/toc.html" . -}} {{- partial "nav/toc-walk-headings.html" . -}} diff --git a/layouts/partials/nav/masthead/language-selector.html b/layouts/partials/nav/masthead/language-selector.html new file mode 100644 index 000000000..5efc58047 --- /dev/null +++ b/layouts/partials/nav/masthead/language-selector.html @@ -0,0 +1,31 @@ +{{ if .Site.IsMultiLingual }} +
  • + {{- $a := dict }} + {{- $c := slice "ctrl__menulink" "nav-main__link" }} + +
      + {{ $siteLanguages := .Site.Languages }} + {{ $pageLang := .Page.Lang }} + {{ range .Page.AllTranslations }} + {{ $translation := . }} + {{ range $siteLanguages }} + {{ if eq $translation.Lang .Lang }} + {{- $c := slice "ctrl__menulink" "nav-main__link" }} + {{- if eq $pageLang .Lang }} + {{- $c = $c | append "is-active" }} + {{- $a = merge $a (dict "aria-current" "page") }} + {{- end }} +
    • + + {{ .LanguageName }} + +
      • + {{ end }} + {{ end }} + {{ end }} +
    +
    • +{{ end }} From 1c8e2a3f8e1b740aee519e9feb2aa67246a9ce08 Mon Sep 17 00:00:00 2001 From: Kariton <67470612+Kariton@users.noreply.github.com> Date: Wed, 10 Jul 2024 07:58:31 +0200 Subject: [PATCH 02/11] multilang support; pagefind-ui script path --- layouts/search/single.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/search/single.html b/layouts/search/single.html index 90334efc1..5591097ae 100644 --- a/layouts/search/single.html +++ b/layouts/search/single.html @@ -16,7 +16,7 @@ {{ end }} - +
    {{ $jsTemplate := resources.Get "js/pagefind_instantiate.js" }} {{ $js := $jsTemplate | resources.ExecuteAsTemplate "js/pagefind_instance.js" . | minify | fingerprint }} From 1bc35ab692ef8c6624550cb6ecbca16a1b710efc Mon Sep 17 00:00:00 2001 From: Kariton <67470612+Kariton@users.noreply.github.com> Date: Wed, 10 Jul 2024 09:06:31 +0200 Subject: [PATCH 03/11] multilang support; language selector now fits nav bar --- .../partials/nav/masthead/language-selector.html | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/layouts/partials/nav/masthead/language-selector.html b/layouts/partials/nav/masthead/language-selector.html index 5efc58047..7a791668d 100644 --- a/layouts/partials/nav/masthead/language-selector.html +++ b/layouts/partials/nav/masthead/language-selector.html @@ -1,14 +1,11 @@ {{ if .Site.IsMultiLingual }} -
  • - {{- $a := dict }} - {{- $c := slice "ctrl__menulink" "nav-main__link" }} - +
    • + {{ end }} From cbf8f1cf8127fd1ef643c34f90b8a72dc9cb2365 Mon Sep 17 00:00:00 2001 From: Kariton <67470612+Kariton@users.noreply.github.com> Date: Wed, 10 Jul 2024 09:36:35 +0200 Subject: [PATCH 04/11] multilang support; css stuff --- assets/css/screen.css | 29 +- assets/css/screen.post.css | 11063 +++++++++++++++++------------------ 2 files changed, 5537 insertions(+), 5555 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index 6e76ebbde..64b03196a 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -4549,10 +4549,8 @@ sup:target { .nav__item--dropdown { position: relative; -} - -.nav__item--dropdown > .ctrl__menulink { - display: inline-block; + display: flex; + align-items: center; cursor: pointer; } @@ -4565,6 +4563,7 @@ sup:target { padding: 0; margin: 0; list-style: none; + box-shadow: 0 0 0 1px var(--c-shadow-3); } .nav__item--dropdown:hover .dropdown, @@ -4573,10 +4572,14 @@ sup:target { } .nav__item--dropdown .dropdown li { - color: var(--c-text-normal); padding: 0.5rem; +} + +.nav__item--dropdown .dropdown li a { + color: var(--c-text-normal); text-decoration: none; display: block; + padding: 0.5rem; font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; letter-spacing: 0.075em; @@ -4584,24 +4587,12 @@ sup:target { text-transform: uppercase; } -.nav__item--dropdown .dropdown li:hover, -.nav__item--dropdown .dropdown li:focus { +.nav__item--dropdown .dropdown li a:hover, +.nav__item--dropdown .dropdown li a:focus { background-color: var(--c-frame-border-active); color: var(--c-text-low); } -.nav__item--dropdown .dropdown li a { - color: inherit; - text-decoration: none; - display: block; - width: 100%; -} - -.nav__item--dropdown .dropdown li a:hover, -.nav__item--dropdown .dropdown li a:focus { - background-color: transparent; - color: inherit; -} .nav-main__link { letter-spacing: 0.075em; diff --git a/assets/css/screen.post.css b/assets/css/screen.post.css index d0b972266..64b03196a 100644 --- a/assets/css/screen.post.css +++ b/assets/css/screen.post.css @@ -1,5831 +1,5822 @@ :root { - --fs: 53.125%; - --tnh: 10rem; - --tg: 2rem; - --es: 0rem; - --ta: left; - } - @media screen and (min-width: 39em) { - :root { - --fs: 1.2820512821vw; - --tg: 4rem; - --es: 1rem; - --ta: justify; - } - } - @media screen and (min-width: 48em) { - :root { - --fs: 0.8695652174vw; - --tnh: 5rem; - } + --fs: 53.125%; + --tnh: 10rem; + --tg: 2rem; + --es: 0rem; + --ta: left; +} +@media screen and (min-width: 39em) { + :root { + --fs: 1.2820512821vw; + --tg: 4rem; + --es: 1rem; + --ta: justify; + } +} +@media screen and (min-width: 48em) { + :root { + --fs: 0.8695652174vw; + --tnh: 5rem; + } +} +@media screen and (min-width: 79em) { + :root { + --fs: 0.6578947368vw; + } +} +@media screen and (min-width: 95em) { + :root { + --fs: 62.5%; + } +} +@media screen and (min-width: 120em) { + :root { + --fs: 0.4424778761vw; + } +} +@media screen and (min-width: 141em) { + :root { + --fs: 62.5%; + } +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video, button { + margin: 0; + padding: 0; + border: 0; + margin-block-start: 0; + margin-block-end: 0; + font: inherit; + vertical-align: baseline; +} + +ul, ol { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +hr { + border: none; + margin: 0; +} + +em { + font-style: italic; +} +em em { + font-style: normal; +} + +strong { + font-weight: 700; +} + +code, kbd, var { + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + hyphens: none; +} + +var { + font-weight: 300; + word-wrap: break-word; + word-break: break-word; +} + +strong var { + font-weight: 450; +} + +a { + text-decoration: none; + color: inherit; +} + +small { + font-size: 74%; +} + +mark { + display: inline-block; + line-height: 1em; + padding: 0.1em 0.2em; + color: var(--c-warn); + background-color: var(--c-warn-bg); + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); +} + +.link { + position: relative; + background-color: transparent; + border-radius: 0.5rem; +} + +.link--nav, .link--nav-ext, .link--frame, .link--frame-ext { + display: inline-block; +} + +.link--nav, .link--nav-ext { + color: var(--c-nav-link); + fill: var(--c-icon-link); +} +.link--nav:hover, .link--nav:focus, .link--nav:active, .link--nav-ext:hover, .link--nav-ext:focus, .link--nav-ext:active { + background-color: var(--c-nav-link-hover-bg); +} + +.link--nav:hover, .link--nav:focus, .link--nav:active, .link--nav.is-active { + color: var(--c-nav-link-hover); + fill: var(--c-icon-link-hover); +} + +.link--nav-ext:hover, .link--nav-ext:focus, .link--nav-ext:active { + color: var(--c-nav-link-ext-hover); + fill: var(--c-icon-link-ext-hover); +} + +.link--frame:hover, .link--frame:focus, .link--frame:active, .link--frame-ext:hover, .link--frame-ext:focus, .link--frame-ext:active { + background-color: var(--c-frame-button-hover-bg); +} + +.link--frame { + color: var(--c-frame-link); + fill: var(--c-frame-link); +} +.link--frame:hover, .link--frame:focus, .link--frame:active { + color: var(--c-frame-link-hover); + fill: var(--c-frame-link-hover); +} + +.link--frame-ext { + color: var(--c-frame-link-ext); + fill: var(--c-frame-link-ext); +} +.link--frame-ext:hover, .link--frame-ext:focus, .link--frame-ext:active { + color: var(--c-frame-link-ext-hover); + fill: var(--c-frame-link-ext-hover); +} + +.title__link { + display: inline-block; + color: var(--c-text-normal) !important; +} + +.h-a { + position: relative; +} +.h-a:before { + position: absolute; + left: -1.5rem; + content: "§"; + font-size: 80%; + opacity: 0; + color: var(--c-nav-link); +} +.h-a:hover, .h-a:focus { + color: var(--c-text-link-hover); +} +.h-a:hover:before, .h-a:focus:before { + opacity: 1; +} + +h1:target .h-a, h2:target .h-a, h3:target .h-a, h4:target .h-a, h5:target .h-a, h6:target .h-a { + position: relative; + background-color: transparent; + box-shadow: unset; +} +h1:target .h-a:before, h2:target .h-a:before, h3:target .h-a:before, h4:target .h-a:before, h5:target .h-a:before, h6:target .h-a:before { + opacity: 1; + color: var(--c-nav-link-hover); +} + +.link--text, .pagefind-ui__result-link { + padding-left: 0.2em; + padding-right: 0.2em; + margin-left: -0.2em; + margin-right: -0.2em; + text-decoration: underline dotted; + text-underline-offset: 0.075em; + text-decoration-thickness: 0.075em; + color: var(--c-text-link); + text-decoration-color: var(--c-text-link); +} +.link--text code, .pagefind-ui__result-link code { + text-decoration: inherit; + text-decoration-thickness: inherit; + text-underline-offset: inherit; +} +.link--text:hover, .pagefind-ui__result-link:hover, .link--text:focus, .pagefind-ui__result-link:focus, .link--text:active, .pagefind-ui__result-link:active { + color: var(--c-text-link-hover); + text-decoration-color: var(--c-text-link-hover); + background-color: var(--c-text-link-hover-bg); +} +.link--text[href^=http], [href^=http].pagefind-ui__result-link { + color: var(--c-text-link-ext); + text-decoration-color: var(--c-text-link-ext); +} +.link--text[href^=http]:after, [href^=http].pagefind-ui__result-link:after { + content: "↗"; +} +.link--text[href^=http]:hover, [href^=http].pagefind-ui__result-link:hover, .link--text[href^=http]:focus, [href^=http].pagefind-ui__result-link:focus { + background-color: var(--c-text-link-ext-hover-bg); + color: var(--c-text-link-ext-hover); + text-decoration-color: var(--c-text-link-ext-hover); +} + +.icon-link .icon { + fill: var(--c-icon-link); +} +.icon-link:hover .icon, .icon-link:focus .icon, .icon-link.is-active .icon { + fill: var(--c-nav-link-hover); +} + +.icon-link-ext .icon { + fill: var(--c-icon-link-ext); +} +.icon-link-ext:hover .icon, .icon-link-ext:focus .icon, .icon-link-ext.is-active .icon { + fill: var(--c-icon-link-ext-hover); +} + +.img__frame, .img__c { + display: block; + line-height: 0; +} + +.img__frame { + overflow: hidden; +} + +.img__frame--bg-white { + background: #fff; +} + +.img__frame--bg-light { + background: var(--c-frame-bg-1); +} + +.img__frame--bg-dark { + background: var(--c-frame); +} + +.img__frame--box-none { + box-shadow: none; +} + +.img__frame--box-shadow { + box-shadow: 0 0 0 1px var(--c-shadow-3); +} + +.img__frame--pad-half { + padding: 0.5rem; +} + +.img__frame--pad-one { + padding: 1rem; +} + +.img__frame--pad-two { + padding: 2rem; +} + +.img__frame--pad-three { + padding: 3rem; +} + +.l-footer .img__frame { + box-shadow: 0 0 0 0.2rem var(--c-frame-shadow-1); +} + +.img__c { + filter: var(--f-img); +} +.img__c svg { + width: 100%; + height: 100%; + margin: 0 auto; +} + +.img__c--c-red { + fill: var(--c-frame-border-active); +} + +.img__c--t-symbol img { + object-fit: contain !important; +} + +.img--svg { + width: 100%; + height: auto; +} + +#l-footer .img__c { + filter: brightness(90%) grayscale(50%); +} + +.caption { + display: block; + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.714465rem; + margin-bottom: -0.214465rem; + min-height: 2rem; + text-align: left; +} + +.caption__text, .caption__attr { + hyphens: none !important; + color: var(--c-text-extralow); +} + +.caption__text { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.caption__attr { + float: right; + text-align: right; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; +} + +.caption__id { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-low); +} + +.ls-blur-up-img, +.img--ls { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + font-family: "blur-up: always", "object-fit: cover"; + object-fit: cover; +} + +.img--ls.ls-blur-up-is-loading { + visibility: hidden; +} + +.ls-blur-up-img { + opacity: 1; + filter: blur(0.4rem); + transition: opacity 1s ease, filter 2s ease; +} + +.ls-blur-up-img.ls-inview.ls-original-loaded { + opacity: 0; + filter: blur(0.4rem); +} + +.img--lqip.lazyload, +.img--lqip.lazyloading { + filter: blur(0.4rem); +} + +.img--lqip.lazyloaded { + filter: blur(0); + transition: filter 150ms ease; +} + +.img--ph { + opacity: 0; + transition: opacity 150ms ease; +} + +.img--ph.lazyloaded { + opacity: 1; +} + +*, *:before, *:after { + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +html { + font-size: var(--fs); + font-synthesis: weight style; +} + +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-feature-settings: "liga" on, "clig" on, "dlig" off; + scroll-behavior: smooth; + overflow-y: auto; + overflow-x: hidden; + scrollbar-gutter: stable both-edges; + min-height: 0; + color: var(--c-text-normal); + background-color: var(--c-page); +} +@media screen and (min-width: 79em) { + body { + overflow: hidden; } - @media screen and (min-width: 79em) { - :root { - --fs: 0.6578947368vw; - } +} + +.l-tnp { + padding-top: calc(var(--tnh) + var(--tg)); +} + +@media screen and (min-width: 39em) { + .l-wrap { + padding: 0 2rem; } - @media screen and (min-width: 95em) { - :root { - --fs: 62.5%; - } +} +@media screen and (min-width: 48em) { + .l-wrap { + padding: 0; } - @media screen and (min-width: 120em) { - :root { - --fs: 0.4424778761vw; - } +} + +::selection, .selection .cl { + color: var(--c-selection); + background-color: var(--c-selection-bg); +} + +#l-masthead { + position: fixed; + top: 0; + z-index: 100; + width: 100vw; + height: 10rem; + color: var(--c-frame-text-normal); + background-color: var(--c-frame); + backdrop-filter: blur(1rem); + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 50%); + grid-template-rows: 5rem 5rem; + grid-template-areas: "logo ctrl" "menu menu"; +} +@media screen and (min-width: 39em) { + #l-masthead { + grid-template-columns: 2rem repeat(2, 37rem) 2rem; + grid-template-areas: ". logo ctrl ." ". menu menu ."; } - @media screen and (min-width: 141em) { - :root { - --fs: 62.5%; - } +} +@media screen and (min-width: 48em) { + #l-masthead { + height: 5rem; + grid-template-rows: 5rem; + grid-template-columns: 2rem repeat(3, 37rem) 2rem; + grid-template-areas: ". logo menu ctrl ."; } - - html, body, div, span, applet, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, pre, - a, abbr, acronym, address, big, cite, code, - del, dfn, em, img, ins, kbd, q, s, samp, - small, strike, strong, sub, sup, tt, var, - b, u, i, center, - dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - article, aside, canvas, details, embed, - figure, figcaption, footer, header, hgroup, - menu, nav, output, ruby, section, summary, - time, mark, audio, video, button { - margin: 0; - padding: 0; - border: 0; - margin-block-start: 0; - margin-block-end: 0; - font: inherit; - vertical-align: baseline; - } - - ul, ol { - list-style: none; - } - - blockquote, q { - quotes: none; - } - - blockquote:before, blockquote:after, - q:before, q:after { - content: none; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - hr { - border: none; - margin: 0; +} +@media screen and (min-width: 79em) { + #l-masthead { + grid-template-columns: minmax(2rem, auto) repeat(4, 37rem) minmax(2rem, auto); + grid-template-areas: ". logo menu menu ctrl ."; } - - em { - font-style: italic; +} +@media screen and (min-width: 120em) { + #l-masthead { + grid-template-columns: minmax(2rem, auto) repeat(6, 37rem) minmax(2rem, auto); + grid-template-areas: ". logo . menu menu ctrl . ."; + } +} + +#l-logo { + grid-area: logo; + width: 150%; +} +@media screen and (min-width: 39em) { + #l-logo { + width: 100%; } - em em { - font-style: normal; +} + +#l-menu { + width: 100%; + height: 100%; + grid-area: menu; + overflow: hidden; +} + +#l-ctrl { + grid-area: ctrl; + position: relative; +} + +#l-content-box { + position: relative; + flex-grow: 1; + flex-shrink: 1; + flex-basis: auto; + display: flex; + flex-direction: column; + justify-content: space-between; + scroll-margin-top: calc(var(--tnh) + var(--tg)); +} + +#l-content { + padding-bottom: calc(2rem + 1 * var(--es)); +} + +.l-box { + width: 100%; +} +@media screen and (min-width: 39em) { + .l-box { + width: 74rem; } - - strong { - font-weight: 700; +} +@media screen and (min-width: 48em) { + .l-box { + width: 111rem; + } +} + +@media screen and (min-width: 120em) { + .l-box--doc { + width: 148rem; + } +} + +@media screen and (min-width: 79em) { + .l-box--full { + width: 148rem; + } +} + +/* @keyframes content { + from {opacity: 0;} + to {opacity: 1;} +} */ +.l-page { + position: relative; + z-index: 1; + height: 100%; + display: grid; + grid-template-columns: repeat(2, 50%); + grid-template-areas: "main main"; +} +@media screen and (min-width: 39em) { + .l-page { + grid-template-columns: 2rem repeat(4, 18.5rem) 2rem; + grid-template-areas: ". main main main main main"; } - - code, kbd, var { - font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; - hyphens: none; +} +@media screen and (min-width: 48em) { + .l-page { + grid-template-columns: 2rem repeat(6, 18.5rem) 2rem; + grid-template-areas: ". main main main main main main main"; } - - var { - font-weight: 300; - word-wrap: break-word; - word-break: break-word; +} +@media screen and (min-width: 79em) { + .l-page { + grid-template-columns: minmax(2rem, auto) repeat(8, 18.5rem) minmax(2rem, auto); + grid-template-areas: ". main main main main main main main main main"; } - - strong var { - font-weight: 450; +} +@media screen and (min-width: 120em) { + .l-page { + grid-template-columns: minmax(2rem, auto) repeat(12, 18.5rem) minmax(2rem, auto); + grid-template-areas: ". . . main main main main main main main main main main main"; + } +} + +@media screen and (min-width: 79em) { + .l-page--doc { + grid-template-areas: "fill left left main main main main main main main"; + } +} +@media screen and (min-width: 120em) { + .l-page--doc { + grid-template-areas: "fill left left main main main main main main main main main main main"; + } +} +.l-page--doc.is-locked { + background: black; +} +.l-page--doc.is-locked > #l-main { + z-index: -1; +} + +#l-overlay { + display: none; + position: fixed; + top: var(--tnh); + left: 0; + z-index: 9; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.5333333333); + cursor: unset; +} +#l-overlay.is-visible { + display: block; + cursor: pointer; +} + +#l-main { + grid-area: main; + display: flex; + flex-direction: column; + position: relative; + z-index: 5; +} +@media screen and (min-width: 79em) { + #l-main { + overflow-x: hidden; + overflow-y: auto; + scrollbar-gutter: stable; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); } - - a { - text-decoration: none; - color: inherit; + #l-main::-webkit-scrollbar { + width: 1rem; + height: 1rem; } - - small { - font-size: 74%; + #l-main::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); } - - mark { - display: inline-block; - line-height: 1em; - padding: 0.1em 0.2em; - color: var(--c-warn); - background-color: var(--c-warn-bg); - border-radius: 0.5rem; - box-shadow: 0 0 0 1px var(--c-shadow-2); - } - - .link { - position: relative; - background-color: transparent; - border-radius: 0.5rem; + #l-main::-webkit-scrollbar-track { + background: var(--c-bg-3); } - - .link--nav, .link--nav-ext, .link--frame, .link--frame-ext { - display: inline-block; +} + +#l-sidebar { + position: fixed; + top: 0; + left: -100vw; + z-index: 90; + transition: transform 250ms ease-out; + width: 100vw; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: none; + background-color: var(--c-frame); +} +#l-sidebar.is-visible { + transform: translateX(100vw); + transition: transform 250ms ease-in; +} +@media screen and (min-width: 39em) { + #l-sidebar { + padding-left: 2rem; + padding-right: 2rem; } - - .link--nav, .link--nav-ext { - color: var(--c-nav-link); - fill: var(--c-icon-link); +} +@media screen and (min-width: 48em) { + #l-sidebar { + left: -55.5rem; + width: 55.5rem; + margin-right: 2rem; + scrollbar-gutter: stable; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); } - .link--nav:hover, .link--nav:focus, .link--nav:active, .link--nav-ext:hover, .link--nav-ext:focus, .link--nav-ext:active { - background-color: var(--c-nav-link-hover-bg); + #l-sidebar::-webkit-scrollbar { + width: 1rem; + height: 1rem; } - - .link--nav:hover, .link--nav:focus, .link--nav:active, .link--nav.is-active { - color: var(--c-nav-link-hover); - fill: var(--c-icon-link-hover); + #l-sidebar::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); } - - .link--nav-ext:hover, .link--nav-ext:focus, .link--nav-ext:active { - color: var(--c-nav-link-ext-hover); - fill: var(--c-icon-link-ext-hover); + #l-sidebar::-webkit-scrollbar-track { + background: var(--c-bg-3); } - - .link--frame:hover, .link--frame:focus, .link--frame:active, .link--frame-ext:hover, .link--frame-ext:focus, .link--frame-ext:active { - background-color: var(--c-frame-button-hover-bg); + #l-sidebar.is-visible { + transform: translateX(55.5rem); } - - .link--frame { - color: var(--c-frame-link); - fill: var(--c-frame-link); +} +@media screen and (min-width: 79em) { + #l-sidebar { + grid-area: left; + position: static; + width: 35rem; + height: 100%; + padding-left: 0; + padding-right: 0; } - .link--frame:hover, .link--frame:focus, .link--frame:active { - color: var(--c-frame-link-hover); - fill: var(--c-frame-link-hover); +} + +@media screen and (min-width: 79em) { + #l-fill { + grid-area: fill; + background-color: var(--c-frame); } - - .link--frame-ext { - color: var(--c-frame-link-ext); - fill: var(--c-frame-link-ext); +} + +/* #sidebar-left { + position: fixed; + left: calc(0.5rem + 2rem * var(--se)); + z-index: 2; + @media screen and (min-width: $bp-3col) { + position: relative; + } +} */ +/* @keyframes fade { + from { opacity: 0; } + to { opacity: 1; } +} */ +#l-footer { + flex: 0 0 auto; + margin-top: 2rem; + background: var(--c-frame); + box-shadow: 0 0 0 1px var(--c-shadow-1); +} +#l-footer hr { + border-bottom: 0.2rem solid #fff; + height: 1rem; + margin: 0 2rem; +} +.l-footer--home { + grid-area: fo; +} + +.l-footer__columns { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + gap: 0 0.01rem; + margin-bottom: calc(1rem + 1 * var(--es)); +} +@media screen and (min-width: 48em) { + .l-footer__columns { + flex-wrap: nowrap; } - .link--frame-ext:hover, .link--frame-ext:focus, .link--frame-ext:active { - color: var(--c-frame-link-ext-hover); - fill: var(--c-frame-link-ext-hover); +} + +.footer__col { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 18.5rem; + margin: 1rem 0; +} +@media screen and (min-width: 39em) { + .footer__col { + flex-grow: 1; + flex-shrink: 0; } - - .title__link { +} +@media screen and (min-width: 48em) { + .footer__col { + flex: 1 1 18.5rem; + } +} + +.icon { + display: inline-block; + flex-shrink: 0; + width: 3rem; + height: 3rem; +} + +.icon--material svg { + width: 100%; + height: 100%; +} + +.icon--small { + padding: 0.3rem; +} + +.icon--tiny { + padding: 0.5rem; +} + +.icon--big { + width: 4rem; + height: 4rem; + padding: 0; +} + +.icon--simple { + padding: 0.3rem; +} + +/* .icon-font { + // position: relative; + // bottom: 0.0625em; display: inline-block; - color: var(--c-text-normal) !important; + font-family: "Material Symbols Outlined"; + font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; + font-style: normal; + vertical-align: top; + white-space: nowrap; + letter-spacing: normal; + text-transform: none; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + font-feature-settings: "liga"; +} */ +#tgl-sb .icon:after, #toggle-toc .icon:after { + display: inline-block; + width: 3rem; + height: 3rem; + content: ""; + mask-size: cover; + -webkit-mask-size: cover; + background-color: var(--c-frame-button); +} +#tgl-sb.is-visible .icon:after, #toggle-toc.is-visible .icon:after { + background-color: var(--c-frame-button-hover); +} + +#tgl-sb .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A"); +} +#tgl-sb.is-visible .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E"); +} +@media screen and (min-width: 79em) { + #tgl-sb { + display: none; + } +} + +#toggle-toc .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E"); +} +#toggle-toc.is-visible .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E"); +} +@media screen and (min-width: 120em) { + #toggle-toc { + display: none; } - - .h-a { +} + +.copy-code { + position: absolute; + top: 2rem; + right: 2rem; + height: 2rem; + padding: 0.2rem 0.1rem 0 0; + width: 2rem; + fill: var(--c-icon); + background: transparent; + opacity: 0; + transition: opacity 150ms; + cursor: pointer; +} + +.highlight { + position: relative; +} +.highlight:hover .copy-code { + opacity: 1; +} + +.meta { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + max-width: 71rem; + color: var(--c-text-low); + fill: var(--c-icon); + margin: 0 1.5rem 2rem 1.5rem; +} + +@media screen and (min-width: 79em) { + .meta--head .taxo-shape .icon-font { + margin-left: -2.5rem; + } +} + +.meta--foot { + flex-shrink: 0; + align-items: end; + margin-bottom: 1rem; +} + +@media screen and (min-width: 79em) { + .meta--left { position: relative; + z-index: 5; + flex-direction: row-reverse; + justify-content: start; + float: left; + width: 34rem; + margin: 0 1.5rem; } - .h-a:before { - position: absolute; - left: -1.5rem; - content: "§"; - font-size: 80%; - opacity: 0; - color: var(--c-nav-link); + .meta--left .meta__list { + width: 17rem; } - .h-a:hover, .h-a:focus { - color: var(--c-text-link-hover); + .meta--left .meta__list--date { + align-items: flex-start; } - .h-a:hover:before, .h-a:focus:before { - opacity: 1; + .meta--left .meta__hanging { + margin-left: -3rem; } - - h1:target .h-a, h2:target .h-a, h3:target .h-a, h4:target .h-a, h5:target .h-a, h6:target .h-a { +} + +@media screen and (min-width: 120em) { + .meta--left-doc { position: relative; - background-color: transparent; - box-shadow: unset; - } - h1:target .h-a:before, h2:target .h-a:before, h3:target .h-a:before, h4:target .h-a:before, h5:target .h-a:before, h6:target .h-a:before { - opacity: 1; - color: var(--c-nav-link-hover); - } - - .link--text, .pagefind-ui__result-link { - padding-left: 0.2em; - padding-right: 0.2em; - margin-left: -0.2em; - margin-right: -0.2em; - text-decoration: underline dotted; - text-underline-offset: 0.075em; - text-decoration-thickness: 0.075em; - color: var(--c-text-link); - text-decoration-color: var(--c-text-link); - } - .link--text code, .pagefind-ui__result-link code { - text-decoration: inherit; - text-decoration-thickness: inherit; - text-underline-offset: inherit; - } - .link--text:hover, .pagefind-ui__result-link:hover, .link--text:focus, .pagefind-ui__result-link:focus, .link--text:active, .pagefind-ui__result-link:active { - color: var(--c-text-link-hover); - text-decoration-color: var(--c-text-link-hover); - background-color: var(--c-text-link-hover-bg); - } - .link--text[href^=http], [href^=http].pagefind-ui__result-link { - color: var(--c-text-link-ext); - text-decoration-color: var(--c-text-link-ext); - } - .link--text[href^=http]:after, [href^=http].pagefind-ui__result-link:after { - content: "↗"; - } - .link--text[href^=http]:hover, [href^=http].pagefind-ui__result-link:hover, .link--text[href^=http]:focus, [href^=http].pagefind-ui__result-link:focus { - background-color: var(--c-text-link-ext-hover-bg); - color: var(--c-text-link-ext-hover); - text-decoration-color: var(--c-text-link-ext-hover); - } - - .icon-link .icon { - fill: var(--c-icon-link); - } - .icon-link:hover .icon, .icon-link:focus .icon, .icon-link.is-active .icon { - fill: var(--c-nav-link-hover); - } - - .icon-link-ext .icon { - fill: var(--c-icon-link-ext); - } - .icon-link-ext:hover .icon, .icon-link-ext:focus .icon, .icon-link-ext.is-active .icon { - fill: var(--c-icon-link-ext-hover); - } - - .img__frame, .img__c { - display: block; - line-height: 0; + z-index: 5; + flex-direction: row-reverse; + justify-content: start; + float: left; + width: 34rem; + margin: 0 1.5rem; } - - .img__frame { - overflow: hidden; + .meta--left-doc .meta__list { + width: 17rem; } - - .img__frame--bg-white { - background: #fff; + .meta--left-doc .meta__list--date { + align-items: flex-start; } - - .img__frame--bg-light { - background: var(--c-frame-bg-1); + .meta--left-doc .meta__hanging { + margin-left: -3rem; + } +} + +.meta--card { + margin: 0 1.5rem; + max-width: unset; +} + +.meta--card--1 .meta__text, .meta--card--1 .meta__separator { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.714465rem; + padding-bottom: 0.285535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.meta--card--half { + justify-content: start; + margin: 0 1.5rem; +} +.meta--card--half .meta__text, .meta--card--half .meta__separator { + font-size: 1.287rem; + line-height: 1.5rem; + padding-top: 0.2680185rem; + padding-bottom: 0.2319815rem; +} + +.meta__date { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.meta__list { + display: flex; + flex-direction: column; + align-items: flex-start; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.01em; + word-spacing: 0.03em; +} + +.meta__list--date { + flex-shrink: 0; + align-items: flex-end; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.meta__item { + display: inline-flex; + flex-shrink: 0; + align-items: flex-end; +} + +.meta__item--taxo { + max-width: 16.5rem; +} + +.meta__separator, .meta__text { + display: inline-block; +} + +.meta__text, .meta__count, .meta__separator { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.564465rem; + padding-bottom: 0.435535rem; +} + +.meta__text { + padding-left: 0.5rem; + padding-right: 0.5rem; + max-width: 16.5rem; +} + +.meta__separator { + padding-left: 0; + padding-right: 0; +} + +.meta__count { + padding-left: 0; + padding-right: 0.5rem; +} + +.titlehead { + margin: 2rem; + padding: 1rem 0; + max-width: 70rem; + border-radius: 0.5rem; + box-shadow: 0 0 0 0.1rem var(--c-shadow-1); +} + +.titlehead--todo { + background-color: var(--c-bg-2); +} + +.titlehead--draft { + padding: 0; + background-color: var(--c-frame); +} +.titlehead--draft > p, .titlehead--draft > ol, .titlehead--draft > ul, .titlehead--draft > dl { + color: var(--c-frame-text-normal); +} +.titlehead--draft > p strong, .titlehead--draft > ol strong, .titlehead--draft > ul strong, .titlehead--draft > dl strong { + color: var(--c-frame-text-normal); +} + +.titlehead--deprecated { + color: var(--c-warn); + background-color: var(--c-warn-bg); +} + +.titlehead--experimental { + background-color: var(--c-danger-bg); +} +.titlehead--experimental > p, .titlehead--experimental > ol, .titlehead--experimental > ul { + color: var(--c-danger); +} + +@media screen and (min-width: 79em) { + .titlehead--margin { + margin-left: 39rem; + } +} + +.title { + padding: 0 calc(1rem + 1 * var(--es)) 2rem calc(1rem + 1 * var(--es)); + margin: 0 1rem; + max-width: 74rem; +} +.title h1, .title h2 { + font-size: 2.86rem; + line-height: 4rem; + margin-top: -0.07107rem; + margin-bottom: calc(-0.92893rem + var(--es)); +} +@media screen and (min-width: 39em) { + .title { + margin: 0; } - - .img__frame--bg-dark { - background: var(--c-frame); +} + +.title--site h1 { + font-size: 12.87rem; + line-height: 18rem; + padding-top: 0.180185rem; + padding-bottom: calc(0.819815rem + var(--es)); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.03em; + word-spacing: 0.09em; + text-align: center; + text-transform: uppercase; +} +.title--site .p-first { + text-align: center; +} + +.title--bg { + height: 5rem; + max-width: 100%; + margin: 0 1rem; + padding-bottom: 0; + box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1), 0 0 0 1px var(--c-shadow-2); +} +.title--bg h1 { + color: #fff; + margin: 0; + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.92893rem; + padding-bottom: 1.07107rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.04em; + word-spacing: 0.12em; + text-transform: uppercase; +} +@media screen and (min-width: 39em) { + .title--bg { + margin: 1rem 0 0 0; + } +} + +.title--news { + background: var(--ctg-news-title); +} +@media screen and (min-width: 79em) { + .title--news { + background: var(--ctg4-news-title); + } +} + +.title--blog { + background: var(--ctg-blog-title); +} +@media screen and (min-width: 79em) { + .title--blog { + background: var(--ctg4-blog-title); + } +} + +.title--sans h1, .title--sans h2 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.005em; + word-spacing: 0.015em; +} + +@media screen and (min-width: 79em) { + .title--left { + float: left; + width: 37rem; + } +} + +.title--author { + display: inline-flex; + flex-direction: row; + margin: -1rem 0; +} +@media screen and (min-width: 79em) { + .title--author { + flex-direction: column-reverse; + } +} + +.title--first, .title--second, .title--third { + padding-top: 1rem; + padding-bottom: calc(3rem + 2 * var(--es)); +} +.title--first > hr, .title--second > hr, .title--third > hr { + margin-bottom: -2rem; +} +.title--first h1, .title--second h1, .title--third h1 { + font-size: 2.86rem; + line-height: 4rem; + padding-top: 0.92893rem; + margin-bottom: -0.92893rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} + +.title--first > hr, .title--second > hr { + border-top: 0.35rem solid var(--c-text-normal); + height: 1rem; +} + +.title--first h1 { + text-transform: uppercase; + letter-spacing: 0.03em; + word-spacing: 0.09em; +} + +.title--second h1 { + letter-spacing: 0.015em; + word-spacing: 0.045em; +} + +.title--third > hr { + border-top: 0.25rem solid var(--c-text-normal); + height: 1rem; +} +.title--third h1 { + font-weight: 450; + letter-spacing: 0.005em; + word-spacing: 0.015em; +} + +.title--taxo { + max-width: unset; +} +.title--taxo h1 { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} +.title--taxo h2 { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.title--article h1 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + font-style: italic; + text-transform: none; + letter-spacing: 0; + word-spacing: 0; +} +@media screen and (min-width: 48em) { + .title--article { + margin-bottom: -2rem; } - - .img__frame--box-none { - box-shadow: none; + .title--article h1 { + position: relative; + top: -2rem; + font-size: 4.29rem; + line-height: 5rem; + padding-top: 0.893395rem; + padding-bottom: calc(0.106605rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 5rem ); + font-weight: 600; } - - .img__frame--box-shadow { - box-shadow: 0 0 0 1px var(--c-shadow-3); +} + +.title__description, .title__profession { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; +} +.title__description strong, .title__profession strong { + font-weight: 450; +} + +.title__description { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: 0.230275rem; +} + +.title__profession { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + padding-bottom: 0.57107rem; +} + +.section { + padding: calc(4rem + 2 * var(--es)) 0rem; +} +.section > hr { + border-bottom: 0.35rem solid var(--c-text-normal); + height: 1rem; + margin: 0 2rem; +} +.section > h2 { + font-size: 1.915rem; + line-height: 2rem; + padding-top: 0.2828325rem; + padding-bottom: 0.7171675rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; + word-spacing: 0.09em; + margin-left: 2rem; + margin-right: 2rem; +} +.section > h3 { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.714465rem; + padding-bottom: 1.785535rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + word-spacing: 0.12em; + margin-left: 2rem; + margin-right: 2rem; +} + +.md > h1, .container > h1, .md > h2, .container > h2, .md > h3, .container > h3, .md > h4, .container > h4, .md > h5, .container > h5, .md > h6, .container > h6, .md > hr, .container > hr, .md > table, .container > table { + max-width: 70rem; + margin-left: 2rem; + margin-right: 2rem; +} +.md > p, .container > p, .md > ul, .container > ul, .md > ol, .container > ol, .md > dl, .container > dl, .md > blockquote, .container > blockquote, .md > pre, .container > pre, .md > .fig-diagram, .container > .fig-diagram, .md > .maincol, .container > .maincol, .md > .literature, .container > .literature, .md > .footnotes, .container > .footnotes, .md > .gist, .container > .gist, .md > .asciicast, .container > .asciicast, .md > .box, .container > .box, .md > .math-block, .container > .math-block, .md > .chem-block, .container > .chem-block { + max-width: 74rem; + padding-left: 2rem; + padding-right: 2rem; +} + +.md, .container { + position: relative; + z-index: 1; + overflow-wrap: break-word; + /* .blind { + position: relative; + z-index: 1; + + &:after { + @include font.shapes(sans-cond, semibold); + position: absolute; + top: calc(50% - 0.5em); + left: calc(50% - 5ch); + z-index: -1; + font-size: 200%; + content: 'BLIND TEXT'; + transform: rotate(-10deg); + color: var(--c-watermark); + } + + &.blind-short:after { + font-size: 125%; + } + + &.blind-right:after { + left: calc(75% - 5ch); + } + + &.blind-left:after { + left: calc(25% - 5ch); + } + } */ +} +.md::after, .container::after { + display: table; + content: ""; + clear: both; +} +.md > p, .md > blockquote, .md li, .md dd, .container > p, .container > blockquote, .container li, .container dd { + text-align: var(--ta); +} +.md li, .md dt, .md dd, .container li, .container dt, .container dd { + break-inside: avoid; +} +.md dt, .container dt { + break-before: auto; +} +.md p, .md li, .md dd, .container p, .container li, .container dd { + hyphens: auto; +} +.md p strong, .md p em, .md p a, .md p span, .md li strong, .md li em, .md li a, .md li span, .md dd strong, .md dd em, .md dd a, .md dd span, .container p strong, .container p em, .container p a, .container p span, .container li strong, .container li em, .container li a, .container li span, .container dd strong, .container dd em, .container dd a, .container dd span { + hyphens: auto; +} +.md .no-hyphens, .container .no-hyphens { + hyphens: none; +} +.md .br-cond, .container .br-cond { + display: none; +} +@media screen and (min-width: 39em) { + .md .br-cond, .container .br-cond { + display: initial; + } +} +.md > p, .md > ul, .md > ol, .md > dl, .container > p, .container > ul, .container > ol, .container > dl { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: calc(0.22559375rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); +} +.md > p:target, .md > ul:target, .md > ol:target, .md > blockquote:target, .md > dl:target, .container > p:target, .container > ul:target, .container > ol:target, .container > blockquote:target, .container > dl:target { + border-radius: 0.5rem; + background-color: var(--c-bg-3); +} +.md p > .pull-quote, .container p > .pull-quote { + margin-left: -0.5em; +} +.md blockquote, .container blockquote { + padding: 1rem 2rem 1rem calc(5rem + 2 * var(--es)); +} +.md blockquote > p, .md blockquote > ul, .md blockquote > ol, .md blockquote > dl, .container blockquote > p, .container blockquote > ul, .container blockquote > ol, .container blockquote > dl { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: 0.22559375rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + hyphens: none; +} +.md blockquote footer, .md blockquote cite, .container blockquote footer, .container blockquote cite { + font-style: italic; +} +.md blockquote.left, .md blockquote.left-in-half, .md blockquote.left-in, .md blockquote.right, .md blockquote.right-in-half, .md blockquote.right-in, .container blockquote.left, .container blockquote.left-in-half, .container blockquote.left-in, .container blockquote.right, .container blockquote.right-in-half, .container blockquote.right-in { + padding: 0 2rem; + font-style: italic; + color: var(--c-text-semihigh); +} +.md strong, .container strong { + font-size: 99%; + color: var(--c-text-medium); +} +.md strong a, .md a strong, .container strong a, .container a strong { + color: inherit; +} +.md .blockquote-hero, .container .blockquote-hero { + color: var(--c-text-semihigh); + font-style: italic; + padding-right: calc(5rem + 2 * var(--es)); +} +.md .blockquote-hero > p, .md .blockquote-hero > ul, .md .blockquote-hero > ol, .md .blockquote-hero > dl, .container .blockquote-hero > p, .container .blockquote-hero > ul, .container .blockquote-hero > ol, .container .blockquote-hero > dl { + font-size: 2.5833333333rem; + line-height: 4rem; + padding-top: 0.0325416667rem; + margin-bottom: -0.0325416667rem; +} +.md hr, .container hr { + margin: calc(1.4rem + 0.5 * var(--es)) 2rem calc(0.5rem + 1.5 * var(--es)) 2rem; + height: 0.1rem; + border-top: 0.1rem solid var(--c-text-extralow); +} +@media screen and (min-width: 39em) { + .md > p:not(:empty) + ul, .md > p:not(:empty) + ol, .container > p:not(:empty) + ul, .container > p:not(:empty) + ol { + margin-top: -1rem; } - - .img__frame--pad-half { - padding: 0.5rem; +} +.md dd p + ol, .md dd p + ul, .container dd p + ol, .container dd p + ul { + padding-top: 1rem; +} +.md dd ul, .md dd ol, .md dd dl, .container dd ul, .container dd ol, .container dd dl { + text-align: left; +} +.md dd > ul, .md dd > ol, .md dd > dl, .container dd > ul, .container dd > ol, .container dd > dl { + margin-top: 1rem; +} +.md .p-first, .container .p-first { + font-size: 2.275rem; + line-height: 3.5rem; + padding-top: 0.8980125rem; + padding-bottom: 1.1019875rem; + text-align: left; + color: var(--c-text-low); + hyphens: none; +} +.md .p-first strong, .md .p-first em, .md .p-first a, .md .p-first span, .container .p-first strong, .container .p-first em, .container .p-first a, .container .p-first span { + hyphens: none; +} +.md .p-first em, .container .p-first em { + font-style: normal; +} +.md .p-first strong, .container .p-first strong { + font-weight: 450; + color: var(--c-text-medium); +} +@media screen and (min-width: 39em) { + .md .p-first, .container .p-first { + font-size: 2.6rem; + line-height: 4rem; + padding-top: 0.0263rem; + padding-bottom: 1.9737rem; + } +} +.md .p-big, .container .p-big { + font-size: 2.5833333333rem; + line-height: 4rem; + padding-top: 0.6992083333rem; + padding-bottom: 1.3007916667rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4.6666666667rem ); + color: var(--c-text-medium); +} +.md .p-small, .container .p-small { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: calc(0.535535rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); + color: var(--c-text-semihigh); +} +.md .placeholder, .container .placeholder { + color: var(--c-text-extralow); +} +.md .hang-quote, .container .hang-quote { + margin-left: -0.5em; +} +@media screen and (min-width: 48em) { + .md .up-1, .container .up-1 { + margin-top: -1rem; } - - .img__frame--pad-one { - padding: 1rem; + .md .up-2, .container .up-2 { + margin-top: -2rem; } - - .img__frame--pad-two { - padding: 2rem; + .md .up-3, .container .up-3 { + margin-top: -3rem; } - - .img__frame--pad-three { - padding: 3rem; + .md .up-4, .container .up-4 { + margin-top: -4rem; } - - .l-footer .img__frame { - box-shadow: 0 0 0 0.2rem var(--c-frame-shadow-1); + .md .up-5, .container .up-5 { + margin-top: -5rem; } - - .img__c { - filter: var(--f-img); + .md .up-6, .container .up-6 { + margin-top: -6rem; } - .img__c svg { - width: 100%; - height: 100%; - margin: 0 auto; + .md .up-7, .container .up-7 { + margin-top: -7rem; } - - .img__c--c-red { - fill: var(--c-frame-border-active); + .md .up-8, .container .up-8 { + margin-top: -8rem; } - - .img__c--t-symbol img { - object-fit: contain !important; + .md .up-9, .container .up-9 { + margin-top: -9rem; } - - .img--svg { - width: 100%; - height: auto; + .md .up-10, .container .up-10 { + margin-top: -10rem; } - - #l-footer .img__c { - filter: brightness(90%) grayscale(50%); + .md .up-11, .container .up-11 { + margin-top: -11rem; } - - .caption { - display: block; - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.714465rem; - margin-bottom: -0.214465rem; - min-height: 2rem; - text-align: left; + .md .up-12, .container .up-12 { + margin-top: -12rem; } - - .caption__text, .caption__attr { - hyphens: none !important; - color: var(--c-text-extralow); + .md .up-13, .container .up-13 { + margin-top: -13rem; } - - .caption__text { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; + .md .up-14, .container .up-14 { + margin-top: -14rem; } - - .caption__attr { - float: right; - text-align: right; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 300; + .md .up-15, .container .up-15 { + margin-top: -15rem; } - - .caption__id { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - color: var(--c-text-low); + .md .up-16, .container .up-16 { + margin-top: -16rem; } - - .ls-blur-up-img, - .img--ls { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - font-family: "blur-up: always", "object-fit: cover"; - object-fit: cover; - } - - .img--ls.ls-blur-up-is-loading { - visibility: hidden; - } - - .ls-blur-up-img { - opacity: 1; - filter: blur(0.4rem); - transition: opacity 1s ease, filter 2s ease; - } - - .ls-blur-up-img.ls-inview.ls-original-loaded { - opacity: 0; - filter: blur(0.4rem); - } - - .img--lqip.lazyload, - .img--lqip.lazyloading { - filter: blur(0.4rem); - } - - .img--lqip.lazyloaded { - filter: blur(0); - transition: filter 150ms ease; - } - - .img--ph { - opacity: 0; - transition: opacity 150ms ease; - } - - .img--ph.lazyloaded { - opacity: 1; - } - - *, *:before, *:after { - box-sizing: border-box; - } - - html, body { - height: 100%; + .md .up-17, .container .up-17 { + margin-top: -17rem; } - - html { - font-size: var(--fs); - font-synthesis: weight style; + .md .up-18, .container .up-18 { + margin-top: -18rem; } - - body { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-feature-settings: "liga" on, "clig" on, "dlig" off; - scroll-behavior: smooth; - overflow-y: auto; - overflow-x: hidden; - scrollbar-gutter: stable both-edges; - min-height: 0; - color: var(--c-text-normal); - background-color: var(--c-page); - } - @media screen and (min-width: 79em) { - body { - overflow: hidden; - } + .md .up-19, .container .up-19 { + margin-top: -19rem; } - - .l-tnp { - padding-top: calc(var(--tnh) + var(--tg)); + .md .up-20, .container .up-20 { + margin-top: -20rem; } - - @media screen and (min-width: 39em) { - .l-wrap { - padding: 0 2rem; - } + .md .up-21, .container .up-21 { + margin-top: -21rem; } - @media screen and (min-width: 48em) { - .l-wrap { - padding: 0; - } + .md .up-22, .container .up-22 { + margin-top: -22rem; } - - ::selection, .selection .cl { - color: var(--c-selection); - background-color: var(--c-selection-bg); + .md .up-23, .container .up-23 { + margin-top: -23rem; } - - #l-masthead { - position: fixed; - top: 0; - z-index: 100; - width: 100vw; - height: 10rem; - color: var(--c-frame-text-normal); - background-color: var(--c-frame); - backdrop-filter: blur(1rem); - display: grid; - justify-content: center; - grid-template-columns: repeat(2, 50%); - grid-template-rows: 5rem 5rem; - grid-template-areas: "logo ctrl" "menu menu"; - } - @media screen and (min-width: 39em) { - #l-masthead { - grid-template-columns: 2rem repeat(2, 37rem) 2rem; - grid-template-areas: ". logo ctrl ." ". menu menu ."; - } + .md .up-24, .container .up-24 { + margin-top: -24rem; } - @media screen and (min-width: 48em) { - #l-masthead { - height: 5rem; - grid-template-rows: 5rem; - grid-template-columns: 2rem repeat(3, 37rem) 2rem; - grid-template-areas: ". logo menu ctrl ."; - } + .md .up-25, .container .up-25 { + margin-top: -25rem; } - @media screen and (min-width: 79em) { - #l-masthead { - grid-template-columns: minmax(2rem, auto) repeat(4, 37rem) minmax(2rem, auto); - grid-template-areas: ". logo menu menu ctrl ."; - } + .md .up-26, .container .up-26 { + margin-top: -26rem; } - @media screen and (min-width: 120em) { - #l-masthead { - grid-template-columns: minmax(2rem, auto) repeat(6, 37rem) minmax(2rem, auto); - grid-template-areas: ". logo . menu menu ctrl . ."; - } + .md .up-27, .container .up-27 { + margin-top: -27rem; } - - #l-logo { - grid-area: logo; - width: 150%; + .md .up-28, .container .up-28 { + margin-top: -28rem; } - @media screen and (min-width: 39em) { - #l-logo { - width: 100%; - } + .md .up-29, .container .up-29 { + margin-top: -29rem; } - - #l-menu { - width: 100%; - height: 100%; - grid-area: menu; - overflow: hidden; + .md .up-30, .container .up-30 { + margin-top: -30rem; } - - #l-ctrl { - grid-area: ctrl; - position: relative; + .md .up-31, .container .up-31 { + margin-top: -31rem; } - - #l-content-box { - position: relative; - flex-grow: 1; - flex-shrink: 1; - flex-basis: auto; - display: flex; - flex-direction: column; - justify-content: space-between; - scroll-margin-top: calc(var(--tnh) + var(--tg)); + .md .up-32, .container .up-32 { + margin-top: -32rem; } - - #l-content { - padding-bottom: calc(2rem + 1 * var(--es)); + .md .up-33, .container .up-33 { + margin-top: -33rem; } - - .l-box { - width: 100%; + .md .up-34, .container .up-34 { + margin-top: -34rem; } - @media screen and (min-width: 39em) { - .l-box { - width: 74rem; - } + .md .up-35, .container .up-35 { + margin-top: -35rem; } - @media screen and (min-width: 48em) { - .l-box { - width: 111rem; - } + .md .up-36, .container .up-36 { + margin-top: -36rem; } - - @media screen and (min-width: 120em) { - .l-box--doc { - width: 148rem; - } + .md .up-37, .container .up-37 { + margin-top: -37rem; } - - @media screen and (min-width: 79em) { - .l-box--full { - width: 148rem; - } + .md .up-38, .container .up-38 { + margin-top: -38rem; } - - /* @keyframes content { - from {opacity: 0;} - to {opacity: 1;} - } */ - .l-page { - position: relative; - z-index: 1; - height: 100%; - display: grid; - grid-template-columns: repeat(2, 50%); - grid-template-areas: "main main"; - } - @media screen and (min-width: 39em) { - .l-page { - grid-template-columns: 2rem repeat(4, 18.5rem) 2rem; - grid-template-areas: ". main main main main main"; - } + .md .up-39, .container .up-39 { + margin-top: -39rem; } - @media screen and (min-width: 48em) { - .l-page { - grid-template-columns: 2rem repeat(6, 18.5rem) 2rem; - grid-template-areas: ". main main main main main main main"; - } + .md .up-40, .container .up-40 { + margin-top: -40rem; } - @media screen and (min-width: 79em) { - .l-page { - grid-template-columns: minmax(2rem, auto) repeat(8, 18.5rem) minmax(2rem, auto); - grid-template-areas: ". main main main main main main main main main"; - } + .md .up-41, .container .up-41 { + margin-top: -41rem; } - @media screen and (min-width: 120em) { - .l-page { - grid-template-columns: minmax(2rem, auto) repeat(12, 18.5rem) minmax(2rem, auto); - grid-template-areas: ". . . main main main main main main main main main main main"; - } + .md .up-42, .container .up-42 { + margin-top: -42rem; } - - @media screen and (min-width: 79em) { - .l-page--doc { - grid-template-areas: "fill left left main main main main main main main"; - } + .md .up-43, .container .up-43 { + margin-top: -43rem; } - @media screen and (min-width: 120em) { - .l-page--doc { - grid-template-areas: "fill left left main main main main main main main main main main main"; - } + .md .up-44, .container .up-44 { + margin-top: -44rem; } - .l-page--doc.is-locked { - background: black; + .md .up-45, .container .up-45 { + margin-top: -45rem; } - .l-page--doc.is-locked > #l-main { - z-index: -1; + .md .up-46, .container .up-46 { + margin-top: -46rem; } - - #l-overlay { - display: none; - position: fixed; - top: var(--tnh); - left: 0; - z-index: 9; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.5333333333); - cursor: unset; + .md .up-47, .container .up-47 { + margin-top: -47rem; } - #l-overlay.is-visible { - display: block; - cursor: pointer; + .md .up-48, .container .up-48 { + margin-top: -48rem; } - - #l-main { - grid-area: main; - display: flex; - flex-direction: column; - position: relative; - z-index: 5; + .md .up-49, .container .up-49 { + margin-top: -49rem; } - @media screen and (min-width: 79em) { - #l-main { - overflow-x: hidden; - overflow-y: auto; - scrollbar-gutter: stable; - scrollbar-color: var(--c-scrollbar) var(--c-bg-3); - } - #l-main::-webkit-scrollbar { - width: 1rem; - height: 1rem; - } - #l-main::-webkit-scrollbar-thumb { - background: var(--c-scrollbar); - } - #l-main::-webkit-scrollbar-track { - background: var(--c-bg-3); - } + .md .up-50, .container .up-50 { + margin-top: -50rem; } - - #l-sidebar { - position: fixed; - top: 0; - left: -100vw; - z-index: 90; - transition: transform 250ms ease-out; - width: 100vw; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior: none; - background-color: var(--c-frame); + .md .up-51, .container .up-51 { + margin-top: -51rem; } - #l-sidebar.is-visible { - transform: translateX(100vw); - transition: transform 250ms ease-in; + .md .up-52, .container .up-52 { + margin-top: -52rem; } - @media screen and (min-width: 39em) { - #l-sidebar { - padding-left: 2rem; - padding-right: 2rem; - } + .md .up-53, .container .up-53 { + margin-top: -53rem; } - @media screen and (min-width: 48em) { - #l-sidebar { - left: -55.5rem; - width: 55.5rem; - margin-right: 2rem; - scrollbar-gutter: stable; - scrollbar-color: var(--c-scrollbar) var(--c-bg-3); - } - #l-sidebar::-webkit-scrollbar { - width: 1rem; - height: 1rem; - } - #l-sidebar::-webkit-scrollbar-thumb { - background: var(--c-scrollbar); - } - #l-sidebar::-webkit-scrollbar-track { - background: var(--c-bg-3); - } - #l-sidebar.is-visible { - transform: translateX(55.5rem); - } + .md .up-54, .container .up-54 { + margin-top: -54rem; } - @media screen and (min-width: 79em) { - #l-sidebar { - grid-area: left; - position: static; - width: 35rem; - height: 100%; - padding-left: 0; - padding-right: 0; - } + .md .up-55, .container .up-55 { + margin-top: -55rem; } - - @media screen and (min-width: 79em) { - #l-fill { - grid-area: fill; - background-color: var(--c-frame); - } + .md .up-56, .container .up-56 { + margin-top: -56rem; } - - /* #sidebar-left { - position: fixed; - left: calc(0.5rem + 2rem * var(--se)); - z-index: 2; - @media screen and (min-width: $bp-3col) { - position: relative; - } - } */ - /* @keyframes fade { - from { opacity: 0; } - to { opacity: 1; } - } */ - #l-footer { - flex: 0 0 auto; + .md .up-57, .container .up-57 { + margin-top: -57rem; + } + .md .up-58, .container .up-58 { + margin-top: -58rem; + } + .md .up-59, .container .up-59 { + margin-top: -59rem; + } + .md .up-60, .container .up-60 { + margin-top: -60rem; + } + .md .down-1, .container .down-1 { + margin-top: 1rem; + } + .md .down-2, .container .down-2 { margin-top: 2rem; - background: var(--c-frame); - box-shadow: 0 0 0 1px var(--c-shadow-1); } - #l-footer hr { - border-bottom: 0.2rem solid #fff; - height: 1rem; - margin: 0 2rem; + .md .down-3, .container .down-3 { + margin-top: 3rem; } - .l-footer--home { - grid-area: fo; + .md .down-4, .container .down-4 { + margin-top: 4rem; } - - .l-footer__columns { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: flex-start; - gap: 0 0.01rem; - margin-bottom: calc(1rem + 1 * var(--es)); + .md .down-5, .container .down-5 { + margin-top: 5rem; } - @media screen and (min-width: 48em) { - .l-footer__columns { - flex-wrap: nowrap; - } + .md .down-6, .container .down-6 { + margin-top: 6rem; } - - .footer__col { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 18.5rem; - margin: 1rem 0; - } - @media screen and (min-width: 39em) { - .footer__col { - flex-grow: 1; - flex-shrink: 0; - } + .md .down-7, .container .down-7 { + margin-top: 7rem; } - @media screen and (min-width: 48em) { - .footer__col { - flex: 1 1 18.5rem; - } + .md .down-8, .container .down-8 { + margin-top: 8rem; } - - .icon { - display: inline-block; - flex-shrink: 0; - width: 3rem; - height: 3rem; + .md .down-9, .container .down-9 { + margin-top: 9rem; } - - .icon--material svg { - width: 100%; - height: 100%; + .md .down-10, .container .down-10 { + margin-top: 10rem; } - - .icon--small { - padding: 0.3rem; + .md .down-11, .container .down-11 { + margin-top: 11rem; } - - .icon--tiny { - padding: 0.5rem; + .md .down-12, .container .down-12 { + margin-top: 12rem; } - - .icon--big { - width: 4rem; - height: 4rem; - padding: 0; + .md .down-13, .container .down-13 { + margin-top: 13rem; } - - .icon--simple { - padding: 0.3rem; - } - - /* .icon-font { - // position: relative; - // bottom: 0.0625em; - display: inline-block; - font-family: "Material Symbols Outlined"; - font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; - font-style: normal; - vertical-align: top; - white-space: nowrap; - letter-spacing: normal; - text-transform: none; - word-wrap: normal; - direction: ltr; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - font-feature-settings: "liga"; - } */ - #tgl-sb .icon:after, #toggle-toc .icon:after { - display: inline-block; - width: 3rem; - height: 3rem; - content: ""; - mask-size: cover; - -webkit-mask-size: cover; - background-color: var(--c-frame-button); - } - #tgl-sb.is-visible .icon:after, #toggle-toc.is-visible .icon:after { - background-color: var(--c-frame-button-hover); - } - - #tgl-sb .icon:after { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.25 17.625v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Zm0-4.875v-1.5h17.5v1.5Z'/%3E%3C/svg%3E%0A"); - } - #tgl-sb.is-visible .icon:after { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.3 17.625v-1.5h12.5v1.5Zm16.35-.975L15 12l4.65-4.65L20.7 8.4 17.1 12l3.6 3.6ZM3.3 12.75v-1.5h9.5v1.5Zm0-4.875v-1.5h12.5v1.5Z'/%3E%3C/svg%3E"); - } - @media screen and (min-width: 79em) { - #tgl-sb { - display: none; - } + .md .down-14, .container .down-14 { + margin-top: 14rem; } - - #toggle-toc .icon:after { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.325 16.75v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm0-4v-1.5h13.7v1.5Zm16.525 8.075q-.35 0-.6-.238Q19 16.35 19 16t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 12.35 19 12t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Zm0-4q-.35 0-.6-.238Q19 8.35 19 8t.238-.588q.237-.237.587-.237t.6.237q.25.238.25.588t-.237.587q-.238.238-.588.238Z'/%3E%3C/svg%3E"); + .md .down-15, .container .down-15 { + margin-top: 15rem; } - #toggle-toc.is-visible .icon:after { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 18.65 5.35 17.6l5.6-5.6-5.6-5.6L6.4 5.35l5.6 5.6 5.6-5.6 1.05 1.05-5.6 5.6 5.6 5.6-1.05 1.05-5.6-5.6Z'/%3E%3C/svg%3E"); + .md .down-16, .container .down-16 { + margin-top: 16rem; } - @media screen and (min-width: 120em) { - #toggle-toc { - display: none; - } + .md .down-17, .container .down-17 { + margin-top: 17rem; } - - .copy-code { - position: absolute; - top: 2rem; - right: 2rem; - height: 2rem; - padding: 0.2rem 0.1rem 0 0; - width: 2rem; - fill: var(--c-icon); - background: transparent; - opacity: 0; - transition: opacity 150ms; - cursor: pointer; + .md .down-18, .container .down-18 { + margin-top: 18rem; } - - .highlight { - position: relative; + .md .down-19, .container .down-19 { + margin-top: 19rem; } - .highlight:hover .copy-code { - opacity: 1; + .md .down-20, .container .down-20 { + margin-top: 20rem; } - - .meta { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-start; - max-width: 71rem; - color: var(--c-text-low); - fill: var(--c-icon); - margin: 0 1.5rem 2rem 1.5rem; - } - - @media screen and (min-width: 79em) { - .meta--head .taxo-shape .icon-font { - margin-left: -2.5rem; - } + .md .down-21, .container .down-21 { + margin-top: 21rem; } - - .meta--foot { - flex-shrink: 0; - align-items: end; - margin-bottom: 1rem; + .md .down-22, .container .down-22 { + margin-top: 22rem; } - - @media screen and (min-width: 79em) { - .meta--left { - position: relative; - z-index: 5; - flex-direction: row-reverse; - justify-content: start; - float: left; - width: 34rem; - margin: 0 1.5rem; - } - .meta--left .meta__list { - width: 17rem; - } - .meta--left .meta__list--date { - align-items: flex-start; - } - .meta--left .meta__hanging { - margin-left: -3rem; - } - } - - @media screen and (min-width: 120em) { - .meta--left-doc { - position: relative; - z-index: 5; - flex-direction: row-reverse; - justify-content: start; - float: left; - width: 34rem; - margin: 0 1.5rem; - } - .meta--left-doc .meta__list { - width: 17rem; - } - .meta--left-doc .meta__list--date { - align-items: flex-start; - } - .meta--left-doc .meta__hanging { - margin-left: -3rem; - } - } - - .meta--card { - margin: 0 1.5rem; - max-width: unset; - } - - .meta--card--1 .meta__text, .meta--card--1 .meta__separator { - font-size: 1.43rem; - line-height: 1.5rem; - padding-top: 0.714465rem; - padding-bottom: 0.285535rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - - .meta--card--half { - justify-content: start; - margin: 0 1.5rem; - } - .meta--card--half .meta__text, .meta--card--half .meta__separator { - font-size: 1.287rem; - line-height: 1.5rem; - padding-top: 0.2680185rem; - padding-bottom: 0.2319815rem; - } - - .meta__date { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - - .meta__list { - display: flex; - flex-direction: column; - align-items: flex-start; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - letter-spacing: 0.01em; - word-spacing: 0.03em; - } - - .meta__list--date { - flex-shrink: 0; - align-items: flex-end; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - - .meta__item { - display: inline-flex; - flex-shrink: 0; - align-items: flex-end; - } - - .meta__item--taxo { - max-width: 16.5rem; - } - - .meta__separator, .meta__text { - display: inline-block; - } - - .meta__text, .meta__count, .meta__separator { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.564465rem; - padding-bottom: 0.435535rem; - } - - .meta__text { - padding-left: 0.5rem; - padding-right: 0.5rem; - max-width: 16.5rem; - } - - .meta__separator { - padding-left: 0; - padding-right: 0; - } - - .meta__count { - padding-left: 0; - padding-right: 0.5rem; - } - - .titlehead { - margin: 2rem; - padding: 1rem 0; - max-width: 70rem; - border-radius: 0.5rem; - box-shadow: 0 0 0 0.1rem var(--c-shadow-1); + .md .down-23, .container .down-23 { + margin-top: 23rem; } - - .titlehead--todo { - background-color: var(--c-bg-2); + .md .down-24, .container .down-24 { + margin-top: 24rem; } - - .titlehead--draft { - padding: 0; - background-color: var(--c-frame); + .md .down-25, .container .down-25 { + margin-top: 25rem; } - .titlehead--draft > p, .titlehead--draft > ol, .titlehead--draft > ul, .titlehead--draft > dl { - color: var(--c-frame-text-normal); + .md .down-26, .container .down-26 { + margin-top: 26rem; } - .titlehead--draft > p strong, .titlehead--draft > ol strong, .titlehead--draft > ul strong, .titlehead--draft > dl strong { - color: var(--c-frame-text-normal); + .md .down-27, .container .down-27 { + margin-top: 27rem; } - - .titlehead--deprecated { - color: var(--c-warn); - background-color: var(--c-warn-bg); + .md .down-28, .container .down-28 { + margin-top: 28rem; } - - .titlehead--experimental { - background-color: var(--c-danger-bg); + .md .down-29, .container .down-29 { + margin-top: 29rem; } - .titlehead--experimental > p, .titlehead--experimental > ol, .titlehead--experimental > ul { - color: var(--c-danger); + .md .down-30, .container .down-30 { + margin-top: 30rem; } - - @media screen and (min-width: 79em) { - .titlehead--margin { - margin-left: 39rem; +} +.md p:empty, .container p:empty { + display: none; +} + +/* .md--serif { + > p, > ul, > ol, > dl { + @include font.shapes(serif, regular); + } + + strong { + @include font.weight(serif, semibold); + } + + .p-first { + @include font.shapes(serif, light); + @include font.style(serif, light, italic); + + strong { + @include font.weight(serif, regular); + } } +} */ +.md--sans p, .md--sans ul, .md--sans ol, .md--sans dl { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; +} +.md--sans blockquote p, .md--sans blockquote ul, .md--sans blockquote ol, .md--sans blockquote dl { + font-family: 'IBM Plex Serif', Georgia, Times, serif; + font-weight: 400; +} +.md--sans blockquote strong { + font-weight: 600; +} +.md--sans strong { + font-weight: 700; +} +.md--sans .p-first { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; +} +.md--sans .p-first strong { + font-weight: 450; +} + +.md--home { + padding-bottom: 1rem; +} +.md--home > p, .md--home > ul, .md--home > ol, .md--home > dl, .md--home > blockquote { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: calc(0.230275rem + var(--es)); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; + text-align: left; +} +.md--home > p strong, .md--home > ul strong, .md--home > ol strong, .md--home > dl strong, .md--home > blockquote strong { + font-weight: 450; +} +.md--home dl > dt { + font-weight: 450; +} +.md--home .p-small { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 1.464465rem; + padding-bottom: calc(0.535535rem + var(--es)); + font-weight: 450; +} + +.md--card { + margin-bottom: 0; +} +.md--card > p, .md--card > .p-first { + color: var(--c-text-medium); + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.6476791667rem; + padding-bottom: 0.3523208333rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + text-align: left; + hyphens: none; +} +.md--card > p strong, .md--card > .p-first strong { + font-weight: 600; +} + +.md--card--half > p, .md--card--half > .p-first { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.214465rem; + padding-bottom: 0.285535rem; +} + +.md--card--small > p, .md--card--small > .p-first { + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.1476791667rem; + margin-bottom: -0.1476791667rem; +} + +.md--card--3halfs { + padding-bottom: 2rem; +} +@media screen and (min-width: 48em) { + .md--card--3halfs > p, .md--card--3halfs > .p-first { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: 0.230275rem; } - - .title { - padding: 0 calc(1rem + 1 * var(--es)) 2rem calc(1rem + 1 * var(--es)); - margin: 0 1rem; +} + +@media screen and (min-width: 48em) { + .md--card--2 { max-width: 74rem; } - .title h1, .title h2 { - font-size: 2.86rem; + .md--card--2 p, .md--card--2 .p-first { + font-size: 2.4375rem; line-height: 4rem; - margin-top: -0.07107rem; - margin-bottom: calc(-0.92893rem + var(--es)); + padding-top: 0.58715625rem; + padding-bottom: 0.91284375rem; } - @media screen and (min-width: 39em) { - .title { - margin: 0; - } +} +@media screen and (min-width: 79em) { + .md--card--2 p, .md--card--2 .p-first { + font-size: 1.95rem; + line-height: 3rem; + padding-top: 0.769725rem; + padding-bottom: 0.230275rem; } - - .title--site h1 { - font-size: 12.87rem; - line-height: 18rem; - padding-top: 0.180185rem; - padding-bottom: calc(0.819815rem + var(--es)); - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - letter-spacing: 0.03em; - word-spacing: 0.09em; - text-align: center; - text-transform: uppercase; +} + +.md--taxo > p, .md--taxo > ul, .md--taxo > ol, .md--taxo > dl { + font-size: 1.43rem; + line-height: 3rem; + padding-top: 0.964465rem; + padding-bottom: 0.035535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + text-align: left; +} + +.md--footer > p, .md--footer > ul, .md--footer > ol, .md--footer > dl { + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + padding-bottom: 0.222785rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} +.md--footer li { + padding-left: 3rem; +} +@media screen and (min-width: 48em) { + .md--footer > p, .md--footer > ul, .md--footer > ol, .md--footer > dl { + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.6476791667rem; + padding-bottom: 0.3523208333rem; + } + .md--footer li { + padding-left: 2.5rem; } - .title--site .p-first { +} + +.md--small > p, .md--small > ul, .md--small > ol, .md--small > dl { + font-size: 1.6083333333rem; + line-height: 2.5rem; + padding-top: 0.6476791667rem; + padding-bottom: 0.3523208333rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.md--tiny > p, .md--tiny > ul, .md--tiny > ol, .md--tiny > dl { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: 0.535535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.md--dropcap2 > p:first-child:first-letter { + float: left; + font-size: 6.3rem; + line-height: 1; + margin: -0.2rem 0.35rem -1rem -0.2rem; +} + +.md--dropcap3 > p:first-child:first-letter { + float: left; + font-size: 10.5rem; + line-height: 1; + margin: -0.9rem 0.5rem -1rem -0.2rem; +} + +@media screen and (min-width: 120em) { + .md--margin-doc { text-align: center; } - - .title--bg { - height: 5rem; - max-width: 100%; - margin: 0 1rem; - padding-bottom: 0; - box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1), 0 0 0 1px var(--c-shadow-2); + .md--margin-doc > h1, .md--margin-doc > h2, .md--margin-doc > h3, .md--margin-doc > h4, .md--margin-doc > h5, .md--margin-doc > h6, .md--margin-doc > hr, .md--margin-doc > table { + margin-left: 39rem; } - .title--bg h1 { - color: #fff; - margin: 0; - font-size: 2.86rem; - line-height: 3rem; - padding-top: 0.92893rem; - padding-bottom: 1.07107rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - letter-spacing: 0.04em; - word-spacing: 0.12em; - text-transform: uppercase; + .md--margin-doc > p, .md--margin-doc > ul, .md--margin-doc > ol, .md--margin-doc > dl, .md--margin-doc > blockquote, .md--margin-doc > pre, .md--margin-doc > .fig-diagram, .md--margin-doc > .maincol, .md--margin-doc > .literature, .md--margin-doc > .footnotes, .md--margin-doc > .gist, .md--margin-doc > .asciicast, .md--margin-doc > .box, .md--margin-doc > .math-block, .md--margin-doc > .chem-block { + width: 74rem; + margin-left: auto; + margin-right: auto; } - @media screen and (min-width: 39em) { - .title--bg { - margin: 1rem 0 0 0; - } +} + +@media screen and (min-width: 79em) { + .md--margin-full { + text-align: center; } - - .title--news { - background: var(--ctg-news-title); + .md--margin-full > h1, .md--margin-full > h2, .md--margin-full > h3, .md--margin-full > h4, .md--margin-full > h5, .md--margin-full > h6, .md--margin-full > hr { + margin-left: 39rem; + } + .md--margin-full > p, .md--margin-full > ul, .md--margin-full > ol, .md--margin-full > dl, .md--margin-full > blockquote, .md--margin-full > pre, .md--margin-full > .fig-diagram, .md--margin-full > .maincol, .md--margin-full > .literature, .md--margin-full > .footnotes, .md--margin-full > .gist, .md--margin-full > .asciicast, .md--margin-full > .box, .md--margin-full > .math-block, .md--margin-full > .chem-block { + width: 74rem; + margin-left: auto; + margin-right: auto; + } + .md--margin-full table { + margin-left: 37rem; + } +} + +.md--frame { + color: var(--c-frame-text-normal); +} +.md--frame p, .md--frame li, .md--frame dd { + text-align: left; +} +.md--frame .fig { + float: none; +} +.md--frame .link--text { + color: var(--c-frame-text-link); + text-decoration-color: var(--c-frame-text-link); +} +.md--frame .link--text[href^=http] { + color: var(--c-frame-text-link-ext); + text-decoration-color: var(--c-frame-text-link-ext); +} +.md--frame .link--text:hover, .md--frame .link--text:focus, .md--frame .link--text:active { + color: var(--c-frame-text-link-high); + text-decoration-color: var(--c-frame-text-link-high); + background-color: var(--c-frame-button-hover-bg); +} + +.md--blog { + padding-top: calc(3rem + 2 * var(--es)); +} + +.md--list { + padding-bottom: 0; + margin-bottom: 0; +} + +.md p > code, .md li > code, .md dt > code, .md dd > code, .md .caption > code { + font-size: 75%; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; + margin: 0 0.075em; + padding: 0.1em 0.25em; + text-transform: none; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + color: var(--c-chroma-fg); + background-color: var(--c-chroma-bg); +} +.md dt > code { + font-weight: 700; +} +.md pre :target, .md .highlight :target { + text-decoration: none; + outline: ridge var(--c-code); + scroll-margin-top: 10rem; +} +.md pre { + position: relative; + overflow: auto; + clear: both; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: 0.535535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); + word-break: normal; + hyphens: none; + text-align: left; +} +.md pre code { + display: block; + white-space: pre; +} +.md .highlight > pre > code { + padding-left: 0.8em; + padding-right: 0.8rem; +} +.md .highlight { + display: block; + max-height: 200rem; + padding: 2rem 2rem 1.5rem; + min-width: 100%; + max-width: 74rem; + margin-bottom: calc(0.5 * var(--es)); + color: var(--c-code); +} +.md .highlight > pre, .md .highlight > div { + overflow: auto; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); + border-radius: 0.25rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + padding-right: 0.25em; +} +.md .highlight > pre::-webkit-scrollbar, .md .highlight > div::-webkit-scrollbar { + width: 1rem; + height: 1rem; +} +.md .highlight > pre::-webkit-scrollbar-thumb, .md .highlight > div::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); +} +.md .highlight > pre::-webkit-scrollbar-track, .md .highlight > div::-webkit-scrollbar-track { + background: var(--c-bg-3); +} +.md .highlight table:after { + display: none; +} +@media screen and (min-width: 39em) { + .md .highlight { + min-width: 74rem; + width: 74rem; } - @media screen and (min-width: 79em) { - .title--news { - background: var(--ctg4-news-title); - } +} +@media screen and (min-width: 48em) { + .md .highlight.expand { + display: inline-block; + max-width: 148rem; + width: unset; + } +} +.md li .highlight, .md dd .highlight { + padding-left: 0; + padding-right: 0; + min-width: 100%; + max-width: 100%; +} +.md li .highlight .copy-code, .md dd .highlight .copy-code { + right: 0; +} +.md .lh15 pre { + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 1.214465rem; + padding-bottom: 0.785535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.5rem ); +} +.md .note .highlight { + padding: 1rem 0; +} +.md .note code { + color: var(--c-code-extralow); +} +.md .language-mermaid { + text-align: center; +} +.md .language-mermaid > svg { + max-width: 100%; + height: auto; +} + +.md .col4, .md .col2-l3, .md .col2-l2, .md .col2, .md .col3 { + column-gap: 4rem; +} +.md .col4 li, .md .col2-l3 li, .md .col2-l2 li, .md .col2 li, .md .col3 li, .md .col4 p, .md .col2-l3 p, .md .col2-l2 p, .md .col2 p, .md .col3 p, .md .col4 dd, .md .col2-l3 dd, .md .col2-l2 dd, .md .col2 dd, .md .col3 dd { + text-align: left; +} + +@media screen and (min-width: 39em) { + .md .col2, .md .col3 { + column-count: 2; } - - .title--blog { - background: var(--ctg-blog-title); +} +@media screen and (min-width: 39em) { + .md .col2-l2 { + column-count: 2; + width: 62rem; } - @media screen and (min-width: 79em) { - .title--blog { - background: var(--ctg4-blog-title); - } +} +@media screen and (min-width: 39em) { + .md .col2-l3 { + column-count: 2; + width: 54rem; } - - .title--sans h1, .title--sans h2 { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - letter-spacing: 0.005em; - word-spacing: 0.015em; - } - - @media screen and (min-width: 79em) { - .title--left { - float: left; - width: 37rem; - } +} +@media screen and (min-width: 39em) { + .md .col4 { + column-count: 4; } - - .title--author { - display: inline-flex; - flex-direction: row; - margin: -1rem 0; +} + +@media screen and (min-width: 120em) { + .md--margin-doc .col3 { + column-count: 3; + max-width: 111rem; } - @media screen and (min-width: 79em) { - .title--author { - flex-direction: column-reverse; - } +} + +@media screen and (min-width: 79em) { + .md--margin-full .col3 { + column-count: 3; + max-width: 111rem; } - - .title--first, .title--second, .title--third { - padding-top: 1rem; - padding-bottom: calc(3rem + 2 * var(--es)); +} + +.md dt { + text-align: left; +} +.md dd { + padding: 0 0 1rem calc(3rem + 1 * var(--es)); +} +.md dd ul > li, .md dd ol > li { + padding-left: 3rem; +} +.md dd + dt { + margin-top: 1rem; +} +.md .dl-tight > dt { + float: left; + clear: left; + width: auto; + padding: 0 3rem 0 0; +} +.md .dl-tight > dt:after { + display: table; + clear: both; + content: ""; +} +.md .dl-tight > dd { + padding: 0; +} +.md .dl-loose, .md .dl-icon, .md .dl-loose2, .md .dl-loose3 { + position: relative; +} +@media screen and (min-width: 39em) { + .md .dl-loose > dt, .md .dl-icon > dt, .md .dl-loose2 > dt, .md .dl-loose3 > dt { + float: left; + clear: left; + width: 16.5rem; + padding-bottom: 0; } - .title--first > hr, .title--second > hr, .title--third > hr { - margin-bottom: -2rem; + .md .dl-loose > dt:after, .md .dl-icon > dt:after, .md .dl-loose2 > dt:after, .md .dl-loose3 > dt:after { + content: "‍"; } - .title--first h1, .title--second h1, .title--third h1 { - font-size: 2.86rem; - line-height: 4rem; - padding-top: 0.92893rem; - margin-bottom: -0.92893rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; + .md .dl-loose > dd, .md .dl-icon > dd, .md .dl-loose2 > dd, .md .dl-loose3 > dd { + margin-left: 0; + padding-left: 18.5rem; } - - .title--first > hr, .title--second > hr { - border-top: 0.35rem solid var(--c-text-normal); - height: 1rem; +} +@media screen and (min-width: 39em) { + .md .dl-loose3 > dt { + width: 24.011rem; } - - .title--first h1 { - text-transform: uppercase; - letter-spacing: 0.03em; - word-spacing: 0.09em; + .md .dl-loose3 > dd { + padding-left: 26.011rem; } - - .title--second h1 { - letter-spacing: 0.015em; - word-spacing: 0.045em; +} +@media screen and (min-width: 39em) { + .md .dl-loose2 > dt { + width: 35rem; } - - .title--third > hr { - border-top: 0.25rem solid var(--c-text-normal); - height: 1rem; + .md .dl-loose2 > dd { + padding-left: 37rem; } - .title--third h1 { - font-weight: 450; - letter-spacing: 0.005em; - word-spacing: 0.015em; +} +@media screen and (min-width: 39em) { + .md .dl-icon > dt { + width: 4rem; } - - .title--taxo { - max-width: unset; + .md .dl-icon > dd { + padding-left: 6rem; + } +} +.md .dl-tight > dd + dt, .md .dl-loose > dd + dt, .md .dl-loose3 > dd + dt, .md .dl-loose2 > dd + dt, .md .dl-icon > dd + dt { + margin-top: 0; +} + +.md--home .p-first { + text-align: center; +} +.md--home dt { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +.md--sans dt { + font-weight: 500; +} +.md--sans dt var { + font-weight: 450; +} +.md--sans dt strong { + font-weight: 700; +} + +sup:target { + background-color: var(--c-bg-3); + scroll-margin-top: calc(var(--tnh) + var(--tg)); +} + +.footnote-ref { + color: var(--c-text-link); +} +.footnote-ref:before { + content: " ["; +} +.footnote-ref:after { + content: "]"; +} +.footnote-ref:hover, .footnote-ref:focus, .footnote-ref:active { + color: var(--c-text-link-hover); + background-color: var(--c-text-link-hover-bg); +} + +.footnotes { + text-align: left; + margin-top: -0.35em; + overflow-wrap: break-word; +} +.footnotes hr { + width: 25%; + margin-top: 2rem; + margin-bottom: calc(1rem + 1 * var(--es)); + margin-left: 0; + padding: 0; + border-top: 0.35em solid var(--c-text-normal); +} +.footnotes ol { + counter-reset: nr; +} +.footnotes ol li { + counter-increment: nr; + background-color: transparent; + page-break-inside: avoid; + -webkit-column-break-inside: avoid; + break-inside: avoid-column; + font-size: 1.6953125rem; + line-height: 2.625rem; + padding-top: 0.6776054687rem; + padding-bottom: 0.3223945313rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.625rem ); +} +.footnotes ol li:target { + border-radius: 0.5rem; + background-color: var(--c-bg-3); +} +.footnotes ol li:before { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + float: left; + height: 1em; + content: counter(nr, decimal) "."; +} +.footnotes ol li p + p { + margin-top: -0.875rem; + text-indent: 2.5rem; +} + +.footnote-backref { + visibility: hidden; +} +.footnote-backref:before { + visibility: visible; + font-family: inherit; + font-weight: bold; + content: "⬏"; +} +.footnote-backref + .footnote-backref { + margin-left: -0.75em; +} + +@media screen and (min-width: 48em) { + .footnotecols > .footnotes { + width: auto; + margin-right: 0; + margin-left: 0; + padding-right: 0; + padding-left: 0; } - .title--taxo h1 { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; + .footnotecols > .footnotes > ol { + column-count: 3; + column-gap: 4rem; } - .title--taxo h2 { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; + .footnotecols > .footnotes > ol > li > p { + padding-left: 3rem; } - - .title--article h1 { - font-size: 2.86rem; - line-height: 3rem; - padding-top: 0.42893rem; - padding-bottom: calc(0.57107rem + var(--es)); - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - font-style: italic; - text-transform: none; - letter-spacing: 0; - word-spacing: 0; +} +@media screen and (min-width: 79em) { + .footnotecols > .footnotes > ol { + column-count: 4; + } +} +.md--sans .footnotes p { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; +} + +/* .md--serif .footnotes p { + @include font.shapes(serif, regular); +} */ +.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { + text-align: left; +} +.md h1 .br-cond, .md h2 .br-cond, .md h3 .br-cond, .md h4 .br-cond { + display: none; +} +@media screen and (min-width: 39em) { + .md h1 .br-cond, .md h2 .br-cond, .md h3 .br-cond, .md h4 .br-cond { + display: initial; + } +} +.md h5, .md h6, .md .h-p, .md .h-p-s { + display: inline-block; + float: left; + padding-bottom: 0; +} +.md h3:has(+ dl, + ul, + ol) { + margin-bottom: 1rem; +} +.md .h-danger .h-a, .md .h-warn .h-a, .md .h-info .h-a, .md .h-success .h-a { + display: inline-block; + padding: 0 0.5rem; + margin-left: -0.5rem; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-1); +} +.md .h-danger { + color: var(--c-danger); +} +.md .h-danger .h-a { + background-color: var(--c-danger-bg); +} +.md .h-danger:hover .h-a { + color: var(--c-danger); +} +.md .h-warn { + color: var(--c-warn); +} +.md .h-warn .h-a { + background-color: var(--c-warn-bg); +} +.md .h-info { + color: var(--c-info); +} +.md .h-info .h-a { + background-color: var(--c-info-bg); +} +.md .h-info:hover .h-a { + color: var(--c-info); +} +.md .h-success { + color: var(--c-success); +} +.md .h-success .h-a { + background-color: var(--c-success-bg); +} + +.md--h-sans h1, .md--h-sans h2, .md--h-sans h3, .md--h-sans h4 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; +} +.md--h-sans h1 var, .md--h-sans h2 var, .md--h-sans h3 var, .md--h-sans h4 var { + font-weight: 700; +} +.md--h-sans h5, .md--h-sans .h-p { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} +.md--h-sans h6, .md--h-sans .h-p-s { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} +.md--h-sans h1 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 1.42893rem; + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4rem ); + letter-spacing: 0.005em; + word-spacing: 0.015em; +} +.md--h-sans h2 { + font-size: 2.145rem; + line-height: 3rem; + padding-top: calc(2.6966975rem + var(--es)); + padding-bottom: calc(0.3033025rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es))); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} +.md--h-sans h3 { + font-size: 2.145rem; + line-height: 3rem; + padding-top: calc(1.6966975rem + var(--es)); + margin-bottom: calc(-0.1966975rem + 0.5 * var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); + letter-spacing: 0.005em; + word-spacing: 0.015em; +} +.md--h-sans h4 { + font-size: 1.60875rem; + line-height: 2rem; + padding-top: 1.397523125rem; + padding-bottom: 0.102476875rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} +.md--h-sans h4 + ul, .md--h-sans h4 + ol, .md--h-sans h4 + dl { + margin-top: 1rem; +} +.md--h-sans h5, .md--h-sans h6, .md--h-sans .h-p { + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + margin-bottom: -0.777215rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); + text-transform: unset; + margin-right: 0.5em; +} +.md--h-sans h5, .md--h-sans .h-p { + letter-spacing: 0.01em; + word-spacing: 0.03em; +} +.md--h-sans h6, .md--h-sans .h-p-s { + letter-spacing: 0.01em; + word-spacing: 0.03em; + color: var(--c-text-high); +} +.md--h-sans .p-meta { + font-size: 1.4475rem; + line-height: 1rem; + padding-top: 1.95791125rem; + margin-bottom: -0.95791125rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + color: var(--c-taxo-link); +} +.md--h-sans .p-meta + h3 { + margin-top: calc(-0.5rem + -1 * var(--es)); +} +.md--h-sans .p-meta + h4 { + margin-top: calc(-0.5rem + -0.5 * var(--es)); +} + +.md--h-big h1 { + font-size: 4.29rem; + line-height: 5rem; + padding-top: 1.893395rem; + padding-bottom: calc(0.106605rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 6rem ); + letter-spacing: 0.005em; + word-spacing: 0.015em; +} +.md--h-big h2 { + font-size: 3.81rem; + line-height: 3rem; + padding-top: calc(2.073155rem + var(--es)); + padding-bottom: calc(0.926845rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es))); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} +.md--h-big h3 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: calc(1.42893rem + var(--es)); + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); + letter-spacing: 0.005em; + word-spacing: 0.015em; +} +.md--h-big h4 { + font-size: 1.905rem; + line-height: 2rem; + padding-top: calc(1.2865775rem + var(--es)); + padding-bottom: 0.7134225rem; + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (3rem + 1 * var(--es))); + text-transform: uppercase; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} +.md--h-big h4 + ul, .md--h-big h4 + ol, .md--h-big h4 + dl { + margin-top: 1rem; +} + +.md--footer h2 { + font-size: 1.7145rem; + line-height: 2.5rem; + padding-top: 0.60791975rem; + margin-bottom: -0.10791975rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.05em; + word-spacing: 0.15em; + text-transform: uppercase; +} +@media screen and (min-width: 48em) { + .md--footer h2 { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + padding-bottom: 0.035535rem; } - @media screen and (min-width: 48em) { - .title--article { - margin-bottom: -2rem; +} +.md--footer a:hover, .md--footer a:focus { + color: inherit; +} + +/* .md--card { + h2 { + @include font.shapes(serif, bold ); + @include font.spacing( 0.05 ); + text-transform: uppercase; + } + .p-meta { + @include font.weight(sans-cond, text); + } + .p-meta + h2 { + margin-top: 0; + } +} + +.md--card--half { + h2 { + @include font.base-w(serif, bold, 0.95, 1.5, 0, 0.5, 0, 0, false ); + } + .p-meta { + @include font.base-w(sans-cond, light, 0.95, 1.5, 0.5, 0.5, 0, 0, false ); + } +} + +.md--card--1 { + h2 { + @include font.base-x(serif, bold, math.div(5,6), 2, 0, 0, 0, 0, false ); + } + @media screen and (min-width: bp.$col-2) { + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 0, 0, 0, false ); + } } - .title--article h1 { - position: relative; - top: -2rem; - font-size: 4.29rem; - line-height: 5rem; - padding-top: 0.893395rem; - padding-bottom: calc(0.106605rem + var(--es)); - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 5rem ); - font-weight: 600; +} + +.md--card--2 { + @extend .md--card--1; + @media screen and (min-width: bp.$col-3) { + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); + } } +} + +.md--card--3halfs { + @extend .md--card--1; + h2 { + @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); + } + .p-meta { + @include font.base-w(sans-cond, light, 1, 2, 0, 1, 0, 0, false ); + } +} + +.md--card--2 { + h2 { + @include font.base-x(serif, bold, math.div(5,4), 3, 0, 1, 0, 0, false ); + } + .p-meta { + @include font.base-x(sans-cond, light, 1, 1.5, 0.5, 0.5, 0, 0, false ); + } +} + + + +.md--home { + h1 { + @include font.base-x(serif, bold, 2, 4, 4, 3, -3, 0, false ); + @include font.shapes(serif, bold); + @include font.spacing( 0.05 ); + text-transform: uppercase; + color: black; + } + h2 { + @include font.base-x(serif, bold, math.div(7,8), 2, 2, 1, 0, 0, false ); + @include font.shapes(serif, bold ); + @include font.spacing( 0.05 ); + text-transform: uppercase; + } +} */ +.md--article h2 { + font-size: 2.86rem; + line-height: 3rem; + padding-top: calc(1.42893rem + var(--es)); + padding-bottom: calc(0.57107rem + var(--es)); + scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); + font-weight: 600; + text-transform: none; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} +.md--article h3 { + font-size: 2.3833333333rem; + line-height: 3rem; + padding-top: 1.6074416667rem; + padding-bottom: 0.3925583333rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4rem ); + font-weight: 600; + letter-spacing: 0.01em; + word-spacing: 0.03em; +} + +.emb { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + display: block; + text-align: left; + position: relative; + z-index: 2; + hyphens: auto; +} +.emb svg { + display: block; + width: 100%; + height: auto; +} + +.emb--w-small { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.814465rem; + padding-bottom: 1.035535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); + width: calc(50% + 1rem); +} +@media screen and (min-width: 39em) { + .emb--w-small { + width: 37rem; + } +} + +.emb--w-tiny { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.814465rem; + padding-bottom: 1.035535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); + width: calc(25% + 1rem); +} + +.emb--w-micro { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.814465rem; + padding-bottom: 0.035535rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); + width: calc(12.5% + 1rem); +} + +.emb--ph-left { + float: left; + clear: left; + padding-right: 2rem; +} +.emb--ph-left.emb--w-tiny, .emb--ph-left.emb--w-small { + padding-right: 2rem; +} +@media screen and (min-width: 39em) { + .emb--ph-left.emb--w-tiny, .emb--ph-left.emb--w-small { + padding-right: 4rem; } - - .title__description, .title__profession { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 300; +} +@media screen and (min-width: 39em) { + .emb--ph-left.emb--w-micro { + padding-right: 2rem; } - .title__description strong, .title__profession strong { - font-weight: 450; +} + +.emb--ph-right { + float: right; + clear: right; + padding-left: 2rem; +} +.emb--ph-right.emb--w-tiny, .emb--ph-right.emb--w-small { + padding-left: 2rem; +} +@media screen and (min-width: 39em) { + .emb--ph-right.emb--w-tiny, .emb--ph-right.emb--w-small { + padding-left: 4rem; } - - .title__description { - font-size: 1.95rem; - line-height: 3rem; - padding-top: 0.769725rem; - padding-bottom: 0.230275rem; +} +@media screen and (min-width: 39em) { + .emb--ph-right.emb--w-micro { + padding-left: 2rem; } - - .title__profession { - font-size: 2.86rem; - line-height: 3rem; - padding-top: 0.42893rem; - padding-bottom: 0.57107rem; +} + +@media screen and (min-width: 39em) { + .emb--pv-middle { + padding-top: 4rem; } - - .section { - padding: calc(4rem + 2 * var(--es)) 0rem; + .emb--pv-middle.emb--w-micro { + padding-top: 1rem; } - .section > hr { - border-bottom: 0.35rem solid var(--c-text-normal); - height: 1rem; - margin: 0 2rem; +} + +.emb--w-text { + float: none; + width: 100%; + padding: 1.25rem 0 0 0; +} + +.md del, .md ins { + text-decoration-color: var(--c-danger-bg); + text-decoration-thickness: 0.075em; + text-decoration-skip: auto; +} +.md del { + text-decoration-line: line-through; + text-line-through: double; +} +.md ins { + text-decoration-line: underline; + text-underline-offset: 0.075em; +} +.md sup, .md sub { + position: relative; + font-size: 0.6666667em; + font-weight: 500; + line-height: 1; + font-feature-settings: "lnum" on; +} +.md sup { + top: -0.6em; +} +.md sup > a { + font-size: 1em; +} +.md sub { + bottom: -0.25em; +} +.md kbd { + display: inline-block; + font-size: 90%; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; + line-height: 1em; + min-width: 1.2em; + margin: 0 0.1em; + padding: 0.1em 0.2em; + text-align: center; + border-radius: 0.5rem; + background-color: var(--c-bg-2); + box-shadow: 0 0 0 2px var(--c-shadow-2); +} +.md cite { + letter-spacing: 0.03em; + word-spacing: 0.09em; +} +.md dfn { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} + +.md .asciicast { + margin-top: 1rem !important; + padding: 1rem 0 0.5rem 0 !important; + max-width: 70rem; + text-align: center; + border-radius: 0.5rem; + background-color: var(--c-bg-1); +} +@media screen and (min-width: 39em) { + .md .asciicast { + margin: 0 2rem 1rem 2rem !important; } - .section > h2 { - font-size: 1.915rem; - line-height: 2rem; - padding-top: 0.2828325rem; - padding-bottom: 0.7171675rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.03em; - word-spacing: 0.09em; - margin-left: 2rem; - margin-right: 2rem; +} +@media screen and (min-width: 48em) { + .md > .vimeo { + max-width: 70rem; + height: auto; } - .section > h3 { - font-size: 1.43rem; - line-height: 1.5rem; - padding-top: 0.714465rem; - padding-bottom: 1.785535rem; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.04em; - word-spacing: 0.12em; +} + +.note { + position: relative; + margin-top: 1.4rem; + margin-bottom: calc(0.9rem + 1 * var(--es)); +} +@media screen and (min-width: 39em) { + .note { margin-left: 2rem; margin-right: 2rem; } - - .md > h1, .container > h1, .md > h2, .container > h2, .md > h3, .container > h3, .md > h4, .container > h4, .md > h5, .container > h5, .md > h6, .container > h6, .md > hr, .container > hr, .md > table, .container > table { - max-width: 70rem; - margin-left: 2rem; - margin-right: 2rem; +} +@media screen and (min-width: 48em) { + .note { + padding: 0; + margin: 0; + border: none; } - .md > p, .container > p, .md > ul, .container > ul, .md > ol, .container > ol, .md > dl, .container > dl, .md > blockquote, .container > blockquote, .md > pre, .container > pre, .md > .fig-diagram, .container > .fig-diagram, .md > .maincol, .container > .maincol, .md > .literature, .container > .literature, .md > .footnotes, .container > .footnotes, .md > .gist, .container > .gist, .md > .asciicast, .container > .asciicast, .md > .box, .container > .box, .md > .math-block, .container > .math-block, .md > .chem-block, .container > .chem-block { - max-width: 74rem; - padding-left: 2rem; - padding-right: 2rem; +} + +.note__content { + border-top: 0.1rem solid var(--c-shadow-2); + border-bottom: 0.1rem solid var(--c-shadow-2); + padding: 1rem 2rem; + background: var(--c-bg-2); + overflow: hidden; +} +.note__content > p { + text-align: left; + font-size: 1.68875rem; + line-height: 2rem; + padding-top: 0.367563125rem; + padding-bottom: 0.632436875rem; + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + color: var(--c-text-extralow); +} +.note__content > p strong { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-low); +} +.note__content var { + color: var(--c-text-medium); +} +.note__content > p:not(:empty) + p { + margin-top: -1rem; + text-indent: 2rem; +} +@media screen and (min-width: 48em) { + .note__content { + margin: 0; + padding: 1rem 0; + border: none; + background: transparent; + overflow: visible; } - - .md, .container { - position: relative; - z-index: 1; - overflow-wrap: break-word; - /* .blind { - position: relative; - z-index: 1; - - &:after { - @include font.shapes(sans-cond, semibold); - position: absolute; - top: calc(50% - 0.5em); - left: calc(50% - 5ch); - z-index: -1; - font-size: 200%; - content: 'BLIND TEXT'; - transform: rotate(-10deg); - color: var(--c-watermark); - } - - &.blind-short:after { - font-size: 125%; - } - - &.blind-right:after { - left: calc(75% - 5ch); - } - - &.blind-left:after { - left: calc(25% - 5ch); - } - } */ +} + +.note-star1 .note__content > p:first-of-type, .note-star2 .note__content > p:first-of-type, .note-dagger1 .note__content > p:first-of-type, .note-dagger2 .note__content > p:first-of-type { + position: relative; +} +.note-star1 .note__content > p:first-of-type:before, .note-star2 .note__content > p:first-of-type:before, .note-dagger1 .note__content > p:first-of-type:before, .note-dagger2 .note__content > p:first-of-type:before { + position: absolute; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; + top: 0.1em; + left: -1rem; + font-size: 80%; + line-height: 1; + color: var(--c-text-semihigh); +} + +.note-star1 .note__content > p:first-of-type:before { + content: "*"; +} + +.note-star2 .note__content > p:first-of-type:before { + left: -1.5rem; + content: "**"; +} + +.note-dagger1 .note__content > p:first-of-type:before { + content: "†"; +} + +.note-dagger2 .note__content > p:first-of-type:before { + content: "‡"; +} + +@media screen and (min-width: 48em) { + .note-long .note__content { + position: static; + overflow: auto; + height: auto; } - .md::after, .container::after { - display: table; - content: ""; - clear: both; + .note-long .note__content:after { + display: none; } - .md > p, .md > blockquote, .md li, .md dd, .container > p, .container > blockquote, .container li, .container dd { - text-align: var(--ta); +} + +.checkbox-note { + position: absolute; + visibility: hidden; + top: -9999px; + left: -9999px; +} +.checkbox-note ~ .note__content:after { + position: absolute; + bottom: 0.1rem; + z-index: 9; + width: calc(100% - 4rem); + height: 100%; + content: ""; + pointer-events: none; + background-image: linear-gradient(to bottom, transparent 33%, var(--c-bg-2) 90%); +} +@media screen and (min-width: 48em) { + .checkbox-note ~ .note__content { + overflow: visible; + height: auto; } - .md li, .md dt, .md dd, .container li, .container dt, .container dd { - break-inside: avoid; +} +.checkbox-note ~ .open-note { + display: block; + position: absolute; + z-index: 999; + width: 50%; + height: 5rem; + margin-left: 25%; + cursor: pointer; + user-select: none; + color: transparent; + -webkit-tap-highlight-color: transparent; +} +.checkbox-note ~ .open-note > .arrow { + display: block; + z-index: 999; + width: 0; + height: 0; + margin: 2rem auto; + border-color: transparent; + border-style: solid; + border-width: 1rem; +} +.checkbox-note ~ .open-note:focus { + color: transparent; +} + +.checkbox-note ~ .note__content { + height: 10.5rem; +} +.checkbox-note ~ .note__content:after { + transition: opacity 150ms; + opacity: 1; +} +@media screen and (min-width: 48em) { + .checkbox-note ~ .note__content { + height: 100%; } - .md dt, .container dt { - break-before: auto; + .checkbox-note ~ .note__content:after { + display: none; } - .md p, .md li, .md dd, .container p, .container li, .container dd { - hyphens: auto; +} +.checkbox-note ~ .open-note { + bottom: -3rem; +} +.checkbox-note ~ .open-note > .arrow { + border-top-color: var(--c-text-normal); + border-bottom-color: unset; +} +@media screen and (min-width: 48em) { + .checkbox-note ~ .open-note { + display: none; } - .md p strong, .md p em, .md p a, .md p span, .md li strong, .md li em, .md li a, .md li span, .md dd strong, .md dd em, .md dd a, .md dd span, .container p strong, .container p em, .container p a, .container p span, .container li strong, .container li em, .container li a, .container li span, .container dd strong, .container dd em, .container dd a, .container dd span { - hyphens: auto; +} + +.checkbox-note:checked ~ .note__content { + height: 100%; +} +.checkbox-note:checked ~ .note__content:after { + opacity: 0; + height: 100%; +} +.checkbox-note:checked ~ .open-note { + bottom: -1rem; +} +.checkbox-note:checked ~ .open-note > .arrow { + border-top-color: unset; + border-bottom-color: var(--c-text-normal); +} +@media screen and (min-width: 48em) { + .checkbox-note:checked ~ .open-note { + display: none; } - .md .no-hyphens, .container .no-hyphens { - hyphens: none; +} + +.md table:not(.lntable) { + border-collapse: separate; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + overflow: hidden; + margin-top: calc(1rem + 1 * var(--es)); + margin-bottom: calc(1rem + 1 * var(--es)); +} +.md table:not(.lntable) th:first-child, .md table:not(.lntable) td:first-child { + padding-left: 2rem; +} +.md table:not(.lntable) th:last-child, .md table:not(.lntable) td:last-child { + padding-right: 2rem; +} +.md thead, .md tbody { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: 0.22559375rem; +} +.md thead { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} +.md thead > tr { + background-color: var(--c-text-medium); + color: var(--c-text-contrast); +} +.md tbody { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} +.md tbody tr:nth-child(2n) { + background-color: var(--c-bg-1); + color: var(--c-text-semihigh); +} +.md tbody tr:nth-child(2n+1) { + background-color: var(--c-bg-4); + color: var(--c-text-high); +} +.md th, .md td { + padding: 1rem; +} + +/* .table-half-left { + @media screen and (min-width: $bp-3col) { + float: left; + width: calc(50% - $s-gutter); + } +} */ +.md li:has([type=checkbox]) { + padding-left: 0; +} +.md li:has([type=checkbox])::before { + content: ""; +} +.md li input[type=checkbox]:disabled { + margin: 0 2rem 0 0; + color: var(--c-text-extralow); + border-color: var(--c-text-extralow); + background-color: var(--c-text-extralow); +} + +.md { + /* > ul, > ol { + > li:last-child > p:last-child { padding-bottom: 0; } + } */ +} +.md ul h5, .md ul h6, .md ol h5, .md ol h6 { + margin: 0; + padding: 0; +} +.md > ul, .md > ol { + margin-bottom: 1rem; +} +.md > ul > li:last-child, .md > ol > li:last-child { + margin-bottom: -1rem; +} +.md ul li:before { + content: "•"; +} +.md ol { + counter-reset: ol1; +} +.md ol > li > ol { + counter-reset: ol2; +} +.md ol > li > ol > li > ol { + counter-reset: ol3; +} +.md ol > li:before { + content: counter(ol1) "."; + counter-increment: ol1; +} +.md ol > li > ol > li:before { + content: counter(ol2, lower-alpha) ")"; + counter-increment: ol2; +} +.md ol > li > ol > li > ol > li:before { + content: counter(ol3, lower-roman) "."; + counter-increment: ol3; + letter-spacing: -0.05em; +} +.md li { + position: relative; + padding-left: calc(3rem + 1 * var(--es)); + page-break-inside: avoid; + -webkit-column-break-inside: avoid; + break-inside: avoid-column; + overflow: visible; +} +.md li > p { + margin-bottom: 1rem; + overflow: visible; +} +.md li:before { + font-weight: 600; + position: absolute; + left: 0; +} +.md li li:before { + font-weight: 450; +} +.md li li li:before { + font-weight: 300; +} +.md .ol-continue { + counter-reset: none; +} +.md li:has(.emb--w-full), .md dd:has(.emb--w-full), .md li > p:has(.emb--w-full), .md dd > p:has(.emb--w-full) { + text-align: left; +} +.md li:has(.emb):after, .md li > p:has(.emb):after { + display: table; + content: ""; + clear: both; +} + +.md--footer li { + padding-left: 3rem; +} +@media screen and (min-width: 48em) { + .md--footer li { + padding-left: 2.5rem; } - .md .br-cond, .container .br-cond { - display: none; +} + +.md--small li { + padding-left: 2.5rem; +} + +.md--tiny li { + padding-left: 2rem; +} + +.smallindent li { + padding-left: 3rem !important; +} + +.md .icon { + fill: var(--c-text-low); +} +.md p .icon--tiny { + position: relative; + top: 0.55rem; + height: 2rem; + width: 2rem; + padding: 0; +} + +.md--frame .icon { + fill: var(--c-frame-text-low); +} + +.md .math-block, .md .chem-block { + font-size: 1.9375rem; + line-height: 3rem; + padding-top: 0.77440625rem; + padding-bottom: calc(0.22559375rem + var(--es)); + scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); +} +.md .katex { + font-size: 1.1em; +} + +.md .ta-left { + text-align: left; +} +.md .ta-right { + text-align: right; +} +.md .ta-center { + text-align: center; +} +@media screen and (min-width: 48em) { + .md .ta-left3 { + text-align: left; } - @media screen and (min-width: 39em) { - .md .br-cond, .container .br-cond { - display: initial; - } + .md .ta-right3 { + text-align: right; } - .md > p, .md > ul, .md > ol, .md > dl, .container > p, .container > ul, .container > ol, .container > dl { - font-size: 1.9375rem; - line-height: 3rem; - padding-top: 0.77440625rem; - padding-bottom: calc(0.22559375rem + var(--es)); - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); +} +@media screen and (min-width: 120em) { + .md .ta-left6 { + text-align: left; } - .md > p:target, .md > ul:target, .md > ol:target, .md > blockquote:target, .md > dl:target, .container > p:target, .container > ul:target, .container > ol:target, .container > blockquote:target, .container > dl:target { - border-radius: 0.5rem; - background-color: var(--c-bg-3); + .md .ta-right6 { + text-align: right; } - .md p > .pull-quote, .container p > .pull-quote { - margin-left: -0.5em; +} + +.md { + /* .large { + max-width: 3 * $u-col-g; + } */ +} +.md .half { + min-width: 50%; + width: 50%; +} +@media screen and (min-width: 39em) { + .md .normal { + width: 74rem; + } +} +.md .full { + max-width: 148rem; +} +@media screen and (min-width: 48em) { + .md .inline { + display: inline-block; } - .md blockquote, .container blockquote { - padding: 1rem 2rem 1rem calc(5rem + 2 * var(--es)); +} +@media screen and (min-width: 48em) { + .md .block { + display: block; + margin-right: 37rem; + } +} +@media screen and (min-width: 79em) { + .md .block { + margin-left: 37rem; + } +} + +.box, .box-danger, .box-warn, .box-info, .box-success { + --box-shadow-color: var(--c-shadow-3); + position: relative; + z-index: 2; + margin: 1rem 0; + background-color: var(--c-bg-2); + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--box-shadow-color); + text-align: left !important; + clear: both; +} +.box.left, .left.box-danger, .left.box-warn, .left.box-info, .left.box-success, .box.left-in, .left-in.box-danger, .left-in.box-warn, .left-in.box-info, .left-in.box-success, .box.left-in-half, .left-in-half.box-danger, .left-in-half.box-warn, .left-in-half.box-info, .left-in-half.box-success, .box.right, .right.box-danger, .right.box-warn, .right.box-info, .right.box-success, .box.right-in, .right-in.box-danger, .right-in.box-warn, .right-in.box-info, .right-in.box-success, .box.right-in-half, .right-in-half.box-danger, .right-in-half.box-warn, .right-in-half.box-info, .right-in-half.box-success { + width: 33rem; +} +.box.left, .left.box-danger, .left.box-warn, .left.box-info, .left.box-success, .box.left-in, .left-in.box-danger, .left-in.box-warn, .left-in.box-info, .left-in.box-success, .box.left-in-half, .left-in-half.box-danger, .left-in-half.box-warn, .left-in-half.box-info, .left-in-half.box-success { + margin-right: 4rem; + margin-left: 2rem; +} +.box.right, .right.box-danger, .right.box-warn, .right.box-info, .right.box-success, .box.right-in, .right-in.box-danger, .right-in.box-warn, .right-in.box-info, .right-in.box-success, .box.right-in-half, .right-in-half.box-danger, .right-in-half.box-warn, .right-in-half.box-info, .right-in-half.box-success { + margin-left: 4rem; + margin-right: 2rem; +} + +.box-danger, .box-warn, .box-info, .box-success { + padding-left: 1rem; + padding-right: 1rem; + border-left-width: 1rem; + border-left-style: solid; + border-left-color: var(--box-shadow-color); +} + +.box-danger { + color: var(--c-text-high); + background-color: var(--c-danger-box-bg); + border-left-color: var(--c-danger-bg); + --box-shadow-color: var(--c-danger-bg); +} + +.box-warn { + color: var(--c-text-high); + background-color: var(--c-warn-box-bg); + --box-shadow-color: var(--c-warn-box); +} + +.box-info { + color: var(--c-text-semihigh); + background-color: var(--c-info-box-bg); + --box-shadow-color: var(--c-info-bg); +} + +.box-success { + color: var(--c-text-semihigh); + background-color: var(--c-success-box-bg); + --box-shadow-color: var(--c-success-bg); +} + +.md > .box, .md > .box-danger, .md > .box-warn, .md > .box-info, .md > .box-success { + max-width: 70rem; + margin: 1rem 2rem 3rem; +} + +.layout-box { + position: relative; + border-radius: 1rem; + background-color: var(--c-bg-2); + z-index: -10; +} +.layout-box:after { + display: block; + position: absolute; + z-index: -9; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ""; + padding: 0 1rem; + box-shadow: inset 0 0 0.75rem 0.25rem var(--c-page); +} + +@media screen and (min-width: 120em) { + .md--margin-doc .box, .md--margin-doc .box-danger, .md--margin-doc .box-warn, .md--margin-doc .box-info, .md--margin-doc .box-success { + margin-left: auto; + margin-right: auto; + } +} + +@media screen and (min-width: 79em) { + .md--margin-full .box, .md--margin-full .box-danger, .md--margin-full .box-warn, .md--margin-full .box-info, .md--margin-full .box-success { + margin-left: auto; + margin-right: auto; + } +} + +.container:after { + display: table; + content: ""; + clear: both; +} + +@media screen and (min-width: 39em) { + .md .left, .md .right, .md .left-in, .md .right-in, .md .left-in-half, .md .right-in-half { + position: relative; + z-index: 2; + min-width: unset; + width: 37rem; } - .md blockquote > p, .md blockquote > ul, .md blockquote > ol, .md blockquote > dl, .container blockquote > p, .container blockquote > ul, .container blockquote > ol, .container blockquote > dl { - font-size: 1.9375rem; - line-height: 3rem; - padding-top: 0.77440625rem; - padding-bottom: 0.22559375rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); - hyphens: none; +} +@media screen and (min-width: 39em) { + .md .left, .md .left-in, .md .left-in-half { + float: left; + clear: left; + margin-right: 2rem !important; } - .md blockquote footer, .md blockquote cite, .container blockquote footer, .container blockquote cite { - font-style: italic; +} +@media screen and (min-width: 39em) { + .md .right, .md .right-in, .md .right-in-half { + float: right; + clear: right; + margin-left: 2rem !important; } - .md blockquote.left, .md blockquote.left-in-half, .md blockquote.left-in, .md blockquote.right, .md blockquote.right-in-half, .md blockquote.right-in, .container blockquote.left, .container blockquote.left-in-half, .container blockquote.left-in, .container blockquote.right, .container blockquote.right-in-half, .container blockquote.right-in { +} +@media screen and (min-width: 48em) { + .md .right3 { + position: relative; + z-index: 2; + width: 37rem; padding: 0 2rem; - font-style: italic; - color: var(--c-text-semihigh); - } - .md strong, .container strong { - font-size: 99%; - color: var(--c-text-medium); + float: right; + clear: right; } - .md strong a, .md a strong, .container strong a, .container a strong { - color: inherit; +} + +@media screen and (min-width: 120em) { + .md--margin-doc .highlight { + margin-left: auto; + margin-right: auto; } - .md .blockquote-hero, .container .blockquote-hero { - color: var(--c-text-semihigh); - font-style: italic; - padding-right: calc(5rem + 2 * var(--es)); + .md--margin-doc .left-in { + margin-right: 2rem; } - .md .blockquote-hero > p, .md .blockquote-hero > ul, .md .blockquote-hero > ol, .md .blockquote-hero > dl, .container .blockquote-hero > p, .container .blockquote-hero > ul, .container .blockquote-hero > ol, .container .blockquote-hero > dl { - font-size: 2.5833333333rem; - line-height: 4rem; - padding-top: 0.0325416667rem; - margin-bottom: -0.0325416667rem; + .md--margin-doc .left-in-half { + margin-left: 18.5rem; } - .md hr, .container hr { - margin: calc(1.4rem + 0.5 * var(--es)) 2rem calc(0.5rem + 1.5 * var(--es)) 2rem; - height: 0.1rem; - border-top: 0.1rem solid var(--c-text-extralow); + .md--margin-doc .left-in { + margin-left: 37rem; } - @media screen and (min-width: 39em) { - .md > p:not(:empty) + ul, .md > p:not(:empty) + ol, .container > p:not(:empty) + ul, .container > p:not(:empty) + ol { - margin-top: -1rem; - } + .md--margin-doc .left-in + .highlight, .md--margin-doc .left-in + .inline { + margin-left: -36.9rem; } - .md dd p + ol, .md dd p + ul, .container dd p + ol, .container dd p + ul { - padding-top: 1rem; + .md--margin-doc .highlight + .right-in, .md--margin-doc .highlight + .right3, .md--margin-doc .highlight + .fig--ph-right, .md--margin-doc .inline + .right-in, .md--margin-doc .inline + .right3, .md--margin-doc .inline + .fig--ph-right { + margin-left: -36.9rem; } - .md dd ul, .md dd ol, .md dd dl, .container dd ul, .container dd ol, .container dd dl { - text-align: left; +} + +@media screen and (min-width: 79em) { + .md--margin-full .highlight { + margin-left: auto; + margin-right: auto; } - .md dd > ul, .md dd > ol, .md dd > dl, .container dd > ul, .container dd > ol, .container dd > dl { - margin-top: 1rem; + .md--margin-full .left-in { + margin-right: 2rem; } - .md .p-first, .container .p-first { - font-size: 2.275rem; - line-height: 3.5rem; - padding-top: 0.8980125rem; - padding-bottom: 1.1019875rem; - text-align: left; - color: var(--c-text-low); - hyphens: none; + .md--margin-full .left-in-half { + margin-left: 19.5rem; } - .md .p-first strong, .md .p-first em, .md .p-first a, .md .p-first span, .container .p-first strong, .container .p-first em, .container .p-first a, .container .p-first span { - hyphens: none; + .md--margin-full .left-in { + margin-left: 37rem; } - .md .p-first em, .container .p-first em { - font-style: normal; + .md--margin-full .left-in + .highlight, .md--margin-full .left-in + .inline { + margin-left: -36.9rem; } - .md .p-first strong, .container .p-first strong { - font-weight: 450; - color: var(--c-text-medium); + .md--margin-full .highlight + .right-in, .md--margin-full .highlight + .right3, .md--margin-full .highlight + .fig--ph-right, .md--margin-full .inline + .right-in, .md--margin-full .inline + .right3, .md--margin-full .inline + .fig--ph-right { + margin-left: -36.9rem; } - @media screen and (min-width: 39em) { - .md .p-first, .container .p-first { - font-size: 2.6rem; - line-height: 4rem; - padding-top: 0.0263rem; - padding-bottom: 1.9737rem; - } +} + +.md--margin-full .left-in, .md--margin-full .left-in-half, .md--margin-full .right-in, .md--margin-full .right-in-half, .md--margin-doc .left-in, .md--margin-doc .left-in-half, .md--margin-doc .right-in, .md--margin-doc .right-in-half { + margin-bottom: 0; +} +@media screen and (min-width: 48em) { + .md--margin-full .right-in, .md--margin-doc .right-in { + margin-left: 2rem; } - .md .p-big, .container .p-big { - font-size: 2.5833333333rem; - line-height: 4rem; - padding-top: 0.6992083333rem; - padding-bottom: 1.3007916667rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4.6666666667rem ); - color: var(--c-text-medium); + .md--margin-full .right-in-half, .md--margin-doc .right-in-half { + margin-right: 19.5rem; + } + .md--margin-full .right-in, .md--margin-doc .right-in { + margin-right: 37rem; + } +} + +.page-header { + position: relative; + z-index: 2; + margin: 0 1px; +} +.page-header > hr { + border-top: 0.3rem solid var(--c-text-normal); + height: 1rem; +} + +.page-header--home { + margin-bottom: 6rem; +} + +@media screen and (min-width: 79em) { + .page-header--left .title, .page-header--left #author { + position: absolute; + left: 0; + top: 0; + width: 37rem; + } +} + +.page-list > hr { + border-bottom: 0.2rem solid var(--c-text-normal); + height: 1rem; + margin: 0 2rem 5rem 2rem; +} + +.page-footer { + flex: 0 0 auto; + padding-top: calc(2rem + 1 * var(--es)); + margin-top: auto; +} +.page-footer > hr { + border-top: 0.15rem solid var(--c-text-extralow); + height: 1rem; + margin: 0 2rem; + max-width: 70rem; +} + +@media screen and (min-width: 79em) { + .padding-full { + padding-left: 39rem; + } +} + +@media screen and (min-width: 79em) { + .padding-full-half { + padding-left: 20.5rem; + } +} + +@media screen and (min-width: 120em) { + .margin-doc { + margin-left: 37rem; + } +} + +@media screen and (min-width: 120em) { + .margin-doc-half { + margin-left: 18.5rem; + } +} + +@media screen and (min-width: 79em) { + .margin-full { + margin-left: 37rem; + } +} + +@media screen and (min-width: 79em) { + .margin-full-half { + margin-left: 18.5rem; + } +} + +.ul--row { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.li-box { + padding-top: 2rem; +} +.li-box:last-child > hr { + display: none; +} +@media screen and (min-width: 39em) { + .li-box { + padding-top: 4rem; + } +} + +.news-separator { + height: 1rem; + box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.1); + margin: 3.5rem 1rem 0 1rem; + background: var(--ctg-news-title); +} +@media screen and (min-width: 39em) { + .news-separator { + margin: 3.5rem 0 0 0; } - .md .p-small, .container .p-small { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.464465rem; - padding-bottom: calc(0.535535rem + var(--es)); - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); - color: var(--c-text-semihigh); - } - .md .placeholder, .container .placeholder { - color: var(--c-text-extralow); - } - .md .hang-quote, .container .hang-quote { - margin-left: -0.5em; - } - @media screen and (min-width: 48em) { - .md .up-1, .container .up-1 { - margin-top: -1rem; - } - .md .up-2, .container .up-2 { - margin-top: -2rem; - } - .md .up-3, .container .up-3 { - margin-top: -3rem; - } - .md .up-4, .container .up-4 { - margin-top: -4rem; - } - .md .up-5, .container .up-5 { - margin-top: -5rem; - } - .md .up-6, .container .up-6 { - margin-top: -6rem; - } - .md .up-7, .container .up-7 { - margin-top: -7rem; - } - .md .up-8, .container .up-8 { - margin-top: -8rem; - } - .md .up-9, .container .up-9 { - margin-top: -9rem; - } - .md .up-10, .container .up-10 { - margin-top: -10rem; - } - .md .up-11, .container .up-11 { - margin-top: -11rem; - } - .md .up-12, .container .up-12 { - margin-top: -12rem; - } - .md .up-13, .container .up-13 { - margin-top: -13rem; - } - .md .up-14, .container .up-14 { - margin-top: -14rem; - } - .md .up-15, .container .up-15 { - margin-top: -15rem; - } - .md .up-16, .container .up-16 { - margin-top: -16rem; - } - .md .up-17, .container .up-17 { - margin-top: -17rem; - } - .md .up-18, .container .up-18 { - margin-top: -18rem; - } - .md .up-19, .container .up-19 { - margin-top: -19rem; - } - .md .up-20, .container .up-20 { - margin-top: -20rem; - } - .md .up-21, .container .up-21 { - margin-top: -21rem; - } - .md .up-22, .container .up-22 { - margin-top: -22rem; - } - .md .up-23, .container .up-23 { - margin-top: -23rem; - } - .md .up-24, .container .up-24 { - margin-top: -24rem; - } - .md .up-25, .container .up-25 { - margin-top: -25rem; - } - .md .up-26, .container .up-26 { - margin-top: -26rem; - } - .md .up-27, .container .up-27 { - margin-top: -27rem; - } - .md .up-28, .container .up-28 { - margin-top: -28rem; - } - .md .up-29, .container .up-29 { - margin-top: -29rem; - } - .md .up-30, .container .up-30 { - margin-top: -30rem; - } - .md .up-31, .container .up-31 { - margin-top: -31rem; - } - .md .up-32, .container .up-32 { - margin-top: -32rem; - } - .md .up-33, .container .up-33 { - margin-top: -33rem; - } - .md .up-34, .container .up-34 { - margin-top: -34rem; - } - .md .up-35, .container .up-35 { - margin-top: -35rem; - } - .md .up-36, .container .up-36 { - margin-top: -36rem; - } - .md .up-37, .container .up-37 { - margin-top: -37rem; - } - .md .up-38, .container .up-38 { - margin-top: -38rem; - } - .md .up-39, .container .up-39 { - margin-top: -39rem; - } - .md .up-40, .container .up-40 { - margin-top: -40rem; - } - .md .up-41, .container .up-41 { - margin-top: -41rem; - } - .md .up-42, .container .up-42 { - margin-top: -42rem; - } - .md .up-43, .container .up-43 { - margin-top: -43rem; - } - .md .up-44, .container .up-44 { - margin-top: -44rem; - } - .md .up-45, .container .up-45 { - margin-top: -45rem; - } - .md .up-46, .container .up-46 { - margin-top: -46rem; - } - .md .up-47, .container .up-47 { - margin-top: -47rem; - } - .md .up-48, .container .up-48 { - margin-top: -48rem; - } - .md .up-49, .container .up-49 { - margin-top: -49rem; - } - .md .up-50, .container .up-50 { - margin-top: -50rem; - } - .md .up-51, .container .up-51 { - margin-top: -51rem; - } - .md .up-52, .container .up-52 { - margin-top: -52rem; - } - .md .up-53, .container .up-53 { - margin-top: -53rem; - } - .md .up-54, .container .up-54 { - margin-top: -54rem; - } - .md .up-55, .container .up-55 { - margin-top: -55rem; - } - .md .up-56, .container .up-56 { - margin-top: -56rem; - } - .md .up-57, .container .up-57 { - margin-top: -57rem; - } - .md .up-58, .container .up-58 { - margin-top: -58rem; - } - .md .up-59, .container .up-59 { - margin-top: -59rem; - } - .md .up-60, .container .up-60 { - margin-top: -60rem; - } - .md .down-1, .container .down-1 { - margin-top: 1rem; - } - .md .down-2, .container .down-2 { - margin-top: 2rem; - } - .md .down-3, .container .down-3 { - margin-top: 3rem; - } - .md .down-4, .container .down-4 { - margin-top: 4rem; - } - .md .down-5, .container .down-5 { - margin-top: 5rem; - } - .md .down-6, .container .down-6 { - margin-top: 6rem; - } - .md .down-7, .container .down-7 { - margin-top: 7rem; - } - .md .down-8, .container .down-8 { - margin-top: 8rem; - } - .md .down-9, .container .down-9 { - margin-top: 9rem; - } - .md .down-10, .container .down-10 { - margin-top: 10rem; - } - .md .down-11, .container .down-11 { - margin-top: 11rem; - } - .md .down-12, .container .down-12 { - margin-top: 12rem; - } - .md .down-13, .container .down-13 { - margin-top: 13rem; - } - .md .down-14, .container .down-14 { - margin-top: 14rem; - } - .md .down-15, .container .down-15 { - margin-top: 15rem; - } - .md .down-16, .container .down-16 { - margin-top: 16rem; - } - .md .down-17, .container .down-17 { - margin-top: 17rem; - } - .md .down-18, .container .down-18 { - margin-top: 18rem; - } - .md .down-19, .container .down-19 { - margin-top: 19rem; - } - .md .down-20, .container .down-20 { - margin-top: 20rem; - } - .md .down-21, .container .down-21 { - margin-top: 21rem; - } - .md .down-22, .container .down-22 { - margin-top: 22rem; - } - .md .down-23, .container .down-23 { - margin-top: 23rem; - } - .md .down-24, .container .down-24 { - margin-top: 24rem; - } - .md .down-25, .container .down-25 { - margin-top: 25rem; - } - .md .down-26, .container .down-26 { - margin-top: 26rem; - } - .md .down-27, .container .down-27 { - margin-top: 27rem; - } - .md .down-28, .container .down-28 { - margin-top: 28rem; - } - .md .down-29, .container .down-29 { - margin-top: 29rem; - } - .md .down-30, .container .down-30 { - margin-top: 30rem; - } - } - .md p:empty, .container p:empty { - display: none; - } - - /* .md--serif { - > p, > ul, > ol, > dl { - @include font.shapes(serif, regular); - } - - strong { - @include font.weight(serif, semibold); - } - - .p-first { - @include font.shapes(serif, light); - @include font.style(serif, light, italic); - - strong { - @include font.weight(serif, regular); - } - } - } */ - .md--sans p, .md--sans ul, .md--sans ol, .md--sans dl { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 400; - } - .md--sans blockquote p, .md--sans blockquote ul, .md--sans blockquote ol, .md--sans blockquote dl { - font-family: 'IBM Plex Serif', Georgia, Times, serif; - font-weight: 400; - } - .md--sans blockquote strong { - font-weight: 600; - } - .md--sans strong { - font-weight: 700; - } - .md--sans .p-first { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 300; - } - .md--sans .p-first strong { - font-weight: 450; - } - - .md--home { - padding-bottom: 1rem; - } - .md--home > p, .md--home > ul, .md--home > ol, .md--home > dl, .md--home > blockquote { - font-size: 1.95rem; - line-height: 3rem; - padding-top: 0.769725rem; - padding-bottom: calc(0.230275rem + var(--es)); - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 300; - text-align: left; - } - .md--home > p strong, .md--home > ul strong, .md--home > ol strong, .md--home > dl strong, .md--home > blockquote strong { - font-weight: 450; - } - .md--home dl > dt { - font-weight: 450; - } - .md--home .p-small { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 1.464465rem; - padding-bottom: calc(0.535535rem + var(--es)); - font-weight: 450; - } - - .md--card { - margin-bottom: 0; - } - .md--card > p, .md--card > .p-first { - color: var(--c-text-medium); - font-size: 1.6083333333rem; - line-height: 2.5rem; - padding-top: 0.6476791667rem; - padding-bottom: 0.3523208333rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - text-align: left; - hyphens: none; - } - .md--card > p strong, .md--card > .p-first strong { - font-weight: 600; - } - - .md--card--half > p, .md--card--half > .p-first { - font-size: 1.43rem; - line-height: 1.5rem; - padding-top: 0.214465rem; - padding-bottom: 0.285535rem; - } - - .md--card--small > p, .md--card--small > .p-first { - font-size: 1.6083333333rem; - line-height: 2.5rem; - padding-top: 0.1476791667rem; - margin-bottom: -0.1476791667rem; - } - - .md--card--3halfs { - padding-bottom: 2rem; - } - @media screen and (min-width: 48em) { - .md--card--3halfs > p, .md--card--3halfs > .p-first { - font-size: 1.95rem; - line-height: 3rem; - padding-top: 0.769725rem; - padding-bottom: 0.230275rem; - } - } - - @media screen and (min-width: 48em) { - .md--card--2 { - max-width: 74rem; - } - .md--card--2 p, .md--card--2 .p-first { - font-size: 2.4375rem; - line-height: 4rem; - padding-top: 0.58715625rem; - padding-bottom: 0.91284375rem; - } - } - @media screen and (min-width: 79em) { - .md--card--2 p, .md--card--2 .p-first { - font-size: 1.95rem; - line-height: 3rem; - padding-top: 0.769725rem; - padding-bottom: 0.230275rem; - } - } - - .md--taxo > p, .md--taxo > ul, .md--taxo > ol, .md--taxo > dl { - font-size: 1.43rem; - line-height: 3rem; - padding-top: 0.964465rem; - padding-bottom: 0.035535rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - text-align: left; - } - - .md--footer > p, .md--footer > ul, .md--footer > ol, .md--footer > dl { - font-size: 1.93rem; - line-height: 3rem; - padding-top: 0.777215rem; - padding-bottom: 0.222785rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - .md--footer li { - padding-left: 3rem; - } - @media screen and (min-width: 48em) { - .md--footer > p, .md--footer > ul, .md--footer > ol, .md--footer > dl { - font-size: 1.6083333333rem; - line-height: 2.5rem; - padding-top: 0.6476791667rem; - padding-bottom: 0.3523208333rem; - } - .md--footer li { - padding-left: 2.5rem; - } - } - - .md--small > p, .md--small > ul, .md--small > ol, .md--small > dl { - font-size: 1.6083333333rem; - line-height: 2.5rem; - padding-top: 0.6476791667rem; - padding-bottom: 0.3523208333rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - - .md--tiny > p, .md--tiny > ul, .md--tiny > ol, .md--tiny > dl { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.464465rem; - padding-bottom: 0.535535rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - - .md--dropcap2 > p:first-child:first-letter { - float: left; - font-size: 6.3rem; - line-height: 1; - margin: -0.2rem 0.35rem -1rem -0.2rem; - } - - .md--dropcap3 > p:first-child:first-letter { - float: left; - font-size: 10.5rem; - line-height: 1; - margin: -0.9rem 0.5rem -1rem -0.2rem; - } - - @media screen and (min-width: 120em) { - .md--margin-doc { - text-align: center; - } - .md--margin-doc > h1, .md--margin-doc > h2, .md--margin-doc > h3, .md--margin-doc > h4, .md--margin-doc > h5, .md--margin-doc > h6, .md--margin-doc > hr, .md--margin-doc > table { - margin-left: 39rem; - } - .md--margin-doc > p, .md--margin-doc > ul, .md--margin-doc > ol, .md--margin-doc > dl, .md--margin-doc > blockquote, .md--margin-doc > pre, .md--margin-doc > .fig-diagram, .md--margin-doc > .maincol, .md--margin-doc > .literature, .md--margin-doc > .footnotes, .md--margin-doc > .gist, .md--margin-doc > .asciicast, .md--margin-doc > .box, .md--margin-doc > .math-block, .md--margin-doc > .chem-block { - width: 74rem; - margin-left: auto; - margin-right: auto; - } - } - - @media screen and (min-width: 79em) { - .md--margin-full { - text-align: center; - } - .md--margin-full > h1, .md--margin-full > h2, .md--margin-full > h3, .md--margin-full > h4, .md--margin-full > h5, .md--margin-full > h6, .md--margin-full > hr { - margin-left: 39rem; - } - .md--margin-full > p, .md--margin-full > ul, .md--margin-full > ol, .md--margin-full > dl, .md--margin-full > blockquote, .md--margin-full > pre, .md--margin-full > .fig-diagram, .md--margin-full > .maincol, .md--margin-full > .literature, .md--margin-full > .footnotes, .md--margin-full > .gist, .md--margin-full > .asciicast, .md--margin-full > .box, .md--margin-full > .math-block, .md--margin-full > .chem-block { - width: 74rem; - margin-left: auto; - margin-right: auto; - } - .md--margin-full table { - margin-left: 37rem; - } - } - - .md--frame { - color: var(--c-frame-text-normal); - } - .md--frame p, .md--frame li, .md--frame dd { - text-align: left; - } - .md--frame .fig { - float: none; - } - .md--frame .link--text { - color: var(--c-frame-text-link); - text-decoration-color: var(--c-frame-text-link); - } - .md--frame .link--text[href^=http] { - color: var(--c-frame-text-link-ext); - text-decoration-color: var(--c-frame-text-link-ext); - } - .md--frame .link--text:hover, .md--frame .link--text:focus, .md--frame .link--text:active { - color: var(--c-frame-text-link-high); - text-decoration-color: var(--c-frame-text-link-high); - background-color: var(--c-frame-button-hover-bg); - } - - .md--blog { - padding-top: calc(3rem + 2 * var(--es)); - } - - .md--list { - padding-bottom: 0; - margin-bottom: 0; - } - - .md p > code, .md li > code, .md dt > code, .md dd > code, .md .caption > code { - font-size: 75%; - font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; - font-weight: 450; - margin: 0 0.075em; - padding: 0.1em 0.25em; - text-transform: none; - border-radius: 0.5rem; - box-shadow: 0 0 0 1px var(--c-shadow-2); - color: var(--c-chroma-fg); - background-color: var(--c-chroma-bg); - } - .md dt > code { - font-weight: 700; - } - .md pre :target, .md .highlight :target { - text-decoration: none; - outline: ridge var(--c-code); - scroll-margin-top: 10rem; - } - .md pre { - position: relative; - overflow: auto; - clear: both; - font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; - font-weight: 450; - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.464465rem; - padding-bottom: 0.535535rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); - word-break: normal; - hyphens: none; - text-align: left; - } - .md pre code { - display: block; - white-space: pre; +} +@media screen and (min-width: 79em) { + .news-separator { + background: var(--ctg4-news-title); + } +} + +.li-header { + position: relative; +} + +.fig, .goat { + position: relative; + z-index: 5; + padding-top: 1.75rem; + padding-bottom: 1rem; + width: 100%; +} +.fig .caption, .goat .caption { + padding-left: 2rem; + padding-right: 2rem; +} +@media screen and (min-width: 39em) { + .fig, .goat { + padding-left: 2rem; + padding-right: 2rem; } - .md .highlight > pre > code { - padding-left: 0.8em; - padding-right: 0.8rem; + .fig .caption, .goat .caption { + padding-left: 0; + padding-right: 0; } - .md .highlight { - display: block; - max-height: 200rem; - padding: 2rem 2rem 1.5rem; - min-width: 100%; +} + +.fig--w-tiny, .fig--w-small, .fig--w-medium { + float: left; + clear: left; + padding-left: 2rem; + padding-right: 2rem; +} +.fig--w-tiny .caption, .fig--w-small .caption, .fig--w-medium .caption { + padding-left: 0; + padding-right: 0; +} + +.fig--w-small, .fig--w-medium { + width: calc(50% + 1rem); +} +@media screen and (min-width: 39em) { + .fig--w-small, .fig--w-medium { + width: 37rem; + } +} +.fig--w-small.fig--ph-right, .fig--ph-right.fig--w-medium { + float: right; + clear: right; +} + +.fig--w-tiny { + padding-left: 2rem; + padding-right: 2rem; + width: calc(33.3334% + 1rem); +} +@media screen and (min-width: 39em) { + .fig--w-tiny { + width: 18.5rem; + } +} +.fig--w-tiny.fig--ph-right { + float: right; + clear: right; +} +@media screen and (min-width: 48em) { + .fig--w-tiny.fig--ph-right { + width: 37rem; + padding-right: 18.5rem; + } +} +.fig--w-tiny .img__c-t-symbol { + padding: 1rem; +} + +@media screen and (min-width: 48em) { + .fig--w-medium.fig--ph-right { + width: 55.5rem; + } +} + +.fig--w-text, .goat, .fig--w-large, .fig--w-xlarge { + padding-bottom: 2rem; +} +@media screen and (max-width: 39em) { + .fig--w-text .img__c, .goat .img__c, .fig--w-large .img__c, .fig--w-xlarge .img__c { + border-radius: 0; + border-left: none; + border-right: none; + } +} + +@media screen and (min-width: 48em) { + .fig--w-text, .goat { max-width: 74rem; - margin-bottom: calc(0.5 * var(--es)); - color: var(--c-code); - } - .md .highlight > pre, .md .highlight > div { - overflow: auto; - scrollbar-color: var(--c-scrollbar) var(--c-bg-3); - border-radius: 0.25rem; - box-shadow: 0 0 0 1px var(--c-shadow-2); - padding-right: 0.25em; - } - .md .highlight > pre::-webkit-scrollbar, .md .highlight > div::-webkit-scrollbar { - width: 1rem; - height: 1rem; - } - .md .highlight > pre::-webkit-scrollbar-thumb, .md .highlight > div::-webkit-scrollbar-thumb { - background: var(--c-scrollbar); - } - .md .highlight > pre::-webkit-scrollbar-track, .md .highlight > div::-webkit-scrollbar-track { - background: var(--c-bg-3); - } - .md .highlight table:after { - display: none; - } - @media screen and (min-width: 39em) { - .md .highlight { - min-width: 74rem; - width: 74rem; - } - } - @media screen and (min-width: 48em) { - .md .highlight.expand { - display: inline-block; - max-width: 148rem; - width: unset; - } } - .md li .highlight, .md dd .highlight { + .fig--w-text .caption, .goat .caption { + position: absolute; + z-index: 10; + right: -35rem; + top: 1.25rem; + width: 33rem; + height: calc(100% - 3.75rem); + margin-left: 2rem; + text-align: left; padding-left: 0; padding-right: 0; - min-width: 100%; - max-width: 100%; - } - .md li .highlight .copy-code, .md dd .highlight .copy-code { - right: 0; - } - .md .lh15 pre { - font-size: 1.43rem; - line-height: 1.5rem; - padding-top: 1.214465rem; - padding-bottom: 0.785535rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.5rem ); } - .md .note .highlight { - padding: 1rem 0; - } - .md .note code { - color: var(--c-code-extralow); - } - .md .language-mermaid { - text-align: center; - } - .md .language-mermaid > svg { - max-width: 100%; - height: auto; - } - - .md .col4, .md .col2-l3, .md .col2-l2, .md .col2, .md .col3 { - column-gap: 4rem; - } - .md .col4 li, .md .col2-l3 li, .md .col2-l2 li, .md .col2 li, .md .col3 li, .md .col4 p, .md .col2-l3 p, .md .col2-l2 p, .md .col2 p, .md .col3 p, .md .col4 dd, .md .col2-l3 dd, .md .col2-l2 dd, .md .col2 dd, .md .col3 dd { - text-align: left; - } - - @media screen and (min-width: 39em) { - .md .col2, .md .col3 { - column-count: 2; - } - } - @media screen and (min-width: 39em) { - .md .col2-l2 { - column-count: 2; - width: 62rem; - } - } - @media screen and (min-width: 39em) { - .md .col2-l3 { - column-count: 2; - width: 54rem; - } - } - @media screen and (min-width: 39em) { - .md .col4 { - column-count: 4; - } - } - - @media screen and (min-width: 120em) { - .md--margin-doc .col3 { - column-count: 3; - max-width: 111rem; - } - } - - @media screen and (min-width: 79em) { - .md--margin-full .col3 { - column-count: 3; - max-width: 111rem; - } - } - - .md dt { - text-align: left; - } - .md dd { - padding: 0 0 1rem calc(3rem + 1 * var(--es)); - } - .md dd ul > li, .md dd ol > li { - padding-left: 3rem; - } - .md dd + dt { - margin-top: 1rem; - } - .md .dl-tight > dt { - float: left; - clear: left; - width: auto; - padding: 0 3rem 0 0; - } - .md .dl-tight > dt:after { - display: table; - clear: both; - content: ""; - } - .md .dl-tight > dd { - padding: 0; - } - .md .dl-loose, .md .dl-icon, .md .dl-loose2, .md .dl-loose3 { - position: relative; - } - @media screen and (min-width: 39em) { - .md .dl-loose > dt, .md .dl-icon > dt, .md .dl-loose2 > dt, .md .dl-loose3 > dt { - float: left; - clear: left; - width: 16.5rem; - padding-bottom: 0; - } - .md .dl-loose > dt:after, .md .dl-icon > dt:after, .md .dl-loose2 > dt:after, .md .dl-loose3 > dt:after { - content: "‍"; - } - .md .dl-loose > dd, .md .dl-icon > dd, .md .dl-loose2 > dd, .md .dl-loose3 > dd { - margin-left: 0; - padding-left: 18.5rem; - } - } - @media screen and (min-width: 39em) { - .md .dl-loose3 > dt { - width: 24.011rem; - } - .md .dl-loose3 > dd { - padding-left: 26.011rem; - } - } - @media screen and (min-width: 39em) { - .md .dl-loose2 > dt { - width: 35rem; - } - .md .dl-loose2 > dd { - padding-left: 37rem; - } - } - @media screen and (min-width: 39em) { - .md .dl-icon > dt { - width: 4rem; - } - .md .dl-icon > dd { - padding-left: 6rem; - } - } - .md .dl-tight > dd + dt, .md .dl-loose > dd + dt, .md .dl-loose3 > dd + dt, .md .dl-loose2 > dd + dt, .md .dl-icon > dd + dt { - margin-top: 0; - } - - .md--home .p-first { - text-align: center; - } - .md--home dt { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - - .md--sans dt { - font-weight: 500; - } - .md--sans dt var { - font-weight: 450; - } - .md--sans dt strong { - font-weight: 700; - } - - sup:target { - background-color: var(--c-bg-3); - scroll-margin-top: calc(var(--tnh) + var(--tg)); - } - - .footnote-ref { - color: var(--c-text-link); - } - .footnote-ref:before { - content: " ["; - } - .footnote-ref:after { - content: "]"; - } - .footnote-ref:hover, .footnote-ref:focus, .footnote-ref:active { - color: var(--c-text-link-hover); - background-color: var(--c-text-link-hover-bg); - } - - .footnotes { - text-align: left; - margin-top: -0.35em; - overflow-wrap: break-word; - } - .footnotes hr { - width: 25%; - margin-top: 2rem; - margin-bottom: calc(1rem + 1 * var(--es)); - margin-left: 0; - padding: 0; - border-top: 0.35em solid var(--c-text-normal); - } - .footnotes ol { - counter-reset: nr; - } - .footnotes ol li { - counter-increment: nr; - background-color: transparent; - page-break-inside: avoid; - -webkit-column-break-inside: avoid; - break-inside: avoid-column; - font-size: 1.6953125rem; - line-height: 2.625rem; - padding-top: 0.6776054687rem; - padding-bottom: 0.3223945313rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.625rem ); - } - .footnotes ol li:target { - border-radius: 0.5rem; - background-color: var(--c-bg-3); - } - .footnotes ol li:before { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - float: left; - height: 1em; - content: counter(nr, decimal) "."; - } - .footnotes ol li p + p { - margin-top: -0.875rem; - text-indent: 2.5rem; - } - - .footnote-backref { - visibility: hidden; - } - .footnote-backref:before { - visibility: visible; - font-family: inherit; - font-weight: bold; - content: "⬏"; - } - .footnote-backref + .footnote-backref { - margin-left: -0.75em; - } - - @media screen and (min-width: 48em) { - .footnotecols > .footnotes { - width: auto; - margin-right: 0; - margin-left: 0; - padding-right: 0; - padding-left: 0; - } - .footnotecols > .footnotes > ol { - column-count: 3; - column-gap: 4rem; - } - .footnotecols > .footnotes > ol > li > p { - padding-left: 3rem; - } - } - @media screen and (min-width: 79em) { - .footnotecols > .footnotes > ol { - column-count: 4; - } - } - .md--sans .footnotes p { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 400; - } - - /* .md--serif .footnotes p { - @include font.shapes(serif, regular); - } */ - .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { - text-align: left; - } - .md h1 .br-cond, .md h2 .br-cond, .md h3 .br-cond, .md h4 .br-cond { - display: none; - } - @media screen and (min-width: 39em) { - .md h1 .br-cond, .md h2 .br-cond, .md h3 .br-cond, .md h4 .br-cond { - display: initial; - } - } - .md h5, .md h6, .md .h-p, .md .h-p-s { - display: inline-block; - float: left; - padding-bottom: 0; - } - .md h3:has(+ dl, + ul, + ol) { - margin-bottom: 1rem; - } - .md .h-danger .h-a, .md .h-warn .h-a, .md .h-info .h-a, .md .h-success .h-a { - display: inline-block; - padding: 0 0.5rem; - margin-left: -0.5rem; - border-radius: 0.5rem; - box-shadow: 0 0 0 1px var(--c-shadow-1); - } - .md .h-danger { - color: var(--c-danger); - } - .md .h-danger .h-a { - background-color: var(--c-danger-bg); - } - .md .h-danger:hover .h-a { - color: var(--c-danger); - } - .md .h-warn { - color: var(--c-warn); - } - .md .h-warn .h-a { - background-color: var(--c-warn-bg); - } - .md .h-info { - color: var(--c-info); - } - .md .h-info .h-a { - background-color: var(--c-info-bg); - } - .md .h-info:hover .h-a { - color: var(--c-info); - } - .md .h-success { - color: var(--c-success); - } - .md .h-success .h-a { - background-color: var(--c-success-bg); - } - - .md--h-sans h1, .md--h-sans h2, .md--h-sans h3, .md--h-sans h4 { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - } - .md--h-sans h1 var, .md--h-sans h2 var, .md--h-sans h3 var, .md--h-sans h4 var { - font-weight: 700; - } - .md--h-sans h5, .md--h-sans .h-p { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - } - .md--h-sans h6, .md--h-sans .h-p-s { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - .md--h-sans h1 { - font-size: 2.86rem; - line-height: 3rem; - padding-top: 1.42893rem; - padding-bottom: calc(0.57107rem + var(--es)); - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4rem ); - letter-spacing: 0.005em; - word-spacing: 0.015em; - } - .md--h-sans h2 { - font-size: 2.145rem; - line-height: 3rem; - padding-top: calc(2.6966975rem + var(--es)); - padding-bottom: calc(0.3033025rem + var(--es)); - scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es))); - text-transform: uppercase; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - .md--h-sans h3 { - font-size: 2.145rem; - line-height: 3rem; - padding-top: calc(1.6966975rem + var(--es)); - margin-bottom: calc(-0.1966975rem + 0.5 * var(--es)); - scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); - letter-spacing: 0.005em; - word-spacing: 0.015em; - } - .md--h-sans h4 { - font-size: 1.60875rem; - line-height: 2rem; - padding-top: 1.397523125rem; - padding-bottom: 0.102476875rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); - text-transform: uppercase; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - .md--h-sans h4 + ul, .md--h-sans h4 + ol, .md--h-sans h4 + dl { - margin-top: 1rem; - } - .md--h-sans h5, .md--h-sans h6, .md--h-sans .h-p { - font-size: 1.93rem; - line-height: 3rem; - padding-top: 0.777215rem; - margin-bottom: -0.777215rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); - text-transform: unset; - margin-right: 0.5em; - } - .md--h-sans h5, .md--h-sans .h-p { - letter-spacing: 0.01em; - word-spacing: 0.03em; - } - .md--h-sans h6, .md--h-sans .h-p-s { - letter-spacing: 0.01em; - word-spacing: 0.03em; - color: var(--c-text-high); - } - .md--h-sans .p-meta { - font-size: 1.4475rem; - line-height: 1rem; - padding-top: 1.95791125rem; - margin-bottom: -0.95791125rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - color: var(--c-taxo-link); - } - .md--h-sans .p-meta + h3 { - margin-top: calc(-0.5rem + -1 * var(--es)); - } - .md--h-sans .p-meta + h4 { - margin-top: calc(-0.5rem + -0.5 * var(--es)); - } - - .md--h-big h1 { - font-size: 4.29rem; - line-height: 5rem; - padding-top: 1.893395rem; - padding-bottom: calc(0.106605rem + var(--es)); - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 6rem ); - letter-spacing: 0.005em; - word-spacing: 0.015em; - } - .md--h-big h2 { - font-size: 3.81rem; - line-height: 3rem; - padding-top: calc(2.073155rem + var(--es)); - padding-bottom: calc(0.926845rem + var(--es)); - scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (5rem + 1 * var(--es))); - text-transform: uppercase; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - .md--h-big h3 { - font-size: 2.86rem; - line-height: 3rem; - padding-top: calc(1.42893rem + var(--es)); - padding-bottom: calc(0.57107rem + var(--es)); - scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); - letter-spacing: 0.005em; - word-spacing: 0.015em; - } - .md--h-big h4 { - font-size: 1.905rem; - line-height: 2rem; - padding-top: calc(1.2865775rem + var(--es)); - padding-bottom: 0.7134225rem; - scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (3rem + 1 * var(--es))); - text-transform: uppercase; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - .md--h-big h4 + ul, .md--h-big h4 + ol, .md--h-big h4 + dl { - margin-top: 1rem; - } - - .md--footer h2 { - font-size: 1.7145rem; - line-height: 2.5rem; - padding-top: 0.60791975rem; - margin-bottom: -0.10791975rem; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - letter-spacing: 0.05em; - word-spacing: 0.15em; - text-transform: uppercase; - } - @media screen and (min-width: 48em) { - .md--footer h2 { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.464465rem; - padding-bottom: 0.035535rem; - } - } - .md--footer a:hover, .md--footer a:focus { - color: inherit; - } - - /* .md--card { - h2 { - @include font.shapes(serif, bold ); - @include font.spacing( 0.05 ); - text-transform: uppercase; - } - .p-meta { - @include font.weight(sans-cond, text); - } - .p-meta + h2 { - margin-top: 0; - } - } - - .md--card--half { - h2 { - @include font.base-w(serif, bold, 0.95, 1.5, 0, 0.5, 0, 0, false ); - } - .p-meta { - @include font.base-w(sans-cond, light, 0.95, 1.5, 0.5, 0.5, 0, 0, false ); - } - } - - .md--card--1 { - h2 { - @include font.base-x(serif, bold, math.div(5,6), 2, 0, 0, 0, 0, false ); - } - @media screen and (min-width: bp.$col-2) { - h2 { - @include font.base-x(serif, bold, 1, 2, 0, 0, 0, 0, false ); - } - } - } - - .md--card--2 { - @extend .md--card--1; - @media screen and (min-width: bp.$col-3) { - h2 { - @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); - } - } - } - - .md--card--3halfs { - @extend .md--card--1; - h2 { - @include font.base-x(serif, bold, 1, 2, 0, 1, 0, 0, false ); - } - .p-meta { - @include font.base-w(sans-cond, light, 1, 2, 0, 1, 0, 0, false ); - } - } - - .md--card--2 { - h2 { - @include font.base-x(serif, bold, math.div(5,4), 3, 0, 1, 0, 0, false ); - } - .p-meta { - @include font.base-x(sans-cond, light, 1, 1.5, 0.5, 0.5, 0, 0, false ); - } - } - - - - .md--home { - h1 { - @include font.base-x(serif, bold, 2, 4, 4, 3, -3, 0, false ); - @include font.shapes(serif, bold); - @include font.spacing( 0.05 ); - text-transform: uppercase; - color: black; - } - h2 { - @include font.base-x(serif, bold, math.div(7,8), 2, 2, 1, 0, 0, false ); - @include font.shapes(serif, bold ); - @include font.spacing( 0.05 ); - text-transform: uppercase; - } - } */ - .md--article h2 { - font-size: 2.86rem; - line-height: 3rem; - padding-top: calc(1.42893rem + var(--es)); - padding-bottom: calc(0.57107rem + var(--es)); - scroll-margin-top: calc(var(--tnh) + var(--tg) + 2rem - (4rem + 1 * var(--es))); - font-weight: 600; - text-transform: none; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - .md--article h3 { - font-size: 2.3833333333rem; - line-height: 3rem; - padding-top: 1.6074416667rem; - padding-bottom: 0.3925583333rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 4rem ); - font-weight: 600; - letter-spacing: 0.01em; - word-spacing: 0.03em; - } - - .emb { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - display: block; - text-align: left; - position: relative; - z-index: 2; - hyphens: auto; - } - .emb svg { - display: block; - width: 100%; - height: auto; - } - - .emb--w-small { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.814465rem; - padding-bottom: 1.035535rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); - width: calc(50% + 1rem); - } - @media screen and (min-width: 39em) { - .emb--w-small { - width: 37rem; - } - } - - .emb--w-tiny { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.814465rem; - padding-bottom: 1.035535rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); - width: calc(25% + 1rem); - } - - .emb--w-micro { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.814465rem; - padding-bottom: 0.035535rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2.35rem ); - width: calc(12.5% + 1rem); - } - - .emb--ph-left { - float: left; - clear: left; - padding-right: 2rem; - } - .emb--ph-left.emb--w-tiny, .emb--ph-left.emb--w-small { - padding-right: 2rem; - } - @media screen and (min-width: 39em) { - .emb--ph-left.emb--w-tiny, .emb--ph-left.emb--w-small { - padding-right: 4rem; - } - } - @media screen and (min-width: 39em) { - .emb--ph-left.emb--w-micro { - padding-right: 2rem; - } - } - - .emb--ph-right { - float: right; - clear: right; - padding-left: 2rem; - } - .emb--ph-right.emb--w-tiny, .emb--ph-right.emb--w-small { - padding-left: 2rem; - } - @media screen and (min-width: 39em) { - .emb--ph-right.emb--w-tiny, .emb--ph-right.emb--w-small { - padding-left: 4rem; - } - } - @media screen and (min-width: 39em) { - .emb--ph-right.emb--w-micro { - padding-left: 2rem; - } - } - - @media screen and (min-width: 39em) { - .emb--pv-middle { - padding-top: 4rem; - } - .emb--pv-middle.emb--w-micro { - padding-top: 1rem; - } - } - - .emb--w-text { + .fig--w-text .caption__attr, .goat .caption__attr { + position: absolute; + bottom: 0; + left: 0; float: none; - width: 100%; - padding: 1.25rem 0 0 0; - } - - .md del, .md ins { - text-decoration-color: var(--c-danger-bg); - text-decoration-thickness: 0.075em; - text-decoration-skip: auto; - } - .md del { - text-decoration-line: line-through; - text-line-through: double; - } - .md ins { - text-decoration-line: underline; - text-underline-offset: 0.075em; - } - .md sup, .md sub { - position: relative; - font-size: 0.6666667em; - font-weight: 500; - line-height: 1; - font-feature-settings: "lnum" on; - } - .md sup { - top: -0.6em; - } - .md sup > a { - font-size: 1em; - } - .md sub { - bottom: -0.25em; - } - .md kbd { - display: inline-block; - font-size: 90%; - font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; - font-weight: 450; - line-height: 1em; - min-width: 1.2em; - margin: 0 0.1em; - padding: 0.1em 0.2em; - text-align: center; - border-radius: 0.5rem; - background-color: var(--c-bg-2); - box-shadow: 0 0 0 2px var(--c-shadow-2); - } - .md cite { - letter-spacing: 0.03em; - word-spacing: 0.09em; - } - .md dfn { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - - .md .asciicast { - margin-top: 1rem !important; - padding: 1rem 0 0.5rem 0 !important; - max-width: 70rem; - text-align: center; - border-radius: 0.5rem; - background-color: var(--c-bg-1); - } - @media screen and (min-width: 39em) { - .md .asciicast { - margin: 0 2rem 1rem 2rem !important; - } - } - @media screen and (min-width: 48em) { - .md > .vimeo { - max-width: 70rem; - height: auto; - } - } - - .note { - position: relative; - margin-top: 1.4rem; - margin-bottom: calc(0.9rem + 1 * var(--es)); - } - @media screen and (min-width: 39em) { - .note { - margin-left: 2rem; - margin-right: 2rem; - } - } - @media screen and (min-width: 48em) { - .note { - padding: 0; - margin: 0; - border: none; - } - } - - .note__content { - border-top: 0.1rem solid var(--c-shadow-2); - border-bottom: 0.1rem solid var(--c-shadow-2); - padding: 1rem 2rem; - background: var(--c-bg-2); - overflow: hidden; - } - .note__content > p { - text-align: left; - font-size: 1.68875rem; - line-height: 2rem; - padding-top: 0.367563125rem; - padding-bottom: 0.632436875rem; - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 2rem ); - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - color: var(--c-text-extralow); - } - .note__content > p strong { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - color: var(--c-text-low); - } - .note__content var { - color: var(--c-text-medium); - } - .note__content > p:not(:empty) + p { - margin-top: -1rem; - text-indent: 2rem; - } - @media screen and (min-width: 48em) { - .note__content { - margin: 0; - padding: 1rem 0; - border: none; - background: transparent; - overflow: visible; - } - } - - .note-star1 .note__content > p:first-of-type, .note-star2 .note__content > p:first-of-type, .note-dagger1 .note__content > p:first-of-type, .note-dagger2 .note__content > p:first-of-type { - position: relative; - } - .note-star1 .note__content > p:first-of-type:before, .note-star2 .note__content > p:first-of-type:before, .note-dagger1 .note__content > p:first-of-type:before, .note-dagger2 .note__content > p:first-of-type:before { - position: absolute; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 400; - top: 0.1em; - left: -1rem; - font-size: 80%; - line-height: 1; - color: var(--c-text-semihigh); - } - - .note-star1 .note__content > p:first-of-type:before { - content: "*"; - } - - .note-star2 .note__content > p:first-of-type:before { - left: -1.5rem; - content: "**"; - } - - .note-dagger1 .note__content > p:first-of-type:before { - content: "†"; - } - - .note-dagger2 .note__content > p:first-of-type:before { - content: "‡"; - } - - @media screen and (min-width: 48em) { - .note-long .note__content { - position: static; - overflow: auto; - height: auto; - } - .note-long .note__content:after { - display: none; - } - } - - .checkbox-note { - position: absolute; - visibility: hidden; - top: -9999px; - left: -9999px; - } - .checkbox-note ~ .note__content:after { - position: absolute; - bottom: 0.1rem; - z-index: 9; - width: calc(100% - 4rem); - height: 100%; - content: ""; - pointer-events: none; - background-image: linear-gradient(to bottom, transparent 33%, var(--c-bg-2) 90%); - } - @media screen and (min-width: 48em) { - .checkbox-note ~ .note__content { - overflow: visible; - height: auto; - } - } - .checkbox-note ~ .open-note { - display: block; - position: absolute; - z-index: 999; - width: 50%; - height: 5rem; - margin-left: 25%; - cursor: pointer; - user-select: none; - color: transparent; - -webkit-tap-highlight-color: transparent; - } - .checkbox-note ~ .open-note > .arrow { - display: block; - z-index: 999; - width: 0; - height: 0; - margin: 2rem auto; - border-color: transparent; - border-style: solid; - border-width: 1rem; - } - .checkbox-note ~ .open-note:focus { - color: transparent; - } - - .checkbox-note ~ .note__content { - height: 10.5rem; - } - .checkbox-note ~ .note__content:after { - transition: opacity 150ms; - opacity: 1; - } - @media screen and (min-width: 48em) { - .checkbox-note ~ .note__content { - height: 100%; - } - .checkbox-note ~ .note__content:after { - display: none; - } - } - .checkbox-note ~ .open-note { - bottom: -3rem; - } - .checkbox-note ~ .open-note > .arrow { - border-top-color: var(--c-text-normal); - border-bottom-color: unset; - } - @media screen and (min-width: 48em) { - .checkbox-note ~ .open-note { - display: none; - } - } - - .checkbox-note:checked ~ .note__content { - height: 100%; - } - .checkbox-note:checked ~ .note__content:after { - opacity: 0; - height: 100%; - } - .checkbox-note:checked ~ .open-note { - bottom: -1rem; - } - .checkbox-note:checked ~ .open-note > .arrow { - border-top-color: unset; - border-bottom-color: var(--c-text-normal); - } - @media screen and (min-width: 48em) { - .checkbox-note:checked ~ .open-note { - display: none; - } - } - - .md table:not(.lntable) { - border-collapse: separate; - border-radius: 0.5rem; - box-shadow: 0 0 0 1px var(--c-shadow-2); - overflow: hidden; - margin-top: calc(1rem + 1 * var(--es)); - margin-bottom: calc(1rem + 1 * var(--es)); - } - .md table:not(.lntable) th:first-child, .md table:not(.lntable) td:first-child { - padding-left: 2rem; - } - .md table:not(.lntable) th:last-child, .md table:not(.lntable) td:last-child { - padding-right: 2rem; - } - .md thead, .md tbody { - font-size: 1.9375rem; - line-height: 3rem; - padding-top: 0.77440625rem; - padding-bottom: 0.22559375rem; - } - .md thead { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - .md thead > tr { - background-color: var(--c-text-medium); - color: var(--c-text-contrast); - } - .md tbody { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - .md tbody tr:nth-child(2n) { - background-color: var(--c-bg-1); - color: var(--c-text-semihigh); - } - .md tbody tr:nth-child(2n+1) { - background-color: var(--c-bg-4); - color: var(--c-text-high); - } - .md th, .md td { - padding: 1rem; - } - - /* .table-half-left { - @media screen and (min-width: $bp-3col) { - float: left; - width: calc(50% - $s-gutter); - } - } */ - .md li:has([type=checkbox]) { - padding-left: 0; - } - .md li:has([type=checkbox])::before { - content: ""; - } - .md li input[type=checkbox]:disabled { - margin: 0 2rem 0 0; - color: var(--c-text-extralow); - border-color: var(--c-text-extralow); - background-color: var(--c-text-extralow); - } - - .md { - /* > ul, > ol { - > li:last-child > p:last-child { padding-bottom: 0; } - } */ - } - .md ul h5, .md ul h6, .md ol h5, .md ol h6 { - margin: 0; - padding: 0; - } - .md > ul, .md > ol { - margin-bottom: 1rem; - } - .md > ul > li:last-child, .md > ol > li:last-child { - margin-bottom: -1rem; - } - .md ul li:before { - content: "•"; - } - .md ol { - counter-reset: ol1; - } - .md ol > li > ol { - counter-reset: ol2; - } - .md ol > li > ol > li > ol { - counter-reset: ol3; - } - .md ol > li:before { - content: counter(ol1) "."; - counter-increment: ol1; - } - .md ol > li > ol > li:before { - content: counter(ol2, lower-alpha) ")"; - counter-increment: ol2; - } - .md ol > li > ol > li > ol > li:before { - content: counter(ol3, lower-roman) "."; - counter-increment: ol3; - letter-spacing: -0.05em; - } - .md li { - position: relative; - padding-left: calc(3rem + 1 * var(--es)); - page-break-inside: avoid; - -webkit-column-break-inside: avoid; - break-inside: avoid-column; - overflow: visible; - } - .md li > p { - margin-bottom: 1rem; - overflow: visible; - } - .md li:before { - font-weight: 600; - position: absolute; - left: 0; - } - .md li li:before { - font-weight: 450; - } - .md li li li:before { - font-weight: 300; - } - .md .ol-continue { - counter-reset: none; - } - .md li:has(.emb--w-full), .md dd:has(.emb--w-full), .md li > p:has(.emb--w-full), .md dd > p:has(.emb--w-full) { - text-align: left; - } - .md li:has(.emb):after, .md li > p:has(.emb):after { - display: table; - content: ""; - clear: both; - } - - .md--footer li { - padding-left: 3rem; - } - @media screen and (min-width: 48em) { - .md--footer li { - padding-left: 2.5rem; - } - } - - .md--small li { - padding-left: 2.5rem; - } - - .md--tiny li { - padding-left: 2rem; - } - - .smallindent li { - padding-left: 3rem !important; - } - - .md .icon { - fill: var(--c-text-low); - } - .md p .icon--tiny { - position: relative; - top: 0.55rem; - height: 2rem; - width: 2rem; - padding: 0; - } - - .md--frame .icon { - fill: var(--c-frame-text-low); - } - - .md .math-block, .md .chem-block { - font-size: 1.9375rem; - line-height: 3rem; - padding-top: 0.77440625rem; - padding-bottom: calc(0.22559375rem + var(--es)); - scroll-margin-top: calc( var(--tnh) + var(--tg) + 2rem - 3rem ); - } - .md .katex { - font-size: 1.1em; - } - - .md .ta-left { - text-align: left; - } - .md .ta-right { - text-align: right; - } - .md .ta-center { - text-align: center; - } - @media screen and (min-width: 48em) { - .md .ta-left3 { - text-align: left; - } - .md .ta-right3 { - text-align: right; - } - } - @media screen and (min-width: 120em) { - .md .ta-left6 { - text-align: left; - } - .md .ta-right6 { - text-align: right; - } - } - - .md { - /* .large { - max-width: 3 * $u-col-g; - } */ - } - .md .half { - min-width: 50%; - width: 50%; - } - @media screen and (min-width: 39em) { - .md .normal { - width: 74rem; - } - } - .md .full { - max-width: 148rem; - } - @media screen and (min-width: 48em) { - .md .inline { - display: inline-block; - } - } - @media screen and (min-width: 48em) { - .md .block { - display: block; - margin-right: 37rem; - } - } - @media screen and (min-width: 79em) { - .md .block { - margin-left: 37rem; - } - } - - .box, .box-danger, .box-warn, .box-info, .box-success { - --box-shadow-color: var(--c-shadow-3); - position: relative; - z-index: 2; - margin: 1rem 0; - background-color: var(--c-bg-2); - border-radius: 0.5rem; - box-shadow: 0 0 0 1px var(--box-shadow-color); - text-align: left !important; - clear: both; - } - .box.left, .left.box-danger, .left.box-warn, .left.box-info, .left.box-success, .box.left-in, .left-in.box-danger, .left-in.box-warn, .left-in.box-info, .left-in.box-success, .box.left-in-half, .left-in-half.box-danger, .left-in-half.box-warn, .left-in-half.box-info, .left-in-half.box-success, .box.right, .right.box-danger, .right.box-warn, .right.box-info, .right.box-success, .box.right-in, .right-in.box-danger, .right-in.box-warn, .right-in.box-info, .right-in.box-success, .box.right-in-half, .right-in-half.box-danger, .right-in-half.box-warn, .right-in-half.box-info, .right-in-half.box-success { - width: 33rem; - } - .box.left, .left.box-danger, .left.box-warn, .left.box-info, .left.box-success, .box.left-in, .left-in.box-danger, .left-in.box-warn, .left-in.box-info, .left-in.box-success, .box.left-in-half, .left-in-half.box-danger, .left-in-half.box-warn, .left-in-half.box-info, .left-in-half.box-success { - margin-right: 4rem; - margin-left: 2rem; - } - .box.right, .right.box-danger, .right.box-warn, .right.box-info, .right.box-success, .box.right-in, .right-in.box-danger, .right-in.box-warn, .right-in.box-info, .right-in.box-success, .box.right-in-half, .right-in-half.box-danger, .right-in-half.box-warn, .right-in-half.box-info, .right-in-half.box-success { - margin-left: 4rem; - margin-right: 2rem; - } - - .box-danger, .box-warn, .box-info, .box-success { - padding-left: 1rem; - padding-right: 1rem; - border-left-width: 1rem; - border-left-style: solid; - border-left-color: var(--box-shadow-color); - } - - .box-danger { - color: var(--c-text-high); - background-color: var(--c-danger-box-bg); - border-left-color: var(--c-danger-bg); - --box-shadow-color: var(--c-danger-bg); - } - - .box-warn { - color: var(--c-text-high); - background-color: var(--c-warn-box-bg); - --box-shadow-color: var(--c-warn-box); - } - - .box-info { - color: var(--c-text-semihigh); - background-color: var(--c-info-box-bg); - --box-shadow-color: var(--c-info-bg); - } - - .box-success { - color: var(--c-text-semihigh); - background-color: var(--c-success-box-bg); - --box-shadow-color: var(--c-success-bg); - } - - .md > .box, .md > .box-danger, .md > .box-warn, .md > .box-info, .md > .box-success { - max-width: 70rem; - margin: 1rem 2rem 3rem; - } - - .layout-box { - position: relative; - border-radius: 1rem; - background-color: var(--c-bg-2); - z-index: -10; - } - .layout-box:after { - display: block; - position: absolute; - z-index: -9; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: ""; - padding: 0 1rem; - box-shadow: inset 0 0 0.75rem 0.25rem var(--c-page); - } - - @media screen and (min-width: 120em) { - .md--margin-doc .box, .md--margin-doc .box-danger, .md--margin-doc .box-warn, .md--margin-doc .box-info, .md--margin-doc .box-success { - margin-left: auto; - margin-right: auto; - } - } - - @media screen and (min-width: 79em) { - .md--margin-full .box, .md--margin-full .box-danger, .md--margin-full .box-warn, .md--margin-full .box-info, .md--margin-full .box-success { - margin-left: auto; - margin-right: auto; - } - } - - .container:after { - display: table; - content: ""; - clear: both; - } - - @media screen and (min-width: 39em) { - .md .left, .md .right, .md .left-in, .md .right-in, .md .left-in-half, .md .right-in-half { - position: relative; - z-index: 2; - min-width: unset; - width: 37rem; - } - } - @media screen and (min-width: 39em) { - .md .left, .md .left-in, .md .left-in-half { - float: left; - clear: left; - margin-right: 2rem !important; - } - } - @media screen and (min-width: 39em) { - .md .right, .md .right-in, .md .right-in-half { - float: right; - clear: right; - margin-left: 2rem !important; - } - } - @media screen and (min-width: 48em) { - .md .right3 { - position: relative; - z-index: 2; - width: 37rem; - padding: 0 2rem; - float: right; - clear: right; - } - } - - @media screen and (min-width: 120em) { - .md--margin-doc .highlight { - margin-left: auto; - margin-right: auto; - } - .md--margin-doc .left-in { - margin-right: 2rem; - } - .md--margin-doc .left-in-half { - margin-left: 18.5rem; - } - .md--margin-doc .left-in { - margin-left: 37rem; - } - .md--margin-doc .left-in + .highlight, .md--margin-doc .left-in + .inline { - margin-left: -36.9rem; - } - .md--margin-doc .highlight + .right-in, .md--margin-doc .highlight + .right3, .md--margin-doc .highlight + .fig--ph-right, .md--margin-doc .inline + .right-in, .md--margin-doc .inline + .right3, .md--margin-doc .inline + .fig--ph-right { - margin-left: -36.9rem; - } - } - - @media screen and (min-width: 79em) { - .md--margin-full .highlight { - margin-left: auto; - margin-right: auto; - } - .md--margin-full .left-in { - margin-right: 2rem; - } - .md--margin-full .left-in-half { - margin-left: 19.5rem; - } - .md--margin-full .left-in { - margin-left: 37rem; - } - .md--margin-full .left-in + .highlight, .md--margin-full .left-in + .inline { - margin-left: -36.9rem; - } - .md--margin-full .highlight + .right-in, .md--margin-full .highlight + .right3, .md--margin-full .highlight + .fig--ph-right, .md--margin-full .inline + .right-in, .md--margin-full .inline + .right3, .md--margin-full .inline + .fig--ph-right { - margin-left: -36.9rem; - } - } - - .md--margin-full .left-in, .md--margin-full .left-in-half, .md--margin-full .right-in, .md--margin-full .right-in-half, .md--margin-doc .left-in, .md--margin-doc .left-in-half, .md--margin-doc .right-in, .md--margin-doc .right-in-half { - margin-bottom: 0; - } - @media screen and (min-width: 48em) { - .md--margin-full .right-in, .md--margin-doc .right-in { - margin-left: 2rem; - } - .md--margin-full .right-in-half, .md--margin-doc .right-in-half { - margin-right: 19.5rem; - } - .md--margin-full .right-in, .md--margin-doc .right-in { - margin-right: 37rem; - } - } - - .page-header { - position: relative; - z-index: 2; - margin: 0 1px; - } - .page-header > hr { - border-top: 0.3rem solid var(--c-text-normal); - height: 1rem; - } - - .page-header--home { - margin-bottom: 6rem; - } - - @media screen and (min-width: 79em) { - .page-header--left .title, .page-header--left #author { - position: absolute; - left: 0; - top: 0; - width: 37rem; - } - } - - .page-list > hr { - border-bottom: 0.2rem solid var(--c-text-normal); - height: 1rem; - margin: 0 2rem 5rem 2rem; - } - - .page-footer { - flex: 0 0 auto; - padding-top: calc(2rem + 1 * var(--es)); - margin-top: auto; - } - .page-footer > hr { - border-top: 0.15rem solid var(--c-text-extralow); - height: 1rem; - margin: 0 2rem; - max-width: 70rem; - } - - @media screen and (min-width: 79em) { - .padding-full { - padding-left: 39rem; - } - } - - @media screen and (min-width: 79em) { - .padding-full-half { - padding-left: 20.5rem; - } - } - - @media screen and (min-width: 120em) { - .margin-doc { - margin-left: 37rem; - } - } - - @media screen and (min-width: 120em) { - .margin-doc-half { - margin-left: 18.5rem; - } - } - - @media screen and (min-width: 79em) { - .margin-full { - margin-left: 37rem; - } - } - - @media screen and (min-width: 79em) { - .margin-full-half { - margin-left: 18.5rem; - } - } - - .ul--row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - - .li-box { - padding-top: 2rem; - } - .li-box:last-child > hr { - display: none; - } - @media screen and (min-width: 39em) { - .li-box { - padding-top: 4rem; - } - } - - .news-separator { - height: 1rem; - box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.1); - margin: 3.5rem 1rem 0 1rem; - background: var(--ctg-news-title); - } - @media screen and (min-width: 39em) { - .news-separator { - margin: 3.5rem 0 0 0; - } - } - @media screen and (min-width: 79em) { - .news-separator { - background: var(--ctg4-news-title); - } - } - - .li-header { - position: relative; - } - - .fig, .goat { - position: relative; - z-index: 5; - padding-top: 1.75rem; - padding-bottom: 1rem; - width: 100%; - } - .fig .caption, .goat .caption { - padding-left: 2rem; - padding-right: 2rem; - } - @media screen and (min-width: 39em) { - .fig, .goat { - padding-left: 2rem; - padding-right: 2rem; - } - .fig .caption, .goat .caption { - padding-left: 0; - padding-right: 0; - } - } - - .fig--w-tiny, .fig--w-small, .fig--w-medium { - float: left; - clear: left; - padding-left: 2rem; - padding-right: 2rem; - } - .fig--w-tiny .caption, .fig--w-small .caption, .fig--w-medium .caption { - padding-left: 0; - padding-right: 0; - } - - .fig--w-small, .fig--w-medium { - width: calc(50% + 1rem); - } - @media screen and (min-width: 39em) { - .fig--w-small, .fig--w-medium { - width: 37rem; - } - } - .fig--w-small.fig--ph-right, .fig--ph-right.fig--w-medium { - float: right; - clear: right; - } - - .fig--w-tiny { - padding-left: 2rem; - padding-right: 2rem; - width: calc(33.3334% + 1rem); - } - @media screen and (min-width: 39em) { - .fig--w-tiny { - width: 18.5rem; - } - } - .fig--w-tiny.fig--ph-right { - float: right; - clear: right; - } - @media screen and (min-width: 48em) { - .fig--w-tiny.fig--ph-right { - width: 37rem; - padding-right: 18.5rem; - } - } - .fig--w-tiny .img__c-t-symbol { - padding: 1rem; - } - - @media screen and (min-width: 48em) { - .fig--w-medium.fig--ph-right { - width: 55.5rem; - } - } - - .fig--w-text, .goat, .fig--w-large, .fig--w-xlarge { - padding-bottom: 2rem; - } - @media screen and (max-width: 39em) { - .fig--w-text .img__c, .goat .img__c, .fig--w-large .img__c, .fig--w-xlarge .img__c { - border-radius: 0; - border-left: none; - border-right: none; - } - } - - @media screen and (min-width: 48em) { - .fig--w-text, .goat { - max-width: 74rem; - } - .fig--w-text .caption, .goat .caption { - position: absolute; - z-index: 10; - right: -35rem; - top: 1.25rem; - width: 33rem; - height: calc(100% - 3.75rem); - margin-left: 2rem; - text-align: left; - padding-left: 0; - padding-right: 0; - } - .fig--w-text .caption__attr, .goat .caption__attr { - position: absolute; - bottom: 0; - left: 0; - float: none; - text-align: left; - } - } - - @media screen and (min-width: 120em) { - .md--margin-doc .fig--w-tiny.fig--ph-left { - width: 37rem; - padding-left: 18.5rem; - } - .md--margin-doc .fig--w-tiny.fig--ph-left-inside { - margin-left: 37rem; - } - .md--margin-doc > .fig--w-text, .md--margin-doc > .goat { - margin-left: 37rem; - } - .md--margin-doc .fig--w-medium.fig--ph-left { - width: 55.5rem; - } - .md--margin-doc .fig--w-large { - margin-left: 18.5rem; - padding-left: 0; - padding-right: 0; - } - .md--margin-doc .fig--w-large .caption { - margin-left: 18.5rem; - } - .md--margin-doc .fig--w-large .caption__attr { - width: 18.5rem; - } - .md--margin-doc .fig--w-xlarge { - width: 148rem; - } - .md--margin-doc .fig--w-xlarge .caption { - margin-left: 37rem; - } - } - - @media screen and (min-width: 79em) { - .md--margin-full .fig--w-tiny.fig--ph-left { - width: 37rem; - padding-left: 18.5rem; - } - .md--margin-full .fig--w-tiny.fig--ph-left-inside { - margin-left: 37rem; - } - .md--margin-full > .fig--w-text, .md--margin-full > .goat { - margin-left: 37rem; - } - .md--margin-full .fig--w-medium.fig--ph-left { - width: 55.5rem; - } - .md--margin-full .fig--w-large { - margin-left: 18.5rem; - padding-left: 0; - padding-right: 0; - } - .md--margin-full .fig--w-large .caption { - margin-left: 18.5rem; - } - .md--margin-full .fig--w-large .caption__attr { - width: 18.5rem; - } - .md--margin-full .fig--w-xlarge { - width: 148rem; - } - .md--margin-full .fig--w-xlarge .caption { - margin-left: 37rem; - } - } - - @media screen and (min-width: 48em) { - .fig--w-large .caption__text, .fig--w-xlarge .caption__text { - display: inline-block; - max-width: 70rem; - padding-left: 4rem; - padding-right: 4rem; - } - .fig--w-large .caption__attr, .fig--w-xlarge .caption__attr { - width: 33rem; - } - } - - @media screen and (min-width: 79em) { - .fig--w-large { - width: 111rem; - } - } - - @media screen and (min-width: 39em) { - .fig--w-tiny.fig--ph-left, .fig--w-small.fig--ph-left, .fig--w-medium.fig--ph-left { - margin-right: 2rem; - } - .fig--w-tiny.fig--ph-right, .fig--w-small.fig--ph-right, .fig--w-medium.fig--ph-right { - margin-left: 2rem; - } - } - - @media screen and (min-width: 39em) { - .fig--ph-left { - float: left; - clear: left; - } - } - - @media screen and (min-width: 39em) { - .fig--ph-right { - float: right; - clear: right; - } - } - - .fig--featured { - float: right; - clear: both; - padding-top: 1.75rem; - } - @media screen and (min-width: 39em) { - .fig--featured { - padding-top: 1rem; - } - } - @media screen and (min-width: 48em) { - .fig--featured { - position: absolute; - z-index: 2; - top: -0.5rem; - right: 0; - float: none; - clear: none; - padding-top: 1.5rem; - margin: 0; - } - } - - .fig--portrait { - padding: 0; - height: 8rem; - width: 8rem; - } - @media screen and (min-width: 79em) { - .fig--portrait { - margin-top: 2rem; - height: 16.5rem; - width: 16.5rem; - } - } - - .fig--w-pt2 { - padding: 0.75rem; - height: 6rem; - width: 6rem; - overflow: hidden; - } - - .fig--w-pt1 { - padding: 0.5rem; - height: 4rem; - width: 4rem; - } - - .fig--portrait .img__frame, .fig--w-pt2 .img__frame, .fig--w-pt1 .img__frame { - box-shadow: 0 0 0 1px var(--c-shadow-2); - border-radius: 50%; - overflow: hidden; - } - - .fig--diagram .img__c { - border: 1px solid rgba(0, 0, 0, 0.5333333333); - box-shadow: none; - background: white; - } - - .goat { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.464465rem; - margin-bottom: -0.464465rem; - font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; - font-weight: 450; - } - - .md--footer figure { - width: 100%; - padding: 0 2rem; - } - .md--footer h2 + figure { - margin-top: 1rem; - } - - /* Background */ - .bg { - color: var(--c-chroma-fg); - background-color: var(--c-chroma-bg); - } - - /* PreWrapper */ - .chroma { - color: var(--c-chroma-fg); - background-color: var(--c-chroma-bg); - } - - /* Other */ - /* Error */ - .chroma .err { - color: var(--c-chroma-err-fg); - background-color: var(--c-chroma-err-bg); - } - - /* CodeLine */ - /* LineLink */ - .chroma .lnlinks { - outline: none; - text-decoration: none; - color: inherit; - } - - /* LineTableTD */ - .chroma .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; - } - - /* LineTable */ - .chroma .lntable { - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; - } - - /* LineHighlight */ - .chroma .hl { - background-color: var(--c-chroma-hl); - } - - /* LineNumbersTable */ - .chroma .lnt { - white-space: pre; - -webkit-user-select: none; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: var(--c-chroma-lnt); - } - - /* LineNumbers */ - .chroma .ln { - white-space: pre; - -webkit-user-select: none; - user-select: none; - margin-right: 0.2em; - padding-right: 0.4em; - color: var(--c-chroma-ln); - } - - /* Line */ - .chroma .line { - display: flex; - } - - /* Keyword */ - .chroma .k { - color: var(--c-chroma-k); - font-weight: var(--fw-chroma-k); - } - - /* KeywordConstant */ - .chroma .kc { - color: var(--c-chroma-kc); - font-weight: var(--fw-chroma-kc); - } - - /* KeywordDeclaration */ - .chroma .kd { - color: var(--c-chroma-kd); - font-weight: var(--fw-chroma-kd); - } - - /* KeywordNamespace */ - .chroma .kn { - color: var(--c-chroma-kn); - font-weight: var(--fw-chroma-kn); - } - - /* KeywordPseudo */ - .chroma .kp { - color: var(--c-chroma-kp); - font-weight: var(--fw-chroma-kp); - } - - /* KeywordReserved */ - .chroma .kr { - color: var(--c-chroma-kr); - font-weight: var(--fw-chroma-kr); - } - - /* KeywordType */ - .chroma .kt { - color: var(--c-chroma-kt); - font-weight: var(--fw-chroma-kt); - } - - /* Name */ - /* NameAttribute */ - .chroma .na { - color: var(--c-chroma-na); - } - - /* NameBuiltin */ - .chroma .nb { - color: var(--c-chroma-nb); - } - - /* NameBuiltinPseudo */ - .chroma .bp { - color: var(--c-chroma-bp); - } - - /* NameClass */ - .chroma .nc { - color: var(--c-chroma-nc); - font-weight: bold; - } - - /* NameConstant */ - .chroma .no { - color: var(--c-chroma-no); - font-weight: var(--fw-chroma-no); - } - - /* NameDecorator */ - .chroma .nd { - color: var(--c-chroma-nd); - font-weight: bold; - } - - /* NameEntity */ - .chroma .ni { - color: var(--c-chroma-ni); - } - - /* NameException */ - .chroma .ne { - color: var(--c-chroma-ne); - font-weight: bold; - } - - /* NameFunction */ - .chroma .nf { - color: var(--c-chroma-nf); - font-weight: bold; - } - - /* NameFunctionMagic */ - /* NameLabel */ - .chroma .nl { - color: var(--c-chroma-nl); - font-weight: bold; - } - - /* NameNamespace */ - .chroma .nn { - color: var(--c-chroma-nn); - } - - /* NameOther */ - /* NameProperty */ - .chroma .py { - color: var(--c-chroma-py); - } - - /* NameTag */ - .chroma .nt { - color: var(--c-chroma-nt); - } - - /* NameVariable */ - .chroma .nv { - color: var(--c-chroma-nv); - } - - /* NameVariableClass */ - .chroma .vc { - color: var(--c-chroma-vc); - } - - /* NameVariableGlobal */ - .chroma .vg { - color: var(--c-chroma-vg); - } - - /* NameVariableInstance */ - .chroma .vi { - color: var(--c-chroma-vi); - } - - /* NameVariableMagic */ - .chroma .vm { - color: var(--c-chroma-vm); - } - - /* Literal */ - .chroma .l { - color: var(--c-chroma-l); - } - - /* LiteralDate */ - .chroma .ld { - color: var(--c-chroma-ld); - } - - /* LiteralString */ - .chroma .s { - color: var(--c-chroma-s); - } - - /* LiteralStringAffix */ - .chroma .sa { - color: var(--c-chroma-sa); - } - - /* LiteralStringBacktick */ - .chroma .sb { - color: var(--c-chroma-sb); - } - - /* LiteralStringChar */ - .chroma .sc { - color: var(--c-chroma-sc); - } - - /* LiteralStringDelimiter */ - .chroma .dl { - color: var(--c-chroma-dl); - } - - /* LiteralStringDoc */ - .chroma .sd { - color: var(--c-chroma-sd); - } - - /* LiteralStringDouble */ - .chroma .s2 { - color: var(--c-chroma-s2); - } - - /* LiteralStringEscape */ - .chroma .se { - color: var(--c-chroma-se); - } - - /* LiteralStringHeredoc */ - .chroma .sh { - color: var(--c-chroma-sh); - } - - /* LiteralStringInterpol */ - .chroma .si { - color: var(--c-chroma-si); - } - - /* LiteralStringOther */ - .chroma .sx { - color: var(--c-chroma-sx); - } - - /* LiteralStringRegex */ - .chroma .sr { - color: var(--c-chroma-sr); - } - - /* LiteralStringSingle */ - .chroma .s1 { - color: var(--c-chroma-s1); - } - - /* LiteralStringSymbol */ - .chroma .ss { - color: var(--c-chroma-ss); - } - - /* LiteralNumber */ - .chroma .m { - color: var(--c-chroma-m); - } - - /* LiteralNumberBin */ - .chroma .mb { - color: var(--c-chroma-mb); - } - - /* LiteralNumberFloat */ - .chroma .mf { - color: var(--c-chroma-mf); - } - - /* LiteralNumberHex */ - .chroma .mh { - color: var(--c-chroma-mh); - } - - /* LiteralNumberInteger */ - .chroma .mi { - color: var(--c-chroma-mi); - } - - /* LiteralNumberIntegerLong */ - .chroma .il { - color: var(--c-chroma-il); - } - - /* LiteralNumberOct */ - .chroma .mo { - color: var(--c-chroma-mo); - } - - /* Operator */ - .chroma .o { - color: var(--c-chroma-o); - font-weight: bold; - } - - /* OperatorWord */ - .chroma .ow { - color: var(--c-chroma-ow); - font-weight: bold; - } - - /* Punctuation */ - /* Comment */ - .chroma .c { - color: var(--c-chroma-c); - font-style: italic; - } - - /* CommentHashbang */ - .chroma .ch { - color: var(--c-chroma-ch); - font-style: italic; - } - - /* CommentMultiline */ - .chroma .cm { - color: var(--c-chroma-cm); - font-style: italic; - } - - /* CommentSingle */ - .chroma .c1 { - color: var(--c-chroma-c1); - font-style: italic; - } - - /* CommentSpecial */ - .chroma .cs { - color: var(--c-chroma-cs); - font-weight: bold; - font-style: italic; - } - - /* CommentPreproc */ - .chroma .cp { - color: var(--c-chroma-cp); - font-weight: bold; - font-style: italic; - } - - /* CommentPreprocFile */ - .chroma .cpf { - color: var(--c-chroma-cpf); - font-weight: bold; - font-style: italic; - } - - /* Generic */ - /* GenericDeleted */ - .chroma .gd { - color: var(--c-chroma-gd-fg); - background-color: var(--c-chroma-gd-bg); - } - - /* GenericEmph */ - .chroma .ge { - font-style: italic; - } - - /* GenericError */ - .chroma .gr { - color: var(--c-chroma-gr); - } - - /* GenericHeading */ - .chroma .gh { - color: var(--c-chroma-gh); - font-weight: var(--fw-chroma-gh); - } - - /* GenericInserted */ - .chroma .gi { - color: var(--c-chroma-gi-fg); - background-color: var(--c-chroma-gi-bg); - } - - /* GenericOutput */ - .chroma .go { - color: var(--c-chroma-go); - } - - /* GenericPrompt */ - .chroma .gp { - color: var(--c-chroma-gp); - } - - /* GenericStrong */ - .chroma .gs { - font-weight: bold; - } - - /* GenericSubheading */ - .chroma .gu { - color: var(--c-chroma-gu); - } - - /* GenericTraceback */ - .chroma .gt { - color: var(--c-chroma-gt); - } - - /* GenericUnderline */ - .chroma .gl { - text-decoration: underline; - } - - /* TextWhitespace */ - .chroma .w { - color: var(--c-chroma-w); - } - - #author { - display: inline-grid; - width: 100%; - padding: 0 2rem; - padding-bottom: 3rem; - grid-template-columns: 10rem auto auto; - grid-template-rows: repeat(3, minmax(4rem, auto)); - grid-template-areas: "img title title" "img description description" ". follow contact"; - } - @media screen and (min-width: 25em) { - #author { - grid-template-columns: 10rem 50% 1fr; - grid-template-rows: auto auto; - grid-template-areas: "img title follow" "img description contact"; - } - } - @media screen and (min-width: 39em) { - #author { - width: 74rem; - } - } - @media screen and (min-width: 79em) { - #author { - width: 37rem; - grid-template-columns: 22.5rem 4rem 4rem; - grid-template-rows: auto auto auto; - grid-template-areas: "title title title" "description description description" "img follow contact"; - } - } - - #author__portrait { - grid-area: img; - } - - #author__title { - grid-area: title; - } - - .h1--author { - font-size: 2.86rem; - line-height: 3rem; - padding-top: 0.42893rem; - padding-bottom: 0.57107rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - - #author__description { - grid-area: description; - } - - #author__follow, #author__contact { - display: inline-block; - align-self: end; - justify-self: start; - margin-left: -0.3rem; - } - @media screen and (min-width: 25em) { - #author__follow, #author__contact { - justify-self: end; - align-self: center; - height: unset; - } - } - @media screen and (min-width: 79em) { - #author__follow, #author__contact { - justify-self: center; - align-self: center; - } - } - - #author__follow { - grid-area: follow; - } - - #author__contact { - grid-area: contact; - } - - .author__icon-list { - display: inline-flex; - flex-direction: row; - } - @media screen and (min-width: 79em) { - .author__icon-list { - flex-direction: column; - } - } - - .author__icon-item { - display: inline-block; - padding: 0 0.2rem; - } - @media screen and (min-width: 79em) { - .author__icon-item { - padding: 0.2rem 0; - } - } - - .published { - display: flex; - flex-direction: row; - flex-shrink: 0; - } - @media screen and (min-width: 79em) { - .published { - flex-direction: column-reverse; - } - } - - .author-list { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - - .nav__item:empty { - display: none; - } - - .nav__item--1 { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - letter-spacing: 0.04em; - word-spacing: 0.12em; - } - - .nav__item--2 { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 500; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - - .nav__item--3 { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 400; - } - - .nav__title:hover, .nav__title:focus { - color: var(--c-frame-border-active); - } - - .nav__item--dropdown { - position: relative; - } - - .nav__item--dropdown > .ctrl__menulink { - display: inline-block; - cursor: pointer; - } - - .nav__item--dropdown .dropdown { - display: none; - position: absolute; - background-color: var(--c-frame); - min-width: 160px; - z-index: 1; - padding: 0; - margin: 0; - list-style: none; - } - - .nav__item--dropdown:hover .dropdown, - .nav__item--dropdown:focus-within .dropdown { - display: block; - } - - .nav__item--dropdown .dropdown li { - color: var(--c-text-normal); - padding: 0.5rem; - text-decoration: none; - display: block; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - letter-spacing: 0.075em; - word-spacing: 0.225em; - text-transform: uppercase; - } - - .nav__item--dropdown .dropdown li:hover, - .nav__item--dropdown .dropdown li:focus { - background-color: var(--c-frame-border-active); - color: var(--c-text-low); - } - - .nav__item--dropdown .dropdown li a { - color: inherit; - text-decoration: none; - display: block; - width: 100%; - } - - .nav__item--dropdown .dropdown li a:hover, - .nav__item--dropdown .dropdown li a:focus { - background-color: transparent; - color: inherit; - } - - .nav-main__link { - letter-spacing: 0.075em; - word-spacing: 0.225em; - text-transform: uppercase; - border-bottom: 0.6rem solid var(--c-frame); - transition: border-bottom-color 250ms; - } - .nav-main__link:hover, .nav-main__link:focus { - border-bottom-color: var(--c-frame-border-active); - } - .nav-main__link.is-active, .nav-main__link.has-active { - border-bottom-color: var(--c-frame-border-active); - } - - .social a, .social .nav-main__link { - letter-spacing: 0.025em; - } - .ctrl { - min-width: 13rem; - display: flex; - flex-direction: row; - padding: 0 2rem; - align-items: flex-start; - } - @media screen and (min-width: 48em) { - .ctrl { - width: 37rem; - } - } - - .ctrl__button, .ctrl__extlink { - display: inline-block; - padding: 1rem 0.5rem 0 0.5rem; - } - .ctrl__button .icon, .ctrl__extlink .icon { - fill: currentColor; - background-color: transparent; - border-radius: 0.5rem; - } - - .ctrl__button { - line-height: 3rem; - font-size: 3rem; - background: inherit; - color: inherit; - } - .ctrl__button:not([disabled]) .icon { - fill: var(--c-frame-button); - } - .ctrl__button:not([disabled]):hover { - cursor: pointer; - } - .ctrl__button:not([disabled]):hover .icon { - fill: var(--c-frame-button-hover); - background-color: var(--c-frame-button-hover-bg); - } - .ctrl__button:disabled .icon { - fill: var(--c-frame-button-disabled); - } - - .ctrl__extlink:hover .icon { - fill: var(--c-frame-text-link-ext); - } - - .ctrl__menulink { - display: inline-block; - font-size: 1.43rem; - line-height: 1rem; - padding-top: 1.964465rem; - padding-bottom: 1.535535rem; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - margin: 0 1rem; - } - - .ctrl__title { - display: inline-block; - padding: 1rem 1rem 0 1rem; - } - - .ctrl__title--logo img { - height: 3rem; - width: auto; - } - - .ctrl__title--text span { - font-size: 1.93rem; - line-height: 3rem; - padding-top: 0.777215rem; - margin-bottom: -0.777215rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - letter-spacing: 0.04em; - word-spacing: 0.12em; - text-transform: uppercase; - } - @media screen and (min-width: 25em) { - .ctrl__title--text span { - font-size: 2.86rem; - line-height: 3rem; - padding-top: 0.42893rem; - margin-bottom: -0.42893rem; - letter-spacing: 0.03em; - word-spacing: 0.09em; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 300; - } - } - - .ctrl-left { - justify-content: flex-start; - padding-left: 1rem; - } - - .ctrl-right { - justify-content: flex-end; - padding-right: 1rem; - } - - .section-nav { - padding: calc(0.5rem + 0.5 * var(--es)) 0rem; - column-count: 2; - column-width: 37rem; - column-gap: 0; - max-width: 74rem; - clear: both; - } - .section-nav__li { - page-break-inside: avoid; - break-inside: avoid-column; - -webkit-column-break-inside: avoid; - } - .section-nav__link { - display: flex; - flex-wrap: nowrap; - align-items: start; - height: 100%; - padding: calc(1.5rem + 0.5 * var(--es)) 2rem calc(0.5rem + 0.5 * var(--es)) 2rem; - } - .section-nav__link:hover, .section-nav__link:focus, .section-nav__link:active { - background-color: transparent; - } - .section-nav__link:hover .section-nav__title, .section-nav__link:focus .section-nav__title, .section-nav__link:active .section-nav__title { - text-decoration-color: var(--c-text-normal); - } - .section-nav__title { - font-size: 1.915rem; - line-height: 2rem; - padding-top: 0.5328325rem; - margin-bottom: -0.5328325rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - color: var(--c-text-normal); - letter-spacing: 0.01em; - text-decoration: underline; - text-underline-offset: 0.075em; - text-decoration-thickness: 0.075em; - text-decoration-color: transparent; - } - .section-nav__icon { - width: 4.5rem; - flex-shrink: 0; - } - .section-nav__description { - color: var(--c-text-low); - font-size: 1.6083333333rem; - line-height: 2rem; - padding-top: 1.3976791667rem; - padding-bottom: 0.6023208333rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - .section-nav__description strong { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - } - - .section-nav--top { - padding-top: 0; - clear: none; - } - - .page-nav { - max-width: 74rem; - margin: 1rem 0; - } - - .page-nav__list { - display: flex; - flex-direction: column; - } - @media screen and (min-width: 39em) { - .page-nav__list { - flex-direction: row; - justify-content: space-between; - align-items: stretch; - } - .page-nav__list .page-nav__link--prev, .page-nav__list .page-nav__link--start { - margin: auto 0; - } - } - - .page-nav__li { - page-break-inside: avoid; - break-inside: avoid-column; - -webkit-column-break-inside: avoid; - } - @media screen and (min-width: 39em) { - .page-nav__li { - width: 50%; - align-self: stretch; - } - } - - .page-nav__link { - display: flex; - flex-wrap: nowrap; - align-items: center; - height: 100%; - padding: 2rem 1rem; - margin: 0 1rem; - } - @media screen and (min-width: 39em) { - .page-nav__link { - padding: 2rem; - margin: 0; - } - } - .page-nav__link:hover, .page-nav__link:focus, .page-nav__link:active { - background-color: transparent; - } - .page-nav__link:hover .page-nav__title, .page-nav__link:focus .page-nav__title, .page-nav__link:active .page-nav__title { - text-decoration-color: var(--c-text-normal); - } - - .page-nav__link--prev, .page-nav__link--next, .page-nav__link--start { - justify-content: space-between; - text-align: center; - } - - .page-nav__link--start { - visibility: hidden; - display: none; - } - @media screen and (min-width: 39em) { - .page-nav__link--start { - display: flex; - } - } - - .page-nav__link--prev { - flex-flow: row-reverse; - } - .page-nav__link--prev .page-nav__icon--arrow { - text-align: left; - } - @media screen and (min-width: 39em) { - .page-nav__link--prev { - text-align: right; - } - } - - .page-nav__link--next .page-nav__icon--arrow { - text-align: right; - } - @media screen and (min-width: 39em) { - .page-nav__link--next { - text-align: left; - } - } - - .page-nav__title { - display: block; - font-size: 1.915rem; - line-height: 3rem; - margin-top: -0.0171675rem; - padding-bottom: 0.0171675rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - color: var(--c-text-normal); - text-decoration: underline; - text-underline-offset: 0.075em; - text-decoration-thickness: 0.075em; - text-decoration-color: transparent; - } - - .page-nav__icon { - width: 4rem; - height: 3rem; - flex-shrink: 0; - color: var(--c-nav-link); - } - .page-nav__icon .icon--material { - height: 3rem; - width: 3rem; - } - - .page-nav__icon--arrow { - align-self: center; - font-size: 3rem; - padding: 0; - margin: 0; - } - @media screen and (min-width: 39em) { - .page-nav__icon--arrow { - flex: 10; - } - } - - .page-nav__itemcol { - display: block; - width: 4rem; - height: 3rem; - align-self: center; - } - - .page-nav__meta { - display: block; - font-size: 1.43rem; - line-height: 1.5rem; - padding-top: 0.464465rem; - padding-bottom: 0.035535rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - color: var(--c-text-low); - } - - .page-nav__meta--dir { - font-weight: 300; - } - - .page-nav__description { - font-size: 1.625rem; - line-height: 2rem; - padding-top: 1.3914375rem; - padding-bottom: 0.6085625rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 300; - } - .page-nav__description strong { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - - @media screen and (min-width: 79em) { - .card-nav--top { - margin-top: -1rem; - } - } - @media screen and (min-width: 79em) { - .card-nav--section { - margin-top: -2rem; - } - } - .card-nav--2 { - max-width: 74rem; - } - .card-nav--3 { - max-width: 111rem; - } - .card-nav--4 { - padding: calc(2rem + 2 * var(--es)) 0rem; - max-width: 100%; - } - .card-nav__list { - display: flex; - align-items: stretch; - flex-direction: row; - flex-wrap: wrap; - } - .card-nav__list--top { - margin-top: -2rem; - } - - .card { - padding: 2rem; - width: 100%; - } - .card .br-cond { - display: none; - } - - .card--half { - width: 50%; - margin-bottom: 1rem; - } - @media screen and (min-width: 39em) { - .card--half { - width: 18.5rem; - } - } - - @media screen and (min-width: 39em) { - .card--1 { - width: 37rem; - } - } - - .card--1--row { - margin-bottom: 0; - } - - /* .card--3halfs { - @media screen and (min-width: bp.$col-2) { - width: 2 * $u-col-g; - } - @media screen and (min-width: bp.$col-3) { - width: 1.5 * $u-col-g; - } - } - - .card--2 { - @media screen and (min-width: bp.$col-2) { - max-width: 2*$u-col-g; - } - @media screen and (min-width: bp.$col-3) { - max-width: 3*$u-col-g; - } - @media screen and (min-width: bp.$col-4) { - max-width: 2*$u-col-g; - margin-bottom: 4rem; - } - - } - - .card--3 { - @media screen and (min-width: bp.$col-2) { - max-width: 3*$u-col-g; - } - } */ - @media screen and (min-width: 39em) { - .card__hover { - display: block; - transition: transform 150ms ease-out; - } - .card__hover:hover, .card__hover:focus, .card__hover:active { - transform: scale(1.075); - transition: transform 150ms ease-in; - } - } - - /* .card__hover--grey { - .img__c { - img, svg { - filter: grayscale(25%) brightness(95%); - stransition: filter, transform, box-shadow; - transition-timing-function: ease-in-out; - transition-duration: t.$nav-hover; - } - } - - &:hover, &:focus, &:active { - .img__c { - img, svg { - filter: grayscale(0%) brightness(100%); - } - } - } - } */ - .card__flex { - display: flex; - flex-direction: row; - width: 100%; - height: 100%; - } - - .card__flex--1 .card__content { - flex-grow: 1; - padding: 1.5rem 0; - } - @media screen and (min-width: 39em) { - .card__flex--1 { - flex-direction: column; - justify-content: space-between; - height: 100%; - } - .card__flex--1 .card__content { - padding: 1.5rem 0; - } - } - - /* .card__flex--2 { - flex-direction: row; - - .card__content { - margin: 1.5rem 0 0 0; - } - - @media screen and (min-width: bp.$col-2) { - max-width: 2 * $u-col-g; - margin: 0 1rem; - .card__content { - margin: 2rem 0 0 -1rem; - } - } - @media screen and (min-width: bp.$col-3) { - max-width: 3 * $u-col-g; - } - @media screen and (min-width: bp.$col-4) { - max-width: 2 * $u-col-g; - } - } - - .card__flex--3 { - @media screen and (min-width: bp.$col-3) { - flex-direction: row; - } - } */ - .card__fig { - padding: 0; - } - .card__fig .img__frame { - width: 100%; - height: 100%; - overflow: hidden; - } - .card__fig .img__c--t-symbol svg { - display: block; - margin: 0 auto; - } - - .card__fig--half { - flex-shrink: 0; - width: 14.5rem; - height: 12.5rem; - } - .card__fig--half .img__frame:has(.img__c--t-symbol) { - padding: 1rem; - } - .card__fig--half .img__c--t-symbol { - width: 12.5rem; - height: 10.5rem; - } - - .card__fig--1 { - flex-shrink: 0; - width: 7.25rem; - height: 4.8333575rem; - margin-right: 1px; - } - .card__fig--1 .img__frame:has(.img__c--t-symbol) { - padding: 0.5rem; - } - .card__fig--1 .img__c--t-symbol { - width: 6.25rem; - height: 3.83333575rem; - } - @media screen and (min-width: 25em) { - .card__fig--1 { - flex-shrink: 0; - width: 14.5rem; - height: 9.666715rem; - } - .card__fig--1 .img__frame:has(.img__c--t-symbol) { - padding: 1rem; - } - .card__fig--1 .img__c--t-symbol { - width: 12.5rem; - height: 7.6666715rem; - } - } - @media screen and (min-width: 39em) { - .card__fig--1 { - width: 33rem; - height: 22.000011rem; - padding: 0; - margin-right: 0; - } - .card__fig--1 .img__frame:has(.img__c--t-symbol) { - padding: 2rem; - } - .card__fig--1 .img__c--t-symbol { - width: 29rem; - height: 18.000011rem; - } - } - - .card__title { - margin: 0 2rem; - font-size: 1.915rem; - line-height: 2rem; - padding-top: 0.7828325rem; - padding-bottom: 0.2171675rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - letter-spacing: 0.01em; - word-spacing: 0.03em; - text-decoration-color: transparent; - } - - .card__title--top { - margin-top: 1rem; - } - - .card__title--half { - display: inline-block; - margin-bottom: 0; - font-size: 1.5015rem; - line-height: 1.5rem; - padding-top: 0.18768825rem; - padding-bottom: 0.31231175rem; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - - .card__title--small .title__link { - font-size: 1.43rem; - line-height: 1.75rem; - padding-top: 0.589465rem; - padding-bottom: 0.660535rem; - letter-spacing: 0.02em; - word-spacing: 0.06em; - } - - .card__content { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - background-color: var(--c-bg-2); - box-shadow: 0 0 0 1px var(--c-shadow-3); - padding: 1rem 0; - } - - .card__footer { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - padding: 1rem 2rem 0 1.5rem; - } - .card__footer .link { - display: inline-block; - width: 9rem; - height: 3rem; - margin: 0.5rem 0; - text-align: center; - color: #fff; - fill: #fff; - border-radius: 1.5rem; - box-shadow: 0 0 0 1px var(--c-shadow-2); - } - .card__footer .link:hover, .card__footer .link:focus { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); - } - .card__footer .link--doc { - background: var(--cbg-doc-button); - } - .card__footer .link--blog { - background: var(--cbg-blog-button); - } - .card__footer .link--news { - background: var(--cbg-news-button); - } - - .sidebar-box { - margin-top: -1rem; - } - @media screen and (min-width: 79em) { - .sidebar-box { - scrollbar-gutter: stable; - scrollbar-color: var(--c-scrollbar) var(--c-bg-3); - } - .sidebar-box::-webkit-scrollbar { - width: 1rem; - height: 1rem; - } - .sidebar-box::-webkit-scrollbar-thumb { - background: var(--c-scrollbar); - } - .sidebar-box::-webkit-scrollbar-track { - background: var(--c-bg-3); - } - } - - .sidebar { - height: 100%; - width: 100%; - padding: 0.5rem 2rem 3rem 2rem; - } - @media screen and (min-width: 79em) { - .sidebar { - width: 34rem; - } - } - - .sidebar__title { - display: inline-block; - font-size: 1.905rem; - line-height: 2rem; - padding-top: 1.2865775rem; - padding-bottom: 0.7134225rem; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.04em; - } - @media screen and (min-width: 79em) { - .sidebar__title { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 1.464465rem; - padding-bottom: 0.535535rem; - } - } - - .sidebar__list--1 { - padding-bottom: calc(1rem + 1 * var(--es)); - } - .sidebar__list--1 .sidebar__text { - padding-left: 2rem; + text-align: left; } - - .sidebar__list--2 .sidebar__text, .sidebar__list--3 .sidebar__text { - padding-left: 1rem; +} + +@media screen and (min-width: 120em) { + .md--margin-doc .fig--w-tiny.fig--ph-left { + width: 37rem; + padding-left: 18.5rem; } - - .sidebar__list--2 { - margin-left: 4.5rem; + .md--margin-doc .fig--w-tiny.fig--ph-left-inside { + margin-left: 37rem; } - - .sidebar__list--3 { - margin-left: 3.5rem; + .md--margin-doc > .fig--w-text, .md--margin-doc > .goat { + margin-left: 37rem; } - - .sidebar__item { - position: relative; - border-bottom: 0.1rem solid var(--c-shadow-2); + .md--margin-doc .fig--w-medium.fig--ph-left { + width: 55.5rem; } - .sidebar__item:last-child { - border-bottom-color: transparent; + .md--margin-doc .fig--w-large { + margin-left: 18.5rem; + padding-left: 0; + padding-right: 0; } - @media screen and (min-width: 79em) { - .sidebar__item { - border-bottom-color: transparent; - } + .md--margin-doc .fig--w-large .caption { + margin-left: 18.5rem; } - - .items-have-no-children { - display: block; - column-count: 3; - column-width: 15rem; - padding-bottom: 1rem; + .md--margin-doc .fig--w-large .caption__attr { + width: 18.5rem; } - .items-have-no-children .sidebar__item { - padding-bottom: 0; - border-bottom-color: transparent; + .md--margin-doc .fig--w-xlarge { + width: 148rem; } - .items-have-no-children .sidebar__link, .items-have-no-children .sidebar__open, .items-have-no-children .sidebar__chk { - margin: 0.5rem 0 0.4rem 0; + .md--margin-doc .fig--w-xlarge .caption { + margin-left: 37rem; } - @media screen and (min-width: 79em) { - .items-have-no-children { - column-count: 1; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; - } +} + +@media screen and (min-width: 79em) { + .md--margin-full .fig--w-tiny.fig--ph-left { + width: 37rem; + padding-left: 18.5rem; } - - .sidebar__link, .sidebar__open, .sidebar__chk { - display: inline-flex; - align-items: center; - margin: 1rem 0 0.9rem 0; + .md--margin-full .fig--w-tiny.fig--ph-left-inside { + margin-left: 37rem; } - @media screen and (min-width: 79em) { - .sidebar__link, .sidebar__open, .sidebar__chk { - margin: 0.5rem 0 0.4rem 0; - } + .md--margin-full > .fig--w-text, .md--margin-full > .goat { + margin-left: 37rem; } - - .sidebar__link:hover, .sidebar__link:focus, .sidebar__link.is-active { - background-color: transparent; + .md--margin-full .fig--w-medium.fig--ph-left { + width: 55.5rem; } - .sidebar__link:hover .sidebar__text, .sidebar__link:focus .sidebar__text, .sidebar__link.is-active .sidebar__text { - --shadow: --c-shadow-3; - color: #fff; + .md--margin-full .fig--w-large { + margin-left: 18.5rem; + padding-left: 0; + padding-right: 0; } - - .sidebar__text { - align-self: stretch; - font-size: 1.43rem; - line-height: 1.5rem; - padding-top: 0.814465rem; - padding-bottom: 0.685535rem; - color: var(--c-frame-text-low); + .md--margin-full .fig--w-large .caption { + margin-left: 18.5rem; } - - .sidebar__chk, .sidebar__open { - z-index: 10; - position: absolute; - right: 0; - width: 3rem; - height: 3rem; + .md--margin-full .fig--w-large .caption__attr { + width: 18.5rem; } - - .sidebar__open { - cursor: pointer; - user-select: none; - -webkit-tap-highlight-color: transparent; + .md--margin-full .fig--w-xlarge { + width: 148rem; } - .sidebar__open > .icon { - position: static; + .md--margin-full .fig--w-xlarge .caption { + margin-left: 37rem; } - .sidebar__open > .icon:after { +} + +@media screen and (min-width: 48em) { + .fig--w-large .caption__text, .fig--w-xlarge .caption__text { display: inline-block; - height: 3rem; - width: 3rem; - background-color: var(--c-frame-text-low); - content: ""; - mask-size: cover; - -webkit-mask-size: cover; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); - } - - .sidebar__chk { - appearance: none; - } - .sidebar__chk ~ ul { - display: none; - height: 0; - } - .sidebar__chk:checked ~ ul { - display: block; - height: 100%; + max-width: 70rem; + padding-left: 4rem; + padding-right: 4rem; } - .sidebar__chk:checked ~ .sidebar__open > .icon:after { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); + .fig--w-large .caption__attr, .fig--w-xlarge .caption__attr { + width: 33rem; } - - .has-active > .sidebar__chk ~ ul { - display: block; - height: 100%; +} + +@media screen and (min-width: 79em) { + .fig--w-large { + width: 111rem; } - .has-active > .sidebar__chk ~ .sidebar__open > span:after { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); +} + +@media screen and (min-width: 39em) { + .fig--w-tiny.fig--ph-left, .fig--w-small.fig--ph-left, .fig--w-medium.fig--ph-left { + margin-right: 2rem; } - .has-active > .sidebar__chk:checked ~ ul { - display: none; - height: 0; + .fig--w-tiny.fig--ph-right, .fig--w-small.fig--ph-right, .fig--w-medium.fig--ph-right { + margin-left: 2rem; } - .has-active > .sidebar__chk:checked ~ .sidebar__open > span:after { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); +} + +@media screen and (min-width: 39em) { + .fig--ph-left { + float: left; + clear: left; } - - li:empty { - display: none; +} + +@media screen and (min-width: 39em) { + .fig--ph-right { + float: right; + clear: right; } - li:empty:before { - display: none; +} + +.fig--featured { + float: right; + clear: both; + padding-top: 1.75rem; +} +@media screen and (min-width: 39em) { + .fig--featured { + padding-top: 1rem; } - - #toc { - display: block; +} +@media screen and (min-width: 48em) { + .fig--featured { position: absolute; - top: calc(var(--tnh) + 1rem); + z-index: 2; + top: -0.5rem; right: 0; - width: 33rem; - max-height: calc(100vh - var(--tnh) - 2 * 3rem - 4rem); - box-shadow: 0 0 0 0.25rem var(--c-shadow-2); - overflow-y: auto; - overflow-x: hidden; - overscroll-behavior: none; - scrollbar-color: var(--c-scrollbar) var(--c-bg-3); - } - #toc::-webkit-scrollbar { - width: 1rem; - height: 1rem; + float: none; + clear: none; + padding-top: 1.5rem; + margin: 0; } - #toc::-webkit-scrollbar-thumb { - background: var(--c-scrollbar); +} + +.fig--portrait { + padding: 0; + height: 8rem; + width: 8rem; +} +@media screen and (min-width: 79em) { + .fig--portrait { + margin-top: 2rem; + height: 16.5rem; + width: 16.5rem; + } +} + +.fig--w-pt2 { + padding: 0.75rem; + height: 6rem; + width: 6rem; + overflow: hidden; +} + +.fig--w-pt1 { + padding: 0.5rem; + height: 4rem; + width: 4rem; +} + +.fig--portrait .img__frame, .fig--w-pt2 .img__frame, .fig--w-pt1 .img__frame { + box-shadow: 0 0 0 1px var(--c-shadow-2); + border-radius: 50%; + overflow: hidden; +} + +.fig--diagram .img__c { + border: 1px solid rgba(0, 0, 0, 0.5333333333); + box-shadow: none; + background: white; +} + +.goat { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + margin-bottom: -0.464465rem; + font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; + font-weight: 450; +} + +.md--footer figure { + width: 100%; + padding: 0 2rem; +} +.md--footer h2 + figure { + margin-top: 1rem; +} + +/* Background */ +.bg { + color: var(--c-chroma-fg); + background-color: var(--c-chroma-bg); +} + +/* PreWrapper */ +.chroma { + color: var(--c-chroma-fg); + background-color: var(--c-chroma-bg); +} + +/* Other */ +/* Error */ +.chroma .err { + color: var(--c-chroma-err-fg); + background-color: var(--c-chroma-err-bg); +} + +/* CodeLine */ +/* LineLink */ +.chroma .lnlinks { + outline: none; + text-decoration: none; + color: inherit; +} + +/* LineTableTD */ +.chroma .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; +} + +/* LineTable */ +.chroma .lntable { + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; +} + +/* LineHighlight */ +.chroma .hl { + background-color: var(--c-chroma-hl); +} + +/* LineNumbersTable */ +.chroma .lnt { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: var(--c-chroma-lnt); +} + +/* LineNumbers */ +.chroma .ln { + white-space: pre; + -webkit-user-select: none; + user-select: none; + margin-right: 0.2em; + padding-right: 0.4em; + color: var(--c-chroma-ln); +} + +/* Line */ +.chroma .line { + display: flex; +} + +/* Keyword */ +.chroma .k { + color: var(--c-chroma-k); + font-weight: var(--fw-chroma-k); +} + +/* KeywordConstant */ +.chroma .kc { + color: var(--c-chroma-kc); + font-weight: var(--fw-chroma-kc); +} + +/* KeywordDeclaration */ +.chroma .kd { + color: var(--c-chroma-kd); + font-weight: var(--fw-chroma-kd); +} + +/* KeywordNamespace */ +.chroma .kn { + color: var(--c-chroma-kn); + font-weight: var(--fw-chroma-kn); +} + +/* KeywordPseudo */ +.chroma .kp { + color: var(--c-chroma-kp); + font-weight: var(--fw-chroma-kp); +} + +/* KeywordReserved */ +.chroma .kr { + color: var(--c-chroma-kr); + font-weight: var(--fw-chroma-kr); +} + +/* KeywordType */ +.chroma .kt { + color: var(--c-chroma-kt); + font-weight: var(--fw-chroma-kt); +} + +/* Name */ +/* NameAttribute */ +.chroma .na { + color: var(--c-chroma-na); +} + +/* NameBuiltin */ +.chroma .nb { + color: var(--c-chroma-nb); +} + +/* NameBuiltinPseudo */ +.chroma .bp { + color: var(--c-chroma-bp); +} + +/* NameClass */ +.chroma .nc { + color: var(--c-chroma-nc); + font-weight: bold; +} + +/* NameConstant */ +.chroma .no { + color: var(--c-chroma-no); + font-weight: var(--fw-chroma-no); +} + +/* NameDecorator */ +.chroma .nd { + color: var(--c-chroma-nd); + font-weight: bold; +} + +/* NameEntity */ +.chroma .ni { + color: var(--c-chroma-ni); +} + +/* NameException */ +.chroma .ne { + color: var(--c-chroma-ne); + font-weight: bold; +} + +/* NameFunction */ +.chroma .nf { + color: var(--c-chroma-nf); + font-weight: bold; +} + +/* NameFunctionMagic */ +/* NameLabel */ +.chroma .nl { + color: var(--c-chroma-nl); + font-weight: bold; +} + +/* NameNamespace */ +.chroma .nn { + color: var(--c-chroma-nn); +} + +/* NameOther */ +/* NameProperty */ +.chroma .py { + color: var(--c-chroma-py); +} + +/* NameTag */ +.chroma .nt { + color: var(--c-chroma-nt); +} + +/* NameVariable */ +.chroma .nv { + color: var(--c-chroma-nv); +} + +/* NameVariableClass */ +.chroma .vc { + color: var(--c-chroma-vc); +} + +/* NameVariableGlobal */ +.chroma .vg { + color: var(--c-chroma-vg); +} + +/* NameVariableInstance */ +.chroma .vi { + color: var(--c-chroma-vi); +} + +/* NameVariableMagic */ +.chroma .vm { + color: var(--c-chroma-vm); +} + +/* Literal */ +.chroma .l { + color: var(--c-chroma-l); +} + +/* LiteralDate */ +.chroma .ld { + color: var(--c-chroma-ld); +} + +/* LiteralString */ +.chroma .s { + color: var(--c-chroma-s); +} + +/* LiteralStringAffix */ +.chroma .sa { + color: var(--c-chroma-sa); +} + +/* LiteralStringBacktick */ +.chroma .sb { + color: var(--c-chroma-sb); +} + +/* LiteralStringChar */ +.chroma .sc { + color: var(--c-chroma-sc); +} + +/* LiteralStringDelimiter */ +.chroma .dl { + color: var(--c-chroma-dl); +} + +/* LiteralStringDoc */ +.chroma .sd { + color: var(--c-chroma-sd); +} + +/* LiteralStringDouble */ +.chroma .s2 { + color: var(--c-chroma-s2); +} + +/* LiteralStringEscape */ +.chroma .se { + color: var(--c-chroma-se); +} + +/* LiteralStringHeredoc */ +.chroma .sh { + color: var(--c-chroma-sh); +} + +/* LiteralStringInterpol */ +.chroma .si { + color: var(--c-chroma-si); +} + +/* LiteralStringOther */ +.chroma .sx { + color: var(--c-chroma-sx); +} + +/* LiteralStringRegex */ +.chroma .sr { + color: var(--c-chroma-sr); +} + +/* LiteralStringSingle */ +.chroma .s1 { + color: var(--c-chroma-s1); +} + +/* LiteralStringSymbol */ +.chroma .ss { + color: var(--c-chroma-ss); +} + +/* LiteralNumber */ +.chroma .m { + color: var(--c-chroma-m); +} + +/* LiteralNumberBin */ +.chroma .mb { + color: var(--c-chroma-mb); +} + +/* LiteralNumberFloat */ +.chroma .mf { + color: var(--c-chroma-mf); +} + +/* LiteralNumberHex */ +.chroma .mh { + color: var(--c-chroma-mh); +} + +/* LiteralNumberInteger */ +.chroma .mi { + color: var(--c-chroma-mi); +} + +/* LiteralNumberIntegerLong */ +.chroma .il { + color: var(--c-chroma-il); +} + +/* LiteralNumberOct */ +.chroma .mo { + color: var(--c-chroma-mo); +} + +/* Operator */ +.chroma .o { + color: var(--c-chroma-o); + font-weight: bold; +} + +/* OperatorWord */ +.chroma .ow { + color: var(--c-chroma-ow); + font-weight: bold; +} + +/* Punctuation */ +/* Comment */ +.chroma .c { + color: var(--c-chroma-c); + font-style: italic; +} + +/* CommentHashbang */ +.chroma .ch { + color: var(--c-chroma-ch); + font-style: italic; +} + +/* CommentMultiline */ +.chroma .cm { + color: var(--c-chroma-cm); + font-style: italic; +} + +/* CommentSingle */ +.chroma .c1 { + color: var(--c-chroma-c1); + font-style: italic; +} + +/* CommentSpecial */ +.chroma .cs { + color: var(--c-chroma-cs); + font-weight: bold; + font-style: italic; +} + +/* CommentPreproc */ +.chroma .cp { + color: var(--c-chroma-cp); + font-weight: bold; + font-style: italic; +} + +/* CommentPreprocFile */ +.chroma .cpf { + color: var(--c-chroma-cpf); + font-weight: bold; + font-style: italic; +} + +/* Generic */ +/* GenericDeleted */ +.chroma .gd { + color: var(--c-chroma-gd-fg); + background-color: var(--c-chroma-gd-bg); +} + +/* GenericEmph */ +.chroma .ge { + font-style: italic; +} + +/* GenericError */ +.chroma .gr { + color: var(--c-chroma-gr); +} + +/* GenericHeading */ +.chroma .gh { + color: var(--c-chroma-gh); + font-weight: var(--fw-chroma-gh); +} + +/* GenericInserted */ +.chroma .gi { + color: var(--c-chroma-gi-fg); + background-color: var(--c-chroma-gi-bg); +} + +/* GenericOutput */ +.chroma .go { + color: var(--c-chroma-go); +} + +/* GenericPrompt */ +.chroma .gp { + color: var(--c-chroma-gp); +} + +/* GenericStrong */ +.chroma .gs { + font-weight: bold; +} + +/* GenericSubheading */ +.chroma .gu { + color: var(--c-chroma-gu); +} + +/* GenericTraceback */ +.chroma .gt { + color: var(--c-chroma-gt); +} + +/* GenericUnderline */ +.chroma .gl { + text-decoration: underline; +} + +/* TextWhitespace */ +.chroma .w { + color: var(--c-chroma-w); +} + +#author { + display: inline-grid; + width: 100%; + padding: 0 2rem; + padding-bottom: 3rem; + grid-template-columns: 10rem auto auto; + grid-template-rows: repeat(3, minmax(4rem, auto)); + grid-template-areas: "img title title" "img description description" ". follow contact"; +} +@media screen and (min-width: 25em) { + #author { + grid-template-columns: 10rem 50% 1fr; + grid-template-rows: auto auto; + grid-template-areas: "img title follow" "img description contact"; } - #toc::-webkit-scrollbar-track { - background: var(--c-bg-3); +} +@media screen and (min-width: 39em) { + #author { + width: 74rem; } - #toc.is-closed { - display: none; +} +@media screen and (min-width: 79em) { + #author { + width: 37rem; + grid-template-columns: 22.5rem 4rem 4rem; + grid-template-rows: auto auto auto; + grid-template-areas: "title title title" "description description description" "img follow contact"; + } +} + +#author__portrait { + grid-area: img; +} + +#author__title { + grid-area: title; +} + +.h1--author { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + padding-bottom: 0.57107rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} + +#author__description { + grid-area: description; +} + +#author__follow, #author__contact { + display: inline-block; + align-self: end; + justify-self: start; + margin-left: -0.3rem; +} +@media screen and (min-width: 25em) { + #author__follow, #author__contact { + justify-self: end; + align-self: center; + height: unset; } - @media screen and (min-width: 39em) { - #toc { - top: calc(var(--tnh) + var(--tg) + 1rem); - grid-area: control; - right: 2rem; - } +} +@media screen and (min-width: 79em) { + #author__follow, #author__contact { + justify-self: center; + align-self: center; } - @media screen and (min-width: 120em) { - #toc { - right: -35rem; - } - #toc.is-closed { - display: block; - } +} + +#author__follow { + grid-area: follow; +} + +#author__contact { + grid-area: contact; +} + +.author__icon-list { + display: inline-flex; + flex-direction: row; +} +@media screen and (min-width: 79em) { + .author__icon-list { + flex-direction: column; } - - .toc__box { - padding: 1rem; - background: var(--c-frame); +} + +.author__icon-item { + display: inline-block; + padding: 0 0.2rem; +} +@media screen and (min-width: 79em) { + .author__icon-item { + padding: 0.2rem 0; + } +} + +.published { + display: flex; + flex-direction: row; + flex-shrink: 0; +} +@media screen and (min-width: 79em) { + .published { + flex-direction: column-reverse; + } +} + +.author-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.nav__item:empty { + display: none; +} + +.nav__item--1 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.04em; + word-spacing: 0.12em; +} + +.nav__item--2 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 500; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} + +.nav__item--3 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 400; +} + +.nav__title:hover, .nav__title:focus { + color: var(--c-frame-border-active); +} + +.nav__item--dropdown { + position: relative; + display: flex; + align-items: center; + cursor: pointer; +} + +.nav__item--dropdown .dropdown { + display: none; + position: absolute; + background-color: var(--c-frame); + min-width: 160px; + z-index: 1; + padding: 0; + margin: 0; + list-style: none; + box-shadow: 0 0 0 1px var(--c-shadow-3); +} + +.nav__item--dropdown:hover .dropdown, +.nav__item--dropdown:focus-within .dropdown { + display: block; +} + +.nav__item--dropdown .dropdown li { + padding: 0.5rem; +} + +.nav__item--dropdown .dropdown li a { + color: var(--c-text-normal); + text-decoration: none; + display: block; + padding: 0.5rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.075em; + word-spacing: 0.225em; + text-transform: uppercase; +} + +.nav__item--dropdown .dropdown li a:hover, +.nav__item--dropdown .dropdown li a:focus { + background-color: var(--c-frame-border-active); + color: var(--c-text-low); +} + + +.nav-main__link { + letter-spacing: 0.075em; + word-spacing: 0.225em; + text-transform: uppercase; + border-bottom: 0.6rem solid var(--c-frame); + transition: border-bottom-color 250ms; +} +.nav-main__link:hover, .nav-main__link:focus { + border-bottom-color: var(--c-frame-border-active); +} +.nav-main__link.is-active, .nav-main__link.has-active { + border-bottom-color: var(--c-frame-border-active); +} + +.social a, .social .nav-main__link { + letter-spacing: 0.025em; +} +.ctrl { + min-width: 13rem; + display: flex; + flex-direction: row; + padding: 0 2rem; + align-items: flex-start; +} +@media screen and (min-width: 48em) { + .ctrl { + width: 37rem; + } +} + +.ctrl__button, .ctrl__extlink { + display: inline-block; + padding: 1rem 0.5rem 0 0.5rem; +} +.ctrl__button .icon, .ctrl__extlink .icon { + fill: currentColor; + background-color: transparent; + border-radius: 0.5rem; +} + +.ctrl__button { + line-height: 3rem; + font-size: 3rem; + background: inherit; + color: inherit; +} +.ctrl__button:not([disabled]) .icon { + fill: var(--c-frame-button); +} +.ctrl__button:not([disabled]):hover { + cursor: pointer; +} +.ctrl__button:not([disabled]):hover .icon { + fill: var(--c-frame-button-hover); + background-color: var(--c-frame-button-hover-bg); +} +.ctrl__button:disabled .icon { + fill: var(--c-frame-button-disabled); +} + +.ctrl__extlink:hover .icon { + fill: var(--c-frame-text-link-ext); +} + +.ctrl__menulink { + display: inline-block; + font-size: 1.43rem; + line-height: 1rem; + padding-top: 1.964465rem; + padding-bottom: 1.535535rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + margin: 0 1rem; +} + +.ctrl__title { + display: inline-block; + padding: 1rem 1rem 0 1rem; +} + +.ctrl__title--logo img { + height: 3rem; + width: auto; +} + +.ctrl__title--text span { + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + margin-bottom: -0.777215rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + letter-spacing: 0.04em; + word-spacing: 0.12em; + text-transform: uppercase; +} +@media screen and (min-width: 25em) { + .ctrl__title--text span { + font-size: 2.86rem; + line-height: 3rem; + padding-top: 0.42893rem; + margin-bottom: -0.42893rem; + letter-spacing: 0.03em; + word-spacing: 0.09em; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; } - - .toc__list { - font-size: 1.684375rem; - line-height: 2rem; - padding-top: 0.3692015625rem; - padding-bottom: 0.6307984375rem; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 500; - letter-spacing: 0.01em; - word-spacing: 0.03em; - color: var(--c-frame-text-medium); - } - .toc__list .br-cond { - display: none; +} + +.ctrl-left { + justify-content: flex-start; + padding-left: 1rem; +} + +.ctrl-right { + justify-content: flex-end; + padding-right: 1rem; +} + +.section-nav { + padding: calc(0.5rem + 0.5 * var(--es)) 0rem; + column-count: 2; + column-width: 37rem; + column-gap: 0; + max-width: 74rem; + clear: both; +} +.section-nav__li { + page-break-inside: avoid; + break-inside: avoid-column; + -webkit-column-break-inside: avoid; +} +.section-nav__link { + display: flex; + flex-wrap: nowrap; + align-items: start; + height: 100%; + padding: calc(1.5rem + 0.5 * var(--es)) 2rem calc(0.5rem + 0.5 * var(--es)) 2rem; +} +.section-nav__link:hover, .section-nav__link:focus, .section-nav__link:active { + background-color: transparent; +} +.section-nav__link:hover .section-nav__title, .section-nav__link:focus .section-nav__title, .section-nav__link:active .section-nav__title { + text-decoration-color: var(--c-text-normal); +} +.section-nav__title { + font-size: 1.915rem; + line-height: 2rem; + padding-top: 0.5328325rem; + margin-bottom: -0.5328325rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-normal); + letter-spacing: 0.01em; + text-decoration: underline; + text-underline-offset: 0.075em; + text-decoration-thickness: 0.075em; + text-decoration-color: transparent; +} +.section-nav__icon { + width: 4.5rem; + flex-shrink: 0; +} +.section-nav__description { + color: var(--c-text-low); + font-size: 1.6083333333rem; + line-height: 2rem; + padding-top: 1.3976791667rem; + padding-bottom: 0.6023208333rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} +.section-nav__description strong { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} + +.section-nav--top { + padding-top: 0; + clear: none; +} + +.page-nav { + max-width: 74rem; + margin: 1rem 0; +} + +.page-nav__list { + display: flex; + flex-direction: column; +} +@media screen and (min-width: 39em) { + .page-nav__list { + flex-direction: row; + justify-content: space-between; + align-items: stretch; } - .toc__list a { - display: block; - padding: 0.5rem 0 0.5rem 1.5rem; - border-left: 0.5rem solid #555; + .page-nav__list .page-nav__link--prev, .page-nav__list .page-nav__link--start { + margin: auto 0; + } +} + +.page-nav__li { + page-break-inside: avoid; + break-inside: avoid-column; + -webkit-column-break-inside: avoid; +} +@media screen and (min-width: 39em) { + .page-nav__li { + width: 50%; + align-self: stretch; } - .toc__list a .text { - background-color: transparent; +} + +.page-nav__link { + display: flex; + flex-wrap: nowrap; + align-items: center; + height: 100%; + padding: 2rem 1rem; + margin: 0 1rem; +} +@media screen and (min-width: 39em) { + .page-nav__link { + padding: 2rem; + margin: 0; } - .toc__list a:hover, .toc__list a:focus { - color: #fff; - border-color: var(--c-frame-border-active); +} +.page-nav__link:hover, .page-nav__link:focus, .page-nav__link:active { + background-color: transparent; +} +.page-nav__link:hover .page-nav__title, .page-nav__link:focus .page-nav__title, .page-nav__link:active .page-nav__title { + text-decoration-color: var(--c-text-normal); +} + +.page-nav__link--prev, .page-nav__link--next, .page-nav__link--start { + justify-content: space-between; + text-align: center; +} + +.page-nav__link--start { + visibility: hidden; + display: none; +} +@media screen and (min-width: 39em) { + .page-nav__link--start { + display: flex; } - .toc__list a:hover .icon-font, .toc__list a:focus .icon-font { - color: var(--c-frame-border-active); +} + +.page-nav__link--prev { + flex-flow: row-reverse; +} +.page-nav__link--prev .page-nav__icon--arrow { + text-align: left; +} +@media screen and (min-width: 39em) { + .page-nav__link--prev { + text-align: right; } - .toc__list a:hover path, .toc__list a:focus path { - fill: var(--c-frame-border-active); +} + +.page-nav__link--next .page-nav__icon--arrow { + text-align: right; +} +@media screen and (min-width: 39em) { + .page-nav__link--next { + text-align: left; } - .toc__list li li a { - padding-left: 3rem; +} + +.page-nav__title { + display: block; + font-size: 1.915rem; + line-height: 3rem; + margin-top: -0.0171675rem; + padding-bottom: 0.0171675rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + color: var(--c-text-normal); + text-decoration: underline; + text-underline-offset: 0.075em; + text-decoration-thickness: 0.075em; + text-decoration-color: transparent; +} + +.page-nav__icon { + width: 4rem; + height: 3rem; + flex-shrink: 0; + color: var(--c-nav-link); +} +.page-nav__icon .icon--material { + height: 3rem; + width: 3rem; +} + +.page-nav__icon--arrow { + align-self: center; + font-size: 3rem; + padding: 0; + margin: 0; +} +@media screen and (min-width: 39em) { + .page-nav__icon--arrow { + flex: 10; + } +} + +.page-nav__itemcol { + display: block; + width: 4rem; + height: 3rem; + align-self: center; +} + +.page-nav__meta { + display: block; + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.464465rem; + padding-bottom: 0.035535rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; + color: var(--c-text-low); +} + +.page-nav__meta--dir { + font-weight: 300; +} + +.page-nav__description { + font-size: 1.625rem; + line-height: 2rem; + padding-top: 1.3914375rem; + padding-bottom: 0.6085625rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; +} +.page-nav__description strong { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} + +@media screen and (min-width: 79em) { + .card-nav--top { + margin-top: -1rem; } - .toc__list li li li a { - padding-left: 4.5rem; +} +@media screen and (min-width: 79em) { + .card-nav--section { + margin-top: -2rem; } - @media screen and (min-width: 79em) { - .toc__list { - font-size: 1.43rem; - line-height: 2rem; - padding-top: 0.464465rem; - margin-bottom: -0.464465rem; +} +.card-nav--2 { + max-width: 74rem; +} +.card-nav--3 { + max-width: 111rem; +} +.card-nav--4 { + padding: calc(2rem + 2 * var(--es)) 0rem; + max-width: 100%; +} +.card-nav__list { + display: flex; + align-items: stretch; + flex-direction: row; + flex-wrap: wrap; +} +.card-nav__list--top { + margin-top: -2rem; +} + +.card { + padding: 2rem; + width: 100%; +} +.card .br-cond { + display: none; +} + +.card--half { + width: 50%; + margin-bottom: 1rem; +} +@media screen and (min-width: 39em) { + .card--half { + width: 18.5rem; + } +} + +@media screen and (min-width: 39em) { + .card--1 { + width: 37rem; + } +} + +.card--1--row { + margin-bottom: 0; +} + +/* .card--3halfs { + @media screen and (min-width: bp.$col-2) { + width: 2 * $u-col-g; + } + @media screen and (min-width: bp.$col-3) { + width: 1.5 * $u-col-g; + } +} + +.card--2 { + @media screen and (min-width: bp.$col-2) { + max-width: 2*$u-col-g; + } + @media screen and (min-width: bp.$col-3) { + max-width: 3*$u-col-g; + } + @media screen and (min-width: bp.$col-4) { + max-width: 2*$u-col-g; + margin-bottom: 4rem; + } + +} + +.card--3 { + @media screen and (min-width: bp.$col-2) { + max-width: 3*$u-col-g; + } +} */ +@media screen and (min-width: 39em) { + .card__hover { + display: block; + transition: transform 150ms ease-out; + } + .card__hover:hover, .card__hover:focus, .card__hover:active { + transform: scale(1.075); + transition: transform 150ms ease-in; + } +} + +/* .card__hover--grey { + .img__c { + img, svg { + filter: grayscale(25%) brightness(95%); + stransition: filter, transform, box-shadow; + transition-timing-function: ease-in-out; + transition-duration: t.$nav-hover; + } } - } - - .toc__title a { - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 700; - letter-spacing: 0.05em; - word-spacing: 0.15em; - text-transform: uppercase; - color: #fff; - } - - @media screen and (min-width: 79em) { - .taxo--left { - position: absolute; - top: 37rem; - left: 0; - z-index: 5; - margin-top: 1rem; - padding-top: 0; - width: 37rem; + + &:hover, &:focus, &:active { + .img__c { + img, svg { + filter: grayscale(0%) brightness(100%); + } + } } - } - - .taxo__list { - display: flex; +} */ +.card__flex { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; +} + +.card__flex--1 .card__content { + flex-grow: 1; + padding: 1.5rem 0; +} +@media screen and (min-width: 39em) { + .card__flex--1 { flex-direction: column; + justify-content: space-between; + height: 100%; } - @media screen and (min-width: 39em) { - .taxo__list { - flex-direction: row; - flex-wrap: wrap; - } - } - - .taxo__item { - padding: 1rem 1.5rem; + .card__flex--1 .card__content { + padding: 1.5rem 0; } - @media screen and (min-width: 39em) { - .taxo__item { - width: 37rem; +} + +/* .card__flex--2 { + flex-direction: row; + + .card__content { + margin: 1.5rem 0 0 0; + } + + @media screen and (min-width: bp.$col-2) { + max-width: 2 * $u-col-g; + margin: 0 1rem; + .card__content { + margin: 2rem 0 0 -1rem; + } } - } - - .taxo-title { - color: var(--c-nav-link-hover); - } - - .taxo-shape--category { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - } - .taxo-shape--tag { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; - } - .taxo-shape--series { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - font-style: italic; - } - - .pagefind-ui-box { - max-width: 74rem; - } - @media screen and (min-width: 79em) { - .pagefind-ui-box { - margin-left: 37rem; + @media screen and (min-width: bp.$col-3) { + max-width: 3 * $u-col-g; } + @media screen and (min-width: bp.$col-4) { + max-width: 2 * $u-col-g; + } +} + +.card__flex--3 { + @media screen and (min-width: bp.$col-3) { + flex-direction: row; + } +} */ +.card__fig { + padding: 0; +} +.card__fig .img__frame { + width: 100%; + height: 100%; + overflow: hidden; +} +.card__fig .img__c--t-symbol svg { + display: block; + margin: 0 auto; +} + +.card__fig--half { + flex-shrink: 0; + width: 14.5rem; + height: 12.5rem; +} +.card__fig--half .img__frame:has(.img__c--t-symbol) { + padding: 1rem; +} +.card__fig--half .img__c--t-symbol { + width: 12.5rem; + height: 10.5rem; +} + +.card__fig--1 { + flex-shrink: 0; + width: 7.25rem; + height: 4.8333575rem; + margin-right: 1px; +} +.card__fig--1 .img__frame:has(.img__c--t-symbol) { + padding: 0.5rem; +} +.card__fig--1 .img__c--t-symbol { + width: 6.25rem; + height: 3.83333575rem; +} +@media screen and (min-width: 25em) { + .card__fig--1 { + flex-shrink: 0; + width: 14.5rem; + height: 9.666715rem; } - - .pagefind-ui { - margin: 2rem; - font-size: 1.93rem; - line-height: 3rem; - padding-top: 0.777215rem; - padding-bottom: 0.222785rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 450; + .card__fig--1 .img__frame:has(.img__c--t-symbol) { + padding: 1rem; } - .pagefind-ui__form { - position: relative; + .card__fig--1 .img__c--t-symbol { + width: 12.5rem; + height: 7.6666715rem; } - .pagefind-ui__search-input { - padding-left: 2rem; - font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; - font-weight: 500; - font-size: inherit; - background-color: var(--c-bg-3); - border: 1px solid var(--c-shadow-3); - height: 5rem; - width: 100%; +} +@media screen and (min-width: 39em) { + .card__fig--1 { + width: 33rem; + height: 22.000011rem; + padding: 0; + margin-right: 0; } - .pagefind-ui__search-clear { - position: absolute; - z-index: 10; - top: 1rem; - right: 0; - width: 7rem; - background: none; + .card__fig--1 .img__frame:has(.img__c--t-symbol) { + padding: 2rem; } - .pagefind-ui__message { - padding: calc(1rem + 1 * var(--es)) 0rem; - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; + .card__fig--1 .img__c--t-symbol { + width: 29rem; + height: 18.000011rem; + } +} + +.card__title { + margin: 0 2rem; + font-size: 1.915rem; + line-height: 2rem; + padding-top: 0.7828325rem; + padding-bottom: 0.2171675rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + letter-spacing: 0.01em; + word-spacing: 0.03em; + text-decoration-color: transparent; +} + +.card__title--top { + margin-top: 1rem; +} + +.card__title--half { + display: inline-block; + margin-bottom: 0; + font-size: 1.5015rem; + line-height: 1.5rem; + padding-top: 0.18768825rem; + padding-bottom: 0.31231175rem; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} + +.card__title--small .title__link { + font-size: 1.43rem; + line-height: 1.75rem; + padding-top: 0.589465rem; + padding-bottom: 0.660535rem; + letter-spacing: 0.02em; + word-spacing: 0.06em; +} + +.card__content { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + background-color: var(--c-bg-2); + box-shadow: 0 0 0 1px var(--c-shadow-3); + padding: 1rem 0; +} + +.card__footer { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + padding: 1rem 2rem 0 1.5rem; +} +.card__footer .link { + display: inline-block; + width: 9rem; + height: 3rem; + margin: 0.5rem 0; + text-align: center; + color: #fff; + fill: #fff; + border-radius: 1.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); +} +.card__footer .link:hover, .card__footer .link:focus { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); +} +.card__footer .link--doc { + background: var(--cbg-doc-button); +} +.card__footer .link--blog { + background: var(--cbg-blog-button); +} +.card__footer .link--news { + background: var(--cbg-news-button); +} + +.sidebar-box { + margin-top: -1rem; +} +@media screen and (min-width: 79em) { + .sidebar-box { + scrollbar-gutter: stable; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); } - .pagefind-ui__result { - display: inline-flex; - flex-direction: row; - padding: calc(0.9rem + 1 * var(--es)) 0 calc(1rem + 1 * var(--es)) 0; - border-top: 0.1rem solid var(--c-shadow-3); + .sidebar-box::-webkit-scrollbar { + width: 1rem; + height: 1rem; } - .pagefind-ui__result-thumb { - display: block; - flex-shrink: 0; - align-self: auto; - margin: 1rem 2rem 0 0; + .sidebar-box::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); } - @media screen and (min-width: 39em) { - .pagefind-ui__result-thumb { - margin: 1rem 4rem 0 0; - } + .sidebar-box::-webkit-scrollbar-track { + background: var(--c-bg-3); } - .pagefind-ui__result-image { - display: block; - width: 7.25rem; - border-radius: 0.5rem; - box-shadow: 0 0 0 1px var(--c-shadow-2); - height: 4.833575rem; - object-fit: cover; - } - @media screen and (min-width: 39em) { - .pagefind-ui__result-image { - width: 14.5rem; - height: 9.66715rem; - } +} + +.sidebar { + height: 100%; + width: 100%; + padding: 0.5rem 2rem 3rem 2rem; +} +@media screen and (min-width: 79em) { + .sidebar { + width: 34rem; + } +} + +.sidebar__title { + display: inline-block; + font-size: 1.905rem; + line-height: 2rem; + padding-top: 1.2865775rem; + padding-bottom: 0.7134225rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; +} +@media screen and (min-width: 79em) { + .sidebar__title { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 1.464465rem; + padding-bottom: 0.535535rem; } - .pagefind-ui__result-title { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; +} + +.sidebar__list--1 { + padding-bottom: calc(1rem + 1 * var(--es)); +} +.sidebar__list--1 .sidebar__text { + padding-left: 2rem; +} + +.sidebar__list--2 .sidebar__text, .sidebar__list--3 .sidebar__text { + padding-left: 1rem; +} + +.sidebar__list--2 { + margin-left: 4.5rem; +} + +.sidebar__list--3 { + margin-left: 3.5rem; +} + +.sidebar__item { + position: relative; + border-bottom: 0.1rem solid var(--c-shadow-2); +} +.sidebar__item:last-child { + border-bottom-color: transparent; +} +@media screen and (min-width: 79em) { + .sidebar__item { + border-bottom-color: transparent; } - .pagefind-ui__result-excerpt { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 300; +} + +.items-have-no-children { + display: block; + column-count: 3; + column-width: 15rem; + padding-bottom: 1rem; +} +.items-have-no-children .sidebar__item { + padding-bottom: 0; + border-bottom-color: transparent; +} +.items-have-no-children .sidebar__link, .items-have-no-children .sidebar__open, .items-have-no-children .sidebar__chk { + margin: 0.5rem 0 0.4rem 0; +} +@media screen and (min-width: 79em) { + .items-have-no-children { + column-count: 1; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; } - .pagefind-ui__button { - font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; - font-weight: 600; - font-size: inherit; - border: 1px solid var(--c-shadow-3); - border-radius: 0.5rem; - height: 5rem; - width: 100%; +} + +.sidebar__link, .sidebar__open, .sidebar__chk { + display: inline-flex; + align-items: center; + margin: 1rem 0 0.9rem 0; +} +@media screen and (min-width: 79em) { + .sidebar__link, .sidebar__open, .sidebar__chk { + margin: 0.5rem 0 0.4rem 0; } - - .clear:before, - .clear:after { - content: " "; /* 1 */ - display: table; /* 2 */ +} + +.sidebar__link:hover, .sidebar__link:focus, .sidebar__link.is-active { + background-color: transparent; +} +.sidebar__link:hover .sidebar__text, .sidebar__link:focus .sidebar__text, .sidebar__link.is-active .sidebar__text { + --shadow: --c-shadow-3; + color: #fff; +} + +.sidebar__text { + align-self: stretch; + font-size: 1.43rem; + line-height: 1.5rem; + padding-top: 0.814465rem; + padding-bottom: 0.685535rem; + color: var(--c-frame-text-low); +} + +.sidebar__chk, .sidebar__open { + z-index: 10; + position: absolute; + right: 0; + width: 3rem; + height: 3rem; +} + +.sidebar__open { + cursor: pointer; + user-select: none; + -webkit-tap-highlight-color: transparent; +} +.sidebar__open > .icon { + position: static; +} +.sidebar__open > .icon:after { + display: inline-block; + height: 3rem; + width: 3rem; + background-color: var(--c-frame-text-low); + content: ""; + mask-size: cover; + -webkit-mask-size: cover; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); +} + +.sidebar__chk { + appearance: none; +} +.sidebar__chk ~ ul { + display: none; + height: 0; +} +.sidebar__chk:checked ~ ul { + display: block; + height: 100%; +} +.sidebar__chk:checked ~ .sidebar__open > .icon:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); +} + +.has-active > .sidebar__chk ~ ul { + display: block; + height: 100%; +} +.has-active > .sidebar__chk ~ .sidebar__open > span:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.208 10.542V9.458h9.584v1.084Z'/%3E%3C/svg%3E"); +} +.has-active > .sidebar__chk:checked ~ ul { + display: none; + height: 0; +} +.has-active > .sidebar__chk:checked ~ .sidebar__open > span:after { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.458 14.792v-4.25h-4.25V9.458h4.25v-4.25h1.084v4.25h4.25v1.084h-4.25v4.25Z'/%3E%3C/svg%3E"); +} + +li:empty { + display: none; +} +li:empty:before { + display: none; +} + +#toc { + display: block; + position: absolute; + top: calc(var(--tnh) + 1rem); + right: 0; + width: 33rem; + max-height: calc(100vh - var(--tnh) - 2 * 3rem - 4rem); + box-shadow: 0 0 0 0.25rem var(--c-shadow-2); + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: none; + scrollbar-color: var(--c-scrollbar) var(--c-bg-3); +} +#toc::-webkit-scrollbar { + width: 1rem; + height: 1rem; +} +#toc::-webkit-scrollbar-thumb { + background: var(--c-scrollbar); +} +#toc::-webkit-scrollbar-track { + background: var(--c-bg-3); +} +#toc.is-closed { + display: none; +} +@media screen and (min-width: 39em) { + #toc { + top: calc(var(--tnh) + var(--tg) + 1rem); + grid-area: control; + right: 2rem; } - - .clear:after { - clear: both; +} +@media screen and (min-width: 120em) { + #toc { + right: -35rem; } - - .font-italic { - font-style: italic; + #toc.is-closed { + display: block; } - - .font-normal { - font-style: normal; +} + +.toc__box { + padding: 1rem; + background: var(--c-frame); +} + +.toc__list { + font-size: 1.684375rem; + line-height: 2rem; + padding-top: 0.3692015625rem; + padding-bottom: 0.6307984375rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 500; + letter-spacing: 0.01em; + word-spacing: 0.03em; + color: var(--c-frame-text-medium); +} +.toc__list .br-cond { + display: none; +} +.toc__list a { + display: block; + padding: 0.5rem 0 0.5rem 1.5rem; + border-left: 0.5rem solid #555; +} +.toc__list a .text { + background-color: transparent; +} +.toc__list a:hover, .toc__list a:focus { + color: #fff; + border-color: var(--c-frame-border-active); +} +.toc__list a:hover .icon-font, .toc__list a:focus .icon-font { + color: var(--c-frame-border-active); +} +.toc__list a:hover path, .toc__list a:focus path { + fill: var(--c-frame-border-active); +} +.toc__list li li a { + padding-left: 3rem; +} +.toc__list li li li a { + padding-left: 4.5rem; +} +@media screen and (min-width: 79em) { + .toc__list { + font-size: 1.43rem; + line-height: 2rem; + padding-top: 0.464465rem; + margin-bottom: -0.464465rem; } - - .sr-only { +} + +.toc__title a { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 700; + letter-spacing: 0.05em; + word-spacing: 0.15em; + text-transform: uppercase; + color: #fff; +} + +@media screen and (min-width: 79em) { + .taxo--left { position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; + top: 37rem; + left: 0; + z-index: 5; + margin-top: 1rem; + padding-top: 0; + width: 37rem; + } +} + +.taxo__list { + display: flex; + flex-direction: column; +} +@media screen and (min-width: 39em) { + .taxo__list { + flex-direction: row; + flex-wrap: wrap; } - - .hide { +} + +.taxo__item { + padding: 1rem 1.5rem; +} +@media screen and (min-width: 39em) { + .taxo__item { + width: 37rem; + } +} + +.taxo-title { + color: var(--c-nav-link-hover); +} + +.taxo-shape--category { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} +.taxo-shape--tag { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} +.taxo-shape--series { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + font-style: italic; +} + +.pagefind-ui-box { + max-width: 74rem; +} +@media screen and (min-width: 79em) { + .pagefind-ui-box { + margin-left: 37rem; + } +} + +.pagefind-ui { + margin: 2rem; + font-size: 1.93rem; + line-height: 3rem; + padding-top: 0.777215rem; + padding-bottom: 0.222785rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 450; +} +.pagefind-ui__form { + position: relative; +} +.pagefind-ui__search-input { + padding-left: 2rem; + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + font-weight: 500; + font-size: inherit; + background-color: var(--c-bg-3); + border: 1px solid var(--c-shadow-3); + height: 5rem; + width: 100%; +} +.pagefind-ui__search-clear { + position: absolute; + z-index: 10; + top: 1rem; + right: 0; + width: 7rem; + background: none; +} +.pagefind-ui__message { + padding: calc(1rem + 1 * var(--es)) 0rem; + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} +.pagefind-ui__result { + display: inline-flex; + flex-direction: row; + padding: calc(0.9rem + 1 * var(--es)) 0 calc(1rem + 1 * var(--es)) 0; + border-top: 0.1rem solid var(--c-shadow-3); +} +.pagefind-ui__result-thumb { + display: block; + flex-shrink: 0; + align-self: auto; + margin: 1rem 2rem 0 0; +} +@media screen and (min-width: 39em) { + .pagefind-ui__result-thumb { + margin: 1rem 4rem 0 0; + } +} +.pagefind-ui__result-image { + display: block; + width: 7.25rem; + border-radius: 0.5rem; + box-shadow: 0 0 0 1px var(--c-shadow-2); + height: 4.833575rem; + object-fit: cover; +} +@media screen and (min-width: 39em) { + .pagefind-ui__result-image { + width: 14.5rem; + height: 9.66715rem; + } +} +.pagefind-ui__result-title { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; +} +.pagefind-ui__result-excerpt { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 300; +} +.pagefind-ui__button { + font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; + font-weight: 600; + font-size: inherit; + border: 1px solid var(--c-shadow-3); + border-radius: 0.5rem; + height: 5rem; + width: 100%; +} + +.clear:before, +.clear:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clear:after { + clear: both; +} + +.font-italic { + font-style: italic; +} + +.font-normal { + font-style: normal; +} + +.sr-only { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.hide { + display: none !important; +} + +@media screen and (max-width: 39em) { + .hide-mobile { display: none !important; } - - @media screen and (max-width: 39em) { - .hide-mobile { - display: none !important; - } - } - - @media screen and (min-width: 39em) { - .hide2 { - display: none !important; - } - } - - @media screen and (max-width: 39em) { - .show2 { - display: none !important; - } - } - - @media screen and (min-width: 48em) { - .hide3 { - display: none !important; - } - } - - @media screen and (max-width: 48em) { - .show3 { - display: none !important; - } - } - - @media screen and (min-width: 79em) { - .hide4 { - display: none !important; - } - } - - @media screen and (max-width: 79em) { - .show4 { - display: none !important; - } - } - - @media screen and (min-width: 120em) { - .hide6 { - display: none !important; - } - } - - @media screen and (max-width: 120em) { - .show6 { - display: none !important; - } - } - - .mt05 { - margin-top: 0.5rem; - } - - .mt1 { - margin-top: 1rem; +} + +@media screen and (min-width: 39em) { + .hide2 { + display: none !important; } - - .mt2 { - margin-top: 2rem; +} + +@media screen and (max-width: 39em) { + .show2 { + display: none !important; } - - .mt3 { - margin-top: 3rem; +} + +@media screen and (min-width: 48em) { + .hide3 { + display: none !important; } - - .mt-05 { - margin-top: -0.5rem; +} + +@media screen and (max-width: 48em) { + .show3 { + display: none !important; } - - .mt-1 { - margin-top: -1rem; +} + +@media screen and (min-width: 79em) { + .hide4 { + display: none !important; } - - .mb05 { - margin-bottom: 0.5rem !important; +} + +@media screen and (max-width: 79em) { + .show4 { + display: none !important; } - - .mb1 { - margin-bottom: 1rem !important; +} + +@media screen and (min-width: 120em) { + .hide6 { + display: none !important; } - - .mb2 { - margin-bottom: 2rem !important; +} + +@media screen and (max-width: 120em) { + .show6 { + display: none !important; } - - .mb3 { - margin-bottom: 3rem !important; - } \ No newline at end of file +} + +.mt05 { + margin-top: 0.5rem; +} + +.mt1 { + margin-top: 1rem; +} + +.mt2 { + margin-top: 2rem; +} + +.mt3 { + margin-top: 3rem; +} + +.mt-05 { + margin-top: -0.5rem; +} + +.mt-1 { + margin-top: -1rem; +} + +.mb05 { + margin-bottom: 0.5rem !important; +} + +.mb1 { + margin-bottom: 1rem !important; +} + +.mb2 { + margin-bottom: 2rem !important; +} + +.mb3 { + margin-bottom: 3rem !important; +} \ No newline at end of file From 8383bc95d8fcafefadaffcf8217c26f22f5959b2 Mon Sep 17 00:00:00 2001 From: Kariton <67470612+Kariton@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:09:10 +0200 Subject: [PATCH 05/11] multilang support; source 'pagefind-ui.js' from '.Site.BaseURL' --- layouts/search/single.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/search/single.html b/layouts/search/single.html index 5591097ae..c1da188be 100644 --- a/layouts/search/single.html +++ b/layouts/search/single.html @@ -16,7 +16,7 @@ {{ end }} - +
    {{ $jsTemplate := resources.Get "js/pagefind_instantiate.js" }} {{ $js := $jsTemplate | resources.ExecuteAsTemplate "js/pagefind_instance.js" . | minify | fingerprint }} From 502e95b60bf4cb6213140703fa08cc1e7dca1557 Mon Sep 17 00:00:00 2001 From: Kariton <67470612+Kariton@users.noreply.github.com> Date: Mon, 15 Jul 2024 05:38:03 +0200 Subject: [PATCH 06/11] add 'DisableLanguageSwitchingButton' --- layouts/partials/nav/masthead/language-selector.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/nav/masthead/language-selector.html b/layouts/partials/nav/masthead/language-selector.html index 7a791668d..aa005bf6b 100644 --- a/layouts/partials/nav/masthead/language-selector.html +++ b/layouts/partials/nav/masthead/language-selector.html @@ -1,4 +1,4 @@ -{{ if .Site.IsMultiLingual }} +{{- if and .Site.IsMultiLingual (not .Site.Params.DisableLanguageSwitchingButton)}}