[THEME] Add anchor to titles

Add an anchor for each title, display a '#' at left of the titles
and make them clickable links
This commit is contained in:
Gregory Trolliet 2021-10-23 08:07:00 +02:00
parent 4a36ab38b1
commit e4a2d0b68c
2 changed files with 43 additions and 5 deletions

View File

@ -0,0 +1,7 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
<a class="anchor" href="#{{ .Anchor | safeURL }}">
#
<!-- {{ strings.Repeat .Level "#" }} -->
</a>
{{ .Text | safeHTML }}
</h{{ .Level }}>

View File

@ -40,24 +40,24 @@ p, ul, ol {
}
/******************* Links *******************/
a {
a:not(.anchor) {
text-decoration: none;
color: var(--font-color);
border-bottom: 1px dotted;
transition: box-shadow 0.2s ease, outline-offset 0.2s ease, transform 0.2s ease, background 0.4s ease;
}
a:visited {
a:not(.anchor):visited {
color: var(--font-color);
}
a:hover {
a:not(.anchor):hover {
outline: 1px solid;
outline-offset: .3em;
border-bottom: 1px dashed;
}
a:active {
a:not(.anchor):active {
border-bottom: 1px solid;
}
a:focus {
a.not(.anchor):focus {
outline-offset: .3em;
outline: 1px solid;
}
@ -398,6 +398,7 @@ a:focus {
/******************* Article Body *******************/
.article-body {
margin-bottom: 2em;
position: relative;
}
.article-body img {
max-width: 100%;
@ -453,6 +454,36 @@ a:focus {
}
}
.anchor {
content: '#';
position: absolute;
opacity: 0%;
left: -1em;
width: 80%;
max-width: 600px;
border: none;
color: var(--font-color-em);
text-decoration: none;
}
@media only screen and (max-width: 500px) {
.anchor {
left: -0.8em;
}
}
.anchor:hover {
opacity: 100%;
outline: none;
border: none;
cursor: pointer;
}
@media only screen and (max-width: 320px) {
.anchor:hover {
opacity: 0%;
}
}
/******************* Article Footer *******************/
.article-footer {
font-style: italic;