Add support for clickable headers
This commit is contained in:
parent
d3d859baa9
commit
9160cd88ed
3 changed files with 23 additions and 0 deletions
9
layouts/_default/_markup/render-heading.html
Normal file
9
layouts/_default/_markup/render-heading.html
Normal file
|
@ -0,0 +1,9 @@
|
|||
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
|
||||
<a class="hash-link nohover" href="#{{ .Anchor | safeURL }}">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<title>Link to this section</title>
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
</a> {{ .Text | safeHTML }}
|
||||
</h{{ .Level }}>
|
13
static/css/heading.css
Normal file
13
static/css/heading.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
.hash-link {
|
||||
/* -webkit-transform: translateX(-100%); */
|
||||
/* left: 0;
|
||||
opacity: 0;
|
||||
padding: 0 5px;
|
||||
position: absolute;
|
||||
transform: translateX(-100%);
|
||||
transition: opacity .1s ease-in;
|
||||
will-change: transform, opacity; */
|
||||
svg {
|
||||
stroke: rgb(138, 173, 244);
|
||||
}
|
||||
}
|
|
@ -4,6 +4,7 @@
|
|||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
<link rel="stylesheet" href="/mermaid.css">
|
||||
<link rel="stylesheet" href="/css/heading.css">
|
||||
</head>
|
||||
|
||||
{{ block "body" . }}
|
||||
|
|
Loading…
Reference in a new issue