raghnarok/hugo-snotra
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[THEME] Add anchor to titles

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
layouts/_default/_markup/render-heading.html Normal file
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 }}>

41
static/css/style.css
View file

@ -40,24 +40,24 @@ p, ul, ol {
} }
/******************* Links *******************/ /******************* Links *******************/
a { a:not(.anchor) {
text-decoration: none; text-decoration: none;
color: var(--font-color); color: var(--font-color);
border-bottom: 1px dotted; border-bottom: 1px dotted;
transition: box-shadow 0.2s ease, outline-offset 0.2s ease, transform 0.2s ease, background 0.4s ease; 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); color: var(--font-color);
} }
a:hover { a:not(.anchor):hover {
outline: 1px solid; outline: 1px solid;
outline-offset: .3em; outline-offset: .3em;
border-bottom: 1px dashed; border-bottom: 1px dashed;
} }
a:active { a:not(.anchor):active {
border-bottom: 1px solid; border-bottom: 1px solid;
} }
a:focus { a.not(.anchor):focus {
outline-offset: .3em; outline-offset: .3em;
outline: 1px solid; outline: 1px solid;
} }
@ -398,6 +398,7 @@ a:focus {
/******************* Article Body *******************/ /******************* Article Body *******************/
.article-body { .article-body {
margin-bottom: 2em; margin-bottom: 2em;
position: relative;
} }
.article-body img { .article-body img {
max-width: 100%; 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 *******************/
.article-footer { .article-footer {
font-style: italic; font-style: italic;