Rooba
/
perkeep
mirror of https://github.com/perkeep/perkeep.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

website: add header anchor links on hover 

Adds header link icons on hover. Check for headers (h1-h4) with
defined id's and adds link icon with relevant fragment link.

Fixes #1028

Change-Id: Ic9c8744efe12dda251f4a461adb0b09cf84604c3
This commit is contained in:
Peter Etelej 2018-02-25 00:46:45 +03:00
parent 86da8c822c
commit 5e7f6dfb6e
No known key found for this signature in database
GPG Key ID: C19A90B496F44BEB
3 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/content/index.html
View File

@ -17,16 +17,16 @@
<li>Your data should be alive in 80 years, especially if you are</li>
</ul>
<h2>Latest Tweets</h2>
<h2 id="latest-tweets">Latest Tweets</h2>
<center><a class="twitter-timeline" data-lang="en" data-width="400" data-height="400" data-dnt="true" data-theme="light" data-link-color="#5B732B" href="https://twitter.com/PerkeepOrg?ref_src=twsrc%5Etfw">Tweets by PerkeepOrg</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>
<h2>Latest Release</h2>
<h2 id="latest-release">Latest Release</h2>
<p>The latest release is <a href="docs/release/monthly/2017-05-05.html">2017-05-05</a>.</p>
<p>Follow the <a href="/download">download and getting started instructions</a> to set up Perkeep.</p>
<h2>Video Demo</h2>
<h2 id="video-demo">Video Demo</h2>
<p>LinuxFest Northwest 2016 <a href="https://www.youtube.com/watch?v=8Dk2iVlc67M">Camlistore presentation</a>:</p>
@ -34,7 +34,7 @@
<p>Or see the <a href="/doc/#presentations">other presentations</a>.</p>
<h2>Contribute</h2>
<h2 id="contribute">Contribute</h2>
<p>In addition to user feedback, bug reports, and <a href="/code#contributing"><b>code contributions</b></a>, we also accept donations via either <a href="https://www.coinbase.com/checkouts/cb36d0d49984c31062332af51f0346a8"><b>our Bitcoin donation page</b></a> or via OpenCollective:</p>

23
website/static/all.css
View File

@ -283,3 +283,26 @@ a.downloadBox:hover .filename {
}
a { font-weight: bold; }
/* Header anchor links styling */
.anchor {
padding:4px;
}
.anchor svg {
visibility: hidden;
vertical-align:middle;
}
h1 svg,
h2 svg,
h3 svg,
h4 svg {
fill: #375EAB;
}
h2 svg {
fill: #fff;
}
h1:hover .anchor svg, h2:hover .anchor svg,
h3:hover .anchor svg, h4:hover .anchor svg,
h5:hover .anchor svg, h6:hover .anchor svg {
visibility: visible;
}

19
website/tmpl/page.html
View File

@ -55,4 +55,23 @@
Website layout inspired by <a href="http://memcached.org/">memcached</a>.<br>
Content by <a href="/contributors">the authors</a>.
</div>
<script>
function addHeaderAnchors(){
var headers = document.querySelectorAll("h1, h2, h3, h4")
var svg = '<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'
for (var i = 0 ; i < headers.length; i++){
var id = headers[i].id
if (!id) {
continue
}
var link = document.createElement('a')
link.className = 'anchor'
link.href = '#' + id
link.setAttribute('aria-disabled', true)
link.innerHTML = svg
headers[i].appendChild(link)
}
}
document.addEventListener("DOMContentLoaded", addHeaderAnchors)
</script>
{{end}}