diff options
Diffstat (limited to 'docs/src/templates/assets/stylesheets/main/components')
26 files changed, 0 insertions, 4602 deletions
diff --git a/docs/src/templates/assets/stylesheets/main/components/_author.scss b/docs/src/templates/assets/stylesheets/main/components/_author.scss deleted file mode 100644 index 111baf40..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_author.scss +++ /dev/null @@ -1,86 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Scoped in typesetted content to match specificity of regular content -.md-typeset { - - // Author, i.e., GitHub user - .md-author { - position: relative; - display: block; - flex-shrink: 0; - width: px2rem(32px); - height: px2rem(32px); - overflow: hidden; - transition: - color 125ms, - transform 125ms; - - // Author image - img { - display: block; - border-radius: 100%; - } - - // More authors - &--more { - font-size: px2rem(12px); - font-weight: 700; - line-height: px2rem(32px); - color: var(--md-default-fg-color--lighter); - text-align: center; - background: var(--md-default-fg-color--lightest); - } - - // Enlarge image - &--long { - width: px2rem(48px); - height: px2rem(48px); - } - } - - // Author link - a.md-author { - transform: scale(1); - - // Author image - img { - filter: grayscale(100%) opacity(75%); - transition: filter 125ms; - } - - // Author on focus/hover - &:is(:focus, :hover) { - z-index: 1; - transform: scale(1.1); - - // Author image - img { - filter: grayscale(0%); - } - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_banner.scss b/docs/src/templates/assets/stylesheets/main/components/_banner.scss deleted file mode 100644 index 8fe08c0f..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_banner.scss +++ /dev/null @@ -1,68 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Banner for announcements and warnings -.md-banner { - overflow: auto; - color: var(--md-footer-fg-color); - background-color: var(--md-footer-bg-color); - - // [print]: Hide banner - @media print { - display: none; - } - - // Banner with warning - &--warning { - color: var(--md-warning-fg-color); - background-color: var(--md-warning-bg-color); - } - - // Banner wrapper - &__inner { - padding: 0 px2rem(16px); - margin: px2rem(12px) auto; - font-size: px2rem(14px); - } - - // Banner button - &__button { - float: inline-end; - color: inherit; - cursor: pointer; - transition: opacity 250ms; - - // [no-js]: Hide button - .no-js & { - display: none; - } - - // Button on hover - &:hover { - opacity: 0.7; - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_base.scss b/docs/src/templates/assets/stylesheets/main/components/_base.scss deleted file mode 100644 index 33f834ed..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_base.scss +++ /dev/null @@ -1,182 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules: base grid and containers -// ---------------------------------------------------------------------------- - -// Stretch container to viewport and set base `font-size` -html { - height: 100%; - overflow-x: hidden; - // Hack: normally, we would set the base `font-size` to `62.5%`, so we can - // base all calculations on `10px`, but Chromium and Chrome define a minimal - // `font-size` of `12px` if the system language is set to Chinese. For this - // reason we just double the `font-size` and set it to `20px`. - // - // See https://github.com/squidfunk/mkdocs-material/issues/911 - font-size: 125%; - - // [screen medium +]: Set base `font-size` to `11px` - @include break-from-device(screen medium) { - font-size: 137.5%; - } - - // [screen large +]: Set base `font-size` to `12px` - @include break-from-device(screen large) { - font-size: 150%; - } -} - -// Stretch body to container - flexbox is used, so the footer will always be -// aligned to the bottom of the viewport -body { - position: relative; - display: flex; - flex-direction: column; - width: 100%; - min-height: 100%; - // Hack: reset `font-size` to `10px`, so the spacing for all inline elements - // is correct again. Otherwise the spacing would be based on `20px`. - font-size: px2rem(10px); - background-color: var(--md-default-bg-color); - - // [print]: Omit flexbox layout due to a Firefox bug (https://mzl.la/39DgR3m) - @media print { - display: block; - } - - // Body in locked state - &[data-md-scrolllock] { - - // [tablet portrait -]: Omit scroll bubbling - @include break-to-device(tablet portrait) { - position: fixed; - } - } -} - -// ---------------------------------------------------------------------------- - -// Grid container - this class is applied to wrapper elements within the -// header, content area and footer, and makes sure that their width is limited -// to `1220px`, and they are rendered centered if the screen is larger. -.md-grid { - max-width: px2rem(1220px); - margin-inline: auto; -} - -// Main container -.md-container { - display: flex; - flex-direction: column; - flex-grow: 1; - - // [print]: Omit flexbox layout due to a Firefox bug (https://mzl.la/39DgR3m) - @media print { - display: block; - } -} - -// Main area - stretch to remaining space of container -.md-main { - flex-grow: 1; - - // Main area wrapper - &__inner { - display: flex; - height: 100%; - margin-top: px2rem(24px + 6px); - } -} - -// Add ellipsis in case of overflowing text -.md-ellipsis { - overflow: hidden; - text-overflow: ellipsis; -} - -// ---------------------------------------------------------------------------- -// Rules: navigational elements -// ---------------------------------------------------------------------------- - -// Toggle - this class is applied to checkbox elements, which are used to -// implement the CSS-only drawer and navigation, as well as the search -.md-toggle { - display: none; -} - -// Option - this class is applied to radio elements, which are used to -// implement the color palette toggle -.md-option { - position: absolute; - width: 0; - height: 0; - opacity: 0; - - // Option label for checked radio button - &:checked + label:not([hidden]) { - display: block; - } - - // Show outline for keyboard devices - &.focus-visible + label { - outline-style: auto; - outline-color: var(--md-accent-fg-color); - } -} - -// Skip link -.md-skip { - position: fixed; - // Hack: if we don't set the negative `z-index`, the skip link will force the - // creation of new layers when code blocks are near the header on scrolling - z-index: -1; - padding: px2rem(6px) px2rem(10px); - margin: px2rem(10px); - font-size: px2rem(12.8px); - color: var(--md-default-bg-color); - background-color: var(--md-default-fg-color); - border-radius: px2rem(2px); - outline-color: var(--md-accent-fg-color); - opacity: 0; - transform: translateY(px2rem(8px)); - - // Show skip link on focus - &:focus { - z-index: 10; - opacity: 1; - transition: - transform 250ms cubic-bezier(0.4, 0, 0.2, 1), - opacity 175ms 75ms; - transform: translateY(0); - } -} - -// ---------------------------------------------------------------------------- -// Rules: print styles -// ---------------------------------------------------------------------------- - -// Add margins to page -@page { - margin: 25mm; -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_clipboard.scss b/docs/src/templates/assets/stylesheets/main/components/_clipboard.scss deleted file mode 100644 index c07c9c67..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_clipboard.scss +++ /dev/null @@ -1,102 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Clipboard button variables -:root { - --md-clipboard-icon: svg-load("material/content-copy.svg"); -} - -// ---------------------------------------------------------------------------- - -// Clipboard button -.md-clipboard { - position: absolute; - top: px2em(8px); - right: px2em(8px); - z-index: 1; - width: px2em(24px); - height: px2em(24px); - color: var(--md-default-fg-color--lightest); - cursor: pointer; - border-radius: px2rem(2px); - outline-color: var(--md-accent-fg-color); - outline-offset: px2rem(2px); - transition: color 250ms; - - // [print]: Hide button - @media print { - display: none; - } - - // Hide outline for pointer devices - &:not(.focus-visible) { - outline: none; - -webkit-tap-highlight-color: transparent; - } - - // Darken color on code block hover - :hover > & { - color: var(--md-default-fg-color--light); - } - - // Button on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-fg-color); - } - - // Button icon - the width and height are defined in `em`, so the size is - // automatically adjusted for nested code blocks (e.g. in admonitions) - &::after { - display: block; - width: px2em(18px); - height: px2em(18px); - margin: 0 auto; - content: ""; - background-color: currentcolor; - mask-image: var(--md-clipboard-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - - // Inline clipboard button - &--inline { - cursor: pointer; - - // Code block - code { - transition: - color 250ms, - background-color 250ms; - } - - // Code block on focus/hover - &:is(:focus, :hover) code { - color: var(--md-accent-fg-color); - background-color: var(--md-accent-fg-color--transparent); - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_consent.scss b/docs/src/templates/assets/stylesheets/main/components/_consent.scss deleted file mode 100644 index 5502460c..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_consent.scss +++ /dev/null @@ -1,127 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Keyframes -// ---------------------------------------------------------------------------- - -// Show consent -@keyframes consent { - 0% { - opacity: 0; - transform: translateY(100%); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -// Show consent overlay -@keyframes overlay { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Consent -.md-consent { - - // Consent overlay - &__overlay { - position: fixed; - top: 0; - z-index: 5; - width: 100%; - height: 100%; - background-color: hsla(0, 0%, 0%, 0.54); - opacity: 1; - backdrop-filter: blur(px2rem(2px)); - animation: overlay 250ms both; - } - - // Consent wrapper - &__inner { - position: fixed; - bottom: 0; - z-index: 5; - width: 100%; - max-height: 100%; - padding: 0; - overflow: auto; - background-color: var(--md-default-bg-color); - border: 0; - border-radius: px2rem(2px); - box-shadow: - 0 0 px2rem(4px) rgba(0, 0, 0, 0.1), - 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2); - animation: consent 500ms cubic-bezier(0.1, 0.7, 0.1, 1) both; - } - - // Consent form - &__form { - padding: px2rem(16px); - } - - // Consent settings - &__settings { - display: none; - margin: 1em 0; - - // Show settings - input:checked + & { - display: block; - } - } - - // Consent controls - &__controls { - margin-bottom: px2rem(16px); - - // Consent control button - .md-typeset & .md-button { - display: inline; - - // [tablet +]: Align buttons horizontally - @include break-to-device(mobile) { - display: block; - width: 100%; - margin-top: px2rem(8px); - text-align: center; - } - } - } - - // Ensure users realize that labels are clickaböe - label { - cursor: pointer; - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_content.scss b/docs/src/templates/assets/stylesheets/main/components/_content.scss deleted file mode 100644 index 7c945749..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_content.scss +++ /dev/null @@ -1,97 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Content area -.md-content { - flex-grow: 1; - // Hack: we must use `min-width: 0`, so the content area is capped by the - // dimensions of its parent. Otherwise, long code blocks might lead to a - // wider content area which will overflow. See https://bit.ly/3bP3f8k - min-width: 0; - - // Content wrapper - &__inner { - padding-top: px2rem(12px); - margin: 0 px2rem(16px) px2rem(24px); - - // [screen +]: Adjust spacing between content area and sidebars - @include break-from-device(screen) { - - // Sidebar with navigation is visible - .md-sidebar--primary:not([hidden]) ~ .md-content > & { - margin-inline-start: px2rem(24px); - } - - // Sidebar with table of contents is visible - .md-sidebar--secondary:not([hidden]) ~ .md-content > & { - margin-inline-end: px2rem(24px); - } - } - - // Hack: add pseudo element for spacing, as the overflow of the content - // container may not be hidden due to an imminent offset error on targets - &::before { - display: block; - height: px2rem(8px); - content: ""; - } - - // Adjust spacing on last child - > :last-child { - margin-bottom: 0; - } - } - - // Button inside of the content area - these buttons are meant for actions on - // a document-level, i.e. linking to related source code files, printing etc. - &__button { - float: inline-end; - padding: 0; - margin: px2rem(8px) 0; - margin-inline-start: px2rem(8px); - - // [print]: Hide buttons - @media print { - display: none; - } - - // Adjust default link color for icons - .md-typeset & { - color: var(--md-default-fg-color--lighter); - } - - // Align with body copy located next to icon - svg { - display: inline; - vertical-align: top; - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: scaleX(-1); - } - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_dialog.scss b/docs/src/templates/assets/stylesheets/main/components/_dialog.scss deleted file mode 100644 index 16782ede..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_dialog.scss +++ /dev/null @@ -1,65 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Dialog -.md-dialog { - position: fixed; - bottom: px2rem(16px); - z-index: 4; - min-width: px2rem(222px); - padding: px2rem(8px) px2rem(12px); - pointer-events: none; - background-color: var(--md-default-fg-color); - border-radius: px2rem(2px); - box-shadow: var(--md-shadow-z3); - opacity: 0; - transition: - transform 0ms 400ms, - opacity 400ms; - transform: translateY(100%); - inset-inline-end: px2rem(16px); - - // [print]: Hide dialog - @media print { - display: none; - } - - // Active dialog - &--active { - pointer-events: initial; - opacity: 1; - transition: - transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1), - opacity 400ms; - transform: translateY(0); - } - - // Dialog wrapper - &__inner { - font-size: px2rem(14px); - color: var(--md-default-bg-color); - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_feedback.scss b/docs/src/templates/assets/stylesheets/main/components/_feedback.scss deleted file mode 100644 index bbcd00e9..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_feedback.scss +++ /dev/null @@ -1,110 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Was this page helpful? -.md-feedback { - margin: 2em 0 1em; - text-align: center; - - // Feedback fieldset - fieldset { - padding: 0; - margin: 0; - border: none; - } - - // Feedback title - &__title { - margin: 1em auto; - font-weight: 700; - } - - // Feedback wrapper - &__inner { - position: relative; - } - - // Feedback list - &__list { - position: relative; - display: flex; - flex-wrap: wrap; - align-content: baseline; - justify-content: center; - - // Feedback icon on hover - &:hover .md-icon:not(:disabled) { - color: var(--md-default-fg-color--lighter); - } - - // Adjust height after submission - :disabled & { - min-height: px2rem(36px); - } - } - - // Feedback icon - &__icon { - flex-shrink: 0; - margin: 0 px2rem(2px); - color: var(--md-default-fg-color--light); - cursor: pointer; - transition: color 125ms; - - // Feedback icon on hover - &:not(:disabled).md-icon:hover { - color: var(--md-accent-fg-color); - } - - // Feedback icon after submit - &:disabled { - color: var(--md-default-fg-color--lightest); - pointer-events: none; - } - } - - // Feedback note - &__note { - position: relative; - opacity: 0; - transition: - transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 150ms; - transform: translateY(px2rem(8px)); - - // Feedback note value - > * { - max-width: px2rem(320px); - margin: 0 auto; - } - - // Show after submission - :disabled & { - opacity: 1; - transform: translateY(0); - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_footer.scss b/docs/src/templates/assets/stylesheets/main/components/_footer.scss deleted file mode 100644 index 9fabc05b..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_footer.scss +++ /dev/null @@ -1,201 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Footer -.md-footer { - color: var(--md-footer-fg-color); - background-color: var(--md-footer-bg-color); - - // [print]: Hide footer - @media print { - display: none; - } - - // Footer wrapper - &__inner { - justify-content: space-between; - padding: px2rem(4px); - overflow: auto; - - // Footer is visible - &:not([hidden]) { - display: flex; - } - } - - // Footer link to previous and next page - &__link { - display: flex; - // Hack: some browsers induce ellipsis on flex children that are set to - // `overflow: hidden` and `text-overflow: ellipsis`. Enforcing growth by - // a tiny factor seems to get rid of the ellipsis and renders the text as - // it should - see https://bit.ly/2ZUCXQ8 - flex-grow: 0.01; - align-items: end; - max-width: 100%; - margin-block: px2rem(20px) px2rem(8px); - overflow: hidden; - outline-color: var(--md-accent-fg-color); - transition: opacity 250ms; - - // Footer link on focus/hover - &:is(:focus, :hover) { - opacity: 0.7; - } - - // Adjust for right-to-left languages - [dir="rtl"] & svg { - transform: scaleX(-1); - } - - // [mobile -]: Adjust width to 25/75 and hide title - @include break-to-device(mobile) { - - // Footer link to previous page - &--prev { - flex-shrink: 0; - - // Hide footer title - .md-footer__title { - display: none; - } - } - } - - // Footer link to next page - &--next { - margin-inline-start: auto; - text-align: right; - - // Adjust for right-to-left languages - [dir="rtl"] & { - text-align: left; - } - } - } - - // Footer title - &__title { - flex-grow: 1; - max-width: calc(100% - #{px2rem(48px)}); - padding: 0 px2rem(20px); - margin-bottom: px2rem(14px); - font-size: px2rem(18px); - white-space: nowrap; - } - - // Footer link button - &__button { - padding: px2rem(8px); - margin: px2rem(4px); - } - - // Footer link direction (i.e. prev and next) - &__direction { - font-size: px2rem(12.8px); - opacity: 0.7; - } -} - -// Footer metadata -.md-footer-meta { - background-color: var(--md-footer-bg-color--dark); - - // Footer metadata wrapper - &__inner { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding: px2rem(4px); - } - - // Lighten color for non-hovered text links - html &.md-typeset a { - color: var(--md-footer-fg-color--light); - - // Text link on focus/hover - &:is(:focus, :hover) { - color: var(--md-footer-fg-color); - } - } -} - -// ---------------------------------------------------------------------------- - -// Copyright and theme information -.md-copyright { - width: 100%; - padding: px2rem(8px) 0; - margin: auto px2rem(12px); - font-size: px2rem(12.8px); - color: var(--md-footer-fg-color--lighter); - - // [tablet portrait +]: Show copyright and social links in one line - @include break-from-device(tablet portrait) { - width: auto; - } - - // Footer copyright highlight - this is the upper part of the copyright and - // theme information, which will include a darker color than the theme link - &__highlight { - color: var(--md-footer-fg-color--light); - } -} - -// ---------------------------------------------------------------------------- - -// Social links -.md-social { - display: inline-flex; - gap: px2rem(4px); - padding: px2rem(4px) 0 px2rem(12px); - margin: 0 px2rem(8px); - - // [tablet portrait +]: Show copyright and social links in one line - @include break-from-device(tablet portrait) { - padding: px2rem(12px) 0; - } - - // Footer social link - &__link { - display: inline-block; - width: px2rem(32px); - height: px2rem(32px); - text-align: center; - - // Adjust line-height to match height for correct alignment - &::before { - line-height: 1.9; - } - - // Fill icon with current color - svg { - max-height: px2rem(16px); - vertical-align: -25%; - fill: currentcolor; - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_form.scss b/docs/src/templates/assets/stylesheets/main/components/_form.scss deleted file mode 100644 index 49b59e42..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_form.scss +++ /dev/null @@ -1,83 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Scoped in typesetted content to match specificity of regular content -.md-typeset { - - // Form button - .md-button { - display: inline-block; - padding: px2em(10px) px2em(32px); - font-weight: 700; - color: var(--md-primary-fg-color); - cursor: pointer; - border: px2rem(2px) solid currentcolor; - border-radius: px2rem(2px); - transition: - color 125ms, - background-color 125ms, - border-color 125ms; - - // Primary button - &--primary { - color: var(--md-primary-bg-color); - background-color: var(--md-primary-fg-color); - border-color: var(--md-primary-fg-color); - } - - // Button on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-bg-color); - background-color: var(--md-accent-fg-color); - border-color: var(--md-accent-fg-color); - } - } - - // Form input - .md-input { - height: px2rem(36px); - padding: 0 px2rem(12px); - font-size: px2rem(16px); - border-bottom: px2rem(2px) solid var(--md-default-fg-color--lighter); - border-start-start-radius: px2rem(2px); - border-start-end-radius: px2rem(2px); - box-shadow: var(--md-shadow-z1); - transition: - border 250ms, - box-shadow 250ms; - - // Input on focus/hover - &:is(:focus, :hover) { - border-bottom-color: var(--md-accent-fg-color); - box-shadow: var(--md-shadow-z2); - } - - // Stretch to full width - &--stretch { - width: 100%; - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_header.scss b/docs/src/templates/assets/stylesheets/main/components/_header.scss deleted file mode 100644 index e51f3f99..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_header.scss +++ /dev/null @@ -1,270 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Header - by default, the header will be sticky and stay always on top of the -// viewport. If this behavior is not desired, just set `position: static`. -.md-header { - position: sticky; - inset-inline: 0; - top: 0; - z-index: 4; - display: block; - color: var(--md-primary-bg-color); - background-color: var(--md-primary-fg-color); - // Hack: reduce jitter by adding a transparent box shadow of the same size - // so the size of the layer doesn't change during animation - box-shadow: - 0 0 px2rem(4px) rgba(0, 0, 0, 0), - 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0); - - // [print]: Hide header - @media print { - display: none; - } - - // Header is hidden - &[hidden] { - transition: - transform 250ms cubic-bezier(0.8, 0, 0.6, 1), - box-shadow 250ms; - transform: translateY(-100%); - } - - // Header in shadow state, i.e. shadow is visible - &--shadow { - box-shadow: - 0 0 px2rem(4px) rgba(0, 0, 0, 0.1), - 0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2); - transition: - transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), - box-shadow 250ms; - } - - // Header wrapper - &__inner { - display: flex; - align-items: center; - padding: 0 px2rem(4px); - } - - // Header button - &__button { - position: relative; - z-index: 1; - padding: px2rem(8px); - margin: px2rem(4px); - color: currentcolor; - vertical-align: middle; - cursor: pointer; - outline-color: var(--md-accent-fg-color); - transition: opacity 250ms; - - // Button on hover - &:hover { - opacity: 0.7; - } - - // Header button is visible - &:not([hidden]) { - display: inline-block; - } - - // Hide outline for pointer devices - &:not(.focus-visible) { - outline: none; - -webkit-tap-highlight-color: transparent; - } - - // Button with logo, pointing to `config.site_url` - &.md-logo { - padding: px2rem(8px); - margin: px2rem(4px); - - // [tablet -]: Hide button - @include break-to-device(tablet) { - display: none; - } - - // Image or icon - :is(img, svg) { - display: block; - width: auto; - height: px2rem(24px); - fill: currentcolor; - } - } - - // Button for search - &[for="__search"] { - - // [tablet landscape +]: Hide button - @include break-from-device(tablet landscape) { - display: none; - } - - // [no-js]: Hide button - .no-js & { - display: none; - } - - // Adjust for right-to-left languages - [dir="rtl"] & svg { - transform: scaleX(-1); - } - } - - // Button for drawer - &[for="__drawer"] { - - // [screen +]: Hide button - @include break-from-device(screen) { - display: none; - } - } - } - - // Header topic - &__topic { - position: absolute; - display: flex; - max-width: 100%; - white-space: nowrap; - transition: - transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 150ms; - - // Second header topic - title of the current page - & + & { - z-index: -1; - pointer-events: none; - opacity: 0; - transition: - transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1), - opacity 150ms; - transform: translateX(px2rem(25px)); - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: translateX(px2rem(-25px)); - } - } - - // Adjust font weight of site title - &:first-child { - font-weight: 700; - } - } - - // Header title - &__title { - flex-grow: 1; - height: px2rem(48px); - margin-inline-start: px2rem(20px); - margin-inline-end: px2rem(8px); - font-size: px2rem(18px); - line-height: px2rem(48px); - - // Header title in active state, i.e. page title is visible - &--active .md-header__topic { - z-index: -1; - pointer-events: none; - opacity: 0; - transition: - transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1), - opacity 150ms; - transform: translateX(px2rem(-25px)); - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: translateX(px2rem(25px)); - } - - // Second header topic - title of the current page - + .md-header__topic { - z-index: 0; - pointer-events: initial; - opacity: 1; - transition: - transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 150ms; - transform: translateX(0); - } - } - - // Add ellipsis in case of overflowing text - > .md-header__ellipsis { - position: relative; - width: 100%; - height: 100%; - } - } - - // Header option - &__option { - display: flex; - flex-shrink: 0; - max-width: 100%; - white-space: nowrap; - transition: - max-width 0ms 250ms, - opacity 250ms 250ms; - - // Hide toggle when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - max-width: 0; - opacity: 0; - transition: - max-width 0ms, - opacity 0ms; - } - - // Hack: Firefox 117 introduces a bug where the browser scrolls the page by - // a small amount to the top every time the header button is focused. After - // investigating, we're confident that it seems to be caused by the input - // field being too close to the border - see https://t.ly/APO8l - > input { - bottom: 0; - } - } - - // Repository information container - &__source { - display: none; - - // [tablet landscape +]: Show repository information - @include break-from-device(tablet landscape) { - display: block; - width: px2rem(234px); - max-width: px2rem(234px); - margin-inline-start: px2rem(20px); - } - - // [screen +]: Adjust spacing of search bar - @include break-from-device(screen) { - margin-inline-start: px2rem(28px); - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_meta.scss b/docs/src/templates/assets/stylesheets/main/components/_meta.scss deleted file mode 100644 index aaeae8df..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_meta.scss +++ /dev/null @@ -1,67 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Metadata -.md-meta { - font-size: px2rem(14px); - line-height: 1.3; - color: var(--md-default-fg-color--light); - - // Metadata list - &__list { - display: inline-flex; - flex-wrap: wrap; - padding: 0; - margin: 0; - list-style: none; - } - - // Metadata item separator - &__item:not(:last-child)::after { - margin-inline: px2rem(4px); - content: "·"; - } - - // Metadata link - &__link { - color: var(--md-typeset-a-color); - - // Metadata link on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-fg-color); - } - } -} - -// Draft -.md-draft { - display: inline-block; - padding-inline: px2em(8px, 14px); - font-weight: 700; - color: hsla(255, 100%, 100%); - background-color: $clr-red-a400; - border-radius: px2em(2px); -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_nav.scss b/docs/src/templates/assets/stylesheets/main/components/_nav.scss deleted file mode 100644 index 673918af..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_nav.scss +++ /dev/null @@ -1,761 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Navigation variables -:root { - --md-nav-icon--prev: svg-load("material/arrow-left.svg"); - --md-nav-icon--next: svg-load("material/chevron-right.svg"); - --md-toc-icon: svg-load("material/table-of-contents.svg"); -} - -// ---------------------------------------------------------------------------- - -// Navigation -.md-nav { - font-size: px2rem(14px); - line-height: 1.3; - - // Navigation title - &__title { - display: block; - padding: 0 px2rem(12px); - overflow: hidden; - font-weight: 700; - color: var(--md-default-fg-color--light); - text-overflow: ellipsis; - - // Navigaton button - .md-nav__button { - display: none; - - // Stretch images based on height, as it's the smaller dimension - img { - width: auto; - height: 100%; - } - - // Button with logo, pointing to `config.site_url` - &.md-logo { - - // Image or icon - :is(img, svg) { - display: block; - width: auto; - max-width: 100%; - height: px2rem(48px); - object-fit: contain; - fill: currentcolor; - } - } - } - } - - // Navigation list - &__list { - padding: 0; - margin: 0; - list-style: none; - } - - // Navigation link - &__link { - display: flex; - gap: px2rem(8px); - align-items: flex-start; - margin-top: 0.625em; - transition: color 125ms; - scroll-snap-align: start; - - // Navigation link that was passed - &--passed { - color: var(--md-default-fg-color--light); - } - - // Active link - .md-nav__item &--active { - - // Also enable color transitions on inline code blocks - &, - code { - color: var(--md-typeset-a-color); - } - } - - // Navigation link title - .md-ellipsis { - // Hack: Safari exhibits a bug where the text will sometimes disappear - // and the element will become unclickable. Setting `position: relative` - // seems to fix the issue - see https://bit.ly/3HljM1T - position: relative; - } - - // Always align navigation icons to the end - .md-icon:last-child { - margin-inline-start: auto; - } - - // Navigation link icon - svg { - flex-shrink: 0; - height: 1.3em; - fill: currentcolor; - } - - // Navigation link on focus/hover - &:is([href], [for]):is(:focus, :hover) { - color: var(--md-accent-fg-color); - cursor: pointer; - } - - // Show outline for keyboard devices - &.focus-visible { - outline-color: var(--md-accent-fg-color); - outline-offset: px2rem(4px); - } - - // Navigation link for table of contents - .md-nav--primary &[for="__toc"] { - display: none; - - // Table of contents icon - .md-icon::after { - display: block; - width: 100%; - height: 100%; - mask-image: var(--md-toc-icon); - background-color: currentcolor; - } - - // Hide table of contents - ~ .md-nav { - display: none; - } - } - } - - // Navigation container (for section index pages) - &__container > .md-nav__link { - margin-top: 0; - - // Stretch first child - &:first-child { - flex-grow: 1; - // Hack: if a very long word is used, it can push the arrow out of sight. - // Setting this property contains the text - see https://t.ly/E02vp - min-width: 0; - } - } - - // Navigation icon - &__icon { - flex-shrink: 0; - } - - // Repository information container - &__source { - display: none; - } - - // [tablet -]: Layered navigation - @include break-to-device(tablet) { - - // Primary and nested navigation - &--primary, - &--primary & { - position: absolute; - inset-inline: 0; - top: 0; - z-index: 1; - display: flex; - flex-direction: column; - height: 100%; - background-color: var(--md-default-bg-color); - } - - // Primary navigation - &--primary { - - // Navigation title and item - :is(.md-nav__title, .md-nav__item) { - font-size: px2rem(16px); - line-height: 1.5; - } - - // Navigation title - .md-nav__title { - position: relative; - height: px2rem(112px); - padding: px2rem(60px) px2rem(16px) px2rem(4px); - line-height: px2rem(48px); - color: var(--md-default-fg-color--light); - white-space: nowrap; - cursor: pointer; - background-color: var(--md-default-fg-color--lightest); - - // Navigation icon - .md-nav__icon { - position: absolute; - top: px2rem(8px); - inset-inline-start: px2rem(8px); - display: block; - width: px2rem(24px); - height: px2rem(24px); - margin: px2rem(4px); - - // Navigation icon in link to previous level - &::after { - display: block; - width: 100%; - height: 100%; - content: ""; - background-color: currentcolor; - mask-image: var(--md-nav-icon--prev); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - } - - // Navigation list - ~ .md-nav__list { - overflow-y: auto; - touch-action: pan-y; - background-color: var(--md-default-bg-color); - box-shadow: - 0 px2rem(1px) 0 var(--md-default-fg-color--lightest) inset; - scroll-snap-type: y mandatory; - - // Omit border on first child - > :first-child { - border-top: 0; - } - } - - // Top-level navigation title - &[for="__drawer"] { - font-weight: 700; - color: var(--md-primary-bg-color); - background-color: var(--md-primary-fg-color); - } - - // Button with logo, pointing to `config.site_url` - .md-logo { - position: absolute; - inset-inline: px2rem(4px); - top: px2rem(4px); - display: block; - padding: px2rem(8px); - margin: px2rem(4px); - } - } - - // Navigation list - .md-nav__list { - flex: 1; - } - - // Navigation item - .md-nav__item { - border-top: px2rem(1px) solid var(--md-default-fg-color--lightest); - - // Navigation link in active navigation - &--active > .md-nav__link { - color: var(--md-typeset-a-color); - - // Navigation link on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-fg-color); - } - } - } - - // Navigation link - .md-nav__link { - padding: px2rem(12px) px2rem(16px); - margin-top: 0; - - // Navigation link icon - svg { - margin-top: 0.1em; - } - - // Adjust spacing on nested link - > .md-nav__link { - padding: 0; - } - - // Navigation icon - .md-nav__icon { - width: px2rem(24px); - height: px2rem(24px); - margin-inline-end: px2rem(-4px); - font-size: px2rem(24px); - - // Navigation icon in link to next level - &::after { - display: block; - width: 100%; - height: 100%; - content: ""; - background-color: currentcolor; - mask-image: var(--md-nav-icon--next); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - } - } - - // Flip icon vertically - .md-nav__icon { - - // Adjust for right-to-left languages - [dir="rtl"] &::after { - transform: scale(-1); - } - } - - // Table of contents contained in primary navigation - .md-nav--secondary { - - // Navigation on level 2-6 - .md-nav { - position: static; - background-color: transparent; - - // Navigation link on level 3 - .md-nav__link { - padding-inline-start: px2rem(28px); - } - - // Navigation link on level 4 - .md-nav .md-nav__link { - padding-inline-start: px2rem(40px); - } - - // Navigation link on level 5 - .md-nav .md-nav .md-nav__link { - padding-inline-start: px2rem(52px); - } - - // Navigation link on level 6 - .md-nav .md-nav .md-nav .md-nav__link { - padding-inline-start: px2rem(64px); - } - } - } - } - - // Table of contents - &--secondary { - background-color: transparent; - } - - // Hide nested navigation - &__toggle ~ & { - display: flex; - opacity: 0; - transition: - transform 250ms cubic-bezier(0.8, 0, 0.6, 1), - opacity 125ms 50ms; - transform: translateX(100%); - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: translateX(-100%); - } - } - - // Show nested navigation when toggle is active - &__toggle:checked ~ & { - opacity: 1; - transition: - transform 250ms cubic-bezier(0.4, 0, 0.2, 1), - opacity 125ms 125ms; - transform: translateX(0); - - // Navigation list - > .md-nav__list { - // Hack: promote to own layer to reduce jitter - backface-visibility: hidden; - } - } - } - - // [tablet portrait -]: Layered navigation with table of contents - @include break-to-device(tablet portrait) { - - // Show link to table of contents - &--primary &__link[for="__toc"] { - display: flex; - - // Show table of contents icon - .md-icon::after { - content: ""; - } - - // Hide navigation link to current page - + .md-nav__link { - display: none; - } - - // Show table of contents - ~ .md-nav { - display: flex; - } - } - - // Repository information container - &__source { - display: block; - padding: 0 px2rem(4px); - color: var(--md-primary-bg-color); - background-color: var(--md-primary-fg-color--dark); - } - } - - // [tablet landscape]: Layered navigation with table of contents - @include break-at-device(tablet landscape) { - - // Show link to integrated table of contents - &--integrated &__link[for="__toc"] { - display: flex; - - // Show table of contents icon - .md-icon::after { - content: ""; - } - - // Hide navigation link to current page - + .md-nav__link { - display: none; - } - - // Show table of contents - ~ .md-nav { - display: flex; - } - } - } - - // [tablet landscape +]: Tree-like table of contents - @include break-from-device(tablet landscape) { - margin-bottom: px2rem(-8px); - - // Table of contents - &--secondary { - - // Navigation title - .md-nav__title { - position: sticky; - top: 0; - // Hack: because of the hack that we need to make .md-ellipsis work in - // Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm - z-index: 1; - background: var(--md-default-bg-color); - box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color); - - // Adjust snapping behavior - &[for="__toc"] { - scroll-snap-align: start; - } - - // Hide navigation icon - .md-nav__icon { - display: none; - } - } - - // Adjust spacing for navigation list - same reason as below - .md-nav__list { - padding-inline-start: px2rem(12px); - padding-bottom: px2rem(8px); - } - - // Adjust spacing for navigation link - before this change, we set spacing - // on the left and right of a navigation item, but this led to the problem - // of cropped focus outlines, because we must set `overflow: hidden` on - // the navigation list for smooth expand and collapse transitions. - .md-nav__item > .md-nav__link { - margin-inline-end: px2rem(8px); - } - } - } - - // [screen +]: Tree-like navigation - @include break-from-device(screen) { - margin-bottom: px2rem(-8px); - transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1); - - // Primary navigation - &--primary { - - // Navigation title - .md-nav__title { - position: sticky; - top: 0; - // Hack: because of the hack that we need to make .md-ellipsis work in - // Safari, we need to set `z-index` here as - see https://bit.ly/3s5M2jm - z-index: 1; - background: var(--md-default-bg-color); - box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color); - - // Adjust snapping behavior - &[for="__drawer"] { - scroll-snap-align: start; - } - - // Hide navigation icon - .md-nav__icon { - display: none; - } - } - - // Adjust spacing for navigation list - same reason as below - .md-nav__list { - padding-inline-start: px2rem(12px); - padding-bottom: px2rem(8px); - } - - // Adjust spacing for navigation link - before this change, we set spacing - // on the left and right of a navigation item, but this led to the problem - // of cropped focus outlines, because we must set `overflow: hidden` on - // the navigation list for smooth expand and collapse transitions. - .md-nav__item > .md-nav__link { - margin-inline-end: px2rem(8px); - } - } - - // Hide nested navigation - &__toggle ~ & { - display: grid; - grid-template-rows: 0fr; - visibility: collapse; - opacity: 0; - transition: - grid-template-rows 250ms cubic-bezier(0.86, 0, 0.07, 1), - opacity 250ms, - visibility 0ms 250ms; - - // Navigation list - > .md-nav__list { - overflow: hidden; - } - } - - // Show nested navigation when toggle is active or indeterminate - &__toggle:is(:checked, :indeterminate) ~ & { - grid-template-rows: 1fr; - visibility: visible; - opacity: 1; - transition: - grid-template-rows 250ms cubic-bezier(0.86, 0, 0.07, 1), - opacity 150ms 100ms, - visibility 0ms; - } - - // Hide navigation title in nested navigation - &__item--nested > & > &__title { - display: none; - } - - // Navigation section - &__item--section { - display: block; - margin: 1.25em 0; - - // Adjust spacing on last child - &:last-child { - margin-bottom: 0; - } - - // Show navigation link as title - > .md-nav__link { - font-weight: 700; - - // Make labels discernable from links - &[for] { - color: var(--md-default-fg-color--light); - } - - // Omit clicks if not a section index page - &:not(.md-nav__container) { - pointer-events: none; - } - - // Hide navigation icon - > [for], - .md-icon { - display: none; - } - } - - // Navigation - > .md-nav { - display: block; - margin-inline-start: px2rem(-12px); - visibility: visible; - opacity: 1; - - // Adjust spacing on next level item - > .md-nav__list > .md-nav__item { - padding: 0; - } - } - } - - // Navigation icon - &__icon { - width: px2rem(18px); - height: px2rem(18px); - border-radius: 100%; - transition: background-color 250ms; - - // Navigation icon on hover - &:hover { - background-color: var(--md-accent-fg-color--transparent); - } - - // Navigation icon content - &::after { - display: inline-block; - width: 100%; - height: 100%; - vertical-align: px2rem(-2px); - content: ""; - background-color: currentcolor; - border-radius: 100%; - transition: transform 250ms; - mask-image: var(--md-nav-icon--next); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: rotate(180deg); - } - - // Navigation icon - rotate icon when toggle is active or indeterminate - .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link &, - .md-nav__item--nested .md-nav__toggle:indeterminate ~ .md-nav__link & { - transform: rotate(90deg); - } - } - } - - // Modifier for when navigation tabs are rendered - &--lifted { - - // Hide site title - > .md-nav__title { - display: none; - } - - // Hide level 0 navigation items - > .md-nav__list > .md-nav__item { - display: none; - - // Active parent navigation item - &--active { - display: block; - - // Show navigation link as title - > .md-nav__link { - position: sticky; - top: 0; - z-index: 1; - margin-top: 0; - background: var(--md-default-bg-color); - box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color); - - // Omit clicks if not a section index page - &:not(.md-nav__container) { - pointer-events: none; - } - } - - // Adjust spacing for navigation section - &.md-nav__item--section { - margin: 0; - } - } - - // Adjust spacing for nested navigation - > .md-nav { - margin-inline-start: px2rem(-12px); - } - - // Make labels discernable from links - > [for] { - color: var(--md-default-fg-color--light); - } - } - - // Hack: Always show active navigation tab on breakpoint screen, despite - // of checkbox being checked or not - see https://t.ly/Qc311 - .md-nav[data-md-level="1"] { - grid-template-rows: 1fr; - visibility: visible; - opacity: 1; - } - } - - // Modifier for when table of contents is rendered in primary navigation - &--integrated > .md-nav__list > .md-nav__item--active { - - // Add spacing to container for non-nested navigation items - &:not(.md-nav__item--nested) { - padding: 0 px2rem(12px); - - // Remove padding as it's given by container - > .md-nav__link { - padding: 0; - } - } - - // Show integrated table of contents - .md-nav--secondary { - display: block; - margin-bottom: 1.25em; - visibility: visible; - border-inline-start: px2rem(1px) solid var(--md-primary-fg-color); - opacity: 1; - - // Navigation list - > .md-nav__list { - padding-bottom: 0; - overflow: visible; - } - - // Hide table of contents title - > .md-nav__title { - display: none; - } - } - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_pagination.scss b/docs/src/templates/assets/stylesheets/main/components/_pagination.scss deleted file mode 100644 index a010bf43..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_pagination.scss +++ /dev/null @@ -1,85 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Pagination -.md-pagination { - display: flex; - gap: px2rem(8px); - align-items: center; - justify-content: center; - font-size: px2rem(16px); - font-weight: 700; - - // Pagination item - > * { - display: flex; - align-items: center; - justify-content: center; - min-width: px2rem(36px); - height: px2rem(36px); - text-align: center; - border-radius: px2rem(4px); - } - - // Active pagination item - &__current { - color: var(--md-default-fg-color--light); - background-color: var(--md-default-fg-color--lightest); - } - - // Pagination link - &__link { - transition: - color 125ms, - background-color 125ms; - - // Pagination link on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-fg-color); - background-color: var(--md-accent-fg-color--transparent); - - // Pagination icon - svg { - color: var(--md-accent-fg-color); - } - } - - // Show outline for keyboard devices - &.focus-visible { - outline-color: var(--md-accent-fg-color); - outline-offset: px2rem(4px); - } - - // Pagination icon - svg { - display: block; - width: px2rem(24px); - max-height: 100%; - color: var(--md-default-fg-color--lighter); - fill: currentcolor; - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_post.scss b/docs/src/templates/assets/stylesheets/main/components/_post.scss deleted file mode 100644 index cf6ce019..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_post.scss +++ /dev/null @@ -1,196 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Post -.md-post { - - // Post backlink - &__back { - padding-bottom: px2rem(24px); - margin-bottom: px2rem(24px); - border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest); - - // [tablet -]: Hide post backlink - @include break-to-device(tablet) { - display: none; - } - - // Adjust for right-to-left languages - [dir="rtl"] & { - - // Flip icon vertically - svg { - transform: scaleX(-1); - } - } - } - - // Post authors - &__authors { - display: flex; - flex-direction: column; - gap: px2rem(12px); - margin: 0 px2rem(12px) px2rem(24px); - } - - // Post metadata - .md-post__meta { - - // Navigation link - a { - transition: color 125ms; - - // Navigation link on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-fg-color); - } - } - } - - // Post navigation title @todo - generalize - &__title { - font-weight: 700; - color: var(--md-default-fg-color--light); - } - - // Post excerpt - &--excerpt { - margin-bottom: px2rem(64px); - - // Post excerpt header - .md-post__header { - display: flex; - gap: px2rem(12px); - align-items: center; - min-height: px2rem(32px); - } - - // Post excerpt authors - .md-post__authors { - display: inline-flex; - flex-direction: row; - gap: px2rem(4px); - align-items: center; - min-height: px2rem(48px); - margin: 0; - } - - // Post excerpt metadata - .md-post__meta .md-meta__list { - margin-inline-end: px2rem(8px); - } - - // Post excerpt content - .md-post__content > :first-child { - --md-scroll-margin: #{px2rem(120px)}; - - margin-top: 0; - } - } - - // Add margin to table of contents - > .md-nav--secondary { - margin: 1em 0; - } -} - -// ---------------------------------------------------------------------------- - -// Post author profile -.md-profile { - display: flex; - gap: px2rem(12px); - align-items: center; - width: 100%; - font-size: px2rem(14px); - line-height: 1.4; - - // Post author description - &__description { - flex-grow: 1; - } -} - -// ---------------------------------------------------------------------------- - -// Content area for post -.md-content--post { - display: flex; - - // [tablet -]: Switch to inverted column layout - @include break-to-device(tablet) { - flex-flow: column-reverse; - } - - // Content wrapper - > .md-content__inner { - min-width: 0; - - // [screen +]: Adjust spacing between content area and sidebars - @include break-from-device(screen) { - margin-inline-start: px2rem(24px); - } - } -} - -// Sidebar for post -.md-sidebar.md-sidebar--post { - - // [tablet -]: Adjust spacing - @include break-to-device(tablet) { - position: initial; - width: 100%; - padding: 0; - - .md-sidebar__inner { - padding: 0; - } - - .md-post__meta { - margin-inline: px2rem(12px); - } - - .md-nav__item { - display: inline; - border: none; - } - - .md-nav__list { - display: inline-flex; - flex-wrap: wrap; - gap: px2rem(12px); - padding-block: px2rem(12px); - } - - .md-nav__link { - padding: 0; - } - - .md-nav { - position: initial; - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_progress.scss b/docs/src/templates/assets/stylesheets/main/components/_progress.scss deleted file mode 100644 index 7386ae33..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_progress.scss +++ /dev/null @@ -1,53 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Progress variables -:root { - --md-progress-value: 0; - --md-progress-delay: 400ms; -} - -// ---------------------------------------------------------------------------- - -// Progress indicator -.md-progress { - position: fixed; - top: 0; - z-index: 4; - width: 100%; - height: px2rem(1.5px); - background: var(--md-primary-bg-color); - opacity: - min( - clamp(0, var(--md-progress-value), 1), - clamp(0, 100 - var(--md-progress-value), 1) - ); - transition: - transform 500ms cubic-bezier(0.19, 1, 0.22, 1), - opacity 250ms var(--md-progress-delay); - transform: scaleX(calc(var(--md-progress-value) * 1%)); - transform-origin: left; -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_search.scss b/docs/src/templates/assets/stylesheets/main/components/_search.scss deleted file mode 100644 index e0f36b0c..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_search.scss +++ /dev/null @@ -1,707 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Search variables -:root { - --md-search-result-icon: svg-load("material/file-search-outline.svg"); -} - -// ---------------------------------------------------------------------------- - -// Search -.md-search { - position: relative; - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - padding: px2rem(4px) 0; - } - - // [no-js]: Hide search - .no-js & { - display: none; - } - - // Search overlay - &__overlay { - z-index: 1; - opacity: 0; - - // [tablet portrait -]: Search modal - @include break-to-device(tablet portrait) { - position: absolute; - top: px2rem(-20px); - width: px2rem(40px); - height: px2rem(40px); - overflow: hidden; - pointer-events: none; - background-color: var(--md-default-bg-color); - border-radius: px2rem(20px); - transition: - transform 300ms 100ms, - opacity 200ms 200ms; - transform-origin: center; - inset-inline-start: px2rem(-44px); - - // Show overlay when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - opacity: 1; - transition: - transform 400ms, - opacity 100ms; - } - } - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - position: fixed; - top: 0; - width: 0; - height: 0; - cursor: pointer; - background-color: hsla(0, 0%, 0%, 0.54); - transition: - width 0ms 250ms, - height 0ms 250ms, - opacity 250ms; - inset-inline-start: 0; - - // Show overlay when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - width: 100%; - // Hack: when the header is translated upon scrolling, a new layer is - // induced, which means that the height will now refer to the height of - // the header, albeit positioning is fixed. This should be mitigated - // in all cases when setting the height to 2x the viewport. - height: 200vh; - opacity: 1; - transition: - width 0ms, - height 0ms, - opacity 250ms; - } - } - - // Adjust appearance when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - - // [mobile portrait -]: Scale up 45 times - @include break-to-device(mobile portrait) { - transform: scale(45); - } - - // [mobile landscape]: Scale up 60 times - @include break-at-device(mobile landscape) { - transform: scale(60); - } - - // [tablet portrait]: Scale up 75 times - @include break-at-device(tablet portrait) { - transform: scale(75); - } - } - } - - // Search wrapper - &__inner { - // Hack: promote to own layer to reduce jitter - backface-visibility: hidden; - - // [tablet portrait -]: Search modal - @include break-to-device(tablet portrait) { - position: fixed; - top: 0; - z-index: 2; - width: 0; - height: 0; - overflow: hidden; - opacity: 0; - transition: - width 0ms 300ms, - height 0ms 300ms, - transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1), - opacity 150ms 150ms; - transform: translateX(5%); - inset-inline-start: 0; - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: translateX(-5%); - } - - // Adjust appearance when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - width: 100%; - height: 100%; - opacity: 1; - transition: - width 0ms 0ms, - height 0ms 0ms, - transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 150ms 150ms; - transform: translateX(0); - } - } - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - position: relative; - float: inline-end; - width: px2rem(234px); - padding: px2rem(2px) 0; - transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1); - } - - // Adjust appearance when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - - // [tablet landscape]: Omit overlaying header title - @include break-at-device(tablet landscape) { - width: px2rem(468px); - } - - // [screen +]: Match width of content area - @include break-from-device(screen) { - width: px2rem(688px); - } - } - } - - // Search form - &__form { - position: relative; - z-index: 2; - height: px2rem(48px); - background-color: var(--md-default-bg-color); - box-shadow: 0 0 px2rem(12px) transparent; - transition: - color 250ms, - background-color 250ms; - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - height: px2rem(36px); - background-color: hsla(0, 0%, 0%, 0.26); - border-radius: px2rem(2px); - - // Search form on hover - &:hover { - background-color: hsla(0, 0%, 100%, 0.12); - } - } - - // Adjust appearance when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - color: var(--md-default-fg-color); - background-color: var(--md-default-bg-color); - border-radius: px2rem(2px) px2rem(2px) 0 0; - box-shadow: 0 0 px2rem(12px) hsla(0, 0%, 0%, 0.07); - } - } - - // Search input - &__input { - position: relative; - z-index: 2; - width: 100%; - height: 100%; - padding-inline: px2rem(72px) px2rem(44px); - font-size: px2rem(18px); - text-overflow: ellipsis; - background: transparent; - - // Search placeholder - &::placeholder { - transition: color 250ms; - } - - // Search icon and placeholder - ~ .md-search__icon, - &::placeholder { - color: var(--md-default-fg-color--light); - } - - // Remove the "x" rendered by Internet Explorer - &::-ms-clear { - display: none; - } - - // [tablet portrait -]: Search modal - @include break-to-device(tablet portrait) { - width: 100%; - height: px2rem(48px); - font-size: px2rem(18px); - } - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - padding-inline-start: px2rem(44px); - font-size: px2rem(16px); - color: inherit; - - // Search placeholder - &::placeholder { - color: var(--md-primary-bg-color--light); - } - - // Search icon - + .md-search__icon { - color: var(--md-primary-bg-color); - } - - // Adjust appearance when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - text-overflow: clip; - - // Search icon and placeholder - + .md-search__icon { - color: var(--md-default-fg-color--light); - } - - // Search placeholder - &::placeholder { - color: transparent; - } - } - } - } - - // Search icon - &__icon { - display: inline-block; - width: px2rem(24px); - height: px2rem(24px); - cursor: pointer; - transition: - color 250ms, - opacity 250ms; - - // Search icon on hover - &:hover { - opacity: 0.7; - } - - // Search focus button - &[for="__search"] { - position: absolute; - top: px2rem(6px); - inset-inline-start: px2rem(10px); - z-index: 2; - - // Adjust for right-to-left languages - [dir="rtl"] & svg { - transform: scaleX(-1); - } - - // [tablet portrait -]: Search modal - @include break-to-device(tablet portrait) { - top: px2rem(12px); - inset-inline-start: px2rem(16px); - - // Hide the magnifying glass - svg:first-child { - display: none; - } - } - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - pointer-events: none; - - // Hide the back arrow - svg:last-child { - display: none; - } - } - } - } - - // Search options - &__options { - position: absolute; - top: px2rem(6px); - inset-inline-end: px2rem(10px); - z-index: 2; - pointer-events: none; - - // [tablet portrait -]: Search modal - @include break-to-device(tablet portrait) { - top: px2rem(12px); - inset-inline-end: px2rem(16px); - } - - // Search option buttons - > .md-icon { - margin-inline-start: px2rem(4px); - color: var(--md-default-fg-color--light); - opacity: 0; - transition: - transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 150ms; - transform: scale(0.75); - - // Hide outline for pointer devices - &:not(.focus-visible) { - outline: none; - -webkit-tap-highlight-color: transparent; - } - - // Show buttons when search is active and input non-empty - [data-md-toggle="search"]:checked ~ .md-header // stylelint-disable-line - .md-search__input:valid ~ & { - pointer-events: initial; - opacity: 1; - transform: scale(1); - - // Search focus icon - &:hover { - opacity: 0.7; - } - } - } - } - - // Search suggestions - &__suggest { - position: absolute; - top: 0; - display: flex; - align-items: center; - width: 100%; - height: 100%; - padding-inline: px2rem(72px) px2rem(44px); - font-size: px2rem(18px); - color: var(--md-default-fg-color--lighter); - white-space: nowrap; - opacity: 0; - transition: opacity 50ms; - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - padding-inline-start: px2rem(44px); - font-size: px2rem(16px); - } - - // Show suggestions when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - opacity: 1; - transition: opacity 300ms 100ms; - } - } - - // Search output - &__output { - position: absolute; - z-index: 1; - width: 100%; - overflow: hidden; - border-end-start-radius: px2rem(2px); - border-end-end-radius: px2rem(2px); - - // [tablet portrait -]: Search modal - @include break-to-device(tablet portrait) { - top: px2rem(48px); - bottom: 0; - } - - // [tablet landscape +]: Header-embedded search - @include break-from-device(tablet landscape) { - top: px2rem(38px); - opacity: 0; - transition: opacity 400ms; - - // Show output when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - box-shadow: var(--md-shadow-z3); - opacity: 1; - } - } - } - - // Search scroll wrapper - &__scrollwrap { - height: 100%; - overflow-y: auto; - // Hack: Chrome 88+ has weird overscroll behavior. Overall, scroll snapping - // seems to be something that is not ready for prime time on some browsers. - // scroll-snap-type: y mandatory; - touch-action: pan-y; - background-color: var(--md-default-bg-color); - // Hack: promote to own layer to reduce jitter - backface-visibility: hidden; - - // Mitigiate excessive repaints on non-retina devices - @media (max-resolution: 1dppx) { - transform: translateZ(0); - } - - // [tablet landscape]: Set fixed width to omit unnecessary reflow - @include break-at-device(tablet landscape) { - width: px2rem(468px); - } - - // [screen +]: Set fixed width to omit unnecessary reflow - @include break-from-device(screen) { - width: px2rem(688px); - } - - // [tablet landscape +]: Limit height to viewport - @include break-from-device(tablet landscape) { - max-height: 0; - scrollbar-width: thin; - scrollbar-color: var(--md-default-fg-color--lighter) transparent; - - // Show scroll wrapper when search is active - [data-md-toggle="search"]:checked ~ .md-header & { - max-height: 75vh; - } - - // Search scroll wrapper on hover - &:hover { - scrollbar-color: var(--md-accent-fg-color) transparent; - } - - // Webkit scrollbar - &::-webkit-scrollbar { - width: px2rem(4px); - height: px2rem(4px); - } - - // Webkit scrollbar thumb - &::-webkit-scrollbar-thumb { - background-color: var(--md-default-fg-color--lighter); - - // Webkit scrollbar thumb on hover - &:hover { - background-color: var(--md-accent-fg-color); - } - } - } - } -} - -// Search result -.md-search-result { - color: var(--md-default-fg-color); - word-break: break-word; - - // Search result metadata - &__meta { - padding: 0 px2rem(16px); - font-size: px2rem(12.8px); - line-height: px2rem(36px); - color: var(--md-default-fg-color--light); - background-color: var(--md-default-fg-color--lightest); - scroll-snap-align: start; - - // [tablet landscape +]: Adjust spacing - @include break-from-device(tablet landscape) { - padding-inline-start: px2rem(44px); - } - } - - // Search result list - &__list { - padding: 0; - margin: 0; - list-style: none; - // Hack: omit accidental text selection on fast toggle of more button - user-select: none; - } - - // Search result item - &__item { - box-shadow: 0 px2rem(-1px) var(--md-default-fg-color--lightest); - - // Omit border on first child - &:first-child { - box-shadow: none; - } - } - - // Search result link - &__link { - display: block; - outline: none; - transition: background-color 250ms; - scroll-snap-align: start; - - // Search result link on focus/hover - &:is(:focus, :hover) { - background-color: var(--md-accent-fg-color--transparent); - } - - // Adjust spacing on last child of last link - &:last-child p:last-child { - margin-bottom: px2rem(12px); - } - } - - // Search result more container - &__more > summary { - position: sticky; - top: 0; - z-index: 1; - display: block; - cursor: pointer; - outline: none; - scroll-snap-align: start; - - // Hide native details marker - &::marker { - display: none; - } - - // Hide native details marker - legacy, must be split into a seprate rule, - // so older browsers don't consider the selector list as invalid - &::-webkit-details-marker { - display: none; - } - - // Search result more button - > div { - padding: px2em(12px) px2rem(16px); - font-size: px2rem(12.8px); - color: var(--md-typeset-a-color); - transition: - color 250ms, - background-color 250ms; - - // [tablet landscape +]: Adjust spacing - @include break-from-device(tablet landscape) { - padding-inline-start: px2rem(44px); - } - } - - // Search result more link on focus/hover - &:is(:focus, :hover) > div { - color: var(--md-accent-fg-color); - background-color: var(--md-accent-fg-color--transparent); - } - } - - // Adjust background for more container in open state - &__more[open] > summary { - background-color: var(--md-default-bg-color); - // box-shadow: 0 px2rem(-1px) hsla(0, 0%, 0%, 0.07) inset; - } - - // Search result article - &__article { - position: relative; - padding: 0 px2rem(16px); - overflow: hidden; - - // [tablet landscape +]: Adjust spacing - @include break-from-device(tablet landscape) { - padding-inline-start: px2rem(44px); - } - } - - // Search result icon - &__icon { - position: absolute; - inset-inline-start: 0; - width: px2rem(24px); - height: px2rem(24px); - margin: px2rem(10px); - color: var(--md-default-fg-color--light); - - // [tablet portrait -]: Hide icon - @include break-to-device(tablet portrait) { - display: none; - } - - // Search result icon content - &::after { - display: inline-block; - width: 100%; - height: 100%; - content: ""; - background-color: currentcolor; - mask-image: var(--md-search-result-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: scaleX(-1); - } - } - } - - // Typesetted content - .md-typeset { - font-size: px2rem(12.8px); - line-height: 1.6; - color: var(--md-default-fg-color--light); - - // Search result article title - h1 { - margin: px2rem(11px) 0; - font-size: px2rem(16px); - font-weight: 400; - line-height: 1.4; - color: var(--md-default-fg-color); - - // Search term highlighting - mark { - text-decoration: none; - } - } - - // Search result section title - h2 { - margin: 0.5em 0; - font-size: px2rem(12.8px); - font-weight: 700; - line-height: 1.6; - color: var(--md-default-fg-color); - - // Search term highlighting - mark { - text-decoration: none; - } - } - } - - // Search result terms - &__terms { - display: block; - margin: 0.5em 0; - font-size: px2rem(12.8px); - font-style: italic; - color: var(--md-default-fg-color); - } - - // Search term highlighting - mark { - color: var(--md-accent-fg-color); - text-decoration: underline; - background-color: transparent; - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_select.scss b/docs/src/templates/assets/stylesheets/main/components/_select.scss deleted file mode 100644 index ed597a39..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_select.scss +++ /dev/null @@ -1,115 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Selection -.md-select { - position: relative; - z-index: 1; - - // Selection tooltip - &__inner { - position: absolute; - top: calc(100% - #{px2rem(4px)}); - left: 50%; - max-height: 0; - margin-top: px2rem(4px); - color: var(--md-default-fg-color); - background-color: var(--md-default-bg-color); - border-radius: px2rem(2px); - box-shadow: var(--md-shadow-z2); - opacity: 0; - transition: - transform 250ms 375ms, - opacity 250ms 250ms, - max-height 0ms 500ms; - transform: translate3d(-50%, px2rem(6px), 0); - - // Selection bubble on parent focus/hover - .md-select:is(:focus-within, :hover) & { - max-height: px2rem(200px); - opacity: 1; - transition: - transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 250ms, - max-height 0ms; - transform: translate3d(-50%, 0, 0); - } - - // Selection bubble handle - &::after { - position: absolute; - top: 0; - left: 50%; - width: 0; - height: 0; - margin-top: px2rem(-4px); - margin-left: px2rem(-4px); - content: ""; - border: px2rem(4px) solid transparent; - border-top: 0; - border-bottom-color: var(--md-default-bg-color); - } - } - - // Selection list - &__list { - max-height: inherit; - padding: 0; - margin: 0; - overflow: auto; - font-size: px2rem(16px); - list-style-type: none; - border-radius: px2rem(2px); - } - - // Selection item - &__item { - line-height: px2rem(36px); - } - - // Selection link - &__link { - display: block; - width: 100%; - padding-inline: px2rem(12px) px2rem(24px); - cursor: pointer; - outline: none; - transition: - background-color 250ms, - color 250ms; - scroll-snap-align: start; - - // Link on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-fg-color); - } - - // Link on focus - &:focus { - background-color: var(--md-default-fg-color--lightest); - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_sidebar.scss b/docs/src/templates/assets/stylesheets/main/components/_sidebar.scss deleted file mode 100644 index 8a320c04..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_sidebar.scss +++ /dev/null @@ -1,209 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Sidebar -.md-sidebar { - position: sticky; - top: px2rem(48px); - flex-shrink: 0; - align-self: flex-start; - width: px2rem(242px); - padding: px2rem(24px) 0; - - // [print]: Hide sidebar - @media print { - display: none; - } - - // Primary sidebar with navigation - &--primary { - - // [tablet -]: Show navigation as drawer - @include break-to-device(tablet) { - position: fixed; - top: 0; - z-index: 5; - display: block; - width: px2rem(242px); - height: 100%; - background-color: var(--md-default-bg-color); - transition: - transform 250ms cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 250ms; - transform: translateX(0); - inset-inline-start: px2rem(-242px); - - // Show sidebar when drawer is active - [data-md-toggle="drawer"]:checked ~ .md-container & { - box-shadow: var(--md-shadow-z3); - transform: translateX(px2rem(242px)); - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: translateX(px2rem(-242px)); - } - } - - // Stretch scroll wrapper for primary sidebar - .md-sidebar__scrollwrap { - position: absolute; - inset: 0; - margin: 0; - scroll-snap-type: none; - overflow: hidden; - } - } - } - - // [screen +]: Show navigation as sidebar - @include break-from-device(screen) { - height: 0; - - // [no-js]: Switch to native sticky behavior - .no-js & { - height: auto; - } - - // Adjust spacing for sticky navigation tabs - .md-header--lifted ~ .md-container & { - top: px2rem(96px); - } - } - - // Secondary sidebar with table of contents - &--secondary { - display: none; - order: 2; - - // [tablet landscape +]: Show table of contents as sidebar - @include break-from-device(tablet landscape) { - height: 0; - - // [no-js]: Switch to native sticky behavior - .no-js & { - height: auto; - } - - // Sidebar is visible - &:not([hidden]) { - display: block; - } - - // Ensure smooth scrolling on iOS - .md-sidebar__scrollwrap { - touch-action: pan-y; - } - } - } - - // Sidebar scroll wrapper - &__scrollwrap { - margin: 0 px2rem(4px); - overflow-y: auto; - // Hack: promote to own layer to reduce jitter - backface-visibility: hidden; - // Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container - // to the bottom if `scroll-snap-type` is set on the initial render. For - // this reason, we disable scroll snapping until this is resolved (#1667). - // scroll-snap-type: y mandatory; - scrollbar-width: thin; - scrollbar-gutter: stable; - scrollbar-color: var(--md-default-fg-color--lighter) transparent; - - // Webkit scrollbar - &::-webkit-scrollbar { - width: px2rem(4px); - height: px2rem(4px); - } - - // Sidebar scroll wrapper on focus/hover - &:is(:focus-within, :hover) { - scrollbar-color: var(--md-accent-fg-color) transparent; - - // Webkit scrollbar thumb - &::-webkit-scrollbar-thumb { - background-color: var(--md-default-fg-color--lighter); - - // Webkit scrollbar thumb on hover - &:hover { - background-color: var(--md-accent-fg-color); - } - } - } - } - - // Hack: the scrollbar is only visible when the sidebar's contents overflow, - // which is nice, but leads to the problem where the chevrons of expandable - // sections will jump by `4px` when the sidebar is shown. We wanted to fix - // this problem for so long, but haven't found a clean way of doing it. - // Until now. The following declaration is only applied to Webkit browsers - // (e.g. Chrome and Safari), which support styling of scrollbars. The trick - // is to add conditional padding on the side of the scrollbar only if the - // sidebar's content doesn't overflow. This hack is inspired and adapted - // from Ayke van Laëthem's year old trick – see https://bit.ly/3Sb1qql - @supports selector(::-webkit-scrollbar) { - - // Sidebar scroll wrapper - &__scrollwrap { - scrollbar-gutter: auto; - } - - // Sidebar wrapper - &__inner { - padding-inline-end: calc(100% - #{px2rem(230px)}); - } - } -} - -// [tablet -]: Show overlay on active drawer -@include break-to-device(tablet) { - - // Drawer overlay - .md-overlay { - position: fixed; - top: 0; - z-index: 5; - width: 0; - height: 0; - background-color: hsla(0, 0%, 0%, 0.54); - opacity: 0; - transition: - width 0ms 250ms, - height 0ms 250ms, - opacity 250ms; - - // Show overlay when drawer is active - [data-md-toggle="drawer"]:checked ~ & { - width: 100%; - height: 100%; - opacity: 1; - transition: - width 0ms, - height 0ms, - opacity 250ms; - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_source.scss b/docs/src/templates/assets/stylesheets/main/components/_source.scss deleted file mode 100644 index a2b72009..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_source.scss +++ /dev/null @@ -1,182 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Keyframes -// ---------------------------------------------------------------------------- - -// Show repository facts -@keyframes facts { - 0% { - height: 0; - } - - 100% { - height: px2rem(13px); - } -} - -// Show repository fact -@keyframes fact { - 0% { - opacity: 0; - transform: translateY(100%); - } - - 50% { - opacity: 0; - } - - 100% { - opacity: 1; - transform: translateY(0%); - } -} - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Repository information variables -:root { - --md-source-forks-icon: svg-load("octicons/repo-forked-16.svg"); - --md-source-repositories-icon: svg-load("octicons/repo-16.svg"); - --md-source-stars-icon: svg-load("octicons/star-16.svg"); - --md-source-version-icon: svg-load("octicons/tag-16.svg"); -} - -// ---------------------------------------------------------------------------- - -// Repository information -.md-source { - display: block; - font-size: px2rem(13px); - line-height: 1.2; - white-space: nowrap; - outline-color: var(--md-accent-fg-color); - // Hack: promote to own layer to reduce jitter - backface-visibility: hidden; - transition: opacity 250ms; - - // Repository information on hover - &:hover { - opacity: 0.7; - } - - // Repository icon - &__icon { - display: inline-block; - width: px2rem(40px); - height: px2rem(48px); - vertical-align: middle; - - // Align with margin only (as opposed to normal button alignment) - svg { - margin-inline-start: px2rem(12px); - margin-top: px2rem(12px); - } - - // Adjust spacing if icon is present - + .md-source__repository { - padding-inline-start: px2rem(40px); - margin-inline-start: px2rem(-40px); - } - } - - // Repository name - &__repository { - display: inline-block; - max-width: calc(100% - #{px2rem(24px)}); - margin-inline-start: px2rem(12px); - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - } - - // Repository facts - &__facts { - display: flex; - gap: px2rem(8px); - width: 100%; - padding: 0; - margin: px2rem(2px) 0 0; - overflow: hidden; - font-size: px2rem(11px); - list-style-type: none; - opacity: 0.75; - - // Show after the data was loaded - .md-source__repository--active & { - animation: facts 250ms ease-in; - } - } - - // Repository fact - &__fact { - overflow: hidden; - text-overflow: ellipsis; - - // Show after the data was loaded - .md-source__repository--active & { - animation: fact 400ms ease-out; - } - - // Repository fact icon - &::before { - display: inline-block; - width: px2rem(12px); - height: px2rem(12px); - margin-inline-end: px2rem(2px); - vertical-align: text-top; - content: ""; - background-color: currentcolor; - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - - // Adjust spacing for 2nd+ fact - &:nth-child(1n+2) { - flex-shrink: 0; - } - - // Repository fact: version - &--version::before { - mask-image: var(--md-source-version-icon); - } - - // Repository fact: stars - &--stars::before { - mask-image: var(--md-source-stars-icon); - } - - // Repository fact: forks - &--forks::before { - mask-image: var(--md-source-forks-icon); - } - - // Repository fact: repositories - &--repositories::before { - mask-image: var(--md-source-repositories-icon); - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_status.scss b/docs/src/templates/assets/stylesheets/main/components/_status.scss deleted file mode 100644 index 9e096021..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_status.scss +++ /dev/null @@ -1,73 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Status variables -:root { - --md-status: svg-load("material/information-outline.svg"); - --md-status--new: svg-load("material/alert-decagram.svg"); - --md-status--deprecated: svg-load("material/trash-can.svg"); - --md-status--encrypted: svg-load("material/shield-lock.svg"); -} - -// ---------------------------------------------------------------------------- - -// Status -.md-status { - - // Status icon - &::after { - display: inline-block; - width: px2em(18px); - height: px2em(18px); - vertical-align: text-bottom; - content: ""; - background-color: var(--md-default-fg-color--light); - mask-image: var(--md-status); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - - // Status icon on hover - &:hover::after { - background-color: currentcolor; - } - - // Status: new - &--new::after { - mask-image: var(--md-status--new); - } - - // Status: deprecated - &--deprecated::after { - mask-image: var(--md-status--deprecated); - } - - // Status: encrypted - &--encrypted::after { - mask-image: var(--md-status--encrypted); - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_tabs.scss b/docs/src/templates/assets/stylesheets/main/components/_tabs.scss deleted file mode 100644 index 0da3384b..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_tabs.scss +++ /dev/null @@ -1,133 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Navigation tabs -.md-tabs { - // Must be higher than the z-index of the back-to-top button, or the button - // will overlay the navigation tabs bar when scrolling up fast. - z-index: 3; - display: block; - width: 100%; - overflow: auto; - line-height: 1.3; - color: var(--md-primary-bg-color); - background-color: var(--md-primary-fg-color); - - // [print]: Hide tabs - @media print { - display: none; - } - - // [tablet -]: Hide tabs - @include break-to-device(tablet) { - display: none; - } - - // Navigation tabs are hidden - &[hidden] { - pointer-events: none; - } - - // Navigation tabs list - &__list { - display: flex; - padding: 0; - margin: 0; - margin-inline-start: px2rem(4px); - overflow: auto; - white-space: nowrap; - list-style: none; - contain: content; - // Hack: don't show scrollbar when navigation tabs overflow, which should - // only happen in rare occasions, as adding too many top level sections is - // discouraged, since hiding content on horitontal axis doesn't lead to a - // good user experience. It's just harder to discover. - scrollbar-width: none; - - // Hack: see above - &::-webkit-scrollbar { - display: none; - } - } - - // Navigation tabs item - &__item { - height: px2rem(48px); - padding-inline: px2rem(12px); - - // Navigation tabs link in active navigation - &--active .md-tabs__link { - color: inherit; - opacity: 1; - } - } - - // Navigation tabs link - could be defined as block elements and aligned via - // line height, but this would imply more repaints when scrolling - &__link { - display: flex; - margin-top: px2rem(16px); - font-size: px2rem(14px); - outline-color: var(--md-accent-fg-color); - outline-offset: px2rem(4px); - // Hack: save a repaint when tabs are appearing on scrolling up - backface-visibility: hidden; - opacity: 0.7; - transition: - transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 250ms; - - // Navigation tabs link on focus/hover - &:is(:focus, :hover) { - color: inherit; - opacity: 1; - } - - // Navigation tabs link icon - svg { - height: 1.3em; - margin-inline-end: px2rem(8px); - fill: currentcolor; - } - - // Delay transitions by a small amount - @for $i from 2 through 16 { - .md-tabs__item:nth-child(#{$i}) & { - transition-delay: 20ms * ($i - 1); - } - } - - // Hide tabs upon scrolling - disable transition to minimizes repaints - // while scrolling down, while scrolling up seems to be okay - .md-tabs[hidden] & { - opacity: 0; - transition: - transform 0ms 100ms, - opacity 100ms; - transform: translateY(50%); - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_tag.scss b/docs/src/templates/assets/stylesheets/main/components/_tag.scss deleted file mode 100644 index 9f31829d..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_tag.scss +++ /dev/null @@ -1,105 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Tag variables -:root { - --md-tag-icon: svg-load("material/pound.svg"); -} - -// ---------------------------------------------------------------------------- - -// Scoped in typesetted content to match specificity of regular content -.md-typeset { - - // Tag list - .md-tags { - display: inline-flex; - flex-wrap: wrap; - gap: px2em(8px); - margin-top: px2em(-2px); - margin-bottom: px2em(12px); - } - - // Tag - .md-tag { - display: inline-flex; - gap: px2em(8px); - align-items: center; - padding: px2em(4px, 12.8px) px2em(10px, 12.8px); - font-size: px2rem(12.8px); // Fallback - font-size: min(px2em(12.8px), px2rem(12.8px)); - font-weight: 700; - line-height: 1.6; - letter-spacing: initial; - background: var(--md-default-fg-color--lightest); - border-radius: px2rem(48px); - - // Linked tag - &[href] { - color: inherit; - outline: none; - -webkit-tap-highlight-color: transparent; - transition: - color 125ms, - background-color 125ms; - - // Linked tag on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-bg-color); - background-color: var(--md-accent-fg-color); - } - } - - // Tag inside headline - [id] > & { - vertical-align: text-top; - } - } - - // Tag icon - .md-tag-icon { - - // Tag icon content - &::before { - display: inline-block; - width: 1.2em; - height: 1.2em; - vertical-align: text-bottom; - content: ""; - background-color: var(--md-default-fg-color--lighter); - transition: background-color 125ms; - mask-image: var(--md-tag-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - - // Linked tag on focus/hover - &[href]:is(:focus, :hover)::before { - background-color: var(--md-accent-bg-color); - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_tooltip.scss b/docs/src/templates/assets/stylesheets/main/components/_tooltip.scss deleted file mode 100644 index 421e5858..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_tooltip.scss +++ /dev/null @@ -1,292 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Keyframes -// ---------------------------------------------------------------------------- - -// Continuous pulse animation -@keyframes pulse { - 0% { - transform: scale(0.95); - } - - 75% { - transform: scale(1); - } - - 100% { - transform: scale(0.95); - } -} - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Tooltip variables -:root { - --md-annotation-bg-icon: svg-load("material/circle.svg"); - --md-annotation-icon: svg-load("material/plus-circle.svg"); - --md-tooltip-width: #{px2rem(400px)}; -} - -// ---------------------------------------------------------------------------- - -// Tooltip -.md-tooltip { - position: absolute; - top: var(--md-tooltip-y); - left: - clamp( - var(--md-tooltip-0, #{px2rem(0px)}) + #{px2rem(16px)}, - var(--md-tooltip-x), - 100vw + - var(--md-tooltip-0, #{px2rem(0px)}) + #{px2rem(16px)} - - var(--md-tooltip-width) - - 2 * #{px2rem(16px)} - ); - // Hack: set an explicit `z-index` so we can transition it to ensure that any - // following elements are not overlaying the tooltip during the transition. - z-index: 0; - width: var(--md-tooltip-width); - max-width: calc(100vw - 2 * #{px2rem(16px)}); - font-family: var(--md-text-font-family); - color: var(--md-default-fg-color); - background-color: var(--md-default-bg-color); - border-radius: px2rem(2px); - box-shadow: var(--md-shadow-z2); - opacity: 0; - transition: - transform 0ms 250ms, - opacity 250ms, - z-index 250ms; - transform: translateY(px2rem(-8px)); - // Hack: promote to own layer to reduce jitter - backface-visibility: hidden; - - // Active tooltip - &--active { - z-index: 2; - opacity: 1; - transition: - transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 250ms, - z-index 0ms; - transform: translateY(0); - } - - // Show outline on target and for keyboard devices - :is(.focus-visible > &, &:target) { - outline: var(--md-accent-fg-color) auto; - } - - // Tooltip wrapper - &__inner { - padding: px2rem(16px); - font-size: px2rem(12.8px); - - // Adjust spacing on first child - &.md-typeset > :first-child { - margin-top: 0; - } - - // Adjust spacing on last child - &.md-typeset > :last-child { - margin-bottom: 0; - } - } -} - -// ---------------------------------------------------------------------------- - -// Annotation -.md-annotation { - font-weight: 400; - white-space: normal; - vertical-align: text-bottom; - outline: none; - - // Adjust for right-to-left languages - [dir="rtl"] & { - direction: rtl; - } - - // Annotation index in code block - code & { - font-family: var(--md-code-font-family); - font-size: inherit; - } - - // Annotation is not hidden (e.g. when copying) - &:not([hidden]) { - display: inline-block; - // Hack: ensure that the line height doesn't exceed the line height of the - // hosting line, because it will lead to dancing pixels. - line-height: 1.25; - } - - // Annotation index - &__index { - position: relative; - z-index: 0; - display: inline-block; - margin-inline: 0.4ch; - vertical-align: text-top; - cursor: pointer; - user-select: none; - outline: none; - - // Hack: increase specificity to override default for anchors in typesetted - // content, because transitions are defined on anchor elements - .md-annotation & { - transition: z-index 250ms; - } - - // Hack: Work around Firefox bug that renders a subpixel outline when - // rotating a mask image element. - // https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 - overflow: hidden; // stylelint-disable-line order/properties-order - border-radius: 0.01px; - - // [screen]: Render annotation markers as icons - @media screen { - width: 2.2ch; - - // Annotation is visible - [data-md-visible] > & { - animation: pulse 2000ms infinite; - } - - // Annotation marker background - &::before { - position: absolute; - top: -0.1ch; - z-index: -1; - width: 2.2ch; - height: 2.2ch; - content: ""; - background: var(--md-default-bg-color); - mask-image: var(--md-annotation-bg-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - - // Annotation marker – the marker must be positioned absolutely behind - // the index, because it shouldn't impact the rendering of a code block. - // Otherwise, small rounding differences in browsers can sometimes mess up - // alignment of text following an annotation. - &::after { - position: absolute; - top: -0.1ch; - z-index: -1; - width: 2.2ch; - height: 2.2ch; - content: ""; - background-color: var(--md-default-fg-color--lighter); - transition: - background-color 250ms, - transform 250ms; - // Hack: promote to own layer to reduce jitter - transform: scale(1.0001); - mask-image: var(--md-annotation-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - - // Annotation marker for active tooltip - .md-tooltip--active + & { - transform: rotate(45deg); - } - - // Annotation marker for active tooltip or on hover - :is(.md-tooltip--active + &, :hover > &) { - background-color: var(--md-accent-fg-color); - } - } - } - - // Annotation index for active tooltip - .md-tooltip--active + & { - z-index: 2; - transition-duration: 0ms; - animation-play-state: paused; - } - - // Annotation marker - [data-md-annotation-id] { - display: inline-block; - - // [print]: Render annotation markers as numbers - @media print { - padding: 0 0.6ch; - font-weight: 700; - color: var(--md-default-bg-color); - white-space: nowrap; - background: var(--md-default-fg-color--lighter); - border-radius: 2ch; - - // Annotation marker content - &::after { - content: attr(data-md-annotation-id); - } - } - } - } -} - -// ---------------------------------------------------------------------------- - -// Scoped in typesetted content to match specificity of regular content -.md-typeset { - - // Annotation list - .md-annotation-list { - list-style: none; - counter-reset: xxx; - - // Annotation list item - li { - position: relative; - - // Annotation list marker - &::before { - position: absolute; - top: px2em(4px); - inset-inline-start: px2em(-34px); - min-width: 2ch; - height: 2ch; - padding: 0 0.6ch; - font-size: px2em(14.2px); - font-weight: 700; - line-height: 1.25; - color: var(--md-default-bg-color); - text-align: center; - content: counter(xxx); - counter-increment: xxx; - background: var(--md-default-fg-color--lighter); - border-radius: 2ch; - } - } - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_top.scss b/docs/src/templates/assets/stylesheets/main/components/_top.scss deleted file mode 100644 index c24d44d1..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_top.scss +++ /dev/null @@ -1,83 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Back-to-top button -.md-top { - position: fixed; - top: px2rem(48px + 16px); - z-index: 2; - display: block; - padding: px2rem(8px) px2rem(16px); - margin-inline-start: 50%; - font-size: px2rem(14px); - color: var(--md-default-fg-color--light); - cursor: pointer; - background-color: var(--md-default-bg-color); - border-radius: px2rem(32px); - outline: none; - box-shadow: var(--md-shadow-z2); - transition: - color 125ms, - background-color 125ms, - transform 125ms cubic-bezier(0.4, 0, 0.2, 1), - opacity 125ms; - transform: translate(-50%, 0); - - // [print]: Hide back-to-top button - @media print { - display: none; - } - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: translate(50%, 0); - } - - // Back-to-top button is hidden - &[hidden] { - pointer-events: none; - opacity: 0; - transition-duration: 0ms; - transform: translate(-50%, px2rem(4px)); - - // Adjust for right-to-left languages - [dir="rtl"] & { - transform: translate(50%, px2rem(4px)); - } - } - - // Back-to-top button on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-bg-color); - background-color: var(--md-accent-fg-color); - } - - // Inline icon - svg { - display: inline-block; - vertical-align: -0.5em; - } -} diff --git a/docs/src/templates/assets/stylesheets/main/components/_version.scss b/docs/src/templates/assets/stylesheets/main/components/_version.scss deleted file mode 100644 index 3f85d6cd..00000000 --- a/docs/src/templates/assets/stylesheets/main/components/_version.scss +++ /dev/null @@ -1,150 +0,0 @@ -//// -/// Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> -/// -/// Permission is hereby granted, free of charge, to any person obtaining a -/// copy of this software and associated documentation files (the "Software"), -/// to deal in the Software without restriction, including without limitation -/// the rights to use, copy, modify, merge, publish, distribute, sublicense, -/// and/or sell copies of the Software, and to permit persons to whom the -/// Software is furnished to do so, subject to the following conditions: -/// -/// The above copyright notice and this permission notice shall be included in -/// all copies or substantial portions of the Software. -/// -/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL -/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -/// DEALINGS -//// - -// ---------------------------------------------------------------------------- -// Keyframes -// ---------------------------------------------------------------------------- - -// See https://github.com/squidfunk/mkdocs-material/issues/2429 -@keyframes hoverfix { - 0% { - pointer-events: none; - } -} - -// ---------------------------------------------------------------------------- -// Rules -// ---------------------------------------------------------------------------- - -// Version selection variables -:root { - --md-version-icon: svg-load("fontawesome/solid/caret-down.svg"); -} - -// ---------------------------------------------------------------------------- - -// Version selection -.md-version { - flex-shrink: 0; - height: px2rem(48px); - font-size: px2rem(16px); - - // Current selection - &__current { - position: relative; - // Hack: in general, we would use `vertical-align` to align the version at - // the bottom with the title, but since the list uses absolute positioning, - // this won't work consistently. Furthermore, we would need to use inline - // positioning to align the links, which looks jagged. - top: px2rem(1px); - margin-inline: px2rem(28px) px2rem(8px); - color: inherit; - cursor: pointer; - outline: none; - - // Version selection icon - &::after { - display: inline-block; - width: px2rem(8px); - height: px2rem(12px); - margin-inline-start: px2rem(8px); - content: ""; - background-color: currentcolor; - mask-image: var(--md-version-icon); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } - } - - // Version selection list - &__list { - position: absolute; - top: px2rem(3px); - z-index: 3; - max-height: 0; - padding: 0; - margin: px2rem(4px) px2rem(16px); - overflow: auto; - color: var(--md-default-fg-color); - list-style-type: none; - background-color: var(--md-default-bg-color); - border-radius: px2rem(2px); - box-shadow: var(--md-shadow-z2); - opacity: 0; - transition: - max-height 0ms 500ms, - opacity 250ms 250ms; - scroll-snap-type: y mandatory; - - // Version selection list on parent focus/hover - .md-version:is(:focus-within, :hover) & { - max-height: px2rem(200px); - opacity: 1; - transition: - max-height 0ms, - opacity 250ms; - } - - // Fix hover on touch devices - @media (pointer: coarse), (hover: none) { - // Switch off on hover - .md-version:hover & { - animation: hoverfix 250ms forwards; - } - - // Enable on focus - .md-version:focus-within & { - animation: none; - } - } - } - - // Version selection item - &__item { - line-height: px2rem(36px); - } - - // Version selection link - &__link { - display: block; - width: 100%; - padding-inline: px2rem(12px) px2rem(24px); - white-space: nowrap; - cursor: pointer; - outline: none; - transition: - color 250ms, - background-color 250ms; - scroll-snap-align: start; - - // Link on focus/hover - &:is(:focus, :hover) { - color: var(--md-accent-fg-color); - } - - // Link on focus - &:focus { - background-color: var(--md-default-fg-color--lightest); - } - } -} |