Fix target offset for footnotes

This commit is contained in:
squidfunk 2017-01-09 23:43:11 +01:00
parent 7a6db53801
commit bfca02762d
4 changed files with 35 additions and 19 deletions

View File

@ -37,7 +37,7 @@
{% include "partials/fonts.html" %} {% include "partials/fonts.html" %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-767d87cf22.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-dda2652cc7.css">
{% if config.extra.palette %} {% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
{% endif %} {% endif %}

View File

@ -27,12 +27,6 @@
// Scoped in typesetted content to match specificity of regular content // Scoped in typesetted content to match specificity of regular content
.md-typeset { .md-typeset {
// Remove pseudo elements inserted by permalinks extension
html & [id^="fn:"]::before,
html & [id^="fnref:"]::before {
display: none;
}
// Footnotes extension // Footnotes extension
.footnote { .footnote {
color: $md-color-black--light; color: $md-color-black--light;
@ -43,8 +37,32 @@
margin-left: 0; margin-left: 0;
} }
// Single footnote // Footnote
li { li {
transition: color 0.25s;
// Un-targeted footnote
&::before {
display: block;
height: 0;
}
// Darken color for targete footnote
&:target {
color: $md-color-black;
}
// Targeted footnote
&:target::before {
margin-top: -(5.6rem + 2.4rem + 1rem);
padding-top: (5.6rem + 2.4rem + 1rem);
pointer-events: none;
}
// Remove spacing on first element
:first-child {
margin-top: 0;
}
// Make back references visible on hover // Make back references visible on hover
&:hover .footnote-backref, &:hover .footnote-backref,
@ -61,15 +79,6 @@
} }
} }
// Footnote reference with corrected anchor offset
.footnote-ref::before {
position: absolute;
margin-top: -(5.6rem + 2.4rem);
padding-top: (5.6rem + 2.4rem);
content: "";
pointer-events: none;
}
// Footnote back-reference // Footnote back-reference
.footnote-backref { .footnote-backref {
@extend %md-icon; @extend %md-icon;

View File

@ -54,10 +54,16 @@
// Add spacing to anchor for offset // Add spacing to anchor for offset
&::before { &::before {
display: block; display: inline-block;
content: ""; content: "";
} }
// Targeted anchor
&:target::before {
margin-top: -(5.6rem + 2.4rem + 1.8rem);
padding-top: (5.6rem + 2.4rem + 1.8rem);
}
// Make permalink visible on hover // Make permalink visible on hover
&:hover .headerlink, &:hover .headerlink,
&:target .headerlink, &:target .headerlink,
@ -90,6 +96,7 @@
// Un-targeted anchor // Un-targeted anchor
#{$level}[id]::before { #{$level}[id]::before {
display: block;
margin-top: -$delta; margin-top: -$delta;
padding-top: $delta; padding-top: $delta;
} }