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

Modernized scroll offset solution

Browse Source
This commit is contained in:
squidfunk 2021-11-28 10:21:48 +01:00
parent 3a92260d77
commit 7558c56c49
4 changed files with 26 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.stylelintrc
View File

@ -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]+)*$",

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

@ -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;

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

@ -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;

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

@ -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)};
}
}