diff --git a/.stylelintrc b/.stylelintrc index db681e6c5..eb0ed799f 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -62,6 +62,12 @@ "font-family-name-quotes": "always-where-recommended", "font-weight-notation": "numeric", "hue-degree-notation": "number", + "length-zero-no-unit": [ + true, + { + "ignore": ["custom-properties"] + } + ], "linebreaks": "unix", "media-feature-name-no-unknown": null, "no-descending-specificity": null, @@ -144,6 +150,7 @@ "scss/at-extend-no-missing-placeholder": null, "scss/no-duplicate-mixins": true, "scss/no-global-function-names": null, + "scss/operator-no-newline-after": null, "scss/operator-no-unspaced": true, "scss/partial-no-import": true, "scss/percent-placeholder-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$", diff --git a/src/assets/stylesheets/main/_typeset.scss b/src/assets/stylesheets/main/_typeset.scss index 87e474b02..f4753dc23 100644 --- a/src/assets/stylesheets/main/_typeset.scss +++ b/src/assets/stylesheets/main/_typeset.scss @@ -346,7 +346,7 @@ kbd { } // Unordered and ordered list - :is(ul, ol) { + :is(ul, ol):not([hidden]) { display: flow-root; margin-left: px2em(10px); padding: 0; diff --git a/src/assets/stylesheets/main/extensions/markdown/_admonition.scss b/src/assets/stylesheets/main/extensions/markdown/_admonition.scss index 7a887d14a..a00ed0ca2 100644 --- a/src/assets/stylesheets/main/extensions/markdown/_admonition.scss +++ b/src/assets/stylesheets/main/extensions/markdown/_admonition.scss @@ -60,7 +60,8 @@ $admonitions: ( // Scoped in typesetted content to match specificity of regular content .md-typeset { - // Admonition and Details + // Admonition - note that all styles also apply to details tags, which are + // rendered as collapsible admonitions with summary elements as titles. :is(.admonition, details) { display: flow-root; margin: px2em(20px, 12.8px) 0; diff --git a/src/assets/stylesheets/main/extensions/markdown/_toc.scss b/src/assets/stylesheets/main/extensions/markdown/_toc.scss index 1f12a7bc4..0415a1509 100644 --- a/src/assets/stylesheets/main/extensions/markdown/_toc.scss +++ b/src/assets/stylesheets/main/extensions/markdown/_toc.scss @@ -64,58 +64,35 @@ color: var(--md-accent-fg-color); } - // Adjust scroll offset for all elements with `id` attributes - general scroll - // margin offset for anything that can be targeted. Browser support is pretty - // decent by now, but Edge <79 and Safari (iOS and macOS) still don't support - // it properly, so we settle with a cross-browser anchor correction solution. + // Adjust scroll margin for all elements with `id` attributes :target { - scroll-margin-top: px2rem(48px + 24px); + --md-scroll-margin: #{px2rem(48px + 24px)}; + --md-scroll-offset: #{px2rem(0px)}; + // Scroll margin is finally ready for prime time - before, we used a hack + // for anchor correction based on pseudo elements but those times are gone. + scroll-margin-top: + calc( + var(--md-scroll-margin) - + var(--md-scroll-offset) + ); // [screen +]: Sticky navigation tabs @include break-from-device(screen) { - // Adjust scroll offset for sticky navigation tabs + // Adjust scroll margin for sticky navigation tabs .md-header--lifted ~ .md-container & { - scroll-margin-top: px2rem(96px + 24px); - } - } - } - - // Adjust scroll offset for headlines - :is(h1, h2, h3, h4, h5, h6):target { - scroll-margin-top: initial; - - // Anchor correction hack - &::before { - display: block; - margin-top: calc(#{px2rem(-48px + 24px)} - var(--md-hx-offset)); - padding-top: calc(#{px2rem(48px + 24px)} - var(--md-hx-offset)); - content: ""; - } - - // [screen +]: Sticky navigation tabs - @include break-from-device(screen) { - - // Adjust scroll offset for sticky navigation tabs - .md-header--lifted ~ .md-container & { - scroll-margin-top: initial; - - // Anchor correction hack - &::before { - margin-top: calc(#{px2rem(-96px + 24px)} - var(--md-hx-offset)); - padding-top: calc(#{px2rem(96px + 24px)} - var(--md-hx-offset)); - } + --md-scroll-margin: #{px2rem(96px + 24px)}; } } } // Adjust scroll offset for headlines of level 1-3 - :is(h1, h2, h3) { - --md-hx-offset: #{px2rem(4px)}; + :is(h1, h2, h3):target { + --md-scroll-offset: #{px2rem(4px)}; } // Adjust scroll offset for headlines of level 4 - h4 { - --md-hx-offset: #{px2rem(3px)}; + h4:target { + --md-scroll-offset: #{px2rem(3px)}; } }