mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Fix anchor offsets for nav blurring
This commit is contained in:
parent
64874a9583
commit
36ac36c56a
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-64b114333a.css
Normal file
1
material/assets/stylesheets/application-64b114333a.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -36,7 +36,7 @@
|
||||
{% include "partials/webfonts.html" %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-990f733f65.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-64b114333a.css">
|
||||
{% if config.extra.palette %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
|
||||
{% endif %}
|
||||
@ -106,7 +106,7 @@
|
||||
<script src="https://cdn.mathjax.org/{{ path }}"></script>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<script src="{{ base_url }}/assets/javascripts/application-0df6fd955b.js"></script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-34d9ef09a7.js"></script>
|
||||
<script>
|
||||
/* Configuration for application */
|
||||
var config = {
|
||||
|
@ -71,7 +71,6 @@ markdown_extensions:
|
||||
- pymdownx.tasklist(custom_checkbox=true)
|
||||
- pymdownx.tilde
|
||||
|
||||
|
||||
# Page tree
|
||||
pages:
|
||||
- Material: index.md
|
||||
|
@ -41,9 +41,10 @@ export default class Blur {
|
||||
this.index_ = 0
|
||||
this.offset_ = window.pageYOffset
|
||||
|
||||
/* Index anchor nodes for fast lookup */
|
||||
/* Index anchor node offsets for fast lookup, and deduct the static offset
|
||||
of the header (56px) and sidebar offset (24px), see _permalinks.scss */
|
||||
this.anchors_ = [].map.call(this.els_, el => {
|
||||
return document.querySelector(el.hash)
|
||||
return document.querySelector(el.hash).offsetTop - (56 + 24)
|
||||
})
|
||||
}
|
||||
|
||||
@ -67,7 +68,7 @@ export default class Blur {
|
||||
/* Scroll direction is down */
|
||||
if (this.offset_ <= offset) {
|
||||
for (let i = this.index_ + 1; i < this.els_.length; i++) {
|
||||
if (this.anchors_[i].offsetTop <= offset) {
|
||||
if (this.anchors_[i] <= offset) {
|
||||
if (i > 0)
|
||||
this.els_[i - 1].dataset.mdState = "blur"
|
||||
this.index_ = i
|
||||
@ -79,7 +80,7 @@ export default class Blur {
|
||||
/* Scroll direction is up */
|
||||
} else {
|
||||
for (let i = this.index_; i >= 0; i--) {
|
||||
if (this.anchors_[i].offsetTop > offset) {
|
||||
if (this.anchors_[i] > offset) {
|
||||
if (i > 0)
|
||||
delete this.els_[i - 1].dataset.mdState
|
||||
} else {
|
||||
|
@ -52,6 +52,12 @@
|
||||
// All headers with permalinks have ids
|
||||
[id] {
|
||||
|
||||
// Add spacing to anchor for offset
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Make permalink visible on hover
|
||||
&:hover .headerlink,
|
||||
&:target .headerlink,
|
||||
@ -68,7 +74,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Correct anchor offset of active targets
|
||||
// Correct anchor offset for link blurring
|
||||
@each $level, $delta in (
|
||||
h1: 3.0rem,
|
||||
h2: 0.2rem,
|
||||
@ -77,11 +83,17 @@
|
||||
h5: 1.0rem,
|
||||
h6: 1.0rem
|
||||
) {
|
||||
|
||||
// Un-targeted anchor
|
||||
#{$level}[id]::before {
|
||||
margin-top: -$delta;
|
||||
padding-top: $delta;
|
||||
}
|
||||
|
||||
// Targeted anchor (56px from header, 24px from sidebar offset)
|
||||
#{$level}[id]:target::before {
|
||||
display: block;
|
||||
margin-top: -(5.6rem + 2.4rem + $delta);
|
||||
padding-top: (5.6rem + 2.4rem + $delta);
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user