Added general anchor offset solution using scroll-margin-top

This commit is contained in:
squidfunk 2020-05-05 09:01:45 +02:00
parent 7634369f27
commit 9a0c3e9094
6 changed files with 18 additions and 6 deletions

View File

@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.8caa27b7.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.37585f48.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.37585f48.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.f6cf1dc9.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.f6cf1dc9.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.90238df2.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.90238df2.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.85bb4ebe.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.85bb4ebe.min.css.map"
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.f6cf1dc9.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.90238df2.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.85bb4ebe.min.css' | url }}">
{% endif %}

View File

@ -76,6 +76,13 @@
color: var(--md-accent-fg-color);
}
// General scroll margin offset for anything that can be targeted. Browser
// support is pretty decent by now, and if we wait until Edge 79+ has more
// adoption, we can get rid of all anchor-correction hacks.
:target {
scroll-margin-top: px2rem(48px + 24px);
}
// Correct anchor offset for link blurring
@each $level, $delta in (
h1 h2 h3: 8px,
@ -84,6 +91,11 @@
) {
%#{nth($level, 1)} {
// Reset, as we use the anchor-correction hack here.
&:target {
scroll-margin-top: initial;
}
// Un-targeted anchor
&::before {
display: block;